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
Download Patch File Download Diff File Expand all files Collapse all files

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