Continue to refine styles and layouts
This commit is contained in:
Michael Rose
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;
|
||||
}
|
||||
}
|
||||
286
_assets/css/_base.scss
Normal file
286
_assets/css/_base.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
/* ==========================================================================
|
||||
BASE ELEMENTS
|
||||
========================================================================== */
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $text-color;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
del a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* paragraph indents */
|
||||
|
||||
p {
|
||||
margin: 0 0 $indent-var;
|
||||
// sibling indentation
|
||||
@if $paragraph-indent == true {
|
||||
& + p {
|
||||
text-indent: $indent-var;
|
||||
margin-top: -($indent-var);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* reduce orphans and widows when printing */
|
||||
|
||||
p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
/* abbreviations */
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $text-color;
|
||||
}
|
||||
|
||||
/* blockquotes */
|
||||
|
||||
blockquote {
|
||||
margin: 2em 1em 2em 0;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-style: italic;
|
||||
border-left: 0.25em solid $accent-color;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
cite {
|
||||
font-family: $sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
&:before {
|
||||
content: "\2014";
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* links */
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* lists */
|
||||
|
||||
ol, ul {
|
||||
@include breakpoint($small) {
|
||||
padding-left: 0;
|
||||
ol, ul {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* code */
|
||||
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: $monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto; // add scrollbars to wide code blocks
|
||||
}
|
||||
p code,
|
||||
li code,
|
||||
figcaption code {
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
background: mix(#fff, $light-gray, 40%);
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
&:before, &:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0"; // non-breaking space
|
||||
}
|
||||
}
|
||||
|
||||
/* horizontal rule */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Media and embeds
|
||||
========================================================================== */
|
||||
|
||||
/* Figures and images */
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin: 2em 0;
|
||||
img,
|
||||
iframe,
|
||||
.fluid-width-video-wrapper {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
> a {
|
||||
display: block;
|
||||
// image hover animation
|
||||
&:hover {
|
||||
img {
|
||||
box-shadow: 0 0 10px rgba(#000, 0.20);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.half {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.third {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(33.3333% - 0.5em);
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Figure captions */
|
||||
|
||||
figcaption {
|
||||
margin-bottom: 0.65rem;
|
||||
color: mix(#fff, $text-color, 25%);
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.8rem;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
transition: border 0.4s ease-in-out;
|
||||
&:hover {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
code {
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Fix IE9 SVG bug */
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Navigation lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Removes margins, padding, and bullet points from navigation lists
|
||||
*
|
||||
* Example usage:
|
||||
* <nav>
|
||||
* <ul>
|
||||
* <li><a href="#link-1">Link 1</a></li>
|
||||
* <li><a href="#link-2">Link 2</a></li>
|
||||
* <li><a href="#link-3">Link 3</a></li>
|
||||
* </ul>
|
||||
* </nav>
|
||||
*/
|
||||
|
||||
nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Global animation transition
|
||||
========================================================================== */
|
||||
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item, .archive__item-thumb, .archive__item-body, .palette__swatch {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
128
_assets/css/_buttons.scss
Normal file
128
_assets/css/_buttons.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
/* ==========================================================================
|
||||
BUTTONS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default button
|
||||
========================================================================== */
|
||||
|
||||
.btn {
|
||||
/* default button */
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 10px 20px;
|
||||
color: #fff !important;
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #000;
|
||||
border: 0 !important;
|
||||
border-radius: $border-radius;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
// move button slightly on click
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:hover {
|
||||
background-color: mix(white, #000, 20%);
|
||||
}
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.icon + .hidden {
|
||||
margin-left: -0.5em; // override for hidden text
|
||||
}
|
||||
|
||||
/* fills width of parent container */
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
+ .btn--block {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* for dark backgrounds */
|
||||
|
||||
&--inverse {
|
||||
color: #000 !important;
|
||||
background-color: #fff;
|
||||
&:hover {
|
||||
background-color: mix(#000, #fff, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* light outline */
|
||||
|
||||
&--light-outline {
|
||||
border: 1px solid #fff !important; // override
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* information */
|
||||
|
||||
&--info {
|
||||
background-color: $info-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $info-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* warning */
|
||||
|
||||
&--warning {
|
||||
background-color: $warning-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $warning-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* success */
|
||||
|
||||
&--success {
|
||||
background-color: $success-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $success-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* danger */
|
||||
|
||||
&--danger {
|
||||
background-color: $danger-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $danger-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
|
||||
&--disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* social buttons */
|
||||
|
||||
$social:
|
||||
(facebook, $facebook-color),
|
||||
(twitter, $twitter-color),
|
||||
(google-plus, $google-plus-color);
|
||||
|
||||
@each $socialnetwork, $color in $social {
|
||||
&--#{$socialnetwork} {
|
||||
background-color: $color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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 {
|
||||
@@ -447,45 +299,4 @@ 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";
|
||||
Reference in New Issue
Block a user