From 30aaa464562c6d243c570e35638ca5e03d33ed3e Mon Sep 17 00:00:00 2001 From: Jannik Beyerstedt Date: Fri, 28 Oct 2016 21:22:28 +0200 Subject: [PATCH] [SITE CSS] solve sticky footer with CSS calc() only, no position: absolute any more --- assets/css/main.css | 37 ++++++++------------- assets/css/main.css.map | Bin 7360 -> 7219 bytes assets/css/templates/home.css | 51 ++++++++++++++--------------- assets/css/templates/home.css.map | Bin 2963 -> 2921 bytes assets/scss/main.scss | 52 ++++++++++++------------------ assets/scss/templates/home.scss | 9 +++--- 6 files changed, 63 insertions(+), 86 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 9173d00..a4f90b5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -15,8 +15,8 @@ h1, h2, h3, h4 { margin-top: 1em; font-family: 'Crimson Text', serif; } -main h1:first-child { - margin-top: 0.4em; } +main h1:first-child, main div.container:first-child { + margin-top: 0; } h5 { margin-bottom: 8px; } @@ -134,9 +134,10 @@ nav { line-height: 1; } } footer { - margin-top: 20px; + margin-top: 25px; padding-top: 15px; padding-bottom: 10px; + height: 70px; min-width: inherit; background-color: #bebebe; color: #000; } @@ -163,30 +164,18 @@ footer { height: 1.4rem; padding-right: 0.2em; } -/* make footer sticky */ -html { - position: relative; - min-height: 100%; } - -@media (min-width: 576px) { - body { - /* Margin bottom by footer height */ - margin-bottom: 100px; } +@media (max-width: 575px) { footer { - position: absolute; - bottom: 0; - width: 100%; - height: 70px; } } + height: 175px; } } + +/* space footer at bottom of page */ +@media (min-width: 576px) { + main { + min-height: calc(100vh - 83px - 70px - 25px); } } @media (max-width: 575px) { - body { - /* Margin bottom by footer height */ - margin-bottom: 205px; } - footer { - position: absolute; - bottom: 0; - width: 100%; - height: 175px; } } + main { + min-height: calc(100vh - 83px - 25px); } } /* * HELPERS diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 6dabe273f81375a7a6390546788f31c2011043ac..a32df3ee7ea706b3c5286134eaa80e52d6fc74db 100644 GIT binary patch delta 586 zcmaKpKTjJ$5XEIMkqe+YE?`QKDA)pv#0t6sybV|prT|59-S9~eN9vxS;8_&xi`|iYAZ*_Mx7Za)rWo`@_pR|n)KZxu90_~vFHK&&JFeIVe|}sI zlzsN**QH)o|E&^1=nR%vBPyL8qAZ&32I?p4(8e7RK<%5hurFS*Bz4D-hx_U59OUuw jH(EqQ?vB66LJf4)Q7ck^)1Oi2beJ~^@%Hd`b}s)4U@D?f delta 740 zcmb`F%T7~K6o%6T2qeI$fLww`YK(RdNE&WAqknBrPj}CadN>#zaVgLeLQ7GoPMjNO z`vpvV0h7J}kHFZu@ikm~A5Oi@NSy7g%fG($uRYkj+4}Zrys)D`k1srtK;*cPXCzV} z6)xZk9|(nq7t(P6uSfdfMEUEZiP6cs95=Yl!Nzo9tkBk5#h3a^ars#{fQW(EaqAbs z6&VpZ`#Hcc%Jhar=4moJ45GFo1MI9M%4q&xx4lA0Kn#L?6!VJ#IzH zsyM3Njt)cuB#hdp*ors`@AZ$FT4{~aJg`o0a|UeCt313(x-olHYRN_x3DK6_Vd1Gv zY?z0aNq?VxI@yy$#Y;Ukw-_Vd7S{w^6MLijlr3ksU>j?q0W>lf`IQ)JdDGw4vK2n7 zR}a`)zY1-=Qs$;4c=D9LC%ytbTIL1a10!F@Q}WI)&cA83ia`wO(fp!S=2 Qct=h1S<~IY!h`vdUngA2y#N3J diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css index ed4f60f..516df88 100644 --- a/assets/css/templates/home.css +++ b/assets/css/templates/home.css @@ -1,33 +1,32 @@ /* STYLE for jannikbeyerstedt.de * for specific template */ -main div.home { - text-align: center; - margin-top: 15vh; - margin-bottom: 20vh; } - main div.home div.logo { - font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; - font-size: 24.5px; - line-height: 1.2em; - font-weight: 300; - width: 11em; - margin: 0 auto; } - main div.home div.logo span { - color: #2dac01; - font-weight: 400; } - main div.home div.logo span.firstname { - padding-left: 0.1em; - padding-right: 0.56em; } - main div.home div.logo span.surname { - letter-spacing: -0.036em; } - main div.home p { - margin-top: 0.5em; - font-size: 14px; - letter-spacing: -0.02em; } +main { + padding-top: 14vh; } + main div.home { + text-align: center; } + main div.home div.logo { + font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; + font-size: 24.5px; + line-height: 1.2em; + font-weight: 300; + width: 11em; + margin: 0 auto; } + main div.home div.logo span { + color: #2dac01; + font-weight: 400; } + main div.home div.logo span.firstname { + padding-left: 0.1em; + padding-right: 0.56em; } + main div.home div.logo span.surname { + letter-spacing: -0.036em; } + main div.home p { + margin-top: 0.5em; + font-size: 14px; + letter-spacing: -0.02em; } @media (max-width: 575px) { - main div.home { - margin-top: 13vh; - margin-bottom: 17vh; } } + main { + padding-top: 16vh; } } /*# sourceMappingURL=home.css.map */ \ No newline at end of file diff --git a/assets/css/templates/home.css.map b/assets/css/templates/home.css.map index 792380226618edce1ac2196f0944d7037b6138b6..6a6e824c2f9efd852b1e15a5feb630861b2296c1 100644 GIT binary patch delta 451 zcmZuu!AiqG6vSJ*ca&xu30Kg*8fDGKd;(Z!&YO7)F>iW15>uP%?Cqgm@svFD@1YhC)!Znj*(oYDlC z)TTd?D!-|EOQqK;TVwu&rogo3OKHR#aB=J374TuO4n5!@c0*QoViy3H^8+ delta 415 zcmZutJ5Iwu6qFG~ycLB5A`yz^mMs8LAS{Zp*@VR`ctIh=h{6OUgdh#1P-8lm2Gxv}*$P6&fz_)700MM)t{h-5C z;R>0$8XwGarjLDihF<-kYYu10%^yFj`q#0c4?k;Lq~~%BjH{6OO-ntox@e#auDwIg zVyVlrQ#k=9mCOQXoU+d!DS8vK&0Ww~q^eGzBJec*h&}JZ%?YmNI@fc~mt*X|<@$Lf SMHoiY^6~a5+6^zS#LF*J(r)Yk diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 33d3560..fc0836b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -21,8 +21,8 @@ h1, h2, h3, h4 { margin-top: 1em; font-family: 'Crimson Text', serif; } -main h1:first-child { - margin-top: 0.4em; +main h1:first-child, main div.container:first-child { + margin-top: 0; } h5 { margin-bottom: 8px; @@ -93,12 +93,12 @@ main div.container { $header_logoSize: 75px; - +$header_logoPadg: 4px; header { img { width: $header_logoSize; height: $header_logoSize; - margin: 4px 0; + margin: $header_logoPadg 0; float: left; } @@ -184,11 +184,15 @@ nav { $footer_logoHeight: 1.4rem; +$footer_margin: 25px; +$footer_height: 70px; +$footer_height_xs: 175px; footer { - margin-top: 20px; + margin-top: 25px; padding-top: 15px; padding-bottom: 10px; + height: $footer_height; min-width: inherit; background-color: $footer_color_bg; @@ -226,36 +230,22 @@ footer { } -/* make footer sticky */ -$footer_height: 70px; -$footer_height_xs: 175px; -$footer_margin: 30px; -html { - position: relative; - min-height: 100%; -} -@include media-breakpoint-up(sm) { - body { - /* Margin bottom by footer height */ - margin-bottom: $footer_height + $footer_margin; - } +@include media-breakpoint-down(xs) { footer { - position: absolute; - bottom: 0; - width: 100%; - height: $footer_height; + height: $footer_height_xs; + } +} + +/* space footer at bottom of page */ +$header_height: 2*$header_logoPadg + $header_logoSize; +@include media-breakpoint-up(sm) { + main { + min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin}); } } @include media-breakpoint-down(xs) { - body { - /* Margin bottom by footer height */ - margin-bottom: $footer_height_xs + $footer_margin; - } - footer { - position: absolute; - bottom: 0; - width: 100%; - height: $footer_height_xs; + main { + min-height: calc(100vh - #{$header_height} - #{$footer_margin}); } } diff --git a/assets/scss/templates/home.scss b/assets/scss/templates/home.scss index f348d3f..893f7b1 100644 --- a/assets/scss/templates/home.scss +++ b/assets/scss/templates/home.scss @@ -8,10 +8,10 @@ @import "../mainvariables"; main { + padding-top: 14vh; + div.home { text-align: center; - margin-top: 15vh; - margin-bottom: 20vh; div.logo { font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; @@ -46,8 +46,7 @@ main { } @include media-breakpoint-down(xs) { - main div.home { - margin-top: 13vh; - margin-bottom: 17vh; + main { + padding-top: 16vh; } }