From d2a9736c9e762a82d5bbbaa34397d4b184779929 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Fri, 24 Apr 2020 10:12:13 -0400 Subject: [PATCH] uniform width on all pages --- assets/sass/abstracts/_settings.scss | 2 +- assets/sass/components/_footer.scss | 2 +- assets/sass/components/_global.scss | 5 ++ assets/sass/components/_header.scss | 81 ++++++++++++++-------------- assets/sass/pages/_etc.scss | 5 +- assets/sass/pages/_home.scss | 5 +- assets/sass/pages/_list.scss | 5 +- assets/sass/pages/_single.scss | 6 +-- assets/sass/pages/_videos.scss | 1 - config.toml | 2 +- 10 files changed, 59 insertions(+), 55 deletions(-) diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss index 58801094..a1f4e5f4 100644 --- a/assets/sass/abstracts/_settings.scss +++ b/assets/sass/abstracts/_settings.scss @@ -17,7 +17,7 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", // stylelint-enable indentation // Width at which to switch to mobile styles -$responsive-width: 820px; +$responsive-width: 780px; // Fancy link underline settings $link-underline-opacity: 40%; diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss index 40ddaedb..f7fe127a 100644 --- a/assets/sass/components/_footer.scss +++ b/assets/sass/components/_footer.scss @@ -22,7 +22,7 @@ footer { div#row { width: 100%; - max-width: 978px; + max-width: $max-width; margin: 0 auto; display: flex; justify-content: space-between; diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index 42c95d94..540c05ab 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -13,6 +13,11 @@ body { } main { + max-width: $max-width; + margin: 0 auto; + padding-left: 1.5em; + padding-right: 1.5em; + @include themed() { color: t(color-text); } diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss index 7ce28b99..cbe7fbc5 100644 --- a/assets/sass/components/_header.scss +++ b/assets/sass/components/_header.scss @@ -3,6 +3,8 @@ // Global Header Styles header { width: 100%; + padding: 0.25em 1.7em; + box-sizing: border-box; @include themed() { border-bottom: 1px solid t(color-kinda-light); @@ -11,8 +13,7 @@ header { nav { width: 100%; - max-width: 1032px; - padding: 0.25em 1.75em; + max-width: $max-width; margin: 0 auto; box-sizing: border-box; display: flex; @@ -123,49 +124,51 @@ header { // Responsive @mixin responsive--header() { - header nav { + header { padding: 0.1em 1.25em; - a#logo { - img, - svg { - width: 40px; - height: 60px; - } + nav { + a#logo { + img, + svg { + width: 40px; + height: 60px; + } - h1#name { - display: none; - } - } - - ul { - font-size: 1.7em; - - li { - margin-left: 0.85em; - - a { - span.icon { - font-size: 0.9em; - } - - // hide text next to emojis on mobile - span.text { - display: none; - } - - &:hover { - transform: scale(1.4); - } + h1#name { + display: none; } } - // Dark mode toggle - button#dark-mode-toggle { - // TODO: figure out need for weird magic numbers here - height: 1.025em; - width: 0.75em; - margin-top: 0.125em; + ul { + font-size: 1.7em; + + li { + margin-left: 0.85em; + + a { + span.icon { + font-size: 0.9em; + } + + // hide text next to emojis on mobile + span.text { + display: none; + } + + &:hover { + transform: scale(1.4); + } + } + } + + // Dark mode toggle + button#dark-mode-toggle { + // TODO: figure out need for weird magic numbers here + height: 1.025em; + width: 0.75em; + margin-top: 0.125em; + } } } } diff --git a/assets/sass/pages/_etc.scss b/assets/sass/pages/_etc.scss index 672d9917..af481721 100644 --- a/assets/sass/pages/_etc.scss +++ b/assets/sass/pages/_etc.scss @@ -2,9 +2,8 @@ // Video Styles main#etc { - max-width: $max-width; - padding: 1.5em 2em; - margin: 0 auto; + padding-top: 1.5em; + padding-bottom: 1.5em; h1 { margin-top: 0; diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss index 383eed64..eeb75d33 100644 --- a/assets/sass/pages/_home.scss +++ b/assets/sass/pages/_home.scss @@ -3,9 +3,8 @@ // Home Styles main#home { font-size: 1.1em; - max-width: 980px; - padding: 1.5em 1.5em 0.5em 1.5em; - margin: 0 auto; + padding-top: 1.5em; + padding-bottom: 0.5em; h2 { margin: 0 0 0.6em 0; diff --git a/assets/sass/pages/_list.scss b/assets/sass/pages/_list.scss index e89b560f..f00dd922 100644 --- a/assets/sass/pages/_list.scss +++ b/assets/sass/pages/_list.scss @@ -2,9 +2,8 @@ // Archive/List Styles main#list { - max-width: 980px; - padding: 1.5em 1.5em 0.25em 1.5em; - margin: 0 auto; + padding-top: 1.5em; + padding-bottom: 0.25em; section.year { font-size: 1.05em; diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 39515696..163a9187 100644 --- a/assets/sass/pages/_single.scss +++ b/assets/sass/pages/_single.scss @@ -2,9 +2,8 @@ // Post Styles main#single { - max-width: $max-width; - padding: 1em 1.5em; - margin: 0 auto; + padding-top: 1em; + padding-bottom: 1em; div#meta { font-size: 0.85em; @@ -28,6 +27,7 @@ main#single { h1#title { margin-top: 0.3em; margin-bottom: 0.6em; + margin-left: -0.03em; // TODO: why is this indented slightly? font-size: 2.2em; line-height: 1.3; font-weight: 700; diff --git a/assets/sass/pages/_videos.scss b/assets/sass/pages/_videos.scss index d4a67101..bb784c0d 100644 --- a/assets/sass/pages/_videos.scss +++ b/assets/sass/pages/_videos.scss @@ -2,7 +2,6 @@ // Video Styles main#video { - margin: 0 auto; padding: 1.5em 0; text-align: center; diff --git a/config.toml b/config.toml index c8554276..0c82beb3 100644 --- a/config.toml +++ b/config.toml @@ -26,7 +26,7 @@ disableAliases = true description = "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps." domain = "jarv.is" mainSection = "notes" - pageMaxWidth = 910 + pageMaxWidth = 940 defaultImage = "img/me_large.jpg" github = "jakejarvis/jarv.is" facebookAppID = "3357248167622283"