Add blog post list and placeholder blog post
• 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:
parent
809196e0a4
commit
670a2fa8be
2
About.md
2
About.md
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
layout: page
|
layout: page
|
||||||
title: About
|
title: About
|
||||||
---
|
---
|
||||||
|
|
49
Blog.html
Normal file
49
Blog.html
Normal 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 More</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
|
@ -10,4 +10,6 @@ exclude:
|
||||||
- fa/Gem*
|
- fa/Gem*
|
||||||
|
|
||||||
collections:
|
collections:
|
||||||
- projects
|
- projects
|
||||||
|
|
||||||
|
mobile-width: "600px"
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
<head>
|
<meta charset=utf-8 />
|
||||||
<meta charset=utf-8 />
|
<title> {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy</title>
|
||||||
<title> {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/fa/css/font-awesome.min.css">
|
<link rel="stylesheet" href="/fa/css/font-awesome.min.css">
|
||||||
<link rel="stylesheet" href="/css/fnoots.css"/>
|
<link rel="stylesheet" href="/css/fnoots.css"/>
|
||||||
<link rel="stylesheet" href="/css/style.css"/>
|
<link rel="stylesheet" href="/css/style.css"/>
|
||||||
<link rel="stylesheet" href="/css/sidebar.css"/>
|
<link rel="stylesheet" href="/css/sidebar.css"/>
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
|
||||||
|
<head>
|
||||||
|
{% include head.html %}
|
||||||
|
<link rel="stylesheet" href="/css/blog.css"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
||||||
<span class="slash">/</span>
|
<span class="slash">/</span> {{ page.title }}
|
||||||
{{ page.title }}
|
<span class="slash">/</span>
|
||||||
<span class="slash">/</span>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
@ -20,4 +23,4 @@
|
||||||
<!--{% include footer.html %}-->
|
<!--{% include footer.html %}-->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
|
||||||
|
<head>
|
||||||
|
{% include head.html %}
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
||||||
<span class="slash">/</span>
|
<span class="slash">/</span> {{ page.title }}
|
||||||
{{ page.title }}
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
@ -19,4 +21,4 @@
|
||||||
<!--{% include footer.html %}-->
|
<!--{% include footer.html %}-->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
|
||||||
|
<head>
|
||||||
|
{% include head.html %}
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
||||||
<span class="slash">/</span>
|
<span class="slash">/</span> {{ page.title }}
|
||||||
{{ page.title }}
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
@ -19,4 +21,4 @@
|
||||||
<!--{% include footer.html %}-->
|
<!--{% include footer.html %}-->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
|
||||||
|
<head>
|
||||||
|
{% include head.html %}
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
<a href="/" id="name"><b>Andrew Cassidy</b></a>
|
||||||
<span class="slash">/</span>
|
<span class="slash">/</span>
|
||||||
<a href="/Blog" class="dir">Blog</a>
|
<a href="/Blog" class="dir">Blog</a>
|
||||||
<span class="slash">/</span>
|
<span class="slash">/</span> {{ page.title }}
|
||||||
{{ page.title }}
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
@ -21,4 +23,4 @@
|
||||||
<!--{% include footer.html %}-->
|
<!--{% include footer.html %}-->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
14
_posts/2017-12-05-hello-world.md
Normal file
14
_posts/2017-12-05-hello-world.md
Normal 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?
|
|
@ -8,4 +8,6 @@ $title-text: $foreground;
|
||||||
$title-font: 'Barlow', sans-serif;
|
$title-font: 'Barlow', sans-serif;
|
||||||
|
|
||||||
$body-text: $foreground;
|
$body-text: $foreground;
|
||||||
$body-font: 'Open Sans', sans-serif;
|
$body-text-subtle: $subtle;
|
||||||
|
$body-font: 'Open Sans', sans-serif;
|
||||||
|
$body-size: 18px;
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
$mobile-width: 600px;
|
|
||||||
|
|
||||||
$mobile-header-height: 70px;
|
|
51
css/blog.scss
Normal file
51
css/blog.scss
Normal 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
108
css/sidebar.scss
|
@ -3,10 +3,9 @@
|
||||||
@import 'util';
|
@import 'util';
|
||||||
@import 'colors';
|
@import 'colors';
|
||||||
@import 'fonts';
|
@import 'fonts';
|
||||||
@import 'mobile';
|
|
||||||
|
|
||||||
$flag-shadow: rgba(black, 0.2);
|
$flag-shadow: rgba(black, 0.2);
|
||||||
$animate-time: 0.03s;
|
$animate-time: 0.03s;
|
||||||
|
$mobile-width: {{ site.mobile-width }};
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -27,47 +26,37 @@ $animate-time: 0.03s;
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: {
|
padding: {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#navLinks {
|
#navLinks {
|
||||||
display: block;
|
display: block;
|
||||||
padding: {
|
padding: {
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
color: $subtle;
|
color: $subtle;
|
||||||
font-family: $sidebar-font;
|
font-family: $sidebar-font;
|
||||||
|
a {
|
||||||
a{
|
|
||||||
color: $sidebar-link-text;
|
color: $sidebar-link-text;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@include prefix-group((
|
@include prefix-group(( transition-duration: $animate-time, transition-property: color, ), webkit moz o);
|
||||||
transition-duration: $animate-time,
|
|
||||||
transition-property: color,
|
|
||||||
), webkit moz o);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
a:hover {
|
||||||
a:hover{
|
|
||||||
color: $sidebar-link-hover;
|
color: $sidebar-link-hover;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagButton, .flagButton::after, .flagPoint, .flagPoint::after {
|
.flagButton,
|
||||||
@include prefix-group((
|
.flagButton::after,
|
||||||
transition-duration: $animate-time,
|
.flagPoint,
|
||||||
transition-timing-function: ease-out
|
.flagPoint::after {
|
||||||
), webkit moz o);
|
@include prefix-group(( transition-duration: $animate-time, transition-timing-function: ease-out), webkit moz o);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.flagText {
|
.flagText {
|
||||||
font: {
|
font: {
|
||||||
family: $sidebar-font;
|
family: $sidebar-font;
|
||||||
|
@ -75,150 +64,124 @@ $animate-time: 0.03s;
|
||||||
weight: 600;
|
weight: 600;
|
||||||
}
|
}
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
float: right;
|
float: right;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
top:12px;
|
top:12px;
|
||||||
|
|
||||||
color: $sidebar-text;
|
color: $sidebar-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: $mobile-width) {
|
@media screen and (min-width: $mobile-width + 1) {
|
||||||
.flag {
|
.flag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -3px;
|
left: -3px;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
padding: {
|
padding: {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagButton {
|
.flagButton {
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 0 5px 5px 0;
|
||||||
|
|
||||||
@include prefix(transition-property, width, webkit moz o);
|
@include prefix(transition-property, width, webkit moz o);
|
||||||
@include prefix(transition-property, border-radius, webkit moz o);
|
@include prefix(transition-property, border-radius, webkit moz o);
|
||||||
}
|
}
|
||||||
|
.flagButton::after {
|
||||||
.flagButton::after{
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
content: " ";
|
content: " ";
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
background-color: $flag-shadow;
|
background-color: $flag-shadow;
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 0 5px 5px 0;
|
||||||
|
|
||||||
@include prefix(transition-property, width, webkit moz o);
|
@include prefix(transition-property, width, webkit moz o);
|
||||||
@include prefix(transition-property, border-radius, webkit moz o);
|
@include prefix(transition-property, border-radius, webkit moz o);
|
||||||
}
|
}
|
||||||
|
.flagPoint {
|
||||||
.flagPoint{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
border-top: 25px solid transparent;
|
border-top: 25px solid transparent;
|
||||||
border-bottom: 25px solid transparent;
|
border-bottom: 25px solid transparent;
|
||||||
border-left-width: 0px;
|
border-left-width: 0px;
|
||||||
border-left-style: solid;
|
border-left-style: solid;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
@include prefix(transition-property, left, webkit moz o);
|
@include prefix(transition-property, left, webkit moz o);
|
||||||
@include prefix(transition-property, border-left-width, webkit moz o);
|
@include prefix(transition-property, border-left-width, webkit moz o);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagPoint.blue {
|
.flagPoint.blue {
|
||||||
border-left-color: $blue;
|
border-left-color: $blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagPoint.orange {
|
.flagPoint.orange {
|
||||||
border-left-color: $orange;
|
border-left-color: $orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagPoint.green {
|
.flagPoint.green {
|
||||||
border-left-color: $green;
|
border-left-color: $green;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagPoint.magenta {
|
.flagPoint.magenta {
|
||||||
border-left-color: $magenta;
|
border-left-color: $magenta;
|
||||||
}
|
}
|
||||||
|
.flagPoint::after {
|
||||||
.flagPoint::after{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: 25px solid transparent;
|
border-top: 25px solid transparent;
|
||||||
border-bottom: 25px solid transparent;
|
border-bottom: 25px solid transparent;
|
||||||
border-left: 0px solid $flag-shadow;
|
border-left: 0px solid $flag-shadow;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
content: " ";
|
content: " ";
|
||||||
left: -20 + 3px;
|
left: -20 + 3px;
|
||||||
top: -25 + 4px;
|
top: -25 + 4px;
|
||||||
|
|
||||||
@include prefix(transition-property, border-left-width, webkit moz o);
|
@include prefix(transition-property, border-left-width, webkit moz o);
|
||||||
}
|
}
|
||||||
|
.flagFold {
|
||||||
.flagFold{
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -100;
|
z-index: -100;
|
||||||
left:0px;
|
left: 0px;
|
||||||
top:55px;
|
top: 55px;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
mask-image: url('../svg/fold.svg');
|
mask-image: url('../svg/fold.svg');
|
||||||
-webkit-mask-image: url('../svg/fold.svg');
|
-webkit-mask-image: url('../svg/fold.svg');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag:hover {
|
.flag:hover {
|
||||||
|
|
||||||
.flagButton {
|
.flagButton {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
.flagButton::after {
|
||||||
.flagButton::after{
|
|
||||||
width: 170px;
|
width: 170px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flagPoint {
|
.flagPoint {
|
||||||
left: 170px;
|
left: 170px;
|
||||||
border-left-width: 20px;
|
border-left-width: 20px;
|
||||||
}
|
}
|
||||||
.flagPoint::after{
|
.flagPoint::after {
|
||||||
border-left-width: 20px;
|
border-left-width: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $mobile-width) {
|
@media screen and (max-width: $mobile-width) {
|
||||||
#sidebar{
|
#sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navFlags {
|
#navFlags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -226,29 +189,23 @@ $animate-time: 0.03s;
|
||||||
padding: {
|
padding: {
|
||||||
left: 15px;
|
left: 15px;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#navLinks {
|
#navLinks {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag {
|
.flag {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 5px;
|
margin: 5px; //text-decoration: none;
|
||||||
|
.flagPoint,
|
||||||
//text-decoration: none;
|
.flagFold {
|
||||||
|
|
||||||
.flagPoint, .flagFold {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.flagButton {
|
||||||
.flagButton{
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: block;
|
display: block;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -263,8 +220,7 @@ $animate-time: 0.03s;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag:hover a {
|
.flag:hover a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
@import 'util';
|
@import 'util';
|
||||||
@import 'colors';
|
@import 'colors';
|
||||||
@import 'fonts';
|
@import 'fonts';
|
||||||
@import 'mobile';
|
$mobile-header-height: 70px;
|
||||||
|
$mobile-width: {{ site.mobile-width }};
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
fill: $blue;
|
fill: $blue;
|
||||||
|
@ -46,19 +46,19 @@
|
||||||
background-color: $dark-magenta;
|
background-color: $dark-magenta;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: white;
|
color: white;
|
||||||
background: $orange; /* WebKit/Blink Browsers */
|
background: $orange;
|
||||||
|
/* WebKit/Blink Browsers */
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
color: white;
|
color: white;
|
||||||
background: $orange; /* WebKit/Blink Browsers */
|
background: $orange;
|
||||||
|
/* WebKit/Blink Browsers */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
html{
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $margin;
|
background-color: $margin;
|
||||||
}
|
}
|
||||||
|
@ -67,43 +67,33 @@ body {
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@media screen and (min-width: $mobile-width) {
|
||||||
|
|
||||||
@media screen and (min-width: $mobile-width){
|
|
||||||
box-shadow: 0 0 4px 5px $shadow;
|
box-shadow: 0 0 4px 5px $shadow;
|
||||||
-moz-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
|
||||||
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin:0;
|
margin: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-family: $title-font;
|
font-family: $title-font;
|
||||||
color: $title-text;
|
color: $title-text;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.slash {
|
.slash {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: -10%;
|
vertical-align: -10%;
|
||||||
|
@ -111,12 +101,19 @@ header {
|
||||||
size: 36px;
|
size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-width: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: $body-text-subtle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
padding: {
|
padding: {
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
@ -126,7 +123,6 @@ main {
|
||||||
font-family: $body-font;
|
font-family: $body-font;
|
||||||
color: $body-text;
|
color: $body-text;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: {
|
margin: {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -135,23 +131,18 @@ main {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-width) {
|
||||||
@media screen and (max-width: $mobile-width){
|
|
||||||
header {
|
header {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background-color: darken($background, 5%);
|
background-color: darken($background, 5%);
|
||||||
|
|
||||||
|
|
||||||
border-bottom: 1px solid $subtle;
|
border-bottom: 1px solid $subtle;
|
||||||
padding: {
|
padding: {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
font-size: $mobile-header-height * 0.5;
|
font-size: $mobile-header-height * 0.5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -159,26 +150,20 @@ main {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#path {
|
#path {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user