Mikescher/www.mikescher.com
1
0
Fork 0
Code Actions

fix footer

Browse Source
This commit is contained in:
Mike Schwörer 2017-12-29 01:14:15 +01:00
parent 3f090d3f4b
commit fb11bdca19
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
7 changed files with 118 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
www/data/css/styles.css
View File

@ -1,13 +1,6 @@
html, body {
height: 100%;
margin: 0; }
body { body {
margin: 0;
background-color: #EEE; background-color: #EEE;
color: #CCC; color: #CCC; }
display: flex;
flex-direction: column; }
#content { #content {
padding-top: 64px; padding-top: 64px;
@ -15,7 +8,6 @@ body {
justify-content: center; justify-content: center;
line-height: 1.4; } line-height: 1.4; }
/*############################################################################*/
.content-responsive { .content-responsive {
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto; }
@ -60,26 +52,26 @@ body {
display: block; display: block;
width: 100%; } width: 100%; }
.headerdiv { #headerdiv {
background-color: #333; background-color: #333;
display: flex; display: flex;
border-bottom: 1px solid #111; border-bottom: 1px solid #111;
box-shadow: 0 0 8px #000000; box-shadow: 0 0 8px #000000;
position: fixed; position: fixed;
width: 100%; } width: 100%; }
.headerdiv .logowrapper { #headerdiv .logowrapper {
flex: initial; flex: initial;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 42px; } height: 42px; }
.headerdiv .logowrapper .logo { #headerdiv .logowrapper .logo {
height: 30px; height: 30px;
margin: 4px 0px 8px 6px; margin: 4px 0 8px 6px;
flex: initial; } flex: initial; }
.headerdiv .tabrow { #headerdiv .tabrow {
display: flex; display: flex;
flex: auto; } flex: auto; }
.headerdiv .tabrow .tab { #headerdiv .tabrow .tab {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -94,48 +86,73 @@ body {
min-width: 64px; min-width: 64px;
text-align: center; text-align: center;
flex: initial; } flex: initial; }
.headerdiv .tabrow .tab:hover { #headerdiv .tabrow .tab:hover {
cursor: pointer; cursor: pointer;
background-color: #555; } background-color: #555; }
.headerdiv .tabrow .tab_split { #headerdiv .tabrow .tab_split {
flex: auto; } flex: auto; }
.headerdiv .tabrow .tab_github { #headerdiv .tabrow .tab_github {
background-color: #4078c0; background-color: #4078c0;
border-left: 1px solid #111; border-left: 1px solid #111;
border-right: 1px solid #111; border-right: 1px solid #111;
color: black; } color: black; }
.headerdiv .tabrow .tab_github:hover { #headerdiv .tabrow .tab_github:hover {
background-color: #c9510c; background-color: #c9510c;
color: black; } color: black; }
@media (max-width: 850px) { @media (max-width: 850px) {
.headerdiv { #headerdiv {
position: static; } position: static;
.logowrapper {
display: flex;
align-items: center;
justify-content: center; }
.headerdiv {
flex-direction: column; } flex-direction: column; }
#headerdiv .logowrapper {
.tabrow { display: flex;
flex-direction: column; } align-items: center;
justify-content: center; }
.tab { #headerdiv .tabrow {
border: 1px solid #000; flex-direction: column; }
font-weight: bold; #headerdiv .tabrow .tab {
margin: 5px 10px; } border: 1px solid #000;
font-weight: bold;
margin: 5px 10px; }
#content { #content {
padding-top: 0px; } } padding-top: 0; } }
#footerdiv { html, body {
margin-top: auto; margin: 0;
padding-bottom: 10px; padding: 0;
background-color: transparent; height: 100%; }
text-align: center; }
#mastercontainer {
min-height: 100%;
position: relative; }
#content {
padding-bottom: 60px;
/* Height of the footer */ }
#footerdiv {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
text-align: center;
left: 0;
right: 0;
margin: 0 auto; }
@media (max-width: 767px) {
#footerdiv {
width: auto; } }
@media (min-width: 768px) {
#footerdiv {
width: auto; } }
@media (min-width: 992px) {
#footerdiv {
width: 724px; } }
@media (min-width: 1200px) {
#footerdiv {
width: 1170px; } }
#footerdiv hr { #footerdiv hr {
margin-bottom: 5px; margin-bottom: 5px;
display: block; display: block;

41
www/data/css/styles_footer.scss
View File

@ -1,13 +1,42 @@
@import 'styles_config'; @import 'styles_config';
#footerdiv { html, body {
margin-top:auto; margin:0;
padding-bottom: 10px; padding:0;
height:100%;
background-color: transparent;
text-align: center;
} }
// https://stackoverflow.com/a/19723677/1761622
#mastercontainer {
min-height:100%;
position:relative;
}
#headerdiv {
//...
}
#content {
padding-bottom:60px; /* Height of the footer */
}
#footerdiv {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
}
//----------------------------------------------
@media(max-width:767px) { #footerdiv { width: auto; } }
@media(min-width:768px) { #footerdiv { width: auto; } }
@media(min-width:992px) { #footerdiv { width: 724px; } }
@media(min-width:1200px){ #footerdiv { width: 1170px; } }
#footerdiv hr { #footerdiv hr {
margin-bottom: 5px; margin-bottom: 5px;
display:block; display:block;

9
www/data/css/styles_global.scss
View File

@ -1,15 +1,8 @@
@import 'styles_config'; @import 'styles_config';
html, body{ height:100%; margin:0; }
body { body {
margin: 0;
background-color: $COL_BACKGROUND; background-color: $COL_BACKGROUND;
color: $COL_TEXT_NORMAL; color: $COL_TEXT_NORMAL;
display:flex;
flex-direction:column;
} }
#content { #content {
@ -20,8 +13,6 @@ body {
line-height: 1.4; line-height: 1.4;
} }
/*############################################################################*/
.content-responsive { .content-responsive {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

39
www/data/css/styles_header.scss
View File

@ -1,6 +1,6 @@
@import 'styles_config'; @import 'styles_config';
.headerdiv { #headerdiv {
background-color: #333; background-color: #333;
display: flex; display: flex;
border-bottom: 1px solid #111; border-bottom: 1px solid #111;
@ -16,7 +16,7 @@
.logo { .logo {
height: 30px; height: 30px;
margin: 4px 0px 8px 6px; margin: 4px 0 8px 6px;
flex: initial; flex: initial;
} }
} }
@ -71,33 +71,30 @@
@media (max-width: 850px) { @media (max-width: 850px) {
.headerdiv { #headerdiv {
position: static; position: static;
}
.logowrapper {
display: flex;
align-items: center;
justify-content: center;
}
.headerdiv {
flex-direction: column; flex-direction: column;
}
.tabrow { .logowrapper {
flex-direction: column; display: flex;
} align-items: center;
justify-content: center;
}
.tab { .tabrow {
border: 1px solid #000; flex-direction: column;
font-weight: bold;
margin: 5px 10px; .tab {
border: 1px solid #000;
font-weight: bold;
margin: 5px 10px;
}
}
} }
#content { #content {
padding-top: 0px; padding-top: 0;
} }
} }

2
www/fragments/header.php
View File

@ -1,4 +1,4 @@
<div class="headerdiv"> <div id="headerdiv">
<div class="logowrapper"> <div class="logowrapper">
<img class="logo" src="/data/images/logo.png" /> <img class="logo" src="/data/images/logo.png" />
</div> </div>

3
www/pages/blog_list.php
View File

@ -16,6 +16,7 @@ $allposts = Blog::listAllOrderedDescending();
<link rel="stylesheet" href="/data/css/styles.css"/> <link rel="stylesheet" href="/data/css/styles.css"/>
</head> </head>
<body> <body>
<div id="mastercontainer">
<?php include (__DIR__ . '/../fragments/header.php'); ?> <?php include (__DIR__ . '/../fragments/header.php'); ?>
@ -47,5 +48,7 @@ $allposts = Blog::listAllOrderedDescending();
</div> </div>
<?php include (__DIR__ . '/../fragments/footer.php'); ?> <?php include (__DIR__ . '/../fragments/footer.php'); ?>
</div>
</body> </body>
</html> </html>

2
www/pages/main.php
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/data/css/styles.css"/> <link rel="stylesheet" href="/data/css/styles.css"/>
</head> </head>
<body> <body>
<div id="mastercontainer">
<?php include (__DIR__ . '/../fragments/header.php'); ?> <?php include (__DIR__ . '/../fragments/header.php'); ?>
@ -20,5 +21,6 @@
<?php include (__DIR__ . '/../fragments/footer.php'); ?> <?php include (__DIR__ . '/../fragments/footer.php'); ?>
</div>
</body> </body>
</html> </html>