marko10_000
/
apostrophe
forked from Mirrors/apostrophe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/sass/layout/_footer.scss
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;
}

2
assets/sass/layout/_header.scss
View File

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

5
assets/sass/layout/_main.scss 100644
View File

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

26
assets/sass/layout/_section.scss
View File

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

43
assets/sass/styles.css
View File

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

4
assets/sass/styles.css.map
View File

File diff suppressed because one or more lines are too long

1
assets/sass/styles.scss
View File

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

51
index.html
View File

@ -25,7 +25,7 @@
</head> </head>
<body class="background-2"> <body class="background-2">
<header> <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> <h1>berWriter</h1>
<div class="buttons"> <div class="buttons">
<a href="https://www.paypal.me/WolfVollprecht"> <a href="https://www.paypal.me/WolfVollprecht">
@ -41,42 +41,39 @@
<img src="images/main_web.svg#MainApp" alt=""> <img src="images/main_web.svg#MainApp" alt="">
</section> </section>
<section class="section" id="DarkMode"> <section class="section" id="DarkMode">
<img src="images/main_web.svg#MainAppDark" alt=""></img> <img src="images/main_web.svg#MainAppDark" alt="">
</section> </section>
<section class="section" id="InlinePreview"> <section class="section" id="InlinePreview">
<img src="images/main_web.svg#InlinePreview" alt=""></img> <img src="images/main_web.svg#InlinePreview" alt="">
</section> </section>
<section class="section" id="InlinePreview-2"> <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>
<section class="section" id="InlinePreview-3"> <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>
<section class="section dark" id="footer"> <section class="section programmers">
<div id="programmers"> <div class="programmer left">
<div class="programmer left"> <img src="images/Wolf.jpeg" alt="Wolf Vollprecht">
<img src="images/Wolf.jpeg" alt="Wolf Vollprecht"> <p>Blablabla</p>
<p>Blablabla</p>
</div>
<div class="programmer right">
<img src="images/Manu.jpeg" alt="Manuel Genovés">
<p>Blebleble</p>
</div>
</div> </div>
<div id="footer"> <div class="programmer right">
<div id="about"> <img src="images/Manu.jpeg" alt="Manuel Genovés">
<p>UberWriter©, a GPL program</p> <p>Blebleble</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> </div>
</section> </section>
</main> </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> </body>
</html> </html>