From 311b84f0a656e87d10e16e587b7c3cc4f47639ff Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 17:24:40 -0500 Subject: [PATCH 1/9] Grid: Update index to use new grid styles --- _layouts/corrupt_index.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/_layouts/corrupt_index.html b/_layouts/corrupt_index.html index 1f9ee61..b2ebc92 100644 --- a/_layouts/corrupt_index.html +++ b/_layouts/corrupt_index.html @@ -6,17 +6,20 @@ content="Rants of a wandering techy, in search of truth, knowledge, and a decent ping." /> - + +
-
-
-
-
The
Internet
Vagabond
-
+
+
+
The
Internet
Vagabond
+
+
{{ content }}
From 5cac9ecc065deb6a11c6c44935e8afbf991a67ac Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 17:25:01 -0500 Subject: [PATCH 2/9] Grid: Implement grid stylesheets - Break single stylesheet into typography and layout - Layout: implement CSS Grid --- src/styles/corrupt_layout.css | 35 +++++++++ src/styles/corrupt_typog.css | 129 ++++++++++++++++++++++++++++++++++ 2 files changed, 164 insertions(+) create mode 100644 src/styles/corrupt_layout.css create mode 100644 src/styles/corrupt_typog.css diff --git a/src/styles/corrupt_layout.css b/src/styles/corrupt_layout.css new file mode 100644 index 0000000..2222296 --- /dev/null +++ b/src/styles/corrupt_layout.css @@ -0,0 +1,35 @@ +html { + font-family: sans-serif; + /* Change this value to any color you want */ + --hilite: #8D3FC5; +} + +body { + background-color: #3B3B3B; + margin: 0; +} + +.cor_page { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-auto-rows: minmax(50px, auto); + grid-template-areas: + "hd hd hd hd hd ft ft" + "main main main main main ft ft"; +} + +.cor_head { + grid-area: hd; + background-color: #202020; + border-bottom: 1px solid var(--hilite); + box-shadow: 0px 5px 30px -5px var(--hilite); +} + +.cor_menu { + grid-area: ft; + background-color: #202020; +} + +.cor_content { + grid-area: main; +} diff --git a/src/styles/corrupt_typog.css b/src/styles/corrupt_typog.css new file mode 100644 index 0000000..a96f42b --- /dev/null +++ b/src/styles/corrupt_typog.css @@ -0,0 +1,129 @@ + +html { + font-family: sans-serif; + /* Change this value to any color you want */ + --hilite: #8D3FC5; +} + +a,a:visited,a:link,a:focus { + text-decoration: underline; color: white; +} + +a:hover { + font-style: italic; +} + +.title div { + margin: 0px; padding: 0px; + font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.8em; +} + +.title div::first-letter { + margin: 0px; padding: 0px 2px; + font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: white; +} + +.cor_menu a:link,a:visited,a:focus { + text-decoration: none; + color: darkgrey; +} + +.cor_menu a:hover { + font-weight: normal; + color: white; +} + +.cor_topics { + display: flex; flex-flow: row wrap; justify-content: center; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + text-align: center; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; +} + +.cor_topics a,a:visited,a:link,a:focus { + color: darkgrey; + text-decoration: none; +} + +.cor_topics a:hover { + font-style: normal; + color: white; +} + +.cor_footer #about p { + line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white; + padding: 0em 1em; +} + +.cor_footer #about h2 { + text-align: right; + padding: 10px; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; +} + +#posts a,a:visited,a:link,a:focus { + color: darkgrey; + text-decoration: none; +} + +#posts a:hover { + font-style: normal; + color: white; +} + +#cor_coll_title { + margin: 0px; padding-bottom: 10px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.5em; text-align: center; +} + +#content h1 { + padding: 10px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.5em; +} + +#content h1::first-letter { + margin: 0px; padding: 0px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: white; +} + +#content h2 { + text-align: left; + padding: 10px; + border-bottom: 1px solid darkgrey; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; +} + +#content h3 { + text-align: right; + padding: 10px; + border-bottom: 1px solid darkgrey; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; +} + +#content h4 { + text-align: center; + padding: 10px; + border-top: 1px solid darkgrey; + font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.4em; +} + +#content p { + padding: 0em 2em; + color: white; +} + +#content ul { + color: white; +} + +#content ol { + color: white; +} From aa3628b96c3f3db6264501dd479f7e360eac703a Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 23:20:54 -0500 Subject: [PATCH 3/9] Remove unnecessary files --- _layouts/corrupt_collection.html | 28 --- src/styles/corrupt.css | 289 ------------------------------- src/styles/styles.css | 198 --------------------- 3 files changed, 515 deletions(-) delete mode 100644 _layouts/corrupt_collection.html delete mode 100644 src/styles/corrupt.css delete mode 100644 src/styles/styles.css diff --git a/_layouts/corrupt_collection.html b/_layouts/corrupt_collection.html deleted file mode 100644 index 0df50e7..0000000 --- a/_layouts/corrupt_collection.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - The Internet Vagabond :: {{ page.tabtitle }} - - - - - - - -
-
-
-
-
The
Internet
Vagabond
-
-
-
-
{{ page.tabtitle }}
- {{ content }} -
-
- {% include cor_menu.html %} -
- - diff --git a/src/styles/corrupt.css b/src/styles/corrupt.css deleted file mode 100644 index 4683d93..0000000 --- a/src/styles/corrupt.css +++ /dev/null @@ -1,289 +0,0 @@ -/* - * Corrupt: A simple, responsive theme for Jekyll - * CSS for theinternetvagabond.com - * (C)2015 Bill Niblock - * Licensed under the WTFPL [http://www.wtfpl.net] -*/ - - -/* General */ -html { - font-family: sans-serif; - /* Change this value to any color you want */ - --hilite: #8D3FC5; -} - -body { - background-color: #3B3B3B; - margin: 0; -} - -a,a:visited,a:link,a:focus { - text-decoration: underline; color: white; -} - -a:hover { - font-style: italic; -} - -.cor_page { - display: flex; flex-flow: row wrap; -} - -.cor_content { - width: 100%; - background-color: #3B3B3B; -} - -/* Header */ -.cor_head { - position: fixed; top: 0px; left: 0px; right: 0px; - margin: 0px; padding: 10px; z-index: 1; - background-color: #202020; - border-bottom: 1px solid var(--hilite); - box-shadow: 0px 5px 30px -5px var(--hilite); -} - -.title { - display: flex; - margin: 0px 25px; padding: 0px; -} - -.title div { - margin: 0px; padding: 0px; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.8em; -} - -.title div::first-letter { - margin: 0px; padding: 0px 2px; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: white; -} - -/* Sidebar */ -.cor_menu { - display: flex; - flex-flow: column wrap; - background-color: #202020; - z-index: 2; width: 100%; - border-top: 1px solid var(--hilite); - box-shadow: 0px 0px 30px 0px var(--hilite); -} - -.cor_menu a:link,a:visited,a:focus { - text-decoration: none; - color: darkgrey; -} - -.cor_menu a:hover { - font-weight: normal; - color: white; -} - -.cor_topics { - display: flex; flex-flow: row wrap; justify-content: center; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - text-align: center; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; -} - -.cor_topics div { - padding: 10px 10px 0px 10px; -} - -.cor_topics a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -.cor_topics a:hover { - font-style: normal; - color: white; -} - -.cor_footer { - display: flex; flex-flow: row wrap; - width: 100%; - text-align: center; -} - -.cor_footer #about { - display: flex; - flex-flow: column; -} - -.cor_footer #about p { - line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white; - padding: 0em 1em; -} - -.cor_footer #about h2 { - text-align: right; - padding: 10px; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -.cor_footer #social { - display: flex; flex-flow: row; width: 100%; - padding-bottom: 15px; -} - -.cor_footer #social div { - width: 25%; text-align: center; -} - -/* Index */ -#posts a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -#posts a:hover { - font-style: normal; - color: white; -} - -#posts #details { - display: flex; flex-flow: row wrap; - text-align: center; - padding: 10px; - border-top: 1px solid darkgrey; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.4em; -} - -#posts #date { - width: 100%; - text-align: center; - color: grey; -} - -#posts #tags { - width: 100%; - text-align: center; - color: grey; -} - -#posts #desc { - padding: 0em 2em 2em 2em; - color: white; -} - -#all_button { - padding: 5px; margin: 2em; width: unset; - text-align: center; - border: 1px solid darkgrey; -} - -#all_button a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -#all_button a:hover { - font-style: normal; - color: white; -} - -/* Collection */ -#cor_coll_title { - margin: 0px; padding-bottom: 10px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.5em; text-align: center; -} - -/* Content */ -#content { - margin: 75px 5% 5% 5%; - line-height: 1.5em; letter-spacing: 0.1em; -} - -#content h1 { - padding: 10px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.5em; -} - -#content h1::first-letter { - margin: 0px; padding: 0px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: white; -} - -#content h2 { - text-align: left; - padding: 10px; - border-bottom: 1px solid darkgrey; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#content h3 { - text-align: right; - padding: 10px; - border-bottom: 1px solid darkgrey; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#content h4 { - text-align: center; - padding: 10px; - border-top: 1px solid darkgrey; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.4em; -} - -#content p { - padding: 0em 2em; - color: white; -} - -#content ul { - color: white; -} - -#content ol { - color: white; -} - -/* Mobile First */ -@media only screen and (min-width: 768px) { - .title div { font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 1.2em; - } - .title div::first-letter { - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - } -} - -@media only screen and (min-width: 1250px) and (min-height: 750px) { - .cor_content { - width: 80%; - } - #posts #date { - width: 50%; - text-align: left; - color: grey; - } - - #posts #tags { - width: 50%; - text-align: right; - color: grey; - } - .cor_menu { - width: 20%; - border: none; - box-shadow: unset; - } - .cor_topics { - position: fixed; top: 75px; right: 0px; display: unset; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - text-align: right; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; - } - .cor_footer { - position: fixed; bottom: 0; width: unset; - } -} diff --git a/src/styles/styles.css b/src/styles/styles.css deleted file mode 100644 index f941eca..0000000 --- a/src/styles/styles.css +++ /dev/null @@ -1,198 +0,0 @@ -/* - * CSS for theinternetvagabond.com - * (C)2015 Bill Niblock - * Licensed under the WTFPL [http://www.wtfpl.net] - */ - -/* General */ - -body { - background-color: #3b3b3b; -} - -a,a:visited,a:link,a:focus { - text-decoration: underline; - color: white; -} - -a:hover { - font-style: italic; -} - -/********** - * * - * Header * - * * - **********/ - -.header { - position: fixed; top: 0px; left: 0px; right: 0px; - margin: 0px; padding: 10px; z-index: 1; - background-color: #202020; - border-bottom: 1px solid #8D3FC5; - box-shadow: 0px 5px 30px -5px #8D3FC5; -} - -.title { - display: flex; - margin: 0px 25px; padding: 0px; -} - -.title div { - margin: 0px; padding: 0px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 1.2em; -} - -.title div::first-letter { - margin: 0px; padding: 0px 2px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: white; -} - -/*********** - * * - * Sidebar * - * * - ***********/ -.menu { - position: fixed; right: 0px; top: 0px; bottom:0px; - background-color: #202020; - list-style: none; - z-index: 2; -} - -.menu a:link,a:visited,a:focus { - text-decoration: none; - color: darkgrey; -} - -.menu a:hover { - font-weight: normal; - color: white; -} - -.menu li { - list-style: none; - padding: 15px 10px; - color: darkgrey; -} - -#about { - display: flex; - flex-flow: column; - padding-bottom: 1em; -} - -#about p { - line-height: 1.5em; letter-spacing: 0.1em; - text-align: left; - padding: 0em 1em; - color: white; -} - -#about h2 { - text-align: right; - padding: 10px; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#footer { - position: absolute; bottom: 1em; left: 0px; right: 0px; - text-align: center; -} - -#footer #cw { - font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - letter-spacing: 0.4em; padding: 1em 0 0.5em 0; - color: darkgrey; -} - -/********* - * Index * - ********/ - -#posts a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -#posts a:hover { - font-style: normal; - color: white; -} - -#posts #details { - text-align: center; - padding: 10px; - border-top: 1px solid darkgrey; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.4em; -} - -#posts #date { - text-align: left; - color: grey; -} - -#posts #tags { - text-align: right; - color: grey; -} - -#posts #desc { - padding: 0em 2em 2em 2em; - color: white; -} - -/******** - * * - * Blog * - * * - ********/ -#content { - margin: 5em; - line-height: 1.5em; letter-spacing: 0.1em; -} - -#content h1 { - padding: 10px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.5em; -} - -#content h1::first-letter { - margin: 0px; padding: 0px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: white; -} - -#content h2 { - text-align: left; - padding: 10px; - border-bottom: 1px solid darkgrey; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#content h3 { - text-align: right; - padding: 10px; - border-bottom: 1px solid darkgrey; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#content h4 { - text-align: center; - padding: 10px; - border-top: 1px solid darkgrey; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.4em; -} - -#content p { - padding: 0em 2em; - color: white; -} From 97eb087a78cf6e3968c4675821eb014c2d45626b Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 23:21:13 -0500 Subject: [PATCH 4/9] Styles: Finalize first draft of grid implementation - Use CSS Grid for layout - Implement some safety checking for unsupported versions - Greatly simplify stylesheets --- src/styles/corrupt_layout.css | 130 ++++++++++++++++++++++++++++++---- src/styles/corrupt_typog.css | 97 ++++++++----------------- 2 files changed, 146 insertions(+), 81 deletions(-) diff --git a/src/styles/corrupt_layout.css b/src/styles/corrupt_layout.css index 2222296..07da186 100644 --- a/src/styles/corrupt_layout.css +++ b/src/styles/corrupt_layout.css @@ -1,5 +1,4 @@ html { - font-family: sans-serif; /* Change this value to any color you want */ --hilite: #8D3FC5; } @@ -9,27 +8,128 @@ body { margin: 0; } -.cor_page { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-auto-rows: minmax(50px, auto); - grid-template-areas: - "hd hd hd hd hd ft ft" - "main main main main main ft ft"; -} -.cor_head { - grid-area: hd; +header { background-color: #202020; border-bottom: 1px solid var(--hilite); box-shadow: 0px 5px 30px -5px var(--hilite); + display: flex; + flex-flow: row nowrap; + align-content: space-between; + align-items: center; + justify-content: center; } -.cor_menu { - grid-area: ft; +footer { background-color: #202020; + border-top: 1px solid var(--hilite); + box-shadow: 0px -5px 30px -5px var(--hilite); } -.cor_content { - grid-area: main; +nav { + display: flex; + flex-flow: row wrap; + justify-content: space-around; +} + +footer #social { + display: flex; + flex-flow: row wrap; + justify-content: space-around; +} + +main { +} + +main #details { + display: flex; flex-flow: row wrap; + text-align: center; + padding: 10px; + border-top: 1px solid darkgrey; + font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.4em; +} + +main #date { + width: 100%; + text-align: center; + color: grey; +} + +main #tags { + width: 100%; + text-align: center; + color: grey; +} + +main #desc { + padding: 0em 2em 2em 2em; + color: white; +} + +@supports (display: grid) { + + .cor_page { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-auto-rows: minmax(50px, auto); + grid-template-areas: + "head head head head head head head" + ". body body body body body ." + "foot foot foot foot foot foot foot"; + } + + header { + grid-area: head; + } + + footer { + grid-area: foot; + } + + main { + grid-area: body; + } + + @media only screen and (min-width: 1250px) and (min-height: 750px) { + .cor_page { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(50px, auto); + grid-template-areas: + "head head head head head head head foot foot" + ". body body body body body . foot foot"; + } + + header { + align-items: center; + justify-content: flex-start; + padding-left: 10px; + } + + footer { + border-top: 0px; + box-shadow: unset; + } + + nav { + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + align-items: flex-end; + padding: 50px 0px; + } + + main #date { + width: 50%; + text-align: left; + color: grey; + } + + main #tags { + width: 50%; + text-align: right; + color: grey; + } + } } diff --git a/src/styles/corrupt_typog.css b/src/styles/corrupt_typog.css index a96f42b..d696774 100644 --- a/src/styles/corrupt_typog.css +++ b/src/styles/corrupt_typog.css @@ -1,4 +1,3 @@ - html { font-family: sans-serif; /* Change this value to any color you want */ @@ -6,108 +5,61 @@ html { } a,a:visited,a:link,a:focus { - text-decoration: underline; color: white; + text-decoration: none; + color: darkgrey; } a:hover { font-style: italic; + color: var(--hilite); } -.title div { - margin: 0px; padding: 0px; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; +header div { + font: 1.5vw "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: darkgrey; letter-spacing: 0.8em; } -.title div::first-letter { - margin: 0px; padding: 0px 2px; - font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; +header div::first-letter { + font: 1.75vw "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: white; } -.cor_menu a:link,a:visited,a:focus { - text-decoration: none; - color: darkgrey; -} - -.cor_menu a:hover { - font-weight: normal; - color: white; -} - -.cor_topics { - display: flex; flex-flow: row wrap; justify-content: center; +nav { font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - text-align: center; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; + color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; } -.cor_topics a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -.cor_topics a:hover { - font-style: normal; - color: white; -} - -.cor_footer #about p { +#about p { line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white; padding: 0em 1em; } -.cor_footer #about h2 { - text-align: right; - padding: 10px; - font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.6em; -} - -#posts a,a:visited,a:link,a:focus { - color: darkgrey; - text-decoration: none; -} - -#posts a:hover { - font-style: normal; - color: white; -} - -#cor_coll_title { - margin: 0px; padding-bottom: 10px; - font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; - color: darkgrey; letter-spacing: 0.5em; text-align: center; -} - -#content h1 { +h1 { padding: 10px; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: darkgrey; letter-spacing: 0.5em; } -#content h1::first-letter { - margin: 0px; padding: 0px; +h1::first-letter { font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: white; } -#content h2 { +h2 { text-align: left; padding: 10px; - border-bottom: 1px solid darkgrey; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: darkgrey; letter-spacing: 0.6em; } -#content h3 { +h3 { text-align: right; padding: 10px; - border-bottom: 1px solid darkgrey; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: darkgrey; letter-spacing: 0.6em; } -#content h4 { +h4 { text-align: center; padding: 10px; border-top: 1px solid darkgrey; @@ -115,15 +67,28 @@ a:hover { color: darkgrey; letter-spacing: 0.4em; } -#content p { +h5 { + padding: 10px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.5em; text-align: center; +} + +h6 { + padding: 10px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.5em; text-align: center; + border: 1px solid darkgrey; +} + +article p { padding: 0em 2em; color: white; } -#content ul { +ul { color: white; } -#content ol { +ol { color: white; } From 16f9c97a7fd7ce1154c1e6098c6e913797d1f0a4 Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 23:25:07 -0500 Subject: [PATCH 5/9] Grid: Update all HTML to grid rework --- _config.yml | 2 +- _includes/all_posts.html | 20 ++++----- _includes/cor_menu.html | 82 ++++++++++++++++--------------------- _includes/topics.html | 19 ++++----- _layouts/corrupt_index.html | 30 ++++++-------- _layouts/corrupt_post.html | 24 ++++++----- index.html | 21 +++++----- 7 files changed, 90 insertions(+), 108 deletions(-) diff --git a/_config.yml b/_config.yml index fddc782..96d2042 100644 --- a/_config.yml +++ b/_config.yml @@ -15,5 +15,5 @@ defaults: path: '' type: "topics" values: - layout: "corrupt_collection" + layout: "corrupt_index" permalink: "/topics/:name" diff --git a/_includes/all_posts.html b/_includes/all_posts.html index cab0b4a..e6f55b3 100644 --- a/_includes/all_posts.html +++ b/_includes/all_posts.html @@ -1,15 +1,13 @@ {% for post in site.posts %} -
-

{{ post.title }}

-
-
{{ post.pub }}
-
- {% for topic in post.topics %} - {{topic}} - {% endfor %} -
-
-
{{ post.short_desc }}
+

{{ post.title }}

+
+
{{ post.pub }}
+
+ {% for topic in post.topics %} + {{topic}} + {% endfor %}
+
+
{{ post.short_desc }}
{% endfor %} diff --git a/_includes/cor_menu.html b/_includes/cor_menu.html index 3e3a42b..17a0147 100644 --- a/_includes/cor_menu.html +++ b/_includes/cor_menu.html @@ -1,50 +1,40 @@ -
-
+
-
-
-

The Site

-

This site is a small slice of internet real-estate that I use for - occasional writing. Nothing I say is visionary or profound. I - will tend to focus on technology, gaming, and philosophy.

-

The Vagabond

-

My name is Bill Niblock. I'm a computer scientist by education, a - technologist by trade, a gamer by hobby, and a philosopher by - accident.

-
-
-
- - GitHub - -
-
- - Twitter - -
-
- - Twitch - -
-
- - Steam - -
-
-
-
+ +
+

The Site

+

This site is a small slice of internet real-estate that I use for + occasional writing. Nothing I say is visionary or profound. I + will tend to focus on technology, gaming, and philosophy.

+

The Vagabond

+

My name is Bill Niblock. I'm a computer scientist by education, a + technologist by trade, a gamer by hobby, and a philosopher by + accident.

+
+
+ + GitHub + + + Twitter + + + Twitch + + + Steam + +
+ diff --git a/_includes/topics.html b/_includes/topics.html index d62188a..6120dd8 100644 --- a/_includes/topics.html +++ b/_includes/topics.html @@ -1,16 +1,15 @@ +
{{ page.tabtitle }}
{% for post in site.posts %} {% if post.topics contains page.title %} -
-

{{ post.title }}

-
-
{{ post.pub }}
-
- {% for topic in post.topics %} - {{topic}} - {% endfor %} -
+

{{ post.title }}

+
+
{{ post.pub }}
+
+ {% for topic in post.topics %} + {{topic}} + {% endfor %}
-
{{ post.short_desc }}
+
{{ post.short_desc }}
{% endif %} {% endfor %} diff --git a/_layouts/corrupt_index.html b/_layouts/corrupt_index.html index b2ebc92..ac7eedb 100644 --- a/_layouts/corrupt_index.html +++ b/_layouts/corrupt_index.html @@ -6,27 +6,21 @@ content="Rants of a wandering techy, in search of truth, knowledge, and a decent ping." /> - - - + + +
-
-
-
The
Internet
Vagabond
-
-
-
-
- {{ content }} -
- All Posts -
-
-
+
+
The
Internet
Vagabond
+
+
+ {{ content }} +
{% include cor_menu.html %}
diff --git a/_layouts/corrupt_post.html b/_layouts/corrupt_post.html index f93715d..7b4ac0b 100644 --- a/_layouts/corrupt_post.html +++ b/_layouts/corrupt_post.html @@ -6,25 +6,27 @@ content="Rants of a wandering techy, in search of truth, knowledge, and a decent ping." /> - - + + +
-
-
-
-
The
Internet
Vagabond
-
-
-
+
+
The
Internet
Vagabond
+
+
+
{{ content }}

[ {{ page.author }} ][ {{ page.pub }} ][ {% for topic in page.topics %} {{topic}} {% endfor %}]

-
-
+ + {% include cor_menu.html %}
diff --git a/index.html b/index.html index ca7c746..2a8e0c1 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,15 @@ --- {% for post in site.posts limit:5 %} -
-

{{ post.title }}

-
-
{{ post.pub }}
-
- {% for topic in post.topics %} - {{topic}} - {% endfor %} -
-
-
{{ post.short_desc }}
+

{{ post.title }}

+
+
{{ post.pub }}
+
+ {% for topic in post.topics %} + {{topic}} + {% endfor %}
+
+
{{ post.short_desc }}
{% endfor %} +
All Posts
From 432cebd50dbc4fd2abeafbeb3f5b8f1af1957d7e Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Sat, 10 Feb 2018 23:25:33 -0500 Subject: [PATCH 6/9] Letter 4: Fix typo, random ? --- _posts/2018-01-28-letter-to-lucilius-4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2018-01-28-letter-to-lucilius-4.html b/_posts/2018-01-28-letter-to-lucilius-4.html index ca57625..0f792e1 100644 --- a/_posts/2018-01-28-letter-to-lucilius-4.html +++ b/_posts/2018-01-28-letter-to-lucilius-4.html @@ -43,7 +43,7 @@ many consulships is a great blessing. 5. Rehearse this thought every day, that you may be able to depart from life contentedly; for many men clutch and cling to life, even as those who are carried down a rushing stream - clutch and cling to briars and sharp rocks.

? + clutch and cling to briars and sharp rocks.

Most men ebb and flow in wretchedness between the fear of death and the hardships of life; they are unwilling to live, and yet they do not know how From c192009673db4d0288edea92cff1990d8c418b35 Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Mon, 19 Feb 2018 14:05:05 -0500 Subject: [PATCH 7/9] Layout: Extend content to full view height --- src/styles/corrupt_layout.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/corrupt_layout.css b/src/styles/corrupt_layout.css index 07da186..ced6354 100644 --- a/src/styles/corrupt_layout.css +++ b/src/styles/corrupt_layout.css @@ -72,7 +72,7 @@ main #desc { .cor_page { display: grid; grid-template-columns: repeat(7, 1fr); - grid-auto-rows: minmax(50px, auto); + grid-template-rows: 50px max-content; grid-template-areas: "head head head head head head head" ". body body body body body ." @@ -95,7 +95,7 @@ main #desc { .cor_page { display: grid; grid-template-columns: repeat(9, 1fr); - grid-auto-rows: minmax(50px, auto); + grid-template-rows: 50px max-content; grid-template-areas: "head head head head head head head foot foot" ". body body body body body . foot foot"; @@ -110,6 +110,7 @@ main #desc { footer { border-top: 0px; box-shadow: unset; + min-height: 100vh; } nav { From b90fbe075bab6494989bf2a7f6de067a9246d8ce Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Mon, 19 Feb 2018 14:05:33 -0500 Subject: [PATCH 8/9] Typog: Re-organize --- src/styles/corrupt_typog.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/styles/corrupt_typog.css b/src/styles/corrupt_typog.css index d696774..1bf3498 100644 --- a/src/styles/corrupt_typog.css +++ b/src/styles/corrupt_typog.css @@ -4,23 +4,28 @@ html { --hilite: #8D3FC5; } +ul,ol,p { + color: white; +} + a,a:visited,a:link,a:focus { text-decoration: none; color: darkgrey; } a:hover { - font-style: italic; + color: white; +} + +nav a:hover { color: var(--hilite); } header div { - font: 1.5vw "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: darkgrey; letter-spacing: 0.8em; } header div::first-letter { - font: 1.75vw "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: white; } @@ -82,13 +87,4 @@ h6 { article p { padding: 0em 2em; - color: white; -} - -ul { - color: white; -} - -ol { - color: white; } From 7ba77177f84a4afa53779c5d4c3391e4806342de Mon Sep 17 00:00:00 2001 From: Bill Niblock Date: Mon, 19 Feb 2018 14:28:42 -0500 Subject: [PATCH 9/9] README: Update information --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8f3bf36..0194513 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,11 @@ All stuff here is my opinion yada yada yada. ### To-Do * [ ] Update 404 page +* [ ] Research and implement nicer typography * [ ] Finalize theme, and publish it? -#### Latest Update :: 2018-01-11 -* Completely redesigned site to a new custom theme, called Corrupted. +#### Latest Technology Update :: 2018-02-19 +* Update Corrupted to use CSS Grid ### License