fix footer

gh-pages
somas95 2018-06-01 19:00:02 +02:00
parent ef8d486ecf
commit ac64dc7e0b
8 changed files with 82 additions and 66 deletions

View File

@ -0,0 +1,16 @@
footer {
height: 20vh;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 0;
display: flex;
color: whitesmoke;
}
footer a{
color: whitesmoke;
}

View File

@ -6,7 +6,7 @@ header {
position: fixed;
top: 0px;
z-index: 1;
z-index: 3;
display: flex;
align-items: center;

View File

@ -0,0 +1,5 @@
main {
position: absolute;
z-index: 2;
width: 100%;
}

View File

@ -26,21 +26,22 @@ section.dark {
flex-wrap: wrap;
}
section #programmers {
min-height: 50vh;
section.programmers {
height: 80vh;
width: 100%;
position: absolute;
margin-top: -10vh;
margin-bottom: 50vh;
padding-top: 10vh;
/* margin-top: -10vh; */
margin-bottom: 20vh;
/* padding-top: 10vh; */
display: flex;
flex-flow: wrap;
z-index: -1;
z-index: 2;
background: whitesmoke;
box-shadow: 0px 20px 40px 0px #1010104f;
}
.programmer {
@ -51,16 +52,3 @@ section #programmers {
padding: 20px;
}
section #footer {
height: 50vh;
width: 100%;
position: fixed;
bottom: 0px;
z-index: -2;
display: flex;
color: whitesmoke;
}

View File

@ -519,6 +519,11 @@ body {
/* LAYOUT - Structure and layout files.
========================================================================== */
main {
position: absolute;
z-index: 2;
width: 100%; }
header {
background-color: #f5f5f588;
width: 100%;
@ -526,7 +531,7 @@ header {
/* box-shadow: 0px -17px 20px 20px #29292978; */
position: fixed;
top: 0px;
z-index: 1;
z-index: 3;
display: flex;
align-items: center; }
@ -545,6 +550,18 @@ header a {
margin-left: auto;
height: 100%; }
footer {
height: 20vh;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 0;
display: flex;
color: whitesmoke; }
footer a {
color: whitesmoke; }
section {
height: 100vh;
display: flex;
@ -566,17 +583,18 @@ section.dark {
height: 900px;
flex-wrap: wrap; }
section #programmers {
min-height: 50vh;
section.programmers {
height: 80vh;
width: 100%;
position: absolute;
margin-top: -10vh;
margin-bottom: 50vh;
padding-top: 10vh;
/* margin-top: -10vh; */
margin-bottom: 20vh;
/* padding-top: 10vh; */
display: flex;
flex-flow: wrap;
z-index: -1;
background: whitesmoke; }
z-index: 2;
background: whitesmoke;
box-shadow: 0px 20px 40px 0px #1010104f; }
.programmer {
display: flex;
@ -585,15 +603,6 @@ section #programmers {
margin-right: auto;
padding: 20px; }
section #footer {
height: 50vh;
width: 100%;
position: fixed;
bottom: 0px;
z-index: -2;
display: flex;
color: whitesmoke; }
/* MODULES - Re-usable site elements.
========================================================================== */
.background-1 {

File diff suppressed because one or more lines are too long

View File

@ -8,6 +8,7 @@
/* LAYOUT - Structure and layout files.
========================================================================== */
@import 'layout/_main.scss';
@import 'layout/_grid.scss';
@import 'layout/_header.scss';
@import 'layout/_footer.scss';

View File

@ -25,7 +25,7 @@
</head>
<body class="background-2">
<header>
<img class="logo" src="images/uberwriter_logo.svg" alt="logo"></img>
<img class="logo" src="images/uberwriter_logo.svg" alt="logo">
<h1>berWriter</h1>
<div class="buttons">
<a href="https://www.paypal.me/WolfVollprecht">
@ -41,42 +41,39 @@
<img src="images/main_web.svg#MainApp" alt="">
</section>
<section class="section" id="DarkMode">
<img src="images/main_web.svg#MainAppDark" alt=""></img>
<img src="images/main_web.svg#MainAppDark" alt="">
</section>
<section class="section" id="InlinePreview">
<img src="images/main_web.svg#InlinePreview" alt=""></img>
<img src="images/main_web.svg#InlinePreview" alt="">
</section>
<section class="section" id="InlinePreview-2">
<img src="images/main_web.svg#InlinePrevi2w" alt=""></img>
<img src="images/main_web.svg#InlinePrevi2w" alt="">
</section>
<section class="section" id="InlinePreview-3">
<img src="images/main_web.svg#InlinePrevi3w" alt=""></img>
<img src="images/main_web.svg#InlinePrevi3w" alt="">
</section>
<section class="section dark" id="footer">
<div id="programmers">
<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="Manuel Genovés">
<p>Blebleble</p>
</div>
<section class="section programmers">
<div class="programmer left">
<img src="images/Wolf.jpeg" alt="Wolf Vollprecht">
<p>Blablabla</p>
</div>
<div id="footer">
<div id="about">
<p>UberWriter©, a GPL program</p>
</div>
<div id="links">
<a href="https://github.com/UberWriter">Github</a>
<a href="https://poeditor.com/join/project/gxVzFyXb2x">Localization</a>
<a href="https://flathub.org/apps/details/de.wolfvollprecht.UberWriter">Flathub</a>
<a href="https://www.paypal.me/WolfVollprecht">Donate</a>
</div>
<div class="programmer right">
<img src="images/Manu.jpeg" alt="Manuel Genovés">
<p>Blebleble</p>
</div>
</section>
</main>
<footer id="footer">
<div id="about">
<p>UberWriter©, a GPL program</p>
</div>
<div id="links">
<a href="https://github.com/UberWriter">Github</a>
<a href="https://poeditor.com/join/project/gxVzFyXb2x">Localization</a>
<a href="https://flathub.org/apps/details/de.wolfvollprecht.UberWriter">Flathub</a>
<a href="https://www.paypal.me/WolfVollprecht">Donate</a>
</div>
</footer>
</body>
</html>