1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-18 01:10:49 -05:00

constrain header width and reduce padding across the site

This commit is contained in:
2020-04-04 10:18:20 -04:00
parent 1c2337afb8
commit 55a696c261
8 changed files with 25 additions and 24 deletions

View File

@@ -17,7 +17,7 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
// stylelint-enable indentation // stylelint-enable indentation
// Misc Settings // Misc Settings
$responsive-width: 890px; $responsive-width: 820px;
$link-underline-opacity: 40%; $link-underline-opacity: 40%;
$link-underline-size: 2px; $link-underline-size: 2px;

View File

@@ -5,7 +5,7 @@ footer {
width: 100%; width: 100%;
letter-spacing: -0.01em; letter-spacing: -0.01em;
line-height: 1.7; line-height: 1.7;
padding: 1.25em 2em; padding: 1.25em 1.75em;
box-sizing: border-box; box-sizing: border-box;
color: $color-medium; color: $color-medium;
border-top: 1px solid $color-light; border-top: 1px solid $color-light;
@@ -16,7 +16,7 @@ footer {
div#row { div#row {
width: 100%; width: 100%;
max-width: 980px; max-width: 978px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@@ -7,7 +7,9 @@ header {
nav { nav {
width: 100%; width: 100%;
max-width: 1032px;
padding: 0.25em 1.75em; padding: 0.25em 1.75em;
margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -53,6 +55,7 @@ header {
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0;
font-size: 1.2em; font-size: 1.2em;
line-height: 1; line-height: 1;
@@ -81,6 +84,10 @@ header {
margin-left: 0.5em; margin-left: 0.5em;
} }
} }
&:first-child {
margin-left: 0;
}
} }
} }
} }

View File

@@ -4,7 +4,7 @@
main#home { main#home {
font-size: 1.1em; font-size: 1.1em;
max-width: 980px; max-width: 980px;
padding: 1.5em 1.75em 0.5em 1.75em; padding: 1.5em 1.5em 0.5em 1.5em;
margin: 0 auto; margin: 0 auto;
h2 { h2 {
@@ -40,7 +40,8 @@ main#home {
img#me { img#me {
float: right; float: right;
margin: 0 0 0.5em 1em; margin-bottom: 0.5em;
margin-left: 1em;
padding: 4px; padding: 4px;
border: 1px solid $color-light; border: 1px solid $color-light;
border-radius: 50%; border-radius: 50%;

View File

@@ -3,7 +3,7 @@
// Archive/List Styles // Archive/List Styles
main#list { main#list {
max-width: 980px; max-width: 980px;
padding: 1.5em 2em; padding: 1.5em 1.5em 0.25em 1.5em;
margin: 0 auto; margin: 0 auto;
section.year { section.year {
@@ -12,11 +12,13 @@ main#list {
h2 { h2 {
font-size: 2.25em; font-size: 2.25em;
letter-spacing: -0.025em; letter-spacing: -0.025em;
margin: 0; margin-top: 0;
margin-bottom: 0.4em;
} }
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0;
padding-left: 0; padding-left: 0;
display: block; display: block;
} }
@@ -25,6 +27,7 @@ main#list {
display: flex; display: flex;
letter-spacing: -0.011em; letter-spacing: -0.011em;
line-height: 1.75; line-height: 1.75;
margin-bottom: 1em;
div.date { div.date {
color: $color-medium; color: $color-medium;
@@ -32,12 +35,8 @@ main#list {
flex-shrink: 0; flex-shrink: 0;
} }
+ li {
margin-top: 1em;
}
&:last-child { &:last-child {
margin-bottom: 1.8em; margin-bottom: 1.6em;
} }
} }
} }
@@ -47,7 +46,7 @@ main#list {
// Responsive // Responsive
@mixin responsive--list() { @mixin responsive--list() {
main#list { main#list {
padding: 1em 1.25em; padding: 1em 1em 0.25em 1em;
section.year { section.year {
font-size: 1em; font-size: 1em;

View File

@@ -3,7 +3,7 @@
// Post Styles // Post Styles
main#single { main#single {
max-width: $max-width; max-width: $max-width;
padding: 1em 2em; padding: 1em 1.5em;
margin: 0 auto; margin: 0 auto;
div#meta { div#meta {
@@ -24,7 +24,7 @@ main#single {
h1#title { h1#title {
margin-top: 0.3em; margin-top: 0.3em;
margin-bottom: 0.5em; margin-bottom: 0.6em;
font-size: 2.2em; font-size: 2.2em;
line-height: 1.3; line-height: 1.3;
font-weight: 700; font-weight: 700;
@@ -55,12 +55,5 @@ main#single {
margin-top: 0.5em; margin-top: 0.5em;
font-size: 1.8em; font-size: 1.8em;
} }
div#meta {
// hide "Improve This Post" link on mobile
span#edit {
display: none;
}
}
} }
} }

View File

@@ -29,7 +29,8 @@ main#video {
} }
video { video {
width: $responsive-width; width: 100%;
max-width: 975px;
height: auto; height: auto;
} }
} }

View File

@@ -2,7 +2,7 @@
<main id="single"> <main id="single">
<article> <article>
<div id="meta"> <div id="meta">
<a class="no-underline" id="date" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</a>{{ with .Site.Params.gitRepo }}<span id="edit"><span class="dash"></span><a class="no-underline" href="{{ . }}/blob/master/content/{{ $.File.Path }}" title="Edit this post on GitHub" target="_blank" rel="noopener">Improve This Post</a></span>{{ end }} <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</a>{{ with .Site.Params.gitRepo }}<span class="dash"></span><a class="no-underline" href="{{ . }}/blob/master/content/{{ $.File.Path }}" title="Edit this post on GitHub" target="_blank" rel="noopener">Improve This Post</a>{{ end }}
</div> </div>
<h1 id="title"><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1> <h1 id="title"><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>