From 670a2fa8bef70ee9317021ac98937a56aa9b2d7b Mon Sep 17 00:00:00 2001 From: drewcassidy Date: Mon, 18 Dec 2017 19:07:47 -0800 Subject: [PATCH] =?UTF-8?q?Add=20blog=20post=20list=20and=20placeholder=20?= =?UTF-8?q?blog=20post=20=E2=80=A2=20add=20blog=20post=20list=20=E2=80=A2?= =?UTF-8?q?=20add=20css=20specificially=20for=20the=20blog=20and=20project?= =?UTF-8?q?s=20pages=20=E2=80=A2=20make=20layouts=20more=20modular=20for?= =?UTF-8?q?=20including=20different=20CSS=20on=20each=20page=20=E2=80=A2?= =?UTF-8?q?=20use=20HTML=20for=20directory=20pages=20for=20better=20use=20?= =?UTF-8?q?with=20Liquid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- About.md | 2 +- Blog.html | 49 ++++++++++++++ Blog.md | 4 -- Projects.md => Projects.html | 0 _config.yml | 4 +- _includes/head.html | 17 ++--- _layouts/collection.html | 15 +++-- _layouts/home.html | 12 ++-- _layouts/page.html | 12 ++-- _layouts/post.html | 14 ++-- _posts/2017-12-05-hello-world.md | 14 ++++ _sass/_fonts.scss | 4 +- _sass/_mobile.scss | 3 - css/blog.scss | 51 +++++++++++++++ css/sidebar.scss | 108 +++++++++---------------------- css/style.scss | 55 ++++++---------- index.md => index.html | 0 17 files changed, 211 insertions(+), 153 deletions(-) create mode 100644 Blog.html delete mode 100644 Blog.md rename Projects.md => Projects.html (100%) create mode 100644 _posts/2017-12-05-hello-world.md delete mode 100644 _sass/_mobile.scss create mode 100644 css/blog.scss rename index.md => index.html (100%) diff --git a/About.md b/About.md index 00264a7..ad29484 100644 --- a/About.md +++ b/About.md @@ -1,4 +1,4 @@ --- layout: page title: About ---- \ No newline at end of file +--- diff --git a/Blog.html b/Blog.html new file mode 100644 index 0000000..37c3e60 --- /dev/null +++ b/Blog.html @@ -0,0 +1,49 @@ +--- +layout: collection +title: Blog +permalink: Blog/ +--- + +{% assign char-count = 500 %} + + diff --git a/Blog.md b/Blog.md deleted file mode 100644 index 795cc1f..0000000 --- a/Blog.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: collection -title: Blog ---- \ No newline at end of file diff --git a/Projects.md b/Projects.html similarity index 100% rename from Projects.md rename to Projects.html diff --git a/_config.yml b/_config.yml index 38cb5cd..458bb67 100644 --- a/_config.yml +++ b/_config.yml @@ -10,4 +10,6 @@ exclude: - fa/Gem* collections: - - projects \ No newline at end of file + - projects + +mobile-width: "600px" diff --git a/_includes/head.html b/_includes/head.html index 4e30b42..78e9ef2 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,11 +1,8 @@ - - - {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy - + + {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy + - - - - - - \ No newline at end of file + + + + diff --git a/_layouts/collection.html b/_layouts/collection.html index 2c7b99a..f4ec814 100644 --- a/_layouts/collection.html +++ b/_layouts/collection.html @@ -1,13 +1,16 @@ -{% include head.html %} + + + {% include head.html %} + +
- Andrew Cassidy - / - {{ page.title }} - / + Andrew Cassidy + / {{ page.title }} + /
@@ -20,4 +23,4 @@ - \ No newline at end of file + diff --git a/_layouts/home.html b/_layouts/home.html index 015ab6e..14fb7d4 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,12 +1,14 @@ -{% include head.html %} + + + {% include head.html %} +
- Andrew Cassidy - / - {{ page.title }} + Andrew Cassidy + / {{ page.title }}
@@ -19,4 +21,4 @@ - \ No newline at end of file + diff --git a/_layouts/page.html b/_layouts/page.html index 015ab6e..14fb7d4 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,12 +1,14 @@ -{% include head.html %} + + + {% include head.html %} +
- Andrew Cassidy - / - {{ page.title }} + Andrew Cassidy + / {{ page.title }}
@@ -19,4 +21,4 @@ - \ No newline at end of file + diff --git a/_layouts/post.html b/_layouts/post.html index 9ca7603..096234e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,14 +1,16 @@ -{% include head.html %} + + + {% include head.html %} +
- Andrew Cassidy - / + Andrew Cassidy + / Blog - / - {{ page.title }} + / {{ page.title }}
@@ -21,4 +23,4 @@ - \ No newline at end of file + diff --git a/_posts/2017-12-05-hello-world.md b/_posts/2017-12-05-hello-world.md new file mode 100644 index 0000000..bee0e23 --- /dev/null +++ b/_posts/2017-12-05-hello-world.md @@ -0,0 +1,14 @@ +--- +layout: post +title: foobarbizbaz foo barbizbaz foo barbiz baz foobar bizbaz foobar biz baz foobar bizbaz foobarbiz baz +tags: foo bar biz baz +--- + +Hello World! +The ash of stellar alchemy? Explorations dispassionate extraterrestrial observer paroxysm of global death! Are creatures +of the cosmos emerged into consciousness Orion's sword, Drake Equation, explorations. Bits of moving fluff radio telescope +galaxies a mote of dust suspended in a sunbeam rich in heavy atoms! Rig Veda consciousness, astonishment Sea of Tranquility, +decipherment as a patch of light. Rich in mystery. Science Vangelis, tesseract light years. Concept of the number one +Vangelis Flatland. Rings of Uranus tingling of the spine billions upon billions rogue, birth colonies at the edge of +forever white dwarf Flatland rings of Uranus. Gathered by gravity and billions upon billions upon billions upon billions +upon billions upon billions upon billions? diff --git a/_sass/_fonts.scss b/_sass/_fonts.scss index 41b6b6b..68e3853 100644 --- a/_sass/_fonts.scss +++ b/_sass/_fonts.scss @@ -8,4 +8,6 @@ $title-text: $foreground; $title-font: 'Barlow', sans-serif; $body-text: $foreground; -$body-font: 'Open Sans', sans-serif; \ No newline at end of file +$body-text-subtle: $subtle; +$body-font: 'Open Sans', sans-serif; +$body-size: 18px; diff --git a/_sass/_mobile.scss b/_sass/_mobile.scss deleted file mode 100644 index cb75112..0000000 --- a/_sass/_mobile.scss +++ /dev/null @@ -1,3 +0,0 @@ -$mobile-width: 600px; - -$mobile-header-height: 70px; \ No newline at end of file diff --git a/css/blog.scss b/css/blog.scss new file mode 100644 index 0000000..7ed2654 --- /dev/null +++ b/css/blog.scss @@ -0,0 +1,51 @@ +--- +--- +@import 'util'; +@import 'colors'; +@import 'fonts'; + +#post-list { + list-style-type: none; + padding: { + left: 0px; + } + + .post-entry { + .post-title { + color: $body-text; + text-decoration: none; + font-size: $body-size + 8; + font-weight: bold; + + } + .post-title:hover { + text-decoration: underline; + } + + .post-date { + text-align: right; + font-size: $body-size - 4; + } + + .post-tags { + text-align: left; + font-size: $body-size - 4; + } + + .post-see-more { + font-style: italic; + color: $body-text-subtle; + } + .post-see-more:hover { + color: $body-text; + } + + table { + width: 100%; + } + + hr { + margin: 5px; + } + } +} diff --git a/css/sidebar.scss b/css/sidebar.scss index 7ec3582..6517ea1 100644 --- a/css/sidebar.scss +++ b/css/sidebar.scss @@ -3,10 +3,9 @@ @import 'util'; @import 'colors'; @import 'fonts'; -@import 'mobile'; - $flag-shadow: rgba(black, 0.2); $animate-time: 0.03s; +$mobile-width: {{ site.mobile-width }}; #sidebar { display: flex; @@ -27,47 +26,37 @@ $animate-time: 0.03s; margin-block-end: 0; list-style-type: none; line-height: 0; - margin: 0; padding: { left: 0px; } } - #navLinks { display: block; padding: { left: 10px; } - color: $subtle; font-family: $sidebar-font; - - a{ + a { color: $sidebar-link-text; text-decoration: none; - @include prefix-group(( - transition-duration: $animate-time, - transition-property: color, - ), webkit moz o); - + @include prefix-group(( transition-duration: $animate-time, transition-property: color, ), webkit moz o); } - - a:hover{ + a:hover { color: $sidebar-link-hover; text-decoration: underline; } } -.flagButton, .flagButton::after, .flagPoint, .flagPoint::after { - @include prefix-group(( - transition-duration: $animate-time, - transition-timing-function: ease-out - ), webkit moz o); +.flagButton, +.flagButton::after, +.flagPoint, +.flagPoint::after { + @include prefix-group(( transition-duration: $animate-time, transition-timing-function: ease-out), webkit moz o); } - .flagText { font: { family: $sidebar-font; @@ -75,150 +64,124 @@ $animate-time: 0.03s; weight: 600; } position: relative; - line-height: normal; text-align: center; - float: right; width: 160px; top:12px; - color: $sidebar-text; } -@media screen and (min-width: $mobile-width) { +@media screen and (min-width: $mobile-width + 1) { .flag { display: inline-block; position: relative; left: -3px; - text-align: center; z-index: 1; - padding: { top: 5px; bottom: 5px; left: 0px; } - .flagButton { display: block; float: left; - height: 50px; - border-radius: 0 5px 5px 0; - @include prefix(transition-property, width, webkit moz o); @include prefix(transition-property, border-radius, webkit moz o); } - - .flagButton::after{ + .flagButton::after { z-index: -1; content: " "; display: block; position: relative; left: 3px; top: 4px; - height: 50px; width: 160px; background-color: $flag-shadow; border-radius: 0 5px 5px 0; - @include prefix(transition-property, width, webkit moz o); @include prefix(transition-property, border-radius, webkit moz o); } - - .flagPoint{ + .flagPoint { position: absolute; - width: 0; + width: 0; height: 0; left: 160px; - border-top: 25px solid transparent; + border-top: 25px solid transparent; border-bottom: 25px solid transparent; - border-left-width: 0px; + border-left-width: 0px; border-left-style: solid; background-color: transparent; - @include prefix(transition-property, left, webkit moz o); @include prefix(transition-property, border-left-width, webkit moz o); } - .flagPoint.blue { border-left-color: $blue; } - .flagPoint.orange { border-left-color: $orange; } - .flagPoint.green { border-left-color: $green; } - .flagPoint.magenta { border-left-color: $magenta; } - - .flagPoint::after{ + .flagPoint::after { position: absolute; - width: 0; + width: 0; height: 0; - border-top: 25px solid transparent; + border-top: 25px solid transparent; border-bottom: 25px solid transparent; - border-left: 0px solid $flag-shadow; + border-left: 0px solid $flag-shadow; z-index: -1; content: " "; left: -20 + 3px; top: -25 + 4px; - @include prefix(transition-property, border-left-width, webkit moz o); } - - .flagFold{ + .flagFold { display: block; position: absolute; z-index: -100; - left:0px; - top:55px; + left: 0px; + top: 55px; width: 3px; height: 3px; mask-image: url('../svg/fold.svg'); -webkit-mask-image: url('../svg/fold.svg'); } } - .flag:hover { - .flagButton { width: 170px; border-radius: 0; } - - .flagButton::after{ + .flagButton::after { width: 170px; border-radius: 0; } - .flagPoint { left: 170px; border-left-width: 20px; } - .flagPoint::after{ + .flagPoint::after { border-left-width: 20px; } } } - + @media screen and (max-width: $mobile-width) { - #sidebar{ + #sidebar { display: flex; justify-content: space-between; top: 0; width: 100%; } - #navFlags { display: flex; flex-wrap: wrap; @@ -226,29 +189,23 @@ $animate-time: 0.03s; padding: { left: 15px; right: 15px; - } - + } li { flex-grow: 1; flex-shrink: 0; } } - #navLinks { display: none; } - .flag { display: block; - margin: 5px; - - //text-decoration: none; - - .flagPoint, .flagFold { + margin: 5px; //text-decoration: none; + .flagPoint, + .flagFold { display: none; } - - .flagButton{ + .flagButton { border-radius: 5px; display: block; height: 50px; @@ -263,8 +220,7 @@ $animate-time: 0.03s; width: 100%; } } - .flag:hover a { text-decoration: underline; } -} \ No newline at end of file +} diff --git a/css/style.scss b/css/style.scss index d4da7b5..708e98c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -3,8 +3,8 @@ @import 'util'; @import 'colors'; @import 'fonts'; -@import 'mobile'; - +$mobile-header-height: 70px; +$mobile-width: {{ site.mobile-width }}; .blue { fill: $blue; @@ -46,19 +46,19 @@ background-color: $dark-magenta; } - ::selection { color: white; - background: $orange; /* WebKit/Blink Browsers */ + background: $orange; + /* WebKit/Blink Browsers */ } ::-moz-selection { color: white; - background: $orange; /* WebKit/Blink Browsers */ + background: $orange; + /* WebKit/Blink Browsers */ } - -html{ +html { margin: 0; background-color: $margin; } @@ -67,43 +67,33 @@ body { background-color: $background; max-width: 800px; z-index: 0; - margin-left: auto; margin-right: auto; margin-top: 0; height: 100%; - - - @media screen and (min-width: $mobile-width){ + @media screen and (min-width: $mobile-width) { box-shadow: 0 0 4px 5px $shadow; -moz-box-shadow: 0 0 4px 5px $shadow; - -webkit-box-shadow: 0 0 4px 5px $shadow; + -webkit-box-shadow: 0 0 4px 5px $shadow; } } - // HEADER - - header { - margin:0; + margin: 0; padding: 10px; font-family: $title-font; color: $title-text; font-weight: normal; font-size: 28px; - a { color: inherit; text-decoration: none; } - a:hover { color: inherit; text-decoration: underline; } - - .slash { display: inline-block; vertical-align: -10%; @@ -111,12 +101,19 @@ header { size: 36px; } } - } + main { display: flex; } +hr { + border-width: 0; + height: 1px; + background-color: $body-text-subtle; +} + + #content { padding: { right: 20px; @@ -126,7 +123,6 @@ main { font-family: $body-font; color: $body-text; line-height: 1.5em; - p { margin: { top: 0; @@ -135,23 +131,18 @@ main { } } - -@media screen and (max-width: $mobile-width){ +@media screen and (max-width: $mobile-width) { header { top: 0; left: 0; right: 0; z-index: 1; background-color: darken($background, 5%); - - border-bottom: 1px solid $subtle; padding: { top: 0; bottom: 0; } - - #title { font-size: $mobile-header-height * 0.5; text-align: center; @@ -159,26 +150,20 @@ main { top: 0; bottom: 5px; } - #path { display: none; } - #page { display: block; } - } } - main { flex-direction: column; } } - - footer { font-size: 1em; text-align: center; -} \ No newline at end of file +} diff --git a/index.md b/index.html similarity index 100% rename from index.md rename to index.html