drewcassidy/drewcassidy.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add blog post list and placeholder blog post

Browse Source 
• add blog post list
• add css specificially for the blog and projects pages
• make layouts more modular for including different CSS on each page
• use HTML for directory pages for better use with Liquid
This commit is contained in:
Andrew Cassidy 2017-12-18 19:07:47 -08:00 committed by Andrew Cassidy
parent 809196e0a4
commit 670a2fa8be
17 changed files with 211 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
About.md
View File

@ -1,4 +1,4 @@
---
layout: page
title: About
---
---

49
Blog.html Normal file
View File

@ -0,0 +1,49 @@
---
layout: collection
title: Blog
permalink: Blog/
---
{% assign char-count = 500 %}
<ul id="post-list">
{% for post in site.posts %}
<li class="post-entry">
<a class="post-title" href="{{ post.url | prepend: site.baseurl }}">
{{ post.title }}
</a>
<table>
<tr>
<td class="post-tags">
tags:
<i>
{% if post.tags %}
{% for tag in post.tags limit: 6%}
{{ tag }}
{% endfor %}
{% else %}
none
{% endif %}
</i>
</td>
<td class="post-date">
<i>{{ post.date | date: "%b %-d, %Y" }}</i>
</td>
</tr>
</table>
<hr>
<div class="post-excerpt">
{% assign excerpt-text = post.content | markdownify %}
{% assign excerpt-length = excerpt-text | number_of_words %}
{{post.content | markdownify| truncate: char-count}}
<a class="post-see-more" href="{{ post.url | prepend: site.baseurl }}">
<i>See&nbsp;More</i>
</a>
</div>
</li>
{% endfor %}
</ul>

4
Blog.md
View File

@ -1,4 +0,0 @@
---
layout: collection
title: Blog
---

0
Projects.md → Projects.html
View File

4
_config.yml
View File

@ -10,4 +10,6 @@ exclude:
- fa/Gem*
collections:
- projects
- projects
mobile-width: "600px"

17
_includes/head.html
View File

@ -1,11 +1,8 @@
<head>
<meta charset=utf-8 />
<title> {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=utf-8 />
<title> {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/fa/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/fnoots.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="/css/sidebar.css"/>
</head>
<link rel="stylesheet" href="/fa/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/fnoots.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="/css/sidebar.css"/>

15
_layouts/collection.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<head>
{% include head.html %}
<link rel="stylesheet" href="/css/blog.css"/>
</head>
<body>
<header>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span>
{{ page.title }}
<span class="slash">/</span>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span> {{ page.title }}
<span class="slash">/</span>
</header>
<main>
@ -20,4 +23,4 @@
<!--{% include footer.html %}-->
</body>
</html>
</html>

12
_layouts/home.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<head>
{% include head.html %}
</head>
<body>
<header>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span>
{{ page.title }}
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span> {{ page.title }}
</header>
<main>
@ -19,4 +21,4 @@
<!--{% include footer.html %}-->
</body>
</html>
</html>

12
_layouts/page.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<head>
{% include head.html %}
</head>
<body>
<header>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span>
{{ page.title }}
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span> {{ page.title }}
</header>
<main>
@ -19,4 +21,4 @@
<!--{% include footer.html %}-->
</body>
</html>
</html>

14
_layouts/post.html
View File

@ -1,14 +1,16 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<head>
{% include head.html %}
</head>
<body>
<header>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span>
<a href="/" id="name"><b>Andrew Cassidy</b></a>
<span class="slash">/</span>
<a href="/Blog" class="dir">Blog</a>
<span class="slash">/</span>
{{ page.title }}
<span class="slash">/</span> {{ page.title }}
</header>
<main>
@ -21,4 +23,4 @@
<!--{% include footer.html %}-->
</body>
</html>
</html>

14
_posts/2017-12-05-hello-world.md Normal file
View File

@ -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?

4
_sass/_fonts.scss
View File

@ -8,4 +8,6 @@ $title-text: $foreground;
$title-font: 'Barlow', sans-serif;
$body-text: $foreground;
$body-font: 'Open Sans', sans-serif;
$body-text-subtle: $subtle;
$body-font: 'Open Sans', sans-serif;
$body-size: 18px;

3
_sass/_mobile.scss
View File

@ -1,3 +0,0 @@
$mobile-width: 600px;
$mobile-header-height: 70px;

51
css/blog.scss Normal file
View File

@ -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;
}
}
}

108
css/sidebar.scss
View File

@ -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;
}
}
}

55
css/style.scss
View File

@ -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;
}
}

0
index.md → index.html
View File