From c36e2529b14cf1f9438a55afd0fa90ba1f70fbf3 Mon Sep 17 00:00:00 2001 From: Robert Austin Date: Sun, 17 Feb 2019 21:44:45 +1000 Subject: working on responsive css --- assets/scss/components/_content.scss | 7 +- assets/scss/components/_footer.scss | 10 +-- assets/scss/components/_logo.scss | 3 +- assets/scss/components/_main-menu-mobile.scss | 59 ++-------------- assets/scss/components/_sub-footer.scss | 11 +-- assets/scss/components/_summary.scss | 2 - assets/scss/components/_title.scss | 8 +-- assets/scss/components/_type.scss | 0 assets/scss/pages/_home.scss | 11 +-- assets/scss/style.scss | 5 ++ ...e.scss_5ad6f408b0e3e473c748aac88af0ea18.content | 80 ++++++++++++---------- layouts/_default/baseof.html | 8 +-- layouts/index.html | 14 +++- layouts/partials/sub-footer.html | 5 -- 14 files changed, 92 insertions(+), 131 deletions(-) delete mode 100644 assets/scss/components/_summary.scss delete mode 100644 assets/scss/components/_type.scss diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss index c8e8581..c20cf24 100644 --- a/assets/scss/components/_content.scss +++ b/assets/scss/components/_content.scss @@ -1,5 +1,3 @@ -$paragraph-color: $black; - .content { -webkit-font-smoothing: antialiased; pre { @@ -67,14 +65,11 @@ $paragraph-color: $black; } h2 { font-size: 2.2rem; - line-height: 1.6; + line-height: 1.4; font-weight: 300; letter-spacing: -0.01em; font-family: $font-family-base; margin-bottom: 20px; - @include media-breakpoint-up(md) { - line-height: 1.4; - } } h3 { font-size: 1.34rem; diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss index 99ba757..6cd901c 100644 --- a/assets/scss/components/_footer.scss +++ b/assets/scss/components/_footer.scss @@ -1,5 +1,5 @@ .footer { - background: $secondary; + background: #eaeaea; padding-top: 20px; padding-bottom: 20px; .footer-inner { @@ -24,7 +24,7 @@ flex: 0 0 120px; } } - ul { + ul.footer-menu { list-style: none; margin: 0; padding: 0; @@ -32,14 +32,14 @@ li { display: block; margin-right: 10px; - color: lighten($secondary, 50%); + color: #333; font-size: 0.9rem; line-height: 1.8; &:last-of-type { margin-right: 0; } a { - color: lighten($secondary, 50%); + color: #333; text-decoration: none; &:hover { text-decoration: underline; @@ -47,7 +47,7 @@ } &.copyright { font-weight: bold; - color: lighten($secondary, 50%); + color: #333; display: none; @include media-breakpoint-up(md) { display: inline-block; diff --git a/assets/scss/components/_logo.scss b/assets/scss/components/_logo.scss index 777fa99..50ed25b 100644 --- a/assets/scss/components/_logo.scss +++ b/assets/scss/components/_logo.scss @@ -16,8 +16,7 @@ } .logo-mobile { display: block; - width: 40px; - padding: 10px 0 10px 0; + width: 54px; @include media-breakpoint-up(sm) { display: none; } diff --git a/assets/scss/components/_main-menu-mobile.scss b/assets/scss/components/_main-menu-mobile.scss index b3cd6e2..0826118 100644 --- a/assets/scss/components/_main-menu-mobile.scss +++ b/assets/scss/components/_main-menu-mobile.scss @@ -1,56 +1,6 @@ -$color-main: $primary; -$color-active: #ffffff; -$color-link: #ffffff; - -$button-height: 27px; -$button-width: 35px; -// .button_container { -// position: fixed; -// top: 5%; -// right: 2%; -// height: $button-height; -// width: $button-width; -// cursor: pointer; -// z-index: 1000; -// transition: opacity 0.25s ease; -// &:hover { -// opacity: 0.7; -// } -// &.active { -// .top { -// transform: translateY(11px) translateX(0) rotate(45deg); -// background: $color-active; -// } -// .middle { -// opacity: 0; -// background: $color-active; -// } -// .bottom { -// transform: translateY(-11px) translateX(0) rotate(-45deg); -// background: $color-active; -// } -// } -// span { -// background: $color-main; -// border: none; -// height: 5px; -// width: 100%; -// position: absolute; -// top: 0; -// left: 0; -// transition: all 0.35s ease; -// cursor: pointer; -// &:nth-of-type(2) { -// top: 11px; -// } -// &:nth-of-type(3) { -// top: 22px; -// } -// } -// } .main-menu-mobile { position: fixed; - background: $color-main; + background: $primary; top: 0; left: 0; width: 100%; @@ -90,7 +40,7 @@ $button-width: 35px; } ul { font-size: 2rem; - font-family: $font-family-serif; + font-family: $font-family-base; text-align: center; list-style: none; padding: 0; @@ -103,9 +53,10 @@ $button-width: 35px; a { display: block; position: relative; - color: $color-link; + color: #ffffff; text-decoration: none; overflow: hidden; + font-weight: lighter; &:hover::after, &:focus::after, &:active::after { @@ -119,7 +70,7 @@ $button-width: 35px; width: 0%; transform: translateX(-50%); height: 3px; - background: $color-link; + background: #ffffff; transition: 0.35s; } } diff --git a/assets/scss/components/_sub-footer.scss b/assets/scss/components/_sub-footer.scss index a0a5398..986e7dd 100644 --- a/assets/scss/components/_sub-footer.scss +++ b/assets/scss/components/_sub-footer.scss @@ -1,5 +1,5 @@ .sub-footer { - background: darken($secondary, 10%); + background: #f4f5fb; padding-top: 20px; padding-bottom: 20px; @include media-breakpoint-up(md) { @@ -9,7 +9,7 @@ .sub-footer-inner { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-end; @include media-breakpoint-up(md) { flex-direction: row; } @@ -20,15 +20,16 @@ li { list-style: none; display: block; - color: lighten($secondary, 40%); + color: #333; font-size: 0.9rem; line-height: 1.8; + font-weight: bold; strong { font-weight: bold; color: #ffffff; } a { - color: lighten($secondary, 40%); + color: #333; text-decoration: none; &:hover { text-decoration: underline; @@ -43,7 +44,7 @@ } &.zerostatic { a { - color: #ffffff; + color: #333; } } } diff --git a/assets/scss/components/_summary.scss b/assets/scss/components/_summary.scss deleted file mode 100644 index 88de2a3..0000000 --- a/assets/scss/components/_summary.scss +++ /dev/null @@ -1,2 +0,0 @@ -.summary { -} diff --git a/assets/scss/components/_title.scss b/assets/scss/components/_title.scss index 0a522b7..07e0016 100644 --- a/assets/scss/components/_title.scss +++ b/assets/scss/components/_title.scss @@ -1,15 +1,15 @@ .title { - font-size: 2.4rem; - line-height: 1.2; + font-size: 2.7rem; + line-height: 1.1; font-family: $font-family-base; letter-spacing: -0.2px; font-weight: 100; - margin-bottom: 30px; + margin-bottom: 20px; @include media-breakpoint-up(md) { font-size: 3rem; + margin-bottom: 30px; } } - .title-summary { font-size: 1.6rem; line-height: 1.4; diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss index eebc576..a828a68 100644 --- a/assets/scss/pages/_home.scss +++ b/assets/scss/pages/_home.scss @@ -5,18 +5,21 @@ font-family: $font-family-base; } p { - width: 60%; margin: 0 auto; font-size: 1.2rem; font-weight: lighter; margin-bottom: 40px; + @include media-breakpoint-up(md) { + width: 80%; + } + @include media-breakpoint-up(lg) { + width: 60%; + } } .terminal { - background: #eaeaea; + @include whitebox(); border-radius: 3px; - width: 80%; margin: 0 auto; - @include whitebox(); margin-top: -200px; img { width: 100%; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index b2ed725..c9fe76f 100755 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -64,6 +64,7 @@ // Pages @import 'pages/home'; +// Global body { font-family: $font-family-base; font-size: 1rem; @@ -71,6 +72,10 @@ body { line-height: 1.4; color: $black; } +.container { + padding-left: $grid-gutter-width; + padding-right: $grid-gutter-width; +} // Display breakpoints for DEV // body:after { diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content index 83c0bce..cf4fed2 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content +++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content @@ -5331,7 +5331,7 @@ ol { position: static; } .footer { - background: #ffca28; + background: #eaeaea; padding-top: 20px; padding-bottom: 20px; } .footer .footer-inner { @@ -5354,33 +5354,33 @@ ol { .footer .footer-title { margin: 0; flex: 0 0 120px; } } - .footer ul { + .footer ul.footer-menu { list-style: none; margin: 0; padding: 0; flex: 1; } - .footer ul li { + .footer ul.footer-menu li { display: block; margin-right: 10px; - color: white; + color: #333; font-size: 0.9rem; line-height: 1.8; } - .footer ul li:last-of-type { + .footer ul.footer-menu li:last-of-type { margin-right: 0; } - .footer ul li a { - color: white; + .footer ul.footer-menu li a { + color: #333; text-decoration: none; } - .footer ul li a:hover { + .footer ul.footer-menu li a:hover { text-decoration: underline; } - .footer ul li.copyright { + .footer ul.footer-menu li.copyright { font-weight: bold; - color: white; + color: #333; display: none; } @media (min-width: 768px) { - .footer ul li.copyright { + .footer ul.footer-menu li.copyright { display: inline-block; } } @media (min-width: 576px) { - .footer ul { + .footer ul.footer-menu { height: inherit; display: flex; list-style: none; @@ -5388,16 +5388,16 @@ ol { padding: 0; align-items: center; justify-content: flex-end; } - .footer ul li { + .footer ul.footer-menu li { list-style: none; } - .footer ul li a { + .footer ul.footer-menu li a { display: inline-block; height: 40px; padding: 10px 8px 10px 8px; font-weight: 300; } } .sub-footer { - background: #f4b800; + background: #f4f5fb; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 768px) { @@ -5407,7 +5407,7 @@ ol { .sub-footer .sub-footer-inner { display: flex; flex-direction: column; - justify-content: space-between; } + justify-content: flex-end; } @media (min-width: 768px) { .sub-footer .sub-footer-inner { flex-direction: row; } } @@ -5418,14 +5418,15 @@ ol { .sub-footer .sub-footer-inner ul li { list-style: none; display: block; - color: #fffcf4; + color: #333; font-size: 0.9rem; - line-height: 1.8; } + line-height: 1.8; + font-weight: bold; } .sub-footer .sub-footer-inner ul li strong { font-weight: bold; color: #ffffff; } .sub-footer .sub-footer-inner ul li a { - color: #fffcf4; + color: #333; text-decoration: none; } .sub-footer .sub-footer-inner ul li a:hover { text-decoration: underline; } @@ -5436,7 +5437,7 @@ ol { font-weight: bold; color: #ffffff; } .sub-footer .sub-footer-inner ul li.zerostatic a { - color: #ffffff; } + color: #333; } @media (min-width: 576px) { .sub-footer .sub-footer-inner ul li { display: inline-block; @@ -5460,8 +5461,7 @@ ol { .logo-mobile { display: block; - width: 40px; - padding: 10px 0 10px 0; } + width: 54px; } @media (min-width: 576px) { .logo-mobile { display: none; } } @@ -5533,7 +5533,7 @@ ol { animation-delay: 0.6s; } .main-menu-mobile ul { font-size: 2rem; - font-family: "Lora", Arial, sans-serif, -apple-system; + font-family: "Roboto", Arial, sans-serif, -apple-system; text-align: center; list-style: none; padding: 0; @@ -5548,7 +5548,8 @@ ol { position: relative; color: #ffffff; text-decoration: none; - overflow: hidden; } + overflow: hidden; + font-weight: lighter; } .main-menu-mobile ul li a:hover::after, .main-menu-mobile ul li a:focus::after, .main-menu-mobile ul li a:active::after { width: 100%; } .main-menu-mobile ul li a::after { @@ -5639,15 +5640,16 @@ ol { border: 2px solid #fff; } .title { - font-size: 2.4rem; - line-height: 1.2; + font-size: 2.7rem; + line-height: 1.1; font-family: "Roboto", Arial, sans-serif, -apple-system; letter-spacing: -0.2px; font-weight: 100; - margin-bottom: 30px; } + margin-bottom: 20px; } @media (min-width: 768px) { .title { - font-size: 3rem; } } + font-size: 3rem; + margin-bottom: 30px; } } .title-summary { font-size: 1.6rem; @@ -5718,14 +5720,11 @@ ol { font-weight: 300; } } .content h2 { font-size: 2.2rem; - line-height: 1.6; + line-height: 1.4; font-weight: 300; letter-spacing: -0.01em; font-family: "Roboto", Arial, sans-serif, -apple-system; margin-bottom: 20px; } - @media (min-width: 768px) { - .content h2 { - line-height: 1.4; } } .content h3 { font-size: 1.34rem; line-height: 1.6; @@ -6074,21 +6073,24 @@ ol { font-weight: lighter; font-family: "Roboto", Arial, sans-serif, -apple-system; } .page-home p { - width: 60%; margin: 0 auto; font-size: 1.2rem; font-weight: lighter; margin-bottom: 40px; } + @media (min-width: 768px) { + .page-home p { + width: 80%; } } + @media (min-width: 992px) { + .page-home p { + width: 60%; } } .page-home .terminal { - background: #eaeaea; - border-radius: 3px; - width: 80%; - margin: 0 auto; border: 1px solid #dcdcdc; border-radius: 3px; box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); background: #ffffff; padding: 10px; + border-radius: 3px; + margin: 0 auto; margin-top: -200px; } .page-home .terminal img { width: 100%; @@ -6101,4 +6103,8 @@ body { line-height: 1.4; color: #212529; } +.container { + padding-left: 20px; + padding-right: 20px; } + /*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1b11532..2553864 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -23,12 +23,12 @@ {{ partial "main-menu-mobile.html" . }} -
+
{{ partial "header.html" . }} {{ if eq .Section "docs" }} -
+
-
+
{{ partial "docs-menu.html" . }}
@@ -43,9 +43,9 @@ {{ block "main" . }} {{ end }} {{ end}} -
+ {{ partial "sub-footer.html" . }} {{ $scripts := resources.Get "js/scripts.js" }} diff --git a/layouts/index.html b/layouts/index.html index e188328..f81e17b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -28,9 +28,17 @@
-
-
- +
+ +
+
+
+
+
+ +
+
+
diff --git a/layouts/partials/sub-footer.html b/layouts/partials/sub-footer.html index caffd84..bc46f91 100644 --- a/layouts/partials/sub-footer.html +++ b/layouts/partials/sub-footer.html @@ -3,11 +3,6 @@
- -- cgit v1.2.3