More of the basic scaffolding for the site. All the basic stuff is in place now.
This commit is contained in:
parent
8a4d108661
commit
fddbf5f532
10
_pages/01_about.md
Normal file
10
_pages/01_about.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: About
|
||||||
|
permalink: /about/
|
||||||
|
---
|
||||||
|
|
||||||
|
About content goes here.
|
||||||
|
|
||||||
|
* A list item
|
||||||
|
* Another list item
|
||||||
9
_pages/02_contact.md
Normal file
9
_pages/02_contact.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: Contact
|
||||||
|
permalink: /contact/
|
||||||
|
---
|
||||||
|
|
||||||
|
Contact content goes here.
|
||||||
|
|
||||||
|
My e-mail is [email@something.com](mailto:email@something.com).
|
||||||
222
_sass/_base.scss
222
_sass/_base.scss
|
|
@ -1,206 +1,18 @@
|
||||||
/**
|
$content-width: 800px;
|
||||||
* Reset some basic elements
|
$main: #19CCAA;
|
||||||
*/
|
$font-style: 'Open Sans', sans-serif;
|
||||||
body, h1, h2, h3, h4, h5, h6,
|
$font-color: #262626;
|
||||||
p, blockquote, pre, hr,
|
$link-color: #425469;
|
||||||
dl, dd, ol, ul, figure {
|
$link-hover-color: $main;
|
||||||
margin: 0;
|
$heading-font: 'Muli', sans-serif;
|
||||||
padding: 0;
|
$heading-font-color: #425469;
|
||||||
}
|
$light: #E7EDF4;
|
||||||
|
$header: #1D1425;
|
||||||
|
|
||||||
|
*,
|
||||||
/**
|
*::before,
|
||||||
* Basic styling
|
*::after {
|
||||||
*/
|
-webkit-box-sizing: border-box;
|
||||||
body {
|
-moz-box-sizing: border-box;
|
||||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
|
box-sizing: border-box;
|
||||||
color: $text-color;
|
|
||||||
background-color: $background-color;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
-webkit-font-feature-settings: "kern" 1;
|
|
||||||
-moz-font-feature-settings: "kern" 1;
|
|
||||||
-o-font-feature-settings: "kern" 1;
|
|
||||||
font-feature-settings: "kern" 1;
|
|
||||||
font-kerning: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set `margin-bottom` to maintain vertical rhythm
|
|
||||||
*/
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
|
||||||
p, blockquote, pre,
|
|
||||||
ul, ol, dl, figure,
|
|
||||||
%vertical-rhythm {
|
|
||||||
margin-bottom: $spacing-unit / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Images
|
|
||||||
*/
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Figures
|
|
||||||
*/
|
|
||||||
figure > img {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption {
|
|
||||||
font-size: $small-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Lists
|
|
||||||
*/
|
|
||||||
ul, ol {
|
|
||||||
margin-left: $spacing-unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
> ul,
|
|
||||||
> ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Headings
|
|
||||||
*/
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: $base-font-weight;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Links
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
color: $brand-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: darken($brand-color, 15%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Blockquotes
|
|
||||||
*/
|
|
||||||
blockquote {
|
|
||||||
color: $grey-color;
|
|
||||||
border-left: 4px solid $grey-color-light;
|
|
||||||
padding-left: $spacing-unit / 2;
|
|
||||||
font-size: 18px;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
> :last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Code formatting
|
|
||||||
*/
|
|
||||||
pre,
|
|
||||||
code {
|
|
||||||
font-size: 15px;
|
|
||||||
border: 1px solid $grey-color-light;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: #eef;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
padding: 1px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
padding: 8px 12px;
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
> code {
|
|
||||||
border: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper
|
|
||||||
*/
|
|
||||||
.wrapper {
|
|
||||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
|
||||||
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
padding-right: $spacing-unit;
|
|
||||||
padding-left: $spacing-unit;
|
|
||||||
@extend %clearfix;
|
|
||||||
|
|
||||||
@include media-query($on-laptop) {
|
|
||||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
|
||||||
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
|
||||||
padding-right: $spacing-unit / 2;
|
|
||||||
padding-left: $spacing-unit / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clearfix
|
|
||||||
*/
|
|
||||||
%clearfix {
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Icons
|
|
||||||
*/
|
|
||||||
.icon {
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
path {
|
|
||||||
fill: $grey-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,242 +1,111 @@
|
||||||
/**
|
body {
|
||||||
* Site header
|
margin: 0;
|
||||||
*/
|
color: $font-color;
|
||||||
.site-header {
|
font-family: $font-style;
|
||||||
border-top: 5px solid $grey-color-dark;
|
font-size: 1.1em;
|
||||||
border-bottom: 1px solid $grey-color-light;
|
line-height: 1.6;
|
||||||
min-height: 56px;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
// Positioning context for the mobile navigation icon
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
h1,
|
||||||
.site-title {
|
h2,
|
||||||
font-size: 26px;
|
h3 {
|
||||||
font-weight: 300;
|
font-weight: 600;
|
||||||
line-height: 56px;
|
color: $heading-font-color;
|
||||||
letter-spacing: -1px;
|
font-family: $heading-font;
|
||||||
margin-bottom: 0;
|
line-height: 1.5;
|
||||||
float: left;
|
}
|
||||||
|
h1 {
|
||||||
&,
|
color: $main;
|
||||||
&:visited {
|
font-size: 2.5em;
|
||||||
color: $grey-color-dark;
|
a,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
h2 {
|
||||||
.site-nav {
|
font-size: 2em;
|
||||||
float: right;
|
}
|
||||||
line-height: 56px;
|
a,
|
||||||
|
a:visited {
|
||||||
.menu-icon {
|
color: $link-color;
|
||||||
display: none;
|
text-decoration: underline;
|
||||||
}
|
font-weight: bold;
|
||||||
|
}
|
||||||
.page-link {
|
a:hover {
|
||||||
color: $text-color;
|
color: $link-hover-color;
|
||||||
line-height: $base-line-height;
|
text-decoration: underline;
|
||||||
|
}
|
||||||
// Gaps between nav items, but not on the last one
|
header {
|
||||||
&:not(:last-child) {
|
background: $header;
|
||||||
margin-right: 20px;
|
padding: 0px 15px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-query($on-palm) {
|
|
||||||
position: absolute;
|
|
||||||
top: 9px;
|
|
||||||
right: $spacing-unit / 2;
|
|
||||||
background-color: $background-color;
|
|
||||||
border: 1px solid $grey-color-light;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
width: 36px;
|
|
||||||
height: 26px;
|
|
||||||
line-height: 0;
|
|
||||||
padding-top: 10px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin: 50px 0 0;
|
||||||
> svg {
|
height: 50vh;
|
||||||
width: 18px;
|
display: flex;
|
||||||
height: 15px;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
path {
|
}
|
||||||
fill: $grey-color-dark;
|
main {
|
||||||
}
|
padding: 0 15px;
|
||||||
}
|
max-width: $content-width;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
}
|
||||||
.trigger {
|
time {
|
||||||
clear: both;
|
color: #898989;
|
||||||
display: none;
|
}
|
||||||
}
|
.container {
|
||||||
|
max-width: $content-width;
|
||||||
&:hover .trigger {
|
margin: 0 auto;
|
||||||
display: block;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-link {
|
|
||||||
display: block;
|
|
||||||
padding: 5px 10px;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Aside */
|
||||||
|
|
||||||
|
aside {
|
||||||
/**
|
position: fixed;
|
||||||
* Site footer
|
top: 0;
|
||||||
*/
|
left: 0;
|
||||||
.site-footer {
|
background: #fff;
|
||||||
border-top: 1px solid $grey-color-light;
|
width: 100%;
|
||||||
padding: $spacing-unit 0;
|
z-index: 2;
|
||||||
}
|
border-bottom: 1px solid lighten($light, 30%);
|
||||||
|
box-shadow: 0px 1px 1px RGBA(4, 25, 54, .1);
|
||||||
.footer-heading {
|
nav {
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: $spacing-unit / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-list,
|
|
||||||
.social-media-list {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col-wrapper {
|
|
||||||
font-size: 15px;
|
|
||||||
color: $grey-color;
|
|
||||||
margin-left: -$spacing-unit / 2;
|
|
||||||
@extend %clearfix;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col {
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: $spacing-unit / 2;
|
max-width: 800px;
|
||||||
padding-left: $spacing-unit / 2;
|
margin: 0 auto;
|
||||||
}
|
ul {
|
||||||
|
margin: 0;
|
||||||
.footer-col-1 {
|
padding: 0;
|
||||||
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(35% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col-2 {
|
|
||||||
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(20% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col-3 {
|
|
||||||
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(45% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-query($on-laptop) {
|
|
||||||
.footer-col-1,
|
|
||||||
.footer-col-2 {
|
|
||||||
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(50% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col-3 {
|
|
||||||
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(100% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-query($on-palm) {
|
|
||||||
.footer-col {
|
|
||||||
float: none;
|
|
||||||
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
|
|
||||||
width: calc(100% - (#{$spacing-unit} / 2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Page content
|
|
||||||
*/
|
|
||||||
.page-content {
|
|
||||||
padding: $spacing-unit 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-heading {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list {
|
|
||||||
margin-left: 0;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
li {
|
||||||
> li {
|
float: left;
|
||||||
margin-bottom: $spacing-unit;
|
position: relative;
|
||||||
}
|
a {
|
||||||
}
|
text-decoration: none;
|
||||||
|
|
||||||
.post-meta {
|
|
||||||
font-size: $small-font-size;
|
|
||||||
color: $grey-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-link {
|
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 24px;
|
padding: 15px;
|
||||||
}
|
font-family: 'Muli', sans-serif;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
box-shadow: 0;
|
||||||
/**
|
&:hover,
|
||||||
* Posts
|
&:active {
|
||||||
*/
|
background: $header;
|
||||||
.post-header {
|
text-decoration: none;
|
||||||
margin-bottom: $spacing-unit;
|
color: $main;
|
||||||
}
|
|
||||||
|
|
||||||
.post-title {
|
|
||||||
font-size: 42px;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
@include media-query($on-laptop) {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content {
|
|
||||||
margin-bottom: $spacing-unit;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 32px;
|
|
||||||
|
|
||||||
@include media-query($on-laptop) {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 26px;
|
|
||||||
|
|
||||||
@include media-query($on-laptop) {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:after {
|
||||||
h4 {
|
content: '';
|
||||||
font-size: 20px;
|
display: table;
|
||||||
|
clear: both;
|
||||||
@include media-query($on-laptop) {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
*/
|
*/
|
||||||
.highlight {
|
.highlight {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@extend %vertical-rhythm;
|
|
||||||
|
|
||||||
.highlighter-rouge & {
|
.highlighter-rouge & {
|
||||||
background: #eef;
|
background: #eef;
|
||||||
|
|
|
||||||
15
about.md
15
about.md
|
|
@ -1,15 +0,0 @@
|
||||||
---
|
|
||||||
layout: page
|
|
||||||
title: About
|
|
||||||
permalink: /about/
|
|
||||||
---
|
|
||||||
|
|
||||||
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
|
|
||||||
|
|
||||||
You can find the source code for the Jekyll new theme at:
|
|
||||||
{% include icon-github.html username="jglovier" %} /
|
|
||||||
[jekyll-new](https://github.com/jglovier/jekyll-new)
|
|
||||||
|
|
||||||
You can find the source code for Jekyll at
|
|
||||||
{% include icon-github.html username="jekyll" %} /
|
|
||||||
[jekyll](https://github.com/jekyll/jekyll)
|
|
||||||
11
blog/index.html
Normal file
11
blog/index.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<h4>blog</h4>
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<time>{{ post.date | date: "%b %-d, %Y" }}</time>
|
||||||
|
<h3><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<p>subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
|
||||||
|
|
@ -1,53 +1,7 @@
|
||||||
---
|
---
|
||||||
# Only the main Sass file needs front matter (the dashes are enough)
|
# Front matter comment to ensure Jekyll properly reads file.
|
||||||
---
|
---
|
||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Our variables
|
|
||||||
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
$base-font-size: 16px;
|
|
||||||
$base-font-weight: 400;
|
|
||||||
$small-font-size: $base-font-size * 0.875;
|
|
||||||
$base-line-height: 1.5;
|
|
||||||
|
|
||||||
$spacing-unit: 30px;
|
|
||||||
|
|
||||||
$text-color: #111;
|
|
||||||
$background-color: #fdfdfd;
|
|
||||||
$brand-color: #2a7ae2;
|
|
||||||
|
|
||||||
$grey-color: #828282;
|
|
||||||
$grey-color-light: lighten($grey-color, 40%);
|
|
||||||
$grey-color-dark: darken($grey-color, 25%);
|
|
||||||
|
|
||||||
// Width of the content area
|
|
||||||
$content-width: 800px;
|
|
||||||
|
|
||||||
$on-palm: 600px;
|
|
||||||
$on-laptop: 800px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Use media queries like this:
|
|
||||||
// @include media-query($on-palm) {
|
|
||||||
// .wrapper {
|
|
||||||
// padding-right: $spacing-unit / 2;
|
|
||||||
// padding-left: $spacing-unit / 2;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@mixin media-query($device) {
|
|
||||||
@media screen and (max-width: $device) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
|
||||||
@import
|
@import
|
||||||
"base",
|
"base",
|
||||||
"layout",
|
"layout",
|
||||||
"syntax-highlighting"
|
"syntax-highlighting"
|
||||||
;
|
|
||||||
|
|
|
||||||
20
index.html
20
index.html
|
|
@ -2,22 +2,6 @@
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="home">
|
<h2>Main Page</h2>
|
||||||
|
|
||||||
<h1 class="page-heading">Posts</h1>
|
Main content goes here.
|
||||||
|
|
||||||
<ul class="post-list">
|
|
||||||
{% for post in site.posts %}
|
|
||||||
<li>
|
|
||||||
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
|
|
||||||
</h2>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in a new issue