First round of style upgrades
This commit is contained in:
Maruan Al-Shedivat
parent
20e8a83fcd
commit
8b05f3a413
|
|
@ -1,6 +1,5 @@
|
||||||
/**
|
@charset "UTF-8";
|
||||||
* Reset some basic elements
|
|
||||||
*/
|
|
||||||
body, h1, h2, h3, h4, h5, h6,
|
body, h1, h2, h3, h4, h5, h6,
|
||||||
p, blockquote, pre, hr,
|
p, blockquote, pre, hr,
|
||||||
dl, dd, ol, ul, figure {
|
dl, dd, ol, ul, figure {
|
||||||
|
|
@ -8,36 +7,25 @@ dl, dd, ol, ul, figure {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/** Variables **********************************************/
|
em img {
|
||||||
$base-font-family: Helvetica, sans-serif;
|
max-width: 100%;
|
||||||
$base-line-height: 1.5em;
|
margin-left: 0;
|
||||||
$horizontal-spacing-unit: 50px;
|
}
|
||||||
$vertical-spacing-unit: 40px;
|
|
||||||
$nav-height: 56px;
|
|
||||||
|
|
||||||
/* portfolio tinkering */
|
body {
|
||||||
$img_spacing: 5px;
|
box-sizing: border-box;
|
||||||
$img_height: 275px;
|
-moz-box-sizing: border-box;
|
||||||
$caption_font_size: 12px;
|
-webkit-box-sizing: border-box;
|
||||||
$caption_color: #aaa;
|
}
|
||||||
|
|
||||||
/* COLORS */
|
|
||||||
$red: #FF3636;
|
|
||||||
$orange: #F29105;
|
|
||||||
$blue: #2698BA;
|
|
||||||
$green: #11D68B;
|
|
||||||
$lime_green: #B7D12A;
|
|
||||||
$purple: #B509AC;
|
|
||||||
|
|
||||||
|
|
||||||
$grey-color-dark: #333; /* footer */
|
|
||||||
$grey-color-light: #ddd; /* navigation bar border */
|
|
||||||
$text-color: #666;
|
|
||||||
|
|
||||||
/* Set theme color *************************/
|
|
||||||
$theme-color: $purple;
|
|
||||||
|
|
||||||
|
|
||||||
/************************************************************/
|
/************************************************************/
|
||||||
|
|
@ -51,7 +39,6 @@ body {
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
background-color: $background-color;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/*!
|
||||||
|
|
||||||
|
BASSCSS
|
||||||
|
|
||||||
|
Next-level CSS toolkit - basscss.com
|
||||||
|
|
||||||
|
Made with love by Jxnblk - ©2014 Brent Jackson
|
||||||
|
MIT License http://opensource.org/licenses/MIT
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import 'basscss/base-buttons';
|
||||||
|
@import 'basscss/base-forms';
|
||||||
|
@import 'basscss/base-reset';
|
||||||
|
@import 'basscss/base-typography';
|
||||||
|
|
||||||
|
@import 'basscss/buttons-blue';
|
||||||
|
|
||||||
|
@import 'basscss/syntax-highlighting';
|
||||||
|
@import 'basscss/color-base';
|
||||||
|
@import 'basscss/colors';
|
||||||
|
|
||||||
|
@import 'basscss/utility-headings';
|
||||||
|
@import 'basscss/utility-typography';
|
||||||
|
@import 'basscss/utility-white-space';
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
blockquote {
|
||||||
|
border-left: 5px solid #7a7a7a;
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: $space-1;
|
||||||
|
padding: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote footer {
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: transparent;
|
||||||
|
color: #7a7a7a;
|
||||||
|
font-size: .85rem;
|
||||||
|
font-style: normal;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
content: ' ';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
pre,
|
||||||
|
pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: $pre-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-family: $monospace-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: #7a7a7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 1.125em;
|
||||||
|
line-height: 1.11;
|
||||||
|
overflow-x: scroll;
|
||||||
|
margin-bottom: 0.88em;
|
||||||
|
background-color: $pre-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
counter-reset: line-numbering;
|
||||||
|
white-space: pre;
|
||||||
|
overflow-x: auto;
|
||||||
|
word-break: inherit;
|
||||||
|
word-wrap: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre a {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre a::before {
|
||||||
|
content: counter(line-numbering);
|
||||||
|
counter-increment: line-numbering;
|
||||||
|
padding-right: 1em; /* space after numbers */
|
||||||
|
width: 25px;
|
||||||
|
text-align: right;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: inline-block;
|
||||||
|
color: $light-gray;
|
||||||
|
margin-right: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre a:first-of-type::before {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre a:last-of-type::before {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre a:only-of-type::before {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
.site {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-wrap {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1 0 auto;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: $grey-color-dark;
|
||||||
|
border-top: $footer-border-top;
|
||||||
|
color: $footer-color;
|
||||||
|
font-size: $footer-font-size;
|
||||||
|
font-weight: $footer-font-weight;
|
||||||
|
padding: $footer-padding;
|
||||||
|
position: fixed;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
a { color: #fff; }
|
||||||
|
a:hover { color: $theme-color; }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.gist,
|
||||||
|
.gist .highlight .p {
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist .lines {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
.site-header {
|
||||||
|
border-bottom: 1px solid $grey-color-light;
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: 0.95;
|
||||||
|
position:fixed;
|
||||||
|
left:0px;
|
||||||
|
top:0px;
|
||||||
|
height:56px;
|
||||||
|
width:100%;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: $nav-height;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.site-nav {
|
||||||
|
float: right;
|
||||||
|
line-height: $nav-height;
|
||||||
|
.page-link{
|
||||||
|
line-height: $base-line-height;
|
||||||
|
// Gaps between nav items, but not on the first one
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-query($on-palm) {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
right: 10px;
|
||||||
|
text-align: right;
|
||||||
|
&:hover .trigger {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.page-link {
|
||||||
|
display: line;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bar{
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 20px;
|
||||||
|
display: block;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 25px;
|
||||||
|
line-height: 3em;
|
||||||
|
z-index: 25;
|
||||||
|
h1{
|
||||||
|
color: $theme-color;
|
||||||
|
font-size:75px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size:25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,71 +1,3 @@
|
||||||
|
|
||||||
/*****************************************************************************
|
|
||||||
* Header
|
|
||||||
*****************************************************************************/
|
|
||||||
.site-header {
|
|
||||||
border-bottom: 1px solid $grey-color-light;
|
|
||||||
background-color: #fff;
|
|
||||||
opacity: 0.95;
|
|
||||||
position:fixed;
|
|
||||||
left:0px;
|
|
||||||
top:0px;
|
|
||||||
height:56px;
|
|
||||||
width:100%;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-title {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: $nav-height;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.site-nav {
|
|
||||||
float: right;
|
|
||||||
line-height: $nav-height;
|
|
||||||
.page-link{
|
|
||||||
line-height: $base-line-height;
|
|
||||||
// Gaps between nav items, but not on the first one
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-query($on-palm) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
right: 10px;
|
|
||||||
text-align: right;
|
|
||||||
&:hover .trigger {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
.page-link {
|
|
||||||
display: line;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-bar{
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
position: relative;
|
|
||||||
font-size: 20px;
|
|
||||||
display: block;
|
|
||||||
opacity: 0.75;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 25px;
|
|
||||||
line-height: 3em;
|
|
||||||
z-index: 25;
|
|
||||||
h1{
|
|
||||||
color: $theme-color;
|
|
||||||
font-size:75px;
|
|
||||||
}
|
|
||||||
h2{
|
|
||||||
font-size:25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*****************************************************************************
|
/*****************************************************************************
|
||||||
* Profile
|
* Profile
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
@ -103,6 +35,7 @@
|
||||||
td {
|
td {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -116,25 +49,6 @@
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*****************************************************************************
|
|
||||||
* Footer
|
|
||||||
*****************************************************************************/
|
|
||||||
.site-footer {
|
|
||||||
border-top: 1px solid $grey-color-dark;
|
|
||||||
background-color: $grey-color-dark;
|
|
||||||
color: #aaa;
|
|
||||||
font-size: 72%;
|
|
||||||
padding: 2px;
|
|
||||||
position: fixed;
|
|
||||||
left: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
p { margin-bottom: 0; }
|
|
||||||
a { color: #fff; }
|
|
||||||
a:hover { color: $theme-color; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/*****************************************************************************
|
/*****************************************************************************
|
||||||
* Pagination
|
* Pagination
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
background-image: linear-gradient(to top,
|
||||||
|
rgba(0,0,0,0) 13%,
|
||||||
|
rgba($link-color,.8) 13%,
|
||||||
|
rgba($link-color,.8) 18%,
|
||||||
|
rgba(0,0,0,0) 17%
|
||||||
|
);
|
||||||
|
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus,
|
||||||
|
a:active {
|
||||||
|
border: 0;
|
||||||
|
color: $link-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
background-image: linear-gradient(to top,
|
||||||
|
rgba(0,0,0,0) 13%,
|
||||||
|
rgba($link-hover-color,.8) 13%,
|
||||||
|
rgba($link-hover-color,.8) 17%,
|
||||||
|
rgba(0,0,0,0) 17%
|
||||||
|
);
|
||||||
|
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Correct issues with buttons
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
text-shadow: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:focus,
|
||||||
|
.button:active {
|
||||||
|
color: white;
|
||||||
|
text-shadow: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchorjs-link {
|
||||||
|
text-shadow: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
.anchorjs-link:hover,
|
||||||
|
.anchorjs-link:focus,
|
||||||
|
.anchorjs-link:active{
|
||||||
|
border: 0;
|
||||||
|
color: $link-hover-color;
|
||||||
|
text-shadow: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
.measure {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: $measure-width;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
@media screen and (min-width: $viewport-small) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
font-size: $h1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header a {
|
||||||
|
font-size: $h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header .site-title {
|
||||||
|
font-size: $h3;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header .site-nav {
|
||||||
|
float: right;
|
||||||
|
margin-top: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin-left: $space-3;
|
||||||
|
padding: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $viewport-medium) {
|
||||||
|
html {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $viewport-large) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $viewport-large + 14) {
|
||||||
|
em img {
|
||||||
|
max-width: $measure-width + 14;
|
||||||
|
margin-left: -7em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
.pagination {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a, .pagination .disabled {
|
||||||
|
-webkit-transition: all 0.2s ease-in-out;
|
||||||
|
-moz-transition: all 0.2s ease-in-out;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 0.1875em;
|
||||||
|
border: 1px solid #f3f3f3;
|
||||||
|
color: #333333;
|
||||||
|
padding: 1em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .disabled, .pagination .pagination-meta {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .pagination-meta {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a:hover, .pagination a:focus {
|
||||||
|
background: white;
|
||||||
|
color: #477dca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a:active {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .button {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-disabled:hover,
|
||||||
|
.button-disabled:active,
|
||||||
|
.button-disabled:focus {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
|
||||||
|
.posts {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts .post {
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
border-bottom: thin solid #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts .post:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: .375em;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link .post-title {
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-footer {
|
||||||
|
@extend .italic;
|
||||||
|
|
||||||
|
margin-top: .75rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-footer .avatar {
|
||||||
|
margin: 2rem 0;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta,
|
||||||
|
.post-meta {
|
||||||
|
width: auto;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 0;
|
||||||
|
padding: .25em 0;
|
||||||
|
color: #7a7a7a;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-post-title {
|
||||||
|
border-bottom: thin solid #f3f3f3;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
.social-icons-left, .social-icons-right {
|
||||||
|
text-align: center;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons a.fa {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.8;
|
||||||
|
padding: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons a.fa:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons iframe[title=Flattr] {
|
||||||
|
position: relative;
|
||||||
|
top: 0.1em;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
/*
|
||||||
|
Table styles copied from Bootstrap
|
||||||
|
Copyright (c) 2013 Twitter, Inc
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 1.5;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
// Cells
|
||||||
|
> thead,
|
||||||
|
> tbody,
|
||||||
|
> tfoot {
|
||||||
|
> tr {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding: 12px;
|
||||||
|
line-height: 1.2;
|
||||||
|
vertical-align: top;
|
||||||
|
border-top: 1px solid #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Bottom align for column headings
|
||||||
|
> thead > tr > th {
|
||||||
|
vertical-align: bottom;
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
}
|
||||||
|
// Remove top border from thead by default
|
||||||
|
> caption + thead,
|
||||||
|
> colgroup + thead,
|
||||||
|
> thead:first-child {
|
||||||
|
> tr:first-child {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Account for multiple tbody instances
|
||||||
|
> tbody + tbody {
|
||||||
|
border-top: 2px solid #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
html {
|
||||||
|
font-size: $base-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
border-bottom: $abbr-border-bottom;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
.small {
|
||||||
|
font-size: 0.707rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
top: -0.9ex;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
|
||||||
|
/******************************************************************************/
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
$base-font-size: 14px !default;
|
||||||
|
$bold-font-weight: bold !default;
|
||||||
|
$font-family: 'Merriweather', 'PT Serif', Georgia, 'Times New Roman', serif !default;
|
||||||
|
$line-height: 1.5 !default;
|
||||||
|
$heading-font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif !default;
|
||||||
|
$heading-font-weight: 900 !default;
|
||||||
|
$heading-line-height: 1.25 !default;
|
||||||
|
$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
|
||||||
|
$h1: 2.998rem !default;
|
||||||
|
$h2: 1.5rem !default;
|
||||||
|
$h3: 1.25rem !default;
|
||||||
|
$h4: 1rem !default;
|
||||||
|
$h5: .875rem !default;
|
||||||
|
$h6: .75rem !default;
|
||||||
|
$h00: 4rem !default;
|
||||||
|
$h0: 3rem !default;
|
||||||
|
$h00-responsive: 8vw !default;
|
||||||
|
$h0-responsive: 6vw !default;
|
||||||
|
$h1-responsive: 4vw !default;
|
||||||
|
$h00-responsive-max: 7.68rem !default;
|
||||||
|
$h0-responsive-max: 5.76rem !default;
|
||||||
|
$h1-responsive-max: 3.84rem !default;
|
||||||
|
$abbr-border-bottom: 1px black dotted;
|
||||||
|
|
||||||
|
// Page width
|
||||||
|
$measure-width: 42rem !default;
|
||||||
|
|
||||||
|
// Viewport widths
|
||||||
|
$viewport-small: 32em;
|
||||||
|
$viewport-medium: 48em;
|
||||||
|
$viewport-large: 64em;
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
$red: #FF3636 !default;
|
||||||
|
// $red: #f95020 !default;
|
||||||
|
$orange: #F29105 !default;
|
||||||
|
// $orange: #ffcc22 !default;
|
||||||
|
$blue: #2698BA !default;
|
||||||
|
// $blue: #0076df !default;
|
||||||
|
$dark-blue: #00369f !default;
|
||||||
|
$green: #00ab37 !default;
|
||||||
|
// $green: #11D68B !default;
|
||||||
|
// $green: #00cf26 !default;
|
||||||
|
$dark-green: #009f06 !default;
|
||||||
|
$light-green: #ddffdd !default;
|
||||||
|
$lime_green: #B7D12A !default;
|
||||||
|
$purple: #B509AC !default;
|
||||||
|
// $purple: #f92080 !default;
|
||||||
|
$yellow: #efcc00 !default;
|
||||||
|
$light-pink: #ffdddd !default;
|
||||||
|
|
||||||
|
$dark-gray: #333 !default;
|
||||||
|
$mid-gray: #777 !default;
|
||||||
|
$light-gray: #ccc !default;
|
||||||
|
$lighter-gray: #eee !default;
|
||||||
|
|
||||||
|
$grey-color: #828282;
|
||||||
|
$grey-color-light: lighten($grey-color, 40%);
|
||||||
|
$grey-color-dark: darken($grey-color, 25%);
|
||||||
|
|
||||||
|
$darken-1: rgba(#000,.0625) !default;
|
||||||
|
$darken-2: rgba(#000,.125) !default;
|
||||||
|
$darken-3: rgba(#000,.25) !default;
|
||||||
|
$darken-4: rgba(#000,.5) !default;
|
||||||
|
|
||||||
|
// Theme color
|
||||||
|
$theme-color: $purple;
|
||||||
|
|
||||||
|
// Links
|
||||||
|
$link-color: $theme-color;
|
||||||
|
$link-hover-color: darken($theme-color, 40%);
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$breakpoint-md: '(min-width: 52em)';
|
||||||
|
$breakpoint-xl: '(min-width: 96em)';
|
||||||
|
|
||||||
|
// Whitespace
|
||||||
|
$space-1: .5rem !default;
|
||||||
|
$space-2: 1rem !default;
|
||||||
|
$space-3: 2rem !default;
|
||||||
|
$space-4: 4rem !default;
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
$button-font-size: inherit !default;
|
||||||
|
$button-font-weight: normal !default;
|
||||||
|
$button-line-height: 1.125rem !default;
|
||||||
|
$button-padding-y: .5rem !default;
|
||||||
|
$button-padding-x: 1rem !default;
|
||||||
|
$button-font-family: $heading-font-family;
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
$form-field-font-size: 1rem !default;
|
||||||
|
$form-field-height: 2.25rem !default;
|
||||||
|
$form-field-padding-y: .5rem !default;
|
||||||
|
$form-field-padding-x: .5rem !default;
|
||||||
|
|
||||||
|
// Borders
|
||||||
|
$border-color: $light-gray !default;
|
||||||
|
$border-width: 1px !default;
|
||||||
|
$border-radius: 3px !default;
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
$form-field-font-size: 1rem;
|
||||||
|
$form-field-height: 2.25rem;
|
||||||
|
$form-field-padding-y: .5rem;
|
||||||
|
$form-field-padding-x: .5rem;
|
||||||
|
|
||||||
|
// Code
|
||||||
|
$pre-border-radius: 0;
|
||||||
|
$pre-background-color: #fafafa;
|
||||||
|
$hljs-comment: $mid-gray;
|
||||||
|
$hljs-keyword: $dark-blue;
|
||||||
|
$hljs-name: $dark-gray;
|
||||||
|
$hljs-number: $dark-green;
|
||||||
|
$hljs-string: $red;
|
||||||
|
$hljs-title: $red;
|
||||||
|
$hljs-type: $dark-blue;
|
||||||
|
$hljs-tag: $dark-blue;
|
||||||
|
$hljs-attribute: $dark-green;
|
||||||
|
$hljs-regexp: $dark-green;
|
||||||
|
$hljs-symbol: $purple;
|
||||||
|
$hljs-built-in: $dark-blue;
|
||||||
|
$hljs-preprocessor: $mid-gray;
|
||||||
|
$hljs-deletion: $light-pink;
|
||||||
|
$hljs-addition: $light-green;
|
||||||
|
$hljs-change: $dark-blue;
|
||||||
|
$hljs-chunk: $light-gray;
|
||||||
|
|
||||||
|
// Header
|
||||||
|
$nav-height: 56px;
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
$footer-border-top: thin solid $grey-color-dark;
|
||||||
|
$footer-padding: $space-1;
|
||||||
|
$footer-color: $light-gray;
|
||||||
|
$footer-bg-color: $grey-color-dark;
|
||||||
|
$footer-font-weight: 300;
|
||||||
|
$footer-font-size: .75rem;
|
||||||
|
|
||||||
|
// Spacing
|
||||||
|
$spacing-unit: 30px;
|
||||||
|
$on-palm: 600px;
|
||||||
|
$on-laptop: 800px;
|
||||||
|
|
||||||
|
/******************************************************************************/
|
||||||
|
|
||||||
|
// Theme
|
||||||
|
$base-font-family: Helvetica, sans-serif;
|
||||||
|
$base-line-height: 1.5em;
|
||||||
|
$horizontal-spacing-unit: 50px;
|
||||||
|
$vertical-spacing-unit: 40px;
|
||||||
|
$nav-height: 56px;
|
||||||
|
|
||||||
|
/* portfolio tinkering */
|
||||||
|
$img_spacing: 5px;
|
||||||
|
$img_height: 275px;
|
||||||
|
$caption_font_size: 12px;
|
||||||
|
$caption_color: #aaa;
|
||||||
|
|
||||||
|
/* COLORS */
|
||||||
|
$red: #FF3636;
|
||||||
|
$orange: #F29105;
|
||||||
|
$blue: #2698BA;
|
||||||
|
$green: #11D68B;
|
||||||
|
$lime_green: #B7D12A;
|
||||||
|
$purple: #B509AC;
|
||||||
|
|
||||||
|
|
||||||
|
$grey-color-dark: #333; /* footer */
|
||||||
|
$grey-color-light: #ddd; /* navigation bar border */
|
||||||
|
$text-color: #666;
|
||||||
|
|
||||||
|
/* Set theme color *************************/
|
||||||
|
$theme-color: $purple;
|
||||||
|
|
||||||
|
|
||||||
|
$base-font-family: Helvetica, Arial, sans-serif;
|
||||||
|
$base-font-size: 16px;
|
||||||
|
$small-font-size: $base-font-size * 0.875;
|
||||||
|
$base-line-height: 1.5;
|
||||||
|
|
||||||
|
$spacing-unit: 30px;
|
||||||
|
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$brand-color: #2a7ae2;
|
||||||
|
|
||||||
|
$on-palm: 600px;
|
||||||
|
$on-laptop: 800px;
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
/* Basscss Base Buttons */
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
font-family: $button-font-family;
|
||||||
|
font-size: $button-font-size;
|
||||||
|
font-weight: $button-font-weight;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: $button-line-height;
|
||||||
|
padding: $button-padding-y $button-padding-x;
|
||||||
|
margin: 0;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
vertical-align: middle;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
/* Basscss Base Forms */
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
fieldset {
|
||||||
|
font-size: $form-field-font-size;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text],
|
||||||
|
input[type=datetime],
|
||||||
|
input[type=datetime-local],
|
||||||
|
input[type=email],
|
||||||
|
input[type=month],
|
||||||
|
input[type=number],
|
||||||
|
input[type=password],
|
||||||
|
input[type=search],
|
||||||
|
input[type=tel],
|
||||||
|
input[type=time],
|
||||||
|
input[type=url],
|
||||||
|
input[type=week] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $form-field-height;
|
||||||
|
padding: $form-field-padding-y $form-field-padding-x;
|
||||||
|
vertical-align: middle;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1.75;
|
||||||
|
padding: $form-field-padding-y $form-field-padding-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
select:not([multiple]) {
|
||||||
|
height: $form-field-height;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1.75;
|
||||||
|
padding: $form-field-padding-y $form-field-padding-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fieldset-reset {
|
||||||
|
padding: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fieldset-reset legend {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
body,
|
||||||
|
button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
/* Basscss Base Typography */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $font-family;
|
||||||
|
line-height: $line-height;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: $heading-font-family;
|
||||||
|
font-weight: $heading-font-weight;
|
||||||
|
line-height: $heading-line-height;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
dl,
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
font-size: $h4;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-left: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
samp {
|
||||||
|
font-family: $monospace-font-family;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $space-2;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: $space-3;
|
||||||
|
margin-bottom: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin-top: $space-3;
|
||||||
|
margin-bottom: $space-3;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: $space-2;
|
||||||
|
padding-right: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
blockquote p {
|
||||||
|
font-size: $h3;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
font-size: $h1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
font-size: $h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
font-size: $h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
font-size: $h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
font-size: $h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
font-size: $h6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-reset {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
.button-blue {
|
||||||
|
color: white;
|
||||||
|
background-color: $blue;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
transition-duration: .1s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
transition-property: box-shadow, background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-blue:hover {
|
||||||
|
opacity: .875;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-blue:active,
|
||||||
|
.button-blue.is-active {
|
||||||
|
box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-blue:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-blue:disabled,
|
||||||
|
.button-blue.is-disabled {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
/* Basscss Color Base */
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: $dark-gray;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $blue;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
background-color: $lighter-gray;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: $border-width;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
/* Basscss Colors */
|
||||||
|
|
||||||
|
.dark-gray {
|
||||||
|
color: $dark-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mid-gray {
|
||||||
|
color: $mid-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-gray {
|
||||||
|
color: $light-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lighter-gray {
|
||||||
|
color: $lighter-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
color: $orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dark-gray {
|
||||||
|
background-color: $dark-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-blue {
|
||||||
|
background-color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-mid-gray {
|
||||||
|
background-color: $mid-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light-gray {
|
||||||
|
background-color: $light-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-lighter-gray {
|
||||||
|
background-color: $lighter-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-red {
|
||||||
|
background-color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-green {
|
||||||
|
background-color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-yellow {
|
||||||
|
background-color: $yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-orange {
|
||||||
|
background-color: $orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-darken-1 {
|
||||||
|
background-color: $darken-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-darken-2 {
|
||||||
|
background-color: $darken-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-darken-3 {
|
||||||
|
background-color: $darken-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-darken-4 {
|
||||||
|
background-color: $darken-4;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
.highlight {
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .c,
|
||||||
|
.highlight .cs,
|
||||||
|
.highlight .cm,
|
||||||
|
.highlight .cp,
|
||||||
|
.highlight .c1 {
|
||||||
|
color: $hljs-comment;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .k,
|
||||||
|
.highlight .kc,
|
||||||
|
.highlight .kd,
|
||||||
|
.highlight .kn,
|
||||||
|
.highlight .kr,
|
||||||
|
.highlight .kt,
|
||||||
|
.highlight .kp {
|
||||||
|
color: $hljs-keyword;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .na,
|
||||||
|
.highlight .nb,
|
||||||
|
.highlight .nc,
|
||||||
|
.highlight .no,
|
||||||
|
.highlight .nd,
|
||||||
|
.highlight .ni,
|
||||||
|
.highlight .ne,
|
||||||
|
.highlight .nf,
|
||||||
|
.highlight .nl,
|
||||||
|
.highlight .nn,
|
||||||
|
.highlight .nx {
|
||||||
|
color: $hljs-name;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .mi,
|
||||||
|
.highlight .il {
|
||||||
|
color: $hljs-number;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .s,
|
||||||
|
.highlight .sb,
|
||||||
|
.highlight .sc,
|
||||||
|
.highlight .sd,
|
||||||
|
.highlight .s2,
|
||||||
|
.highlight .s3,
|
||||||
|
.highlight .sh,
|
||||||
|
.highlight .si,
|
||||||
|
.highlight .sx,
|
||||||
|
.highlight .sr,
|
||||||
|
.highlight .ss,
|
||||||
|
.highlight .s1 {
|
||||||
|
color: $hljs-string;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-id,
|
||||||
|
.scss .hljs-preprocessor {
|
||||||
|
color: $hljs-title;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .k {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .nc,
|
||||||
|
.highlight .no {
|
||||||
|
color: $hljs-type;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .o {
|
||||||
|
color: $hljs-tag;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .nb {
|
||||||
|
color: $hljs-attribute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .sr {
|
||||||
|
color: $hljs-regexp;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .ss {
|
||||||
|
color: $hljs-symbol;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in {
|
||||||
|
color: $hljs-built-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-preprocessor,
|
||||||
|
.hljs-pragma,
|
||||||
|
.hljs-pi,
|
||||||
|
.hljs-doctype,
|
||||||
|
.hljs-shebang,
|
||||||
|
.hljs-cdata {
|
||||||
|
color: $hljs-preprocessor;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
background: $hljs-deletion;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
background: $hljs-addition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff .hljs-change {
|
||||||
|
background: $hljs-change;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-chunk {
|
||||||
|
color: $hljs-chunk;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
/* Basscss Utility Headings */
|
||||||
|
|
||||||
|
.h00 {
|
||||||
|
font-size: $h00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h0 {
|
||||||
|
font-size: $h0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$breakpoint-md} {
|
||||||
|
.h00-responsive {
|
||||||
|
font-size: $h00-responsive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h0-responsive {
|
||||||
|
font-size: $h0-responsive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1-responsive {
|
||||||
|
font-size: $h1-responsive;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$breakpoint-xl} {
|
||||||
|
.h00-responsive {
|
||||||
|
font-size: $h00-responsive-max;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h0-responsive {
|
||||||
|
font-size: $h0-responsive-max;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1-responsive {
|
||||||
|
font-size: $h1-responsive-max;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
/* Basscss Utility Typography */
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: $bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caps {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-align {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-align {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
/* Basscss Utility White Space */
|
||||||
|
|
||||||
|
.m0 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt0 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr0 {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb0 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m1 {
|
||||||
|
margin: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt1 {
|
||||||
|
margin-top: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr1 {
|
||||||
|
margin-right: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb1 {
|
||||||
|
margin-bottom: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml1 {
|
||||||
|
margin-left: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m2 {
|
||||||
|
margin: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt2 {
|
||||||
|
margin-top: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr2 {
|
||||||
|
margin-right: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb2 {
|
||||||
|
margin-bottom: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml2 {
|
||||||
|
margin-left: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m3 {
|
||||||
|
margin: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt3 {
|
||||||
|
margin-top: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr3 {
|
||||||
|
margin-right: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb3 {
|
||||||
|
margin-bottom: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml3 {
|
||||||
|
margin-left: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m4 {
|
||||||
|
margin: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt4 {
|
||||||
|
margin-top: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr4 {
|
||||||
|
margin-right: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb4 {
|
||||||
|
margin-bottom: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml4 {
|
||||||
|
margin-left: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mxn1 {
|
||||||
|
margin-left: -$space-1;
|
||||||
|
margin-right: -$space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mxn2 {
|
||||||
|
margin-left: -$space-2;
|
||||||
|
margin-right: -$space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mxn3 {
|
||||||
|
margin-left: -$space-3;
|
||||||
|
margin-right: -$space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mxn4 {
|
||||||
|
margin-left: -$space-4;
|
||||||
|
margin-right: -$space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p1 {
|
||||||
|
padding: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py1 {
|
||||||
|
padding-top: $space-1;
|
||||||
|
padding-bottom: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px1 {
|
||||||
|
padding-left: $space-1;
|
||||||
|
padding-right: $space-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p2 {
|
||||||
|
padding: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py2 {
|
||||||
|
padding-top: $space-2;
|
||||||
|
padding-bottom: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px2 {
|
||||||
|
padding-left: $space-2;
|
||||||
|
padding-right: $space-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p3 {
|
||||||
|
padding: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py3 {
|
||||||
|
padding-top: $space-3;
|
||||||
|
padding-bottom: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px3 {
|
||||||
|
padding-left: $space-3;
|
||||||
|
padding-right: $space-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p4 {
|
||||||
|
padding: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py4 {
|
||||||
|
padding-top: $space-4;
|
||||||
|
padding-bottom: $space-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px4 {
|
||||||
|
padding-left: $space-4;
|
||||||
|
padding-right: $space-4;
|
||||||
|
}
|
||||||
|
|
@ -3,29 +3,6 @@
|
||||||
---
|
---
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Our variables
|
|
||||||
$base-font-family: Helvetica, Arial, sans-serif;
|
|
||||||
$base-font-size: 16px;
|
|
||||||
$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%);
|
|
||||||
|
|
||||||
$on-palm: 600px;
|
|
||||||
$on-laptop: 800px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Using media queries with like this:
|
// Using media queries with like this:
|
||||||
// @include media-query($palm) {
|
// @include media-query($palm) {
|
||||||
// .wrapper {
|
// .wrapper {
|
||||||
|
|
@ -39,11 +16,25 @@ $on-laptop: 800px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
@import 'basscss';
|
||||||
|
|
||||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
@import 'base';
|
||||||
@import
|
@import 'header';
|
||||||
"base",
|
@import 'layout';
|
||||||
"layout",
|
@import 'footer';
|
||||||
"syntax-highlighting"
|
@import 'pagination';
|
||||||
;
|
@import 'posts';
|
||||||
|
@import 'positions';
|
||||||
|
|
||||||
|
@import 'blockquotes';
|
||||||
|
@import 'clearfix';
|
||||||
|
@import 'code';
|
||||||
|
@import 'gists';
|
||||||
|
// @import 'links';
|
||||||
|
@import 'measure';
|
||||||
|
@import 'media-queries';
|
||||||
|
@import 'social-icons';
|
||||||
|
@import 'tables';
|
||||||
|
@import 'typography';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue