WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Make whole body a flex container

Browse Source 
This is used so that we can make <main> take all the remaining space.
This is "needed" because some pages (such as /tags/) don't have enough content to fill the whole height, making the footer appear in the middle of the page.
This commit is contained in:
Bea 2020-11-05 01:04:12 +01:00
parent 84f9eadd3b
commit 6714c6039c
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/screen.css
View File

@ -48,6 +48,9 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
display: flex;
flex-flow: column;
font-size: 20px; font-size: 20px;
line-height: 1.6; line-height: 1.6;
@ -134,6 +137,7 @@ Used to define how every page is displayed.
*/ */
main { main {
flex: 1;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -340,7 +344,7 @@ Used to style the index/homepage.
*/ */
.mind-index-header_main { .mind-index-header_main {
height: 100%; flex: 0 0 100%;
width: 100%; width: 100%;
margin: auto; margin: auto;
display: flex; display: flex;
@ -618,7 +622,7 @@ instead of pages ".mind-page*".
*/ */
.mind-post-header { .mind-post-header {
height: 400px; flex: 0 0 400px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;