diff --git a/src/css/landing.css b/src/css/landing.css index fc15b77..3ffd48f 100644 --- a/src/css/landing.css +++ b/src/css/landing.css @@ -81,45 +81,38 @@ VARIABLES */ * { line-height: 1.7; - border: dotted red 1px; } html { font-size: 12pt; - font-family: sans-serif; + font-family: "Linux Libertine", "Times New Roman", Times, serif; } body { display: grid; - margin: auto; - padding: 2em 0; + padding: 2em; } -@media screen and (min-width: 992px) { +@media screen and (min-width: 768px) { body { - grid-template-columns: 1fr 2fr 1fr; + grid-template-columns: 2fr 3fr 2fr; gap: 1em; height: 100%; + padding: 2em 0; } } -a { - color: #9ec611; - text-decoration: underline #9ec611 2px; -} -a:hover { - color: #beec1f; -} - nav { grid-row: 1; grid-column: 1; justify-self: right; align-self: end; -} -nav a { font-size: 1.5em; font-weight: bold; - image-rendering: pixelated; +} +@media screen and (min-width: 768px) { + nav { + grid-column: 2; + } } nav a:hover { font-style: italic; @@ -128,13 +121,8 @@ nav a::after { content: " >>"; font-style: normal; } -@media screen and (min-width: 992px) { - nav { - grid-column: 2; - } -} -@media screen and (min-width: 992px) { +@media screen and (min-width: 768px) { main { grid-row: 2; grid-column: 2; @@ -142,11 +130,11 @@ nav a::after { } } main article { - font-size: 1rem; word-wrap: break-word; line-height: 1.5; padding: 0 1.5em; padding: 0; + font-size: 1rem; } main article p, main article blockquote, @@ -227,17 +215,15 @@ main article h1 { aside { grid-row: 1; grid-column: 1; - justify-self: left; max-width: 192px; } +@media screen and (min-width: 768px) { + aside { + grid-column: 2; + } +} aside img { image-rendering: pixelated; } -@media screen and (min-width: 992px) { - aside { - grid-column: 2; - justify-self: start; - } -} /*# sourceMappingURL=landing.css.map */ diff --git a/src/css/landing.css.map b/src/css/landing.css.map index 65469bb..6be8412 100644 --- a/src/css/landing.css.map +++ b/src/css/landing.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;EACA;;ACfA;EDYF;IAMI;IACA;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;ACjDJ;EDgCF;IAsBI;;;;ACtDF;ED0DF;IAEI;IACA;IACA;;;AAGF;EACE;EC5DH;EACA;EACA;ED8DG;;AC5DF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADrBF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;ACrFF;ED8EF;IAWI;IACA","file":"landing.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAQA;EACE;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;;ACVA;EDQF;IAII;IACA,KAlBK;IAmBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ACzBA;EDmBF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;ACrCJ;ED0CF;IAEI;IACA;IACA;;;AAGF;EC3CD;EACA;EACA;ED2CG;EACA;;AC1CF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADvCF;EACE;;;AAKN;EACE;EACA;EACA;;AC/DA;ED4DF;IAKI;;;AAGF;EACE","file":"landing.css"} \ No newline at end of file diff --git a/src/scss/landing.scss b/src/scss/landing.scss index 31ca968..bea529d 100644 --- a/src/scss/landing.scss +++ b/src/scss/landing.scss @@ -9,40 +9,27 @@ VARIABLES =============================================================================== */ -$gutter: 10px; -$max-width: 750px; -$max-height: 500px; -$avatar-width: 256px; +$gutter: 1em; * { line-height: 1.7; - border: dotted red 1px; } html { font: { size: 12pt; - family: sans-serif; + family: "Linux Libertine", "Times New Roman", Times, serif; } } body { display: grid; - margin: auto; - padding: 2em 0; - - @include breakpoint("lg") { - grid-template-columns: 1fr 2fr 1fr; - gap: 1em; + padding: $gutter * 2; + @include breakpoint("md") { + grid-template-columns: 2fr 3fr 2fr; + gap: $gutter; height: 100%; - } -} - -a { - color: #{colors.$link}; - text-decoration: underline #{colors.$link} 2px; - &:hover { - color: #{colors.$link-hover}; + padding: ($gutter * 2) 0; } } @@ -51,12 +38,13 @@ nav { grid-column: 1; justify-self: right; align-self: end; + font-size: 1.5em; + font-weight: bold; + @include breakpoint("md") { + grid-column: 2; + } a { - font-size: 1.5em; - font-weight: bold; - image-rendering: pixelated; - &:hover { font-style: italic; } @@ -66,25 +54,19 @@ nav { font-style: normal; } } - - @include breakpoint("lg") { - grid-column: 2; - } } main { - @include breakpoint("lg") { + @include breakpoint("md") { grid-row: 2; grid-column: 2; justify-self: center; } article { - font-size: 1rem; - @include markup; - padding: 0; + font-size: 1rem; h1 { margin-top: 0; @@ -95,15 +77,12 @@ main { aside { grid-row: 1; grid-column: 1; - justify-self: left; max-width: 192px; + @include breakpoint("md") { + grid-column: 2; + } img { image-rendering: pixelated; } - - @include breakpoint("lg") { - grid-column: 2; - justify-self: start; - } }