Continue to refine styles and layouts
This commit is contained in:
Michael Rose
parent
3df0afbdc9
commit
8d046af7a9
26 changed files with 390 additions and 382 deletions
47
_assets/css/_archive.scss
Normal file
47
_assets/css/_archive.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/* ==========================================================================
|
||||
ARCHIVE
|
||||
========================================================================== */
|
||||
|
||||
.archive {
|
||||
@include container;
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 2em;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,8);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
@include grid(12,6);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,5);
|
||||
}
|
||||
}
|
||||
|
||||
.archive__subtitle {
|
||||
margin: 0;
|
||||
padding-bottom: 0.5em;
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-bottom: 4px;
|
||||
font-size: 20px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-excerpt {
|
||||
font-size: 14px;
|
||||
& + p {
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,16 +2,13 @@
|
|||
BASE ELEMENTS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $text-color;
|
||||
font-family: $serif;
|
||||
line-height: 1.5;
|
||||
background-color: $body-color;
|
||||
&.overflow--hidden {
|
||||
/* when primary navigation is visible, the content in the background won't scroll */
|
||||
overflow: hidden;
|
||||
|
|
@ -79,7 +76,7 @@ p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
|
|||
widows: 3;
|
||||
}
|
||||
|
||||
/* Abbreviations */
|
||||
/* abbreviations */
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
|
|
@ -88,7 +85,7 @@ abbr[data-original-title] {
|
|||
border-bottom: 1px dotted $text-color;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
/* blockquotes */
|
||||
|
||||
blockquote {
|
||||
margin: 2em 1em 2em 0;
|
||||
|
|
@ -110,10 +107,9 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* links */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
|
|
@ -123,7 +119,7 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
/* lists */
|
||||
|
||||
ol, ul {
|
||||
@include breakpoint($small) {
|
||||
|
|
@ -134,7 +130,7 @@ ol, ul {
|
|||
}
|
||||
}
|
||||
|
||||
/* Code */
|
||||
/* code */
|
||||
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: $monospace;
|
||||
|
|
@ -157,7 +153,7 @@ figcaption code {
|
|||
}
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
/* horizontal rule */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #000;
|
||||
border: 0 !important;
|
||||
border-radius: $border-radius;
|
||||
83
_assets/css/_masthead.scss
Normal file
83
_assets/css/_masthead.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
/* ==========================================================================
|
||||
MASTHEAD
|
||||
========================================================================== */
|
||||
|
||||
.masthead {
|
||||
@include container;
|
||||
padding: 2em 0 1em;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
@include clearfix;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Site name */
|
||||
.site-name {
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,2);
|
||||
@include prefix(12,0.5);
|
||||
@include suffix(12,0.5);
|
||||
font-size: 16px;
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,1.5);
|
||||
@include prefix(12,2);
|
||||
}
|
||||
}
|
||||
|
||||
.masthead__menu {
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,9);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,8);
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
.masthead__menu-item {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-size: 16px;
|
||||
&:last-child {
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
margin-right: 25px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
_assets/css/_navigation.scss
Normal file
45
_assets/css/_navigation.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/* ==========================================================================
|
||||
NAVIGATION
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Breadcrumb navigation links
|
||||
========================================================================== */
|
||||
|
||||
.breadcrumbs {
|
||||
ol {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Post pagination navigation links
|
||||
========================================================================== */
|
||||
|
||||
.pagination {
|
||||
padding-top: 0.5em;
|
||||
border-top: 1px solid $border-color;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
li + li:before {
|
||||
content: "";
|
||||
padding-right: 10px;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
80
_assets/css/_notices.scss
Normal file
80
_assets/css/_notices.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/* ==========================================================================
|
||||
NOTICE TEXT BLOCKS
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Default Kramdown usage (no indents!):
|
||||
* <div class="notice" markdown="1">
|
||||
* #### Headline for the Notice
|
||||
* Text for the notice
|
||||
* </div>
|
||||
*/
|
||||
|
||||
@mixin notice($notice-color) {
|
||||
margin: 2em 0;
|
||||
padding: 1em;
|
||||
background-color: mix(#fff, $notice-color, 90%);
|
||||
border-top: 0.25em solid mix(#fff, $notice-color, 50%);
|
||||
border-bottom: 0.25em solid mix(#fff, $notice-color, 50%);
|
||||
h4 {
|
||||
margin-top: 0 !important; // override
|
||||
margin-bottom: 0.75em;
|
||||
line-height: 1 !important; // override
|
||||
}
|
||||
@at-root .page__content #{&} h4 {
|
||||
// using at-root to override .page-content h4 font size
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@at-root .page__content #{&} a {
|
||||
border-bottom-width: 2px;
|
||||
box-shadow: none !important; // override
|
||||
&:hover {
|
||||
background-color: transparent !important; // override
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
a {
|
||||
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
|
||||
}
|
||||
}
|
||||
h4 + p {
|
||||
// remove space above paragraphs that appear directly after notice headline
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
code {
|
||||
background-color: mix(#fff, $notice-color, 70%)
|
||||
}
|
||||
}
|
||||
|
||||
/* Default notice */
|
||||
|
||||
.notice {
|
||||
@include notice($primary-color);
|
||||
}
|
||||
|
||||
/* Info notice */
|
||||
|
||||
.notice--info {
|
||||
@include notice($info-color);
|
||||
}
|
||||
|
||||
/* Warning notice */
|
||||
|
||||
.notice--warning {
|
||||
@include notice($warning-color);
|
||||
}
|
||||
|
||||
/* Success notice */
|
||||
|
||||
.notice--success {
|
||||
@include notice($success-color);
|
||||
}
|
||||
|
||||
/* Danger notice */
|
||||
|
||||
.notice--danger {
|
||||
@include notice($danger-color);
|
||||
}
|
||||
|
|
@ -2,96 +2,6 @@
|
|||
SINGLE PAGE/POST
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
background-color: $body-color;
|
||||
font-family: $serif;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Header
|
||||
========================================================================== */
|
||||
|
||||
.navigation-wrapper {
|
||||
@include container;
|
||||
padding: 2em 0 1em;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
/* Site name */
|
||||
.site-name {
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,2);
|
||||
@include prefix(12,0.5);
|
||||
@include suffix(12,0.5);
|
||||
font-size: 16px;
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,1.5);
|
||||
@include prefix(12,2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Top navigation links */
|
||||
.top-navigation {
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,9);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,8);
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid lighten(#000,80);
|
||||
border-bottom: 1px solid fade(#000,10);
|
||||
font-size: 16px;
|
||||
&:last-child {
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
margin-right: 25px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
decoration: none;
|
||||
border-bottom: 0 solid transparent;
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
#main {
|
||||
counter-reset: captions;
|
||||
|
|
@ -107,64 +17,38 @@ body {
|
|||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 2em;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,8);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
@include grid(12,6);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Archive listing specific styling */
|
||||
.archive {
|
||||
@include container;
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 2em;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,8);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
@include grid(12,6);
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,5);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding-bottom: .5em;
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid mix(#fff, #000, 70%);
|
||||
}
|
||||
article {
|
||||
h2 {
|
||||
margin-bottom: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
p + p {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.page__title {}
|
||||
|
||||
.page__content {
|
||||
ul, ol {
|
||||
li + li {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Large feature header image */
|
||||
.image-wrap {
|
||||
.page__hero {
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
@include clearfix;
|
||||
&:after {
|
||||
content: " ";
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -183,10 +67,34 @@ body {
|
|||
left: 33.333333333%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.page__hero-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.page__hero-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-family: $sans-serif;
|
||||
font-size: 10px;
|
||||
background: #000;
|
||||
text-align: right;
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
border-radius: $border-radius 0 $border-radius 0;
|
||||
@include breakpoint($medium) {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,37 +124,35 @@ body {
|
|||
@include prefix(12,2);
|
||||
}
|
||||
}
|
||||
.author-name {
|
||||
.author__name {
|
||||
margin-bottom: 0;
|
||||
@include breakpoint($small) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.author-bio {
|
||||
.author__bio {
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
@include breakpoint($small) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.author-avatar {
|
||||
.author__avatar {
|
||||
max-width: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.author-social {
|
||||
.author__social-url {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
&:visited {
|
||||
color: #000;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:active {
|
||||
transform: translate(0, 2px);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
|
|
@ -257,68 +163,14 @@ body {
|
|||
max-width: 125px;
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
.author-name,
|
||||
.author-avatar,
|
||||
.author-bio,
|
||||
.author-social {
|
||||
.author__name,
|
||||
.author__avatar,
|
||||
.author__bio,
|
||||
.author__social-url {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post content wrapper */
|
||||
.article-wrap {
|
||||
// Dotted line underlines for links
|
||||
p > a,
|
||||
p > em > a,
|
||||
p > strong > a,
|
||||
li > a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Image grid - not used */
|
||||
.image-grid {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
margin: 0 0 1em;
|
||||
padding: 0;
|
||||
li {
|
||||
@include grid(12,6);
|
||||
@include breakpoint($micro) {
|
||||
width: 33.333333%;
|
||||
}
|
||||
@include breakpoint($small) {
|
||||
width: 25%;
|
||||
}
|
||||
@include breakpoint($medium) {
|
||||
width: 20%;
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
width: 16.666666666%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Recent grid - not used */
|
||||
.recent-grid {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
margin: 1em 0;
|
||||
li {
|
||||
display: inline;
|
||||
a {
|
||||
border-bottom: 0 solid transparent;
|
||||
&:hover {
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 19%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social sharing links */
|
||||
.social-share {
|
||||
h4 {
|
||||
|
|
@ -448,44 +300,3 @@ body {
|
|||
#goog-wm-sb {
|
||||
@extend .btn;
|
||||
}
|
||||
|
||||
/*
|
||||
Breadcrumbs
|
||||
========================================================================== */
|
||||
|
||||
.breadcrumbs {
|
||||
ol {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Post pagination links
|
||||
========================================================================== */
|
||||
|
||||
.pagination {
|
||||
padding-top: 0.5em;
|
||||
border-top: 1px solid mix(#fff, #000, 70%);
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
li + li:before {
|
||||
content: "";
|
||||
padding-right: 10px;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/* ==========================================================================
|
||||
Site wide styles
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Selection
|
||||
========================================================================== */
|
||||
|
||||
::-moz-selection {
|
||||
background-color: mix(#fff, $base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background-color: mix(#fff, $base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Global classes
|
||||
========================================================================== */
|
||||
|
||||
/* Capitalize */
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Float left */
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Float right */
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.image-pull-right {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Clearfix */
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove bullets and indentation from list */
|
||||
.unstyled-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
Syntax highlighting
|
||||
========================================================================== */
|
||||
|
||||
div.highlighter-rouge {
|
||||
div.highlighter-rouge,
|
||||
figure.highlight {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
border: 1px solid $border-color;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
}
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
$doc-font-size : 16;
|
||||
$doc-line-height : 26;
|
||||
$paragraph-indent : true !default;
|
||||
$paragraph-indent : false !default;
|
||||
$indent-var : 0rem + ($doc-line-height / $doc-font-size);
|
||||
|
||||
$serif : "PT Serif", serif;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,20 @@
|
|||
|
||||
@import "reset";
|
||||
@import "base";
|
||||
|
||||
@import "utilities";
|
||||
@import "buttons";
|
||||
@import "notices";
|
||||
@import "masthead";
|
||||
@import "navigation";
|
||||
@import "toc"; // table of contents
|
||||
|
||||
@import "syntax";
|
||||
|
||||
@import "forms";
|
||||
|
||||
@import "page";
|
||||
@import "archive";
|
||||
|
||||
@import "vendor/font-awesome/font-awesome";
|
||||
@import "vendor/magnific-popup/magnific-popup";
|
||||
@import "print";
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<article itemscope itemtype="http://schema.org/CreativeWork">
|
||||
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
{% if post.link %}
|
||||
<h2 class="link-post" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a> <a href="{{ post.link }}" target="_blank"><i class="fa fa-link"></i></a></h2>
|
||||
<h2 class="archive__item-title link-post" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a> <a href="{{ post.link }}" target="_blank"><i class="fa fa-link"></i></a></h2>
|
||||
{% else %}
|
||||
<h2 itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a></h2>
|
||||
<h2 class="archive__item-title" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a></h2>
|
||||
{% endif %}
|
||||
{% if post.excerpt %}<p itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
||||
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
||||
</article>
|
||||
|
|
@ -5,74 +5,74 @@
|
|||
<div itemscope itemtype="http://schema.org/Person">
|
||||
|
||||
{% if author.avatar contains "http" %}
|
||||
<img src="{{ author.avatar }}" class="author-avatar" alt="{{ author.name }} photo">
|
||||
<img src="{{ author.avatar }}" class="author__avatar" alt="{{ author.name }}">
|
||||
{% else %}
|
||||
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author-avatar" alt="{{ author.name }} photo">
|
||||
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author__avatar" alt="{{ author.name }}">
|
||||
{% endif %}
|
||||
|
||||
<h3 class="author-name">{{ author.name }}</h3>
|
||||
{% if author.bio %}<p class="author-bio">{{ author.bio }}</p>{% endif %}
|
||||
{% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
|
||||
{% if author.uri %}
|
||||
<a href="{{ author.uri }}" class="author-social" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
|
||||
<a href="{{ author.uri }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
|
||||
{% endif %}
|
||||
{% if author.email %}
|
||||
<a href="mailto:{{ author.email }}" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
|
||||
<a href="mailto:{{ author.email }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
|
||||
{% endif %}
|
||||
{% if author.twitter %}
|
||||
<a href="http://twitter.com/{{ author.twitter }}" class="author-social" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a>
|
||||
<a href="http://twitter.com/{{ author.twitter }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a>
|
||||
{% endif %}
|
||||
{% if author.facebook %}
|
||||
<a href="http://facebook.com/{{ author.facebook }}" class="author-social" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a>
|
||||
<a href="http://facebook.com/{{ author.facebook }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a>
|
||||
{% endif %}
|
||||
{% if author.google_plus %}
|
||||
<a href="http://plus.google.com/+{{ author.google_plus }}" class="author-social" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a>
|
||||
<a href="http://plus.google.com/+{{ author.google_plus }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a>
|
||||
{% endif %}
|
||||
{% if author.linkedin %}
|
||||
<a href="http://linkedin.com/in/{{ author.linkedin }}" class="author-social" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a>
|
||||
<a href="http://linkedin.com/in/{{ author.linkedin }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a>
|
||||
{% endif %}
|
||||
{% if author.xing %}
|
||||
<a href="http://www.xing.com/profile/{{ author.xing }}" class="author-social" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a>
|
||||
<a href="http://www.xing.com/profile/{{ author.xing }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a>
|
||||
{% endif %}
|
||||
{% if author.instagram %}
|
||||
<a href="http://instagram.com/{{ author.instagram }}" class="author-social" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
|
||||
<a href="http://instagram.com/{{ author.instagram }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
|
||||
{% endif %}
|
||||
{% if author.tumblr %}
|
||||
<a href="http://{{ author.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a>
|
||||
<a href="http://{{ author.tumblr }}.tumblr.com" class="author__social-url" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a>
|
||||
{% endif %}
|
||||
{% if author.github %}
|
||||
<a href="http://github.com/{{ author.github }}" class="author-social" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a>
|
||||
<a href="http://github.com/{{ author.github }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a>
|
||||
{% endif %}
|
||||
{% if author.stackoverflow %}
|
||||
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="author-social" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a>
|
||||
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a>
|
||||
{% endif %}
|
||||
{% if author.lastfm %}
|
||||
<a href="http://lastfm.com/user/{{ author.lastfm }}" class="author-social" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a>
|
||||
<a href="http://lastfm.com/user/{{ author.lastfm }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a>
|
||||
{% endif %}
|
||||
{% if author.dribbble %}
|
||||
<a href="http://dribbble.com/{{ author.dribbble }}" class="author-social" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a>
|
||||
<a href="http://dribbble.com/{{ author.dribbble }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a>
|
||||
{% endif %}
|
||||
{% if author.pinterest %}
|
||||
<a href="http://www.pinterest.com/{{ author.pinterest }}" class="author-social" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a>
|
||||
<a href="http://www.pinterest.com/{{ author.pinterest }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a>
|
||||
{% endif %}
|
||||
{% if author.foursquare %}
|
||||
<a href="http://foursquare.com/{{ author.foursquare }}" class="author-social" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a>
|
||||
<a href="http://foursquare.com/{{ author.foursquare }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a>
|
||||
{% endif %}
|
||||
{% if author.steam %}
|
||||
<a href="http://steamcommunity.com/id/{{ author.steam }}" class="author-social" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a>
|
||||
<a href="http://steamcommunity.com/id/{{ author.steam }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a>
|
||||
{% endif %}
|
||||
{% if author.youtube %}
|
||||
<a href="https://youtube.com/user/{{ author.youtube }}" class="author-social" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a>
|
||||
<a href="https://youtube.com/user/{{ author.youtube }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a>
|
||||
{% endif %}
|
||||
{% if author.soundcloud %}
|
||||
<a href="http://soundcloud.com/{{ author.soundcloud }}" class="author-social" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a>
|
||||
<a href="http://soundcloud.com/{{ author.soundcloud }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a>
|
||||
{% endif %}
|
||||
{% if author.weibo %}
|
||||
<a href="http://www.weibo.com/{{ author.weibo }}" class="author-social" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a>
|
||||
<a href="http://www.weibo.com/{{ author.weibo }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a>
|
||||
{% endif %}
|
||||
{% if author.flickr %}
|
||||
<a href="http://www.flickr.com/{{ author.flickr }}" class="author-social" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
|
||||
<a href="http://www.flickr.com/{{ author.flickr }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
|
||||
{% endif %}
|
||||
{% if author.codepen %}
|
||||
<a href="http://codepen.io/{{ author.codepen }}" class="author-social" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a>
|
||||
<a href="http://codepen.io/{{ author.codepen }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<div class="navigation-wrapper">
|
||||
<div class="masthead">
|
||||
<div class="site-name">
|
||||
<a href="{{ base_path }}/">{{ site.title }}</a>
|
||||
</div><!-- /.site-name -->
|
||||
<div class="top-navigation">
|
||||
<nav id="site-nav" class="nav">
|
||||
<ul>
|
||||
{% for link in site.data.navigation %}
|
||||
{% if link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = base_path %}
|
||||
{% endif %}
|
||||
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="masthead__menu">
|
||||
<nav id="site-nav">
|
||||
<ul>
|
||||
{% for link in site.data.navigation %}
|
||||
{% if link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = base_path %}
|
||||
{% endif %}
|
||||
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /.top-navigation -->
|
||||
</div><!-- /.navigation-wrapper -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<section class="toc">
|
||||
<aside class="toc">
|
||||
<header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
|
||||
<nav markdown="1">
|
||||
* Auto generated table of contents
|
||||
{:toc .toc__menu}
|
||||
</nav>
|
||||
</section>
|
||||
</aside>
|
||||
|
|
@ -16,16 +16,16 @@ layout: compress
|
|||
{% include navigation %}
|
||||
|
||||
{% if page.header.image %}
|
||||
<div class="image-wrap">
|
||||
<div class="page__hero">
|
||||
<img src=
|
||||
{% if page.header.image contains "http" %}
|
||||
"{{ page.header.image }}"
|
||||
{% else %}
|
||||
"{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
|
||||
{% endif %}
|
||||
alt="{{ page.title }}">
|
||||
alt="{{ page.title }}" class="page__hero-image">
|
||||
{% if page.header.caption %}
|
||||
<span class="image-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
|
||||
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
|
||||
{% endif %}
|
||||
</div><!-- /.image-wrap -->
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ layout: default
|
|||
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
|
||||
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
|
||||
|
||||
<div class="article-wrap">
|
||||
<div class="page__inner-wrap">
|
||||
<header>
|
||||
<h1 itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||
</header>
|
||||
|
||||
<section itemprop="text">
|
||||
<section class="page__content" itemprop="text">
|
||||
{{ content }}
|
||||
{% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ author_profile: false
|
|||
|
||||
{% for category in group_names %}
|
||||
{% assign posts = group_items[forloop.index0] %}
|
||||
<h2>{{ category }}</h2>
|
||||
<h2 class="archive__subtitle">{{ category }}</h2>
|
||||
{% for post in posts %}
|
||||
{% include archive-list-single %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ author_profile: false
|
|||
{% unless collection.output == false or collection.label == 'posts' %}
|
||||
{% capture label %}{{ collection.label }}{% endcapture %}
|
||||
{% if label != written_label %}
|
||||
<h2>{{ label }}</h2>
|
||||
<h2 class="archive__subtitle">{{ label }}</h2>
|
||||
{% capture written_label %}{{ label }}{% endcapture %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ permalink: /portfolio/
|
|||
|
||||
{% for category in group_names %}
|
||||
{% assign posts = group_items[forloop.index0] %}
|
||||
<h2>{{ category }}</h2>
|
||||
<h2 class="archive__subtitle">{{ category }}</h2>
|
||||
{% for post in posts %}
|
||||
{% include archive-list-single %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ author_profile: false
|
|||
|
||||
{% for category in group_names %}
|
||||
{% assign posts = group_items[forloop.index0] %}
|
||||
<h2>{{ category }}</h2>
|
||||
<h2 class="archive__subtitle">{{ category }}</h2>
|
||||
{% for post in posts %}
|
||||
{% include archive-list-single %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ author_profile: false
|
|||
|
||||
{% for tag in group_names %}
|
||||
{% assign posts = group_items[forloop.index0] %}
|
||||
<h2>{{ tag }}</h2>
|
||||
<h2 class="archive__subtitle">{{ tag }}</h2>
|
||||
{% for post in posts %}
|
||||
{% include archive-list-single %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ author_profile: false
|
|||
{% for post in site.posts %}
|
||||
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
|
||||
{% if year != written_year %}
|
||||
<h2>{{ year }}</h2>
|
||||
<h2 class="archive__subtitle">{{ year }}</h2>
|
||||
{% capture written_year %}{{ year }}{% endcapture %}
|
||||
{% endif %}
|
||||
{% include archive-list-single %}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Below is just about everything you'll need to style in the theme. Check the sour
|
|||
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
|
||||
|
||||
|
||||
{: .image-pull-right}
|
||||
{: .image-right}
|
||||
|
||||
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
|
||||
|
||||
|
|
@ -74,27 +74,27 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
|
|||
|
||||
## Code Snippets
|
||||
|
||||
{% highlight css %}
|
||||
```css
|
||||
#container {
|
||||
float: left;
|
||||
margin: 0 -240px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
## Buttons
|
||||
|
||||
Make any link standout more when applying the `.btn` class.
|
||||
|
||||
{% highlight html %}
|
||||
```html
|
||||
<a href="#" class="btn btn-success">Success Button</a>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn--success">Success Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn--warning">Warning Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn--danger">Danger Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn--info">Info Button</a></div>
|
||||
|
||||
## Notices
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue