First round of style upgrades
This commit is contained in:
Maruan Al-Shedivat
parent
20e8a83fcd
commit
8b05f3a413
@ -1,6 +1,5 @@
|
||||
/**
|
||||
* Reset some basic elements
|
||||
*/
|
||||
@charset "UTF-8";
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
@ -8,36 +7,25 @@ dl, dd, ol, ul, figure {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/** Variables **********************************************/
|
||||
$base-font-family: Helvetica, sans-serif;
|
||||
$base-line-height: 1.5em;
|
||||
$horizontal-spacing-unit: 50px;
|
||||
$vertical-spacing-unit: 40px;
|
||||
$nav-height: 56px;
|
||||
em img {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/************************************************************/
|
||||
@ -51,7 +39,6 @@ body {
|
||||
line-height: $base-line-height;
|
||||
font-weight: 100;
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
|
||||
25
_sass/_basscss.scss
Normal file
25
_sass/_basscss.scss
Normal file
@ -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';
|
||||
16
_sass/_blockquotes.scss
Normal file
16
_sass/_blockquotes.scss
Normal file
@ -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;
|
||||
}
|
||||
8
_sass/_clearfix.scss
Normal file
8
_sass/_clearfix.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
70
_sass/_code.scss
Normal file
70
_sass/_code.scss
Normal file
@ -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;
|
||||
}
|
||||
35
_sass/_footer.scss
Normal file
35
_sass/_footer.scss
Normal file
@ -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; }
|
||||
}
|
||||
8
_sass/_gists.scss
Normal file
8
_sass/_gists.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.gist,
|
||||
.gist .highlight .p {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.gist .lines {
|
||||
width: 100%;
|
||||
}
|
||||
63
_sass/_header.scss
Normal file
63
_sass/_header.scss
Normal file
@ -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
|
||||
*****************************************************************************/
|
||||
@ -103,6 +35,7 @@
|
||||
td {
|
||||
padding: 5px 0;
|
||||
vertical-align: top;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -116,25 +49,6 @@
|
||||
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
|
||||
*****************************************************************************/
|
||||
|
||||
53
_sass/_links.scss
Normal file
53
_sass/_links.scss
Normal file
@ -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;
|
||||
}
|
||||
4
_sass/_measure.scss
Normal file
4
_sass/_measure.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.measure {
|
||||
margin: 0 auto;
|
||||
max-width: $measure-width;
|
||||
}
|
||||
64
_sass/_media-queries.scss
Normal file
64
_sass/_media-queries.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
52
_sass/_pagination.scss
Normal file
52
_sass/_pagination.scss
Normal file
@ -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;
|
||||
}
|
||||
7
_sass/_positions.scss
Normal file
7
_sass/_positions.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
48
_sass/_posts.scss
Normal file
48
_sass/_posts.scss
Normal file
@ -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;
|
||||
}
|
||||
25
_sass/_social-icons.scss
Normal file
25
_sass/_social-icons.scss
Normal file
@ -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;
|
||||
}
|
||||
45
_sass/_tables.scss
Normal file
45
_sass/_tables.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
24
_sass/_typography.scss
Normal file
24
_sass/_typography.scss
Normal file
@ -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;
|
||||
}
|
||||
192
_sass/_variables.scss
Normal file
192
_sass/_variables.scss
Normal file
@ -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;
|
||||
28
_sass/basscss/_base-buttons.scss
Normal file
28
_sass/basscss/_base-buttons.scss
Normal file
@ -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;
|
||||
}
|
||||
57
_sass/basscss/_base-forms.scss
Normal file
57
_sass/basscss/_base-forms.scss
Normal file
@ -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;
|
||||
}
|
||||
20
_sass/basscss/_base-reset.scss
Normal file
20
_sass/basscss/_base-reset.scss
Normal file
@ -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%;
|
||||
}
|
||||
101
_sass/basscss/_base-typography.scss
Normal file
101
_sass/basscss/_base-typography.scss
Normal file
@ -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;
|
||||
}
|
||||
27
_sass/basscss/_buttons-blue.scss
Normal file
27
_sass/basscss/_buttons-blue.scss
Normal file
@ -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;
|
||||
}
|
||||
28
_sass/basscss/_color-base.scss
Normal file
28
_sass/basscss/_color-base.scss
Normal file
@ -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;
|
||||
}
|
||||
97
_sass/basscss/_colors.scss
Normal file
97
_sass/basscss/_colors.scss
Normal file
@ -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;
|
||||
}
|
||||
119
_sass/basscss/_syntax-highlighting.scss
Normal file
119
_sass/basscss/_syntax-highlighting.scss
Normal file
@ -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;
|
||||
}
|
||||
37
_sass/basscss/_utility-headings.scss
Normal file
37
_sass/basscss/_utility-headings.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
38
_sass/basscss/_utility-typography.scss
Normal file
38
_sass/basscss/_utility-typography.scss
Normal file
@ -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;
|
||||
}
|
||||
182
_sass/basscss/_utility-white-space.scss
Normal file
182
_sass/basscss/_utility-white-space.scss
Normal file
@ -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";
|
||||
|
||||
|
||||
|
||||
// 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:
|
||||
// @include media-query($palm) {
|
||||
// .wrapper {
|
||||
@ -39,11 +16,25 @@ $on-laptop: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'variables';
|
||||
|
||||
@import 'basscss';
|
||||
|
||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
||||
@import
|
||||
"base",
|
||||
"layout",
|
||||
"syntax-highlighting"
|
||||
;
|
||||
@import 'base';
|
||||
@import 'header';
|
||||
@import 'layout';
|
||||
@import 'footer';
|
||||
@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
Block a user