forked from Mirrors/apostrophe
wip of the footer
parent
8096c6ee45
commit
8185f3cf46
|
@ -0,0 +1,5 @@
|
||||||
|
.programmer img{
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 25vh;
|
||||||
|
width: auto;
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ section {
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 10vh;
|
padding-top: 10vh;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
background: whitesmoke;
|
background: whitesmoke;
|
||||||
|
|
||||||
|
@ -21,28 +22,45 @@ section img {
|
||||||
|
|
||||||
section.dark {
|
section.dark {
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
|
height: 900px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
section #programmers {
|
section #programmers {
|
||||||
height: 50vh;
|
min-height: 50vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -10vh;
|
margin-top: -10vh;
|
||||||
|
margin-bottom: 50vh;
|
||||||
|
padding-top: 10vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
|
||||||
background: whitesmoke;
|
background: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.programmer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
section #footer {
|
section #footer {
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50vh;
|
bottom: 0px;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -550,6 +550,7 @@ section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 10vh;
|
padding-top: 10vh;
|
||||||
|
flex-wrap: wrap;
|
||||||
background: whitesmoke; }
|
background: whitesmoke; }
|
||||||
|
|
||||||
section img {
|
section img {
|
||||||
|
@ -561,22 +562,36 @@ section img {
|
||||||
justify-content: center; */ }
|
justify-content: center; */ }
|
||||||
|
|
||||||
section.dark {
|
section.dark {
|
||||||
background: rgba(0, 0, 0, 0); }
|
background: rgba(0, 0, 0, 0);
|
||||||
|
height: 900px;
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
|
||||||
section #programmers {
|
section #programmers {
|
||||||
height: 50vh;
|
min-height: 50vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -10vh;
|
margin-top: -10vh;
|
||||||
|
margin-bottom: 50vh;
|
||||||
|
padding-top: 10vh;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background: whitesmoke; }
|
background: whitesmoke; }
|
||||||
|
|
||||||
|
.programmer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding: 20px; }
|
||||||
|
|
||||||
section #footer {
|
section #footer {
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50vh;
|
bottom: 0px;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
|
display: flex;
|
||||||
color: whitesmoke; }
|
color: whitesmoke; }
|
||||||
|
|
||||||
/* MODULES - Re-usable site elements.
|
/* MODULES - Re-usable site elements.
|
||||||
|
@ -621,5 +636,9 @@ button:hover {
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
#download {
|
#download {
|
||||||
display: none; } }
|
display: none; } }
|
||||||
|
.programmer img {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 25vh;
|
||||||
|
width: auto; }
|
||||||
|
|
||||||
/*# sourceMappingURL=styles.css.map */
|
/*# sourceMappingURL=styles.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19,6 +19,7 @@
|
||||||
|
|
||||||
@import 'components/_backgrounds.scss';
|
@import 'components/_backgrounds.scss';
|
||||||
@import 'components/_buttons.scss';
|
@import 'components/_buttons.scss';
|
||||||
|
@import 'components/_programmers.scss';
|
||||||
|
|
||||||
// @import 'modules/_buttons.scss';
|
// @import 'modules/_buttons.scss';
|
||||||
// @import 'modules/_lists.scss';
|
// @import 'modules/_lists.scss';
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
30
index.html
30
index.html
|
@ -17,6 +17,8 @@
|
||||||
$(function() {
|
$(function() {
|
||||||
$.scrollify({
|
$.scrollify({
|
||||||
section : ".section",
|
section : ".section",
|
||||||
|
interstitialSection : ".footer",
|
||||||
|
setHeights: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -35,24 +37,31 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section class="section" id="1">
|
<section class="section" id="MainApp">
|
||||||
<img src="images/main_web.svg#MainApp" alt="">
|
<img src="images/main_web.svg#MainApp" alt="">
|
||||||
</section>
|
</section>
|
||||||
<section class="section" id="2">
|
<section class="section" id="DarkMode">
|
||||||
<img src="images/main_web.svg#MainAppDark" alt=""></img>
|
<img src="images/main_web.svg#MainAppDark" alt=""></img>
|
||||||
</section>
|
</section>
|
||||||
<section class="section" id="3">
|
<section class="section" id="InlinePreview">
|
||||||
<img src="images/main_web.svg#InlinePreview" alt=""></img>
|
<img src="images/main_web.svg#InlinePreview" alt=""></img>
|
||||||
</section>
|
</section>
|
||||||
<section class="section" id="4">
|
<section class="section" id="InlinePreview-2">
|
||||||
<img src="images/main_web.svg#InlinePrevi2w" alt=""></img>
|
<img src="images/main_web.svg#InlinePrevi2w" alt=""></img>
|
||||||
</section>
|
</section>
|
||||||
<section class="section" id="5">
|
<section class="section" id="InlinePreview-3">
|
||||||
<img src="images/main_web.svg#InlinePrevi3w" alt=""></img>
|
<img src="images/main_web.svg#InlinePrevi3w" alt=""></img>
|
||||||
</section>
|
</section>
|
||||||
<section class="section dark" id="footer">
|
<section class="section dark" id="footer">
|
||||||
<div id="programmers">
|
<div id="programmers">
|
||||||
<p></p>
|
<div class="programmer left">
|
||||||
|
<img src="/images/Wolf.jpeg" alt="Wolf Vollprecht">
|
||||||
|
<p>Blablabla</p>
|
||||||
|
</div>
|
||||||
|
<div class="programmer right">
|
||||||
|
<img src="/images/Manu.jpeg" alt="Wolf Vollprecht">
|
||||||
|
<p>Blebleble</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<div id="about">
|
<div id="about">
|
||||||
|
@ -60,11 +69,10 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="links">
|
<div id="links">
|
||||||
<p>Github</p>
|
<a href="https://github.com/UberWriter">Github</a>
|
||||||
<p>Translations</p>
|
<a href="https://poeditor.com/join/project/gxVzFyXb2x">Localization</a>
|
||||||
<p>Flathub</p>
|
<a href="https://flathub.org/apps/details/de.wolfvollprecht.UberWriter">Flathub</a>
|
||||||
<p>Donate</p>
|
<a href="https://www.paypal.me/WolfVollprecht">Donate</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue