More of the basic scaffolding for the site. All the basic stuff is in place now.

This commit is contained in:
Jesper Hess 2016-04-06 13:06:04 +02:00
parent 8a4d108661
commit fddbf5f532
9 changed files with 153 additions and 520 deletions

10
_pages/01_about.md Normal file
View 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
View 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).

View File

@ -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,
/** *::after {
* Basic styling -webkit-box-sizing: border-box;
*/ -moz-box-sizing: border-box;
body { box-sizing: border-box;
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; }
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;
}
}
}

View File

@ -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 {
font-size: 2em;
}
a,
a:visited {
color: $link-color;
text-decoration: underline;
font-weight: bold;
}
a:hover {
color: $link-hover-color;
text-decoration: underline;
}
header {
background: $header;
padding: 0px 15px;
text-align: center;
margin: 50px 0 0;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
padding: 0 15px;
max-width: $content-width;
margin: 0 auto;
}
time {
color: #898989;
}
.container {
max-width: $content-width;
margin: 0 auto;
}
.site-nav { /* Aside */
float: right;
line-height: 56px;
.menu-icon { aside {
display: none; position: fixed;
} top: 0;
left: 0;
.page-link { background: #fff;
color: $text-color; width: 100%;
line-height: $base-line-height; z-index: 2;
border-bottom: 1px solid lighten($light, 30%);
// Gaps between nav items, but not on the last one box-shadow: 0px 1px 1px RGBA(4, 25, 54, .1);
&:not(:last-child) { nav {
margin-right: 20px; float: left;
} max-width: 800px;
} margin: 0 auto;
ul {
@include media-query($on-palm) { margin: 0;
position: absolute; padding: 0;
top: 9px; list-style: none;
right: $spacing-unit / 2; li {
background-color: $background-color; float: left;
border: 1px solid $grey-color-light; position: relative;
border-radius: 5px; a {
text-align: right; text-decoration: none;
display: block;
.menu-icon { padding: 15px;
display: block; font-family: 'Muli', sans-serif;
float: right; line-height: 20px;
width: 36px; margin-bottom: -1px;
height: 26px; box-shadow: 0;
line-height: 0; &:hover,
padding-top: 10px; &:active {
text-align: center; background: $header;
text-decoration: none;
> svg { color: $main;
width: 18px; }
height: 15px;
path {
fill: $grey-color-dark;
} }
} }
} }
&:after {
.trigger { content: '';
display: table;
clear: both; clear: both;
display: none;
}
&:hover .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: block;
padding: 5px 10px;
&:not(:last-child) {
margin-right: 0;
}
margin-left: 20px;
}
}
}
/**
* Site footer
*/
.site-footer {
border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0;
}
.footer-heading {
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;
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
.footer-col-1 {
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;
> li {
margin-bottom: $spacing-unit;
}
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
}
.post-link {
display: block;
font-size: 24px;
}
/**
* Posts
*/
.post-header {
margin-bottom: $spacing-unit;
}
.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;
}
}
h4 {
font-size: 20px;
@include media-query($on-laptop) {
font-size: 18px;
} }
} }
} }
footer {
text-align: center;
padding: 40px;
}

View File

@ -3,7 +3,6 @@
*/ */
.highlight { .highlight {
background: #fff; background: #fff;
@extend %vertical-rhythm;
.highlighter-rouge & { .highlighter-rouge & {
background: #eef; background: #eef;

View File

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

View File

@ -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"; @import
"base",
"layout",
"syntax-highlighting"
// 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
"base",
"layout",
"syntax-highlighting"
;

View File

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