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 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_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/_layouts/corrupt_index.html b/_layouts/corrupt_index.html index 1f9ee61..ac7eedb 100644 --- a/_layouts/corrupt_index.html +++ b/_layouts/corrupt_index.html @@ -6,24 +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/_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 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
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/corrupt_layout.css b/src/styles/corrupt_layout.css new file mode 100644 index 0000000..ced6354 --- /dev/null +++ b/src/styles/corrupt_layout.css @@ -0,0 +1,136 @@ +html { + /* Change this value to any color you want */ + --hilite: #8D3FC5; +} + +body { + background-color: #3B3B3B; + margin: 0; +} + + +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; +} + +footer { + background-color: #202020; + border-top: 1px solid var(--hilite); + box-shadow: 0px -5px 30px -5px var(--hilite); +} + +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-template-rows: 50px max-content; + 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-template-rows: 50px max-content; + 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; + min-height: 100vh; + } + + 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 new file mode 100644 index 0000000..1bf3498 --- /dev/null +++ b/src/styles/corrupt_typog.css @@ -0,0 +1,90 @@ +html { + font-family: sans-serif; + /* Change this value to any color you want */ + --hilite: #8D3FC5; +} + +ul,ol,p { + color: white; +} + +a,a:visited,a:link,a:focus { + text-decoration: none; + color: darkgrey; +} + +a:hover { + color: white; +} + +nav a:hover { + color: var(--hilite); +} + +header div { + color: darkgrey; letter-spacing: 0.8em; +} + +header div::first-letter { + color: white; +} + +nav { + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; +} + +#about p { + line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white; + padding: 0em 1em; +} + +h1 { + padding: 10px; + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.5em; +} + +h1::first-letter { + font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: white; +} + +h2 { + text-align: left; + padding: 10px; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; +} + +h3 { + text-align: right; + padding: 10px; + font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; + color: darkgrey; letter-spacing: 0.6em; +} + +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; +} + +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; +} 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; -}