Local-ize the Swiss theme
Ready for bastardisation :D
This commit is contained in:
warlordjones
62
_sass/_base.scss
Normal file
62
_sass/_base.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* Reset some basic elements
|
||||
*/
|
||||
|
||||
* {
|
||||
box-sizing: border-box !important;
|
||||
margin: 0; }
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Basic styling
|
||||
*/
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: $body-font-size;
|
||||
line-height: 1.5;
|
||||
color: $color-body-text;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $h1-size; }
|
||||
h2, .h2 { font-size: $h2-size; }
|
||||
h3, .h3 { font-size: $h3-size; }
|
||||
h4, .h4 { font-size: $h4-size; }
|
||||
h5, .h5 { font-size: $h5-size; }
|
||||
h6, .h6 { font-size: $h6-size; text-transform: uppercase; letter-spacing: 0.02em; }
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
139
_sass/_components.scss
Normal file
139
_sass/_components.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
// Styling markdown output
|
||||
|
||||
// Code formatting
|
||||
pre {
|
||||
border-left: $spacer-1 solid $color-border;
|
||||
margin: $spacer-3 0;
|
||||
padding-left: 16px;
|
||||
width: (9 / 12 * 100%); // matches col-9
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $color-code;
|
||||
font-size: $body-font-size;
|
||||
padding: 1px 0px;
|
||||
}
|
||||
|
||||
|
||||
.prose {
|
||||
|
||||
a {
|
||||
text-decoration: underline dotted;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p, ol, ul {
|
||||
font-size: $prose-font-size;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-lg) {
|
||||
width: (10 / 12 * 100%); // matches col-10
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
ul li, ol li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
max-width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-lg) {
|
||||
max-width: (12 / 10 * 100%); // make image fill width of container on desktop
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
blockquote {
|
||||
line-height: 1.375;
|
||||
padding-left: 20px;
|
||||
margin: 40px 0 40px -16px;
|
||||
border-left: $spacer-1 solid $color-border;
|
||||
font-style: italic;
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-lg) {
|
||||
padding-left: $spacer-3;
|
||||
margin: $spacer-4 0 $spacer-4 -40px;
|
||||
max-width: (11 / 10 * 100%);
|
||||
|
||||
p {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
hr {
|
||||
color: $color-body-text;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
dd {
|
||||
font-style: italic;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
// Markdown tables
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5em;
|
||||
overflow: auto;
|
||||
// For Firefox to horizontally scroll wider tables.
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $spacer-2 $spacer-3 $spacer-2 2px;
|
||||
border-top: 1px solid $color-body-text;
|
||||
border-bottom: 1px solid $color-body-text;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid $color-body-text;
|
||||
}
|
||||
|
||||
tr th {
|
||||
border-top: 2px solid $color-body-text;
|
||||
border-bottom: 2px solid $color-body-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
182
_sass/_utilities.scss
Normal file
182
_sass/_utilities.scss
Normal file
@@ -0,0 +1,182 @@
|
||||
/* Type utilities */
|
||||
.h0 {
|
||||
font-size: $h0-mobile;
|
||||
line-height: 1.0125;
|
||||
margin-top: 0.85em;
|
||||
word-wrap: break-word;
|
||||
|
||||
@media (min-width: $breakpoint-lg) {
|
||||
font-size: $h0-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.no-underline {
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bold { font-weight: bold; }
|
||||
.uppercase { text-transform: uppercase; }
|
||||
|
||||
.lh-condensed { line-height: 1.25; }
|
||||
|
||||
.list-reset {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Border utilities */
|
||||
.border-bottom-thick { border-bottom: 2px solid; border-color: currentColor; }
|
||||
.border-bottom-thin { border-bottom: 1px solid; border-color: currentColor; }
|
||||
.border-top-thick { border-top: 2px solid; border-color: currentColor; }
|
||||
.border-top-thin { border-top: 1px solid; border-color: currentColor; }
|
||||
.border-0 { border: 0; }
|
||||
|
||||
|
||||
/* Theme color utilities */
|
||||
.header-background { background-color: $color-background; }
|
||||
.header-border { border-color: $color-foreground; }
|
||||
.header-title { color: $color-title; }
|
||||
.header-text { color: $color-foreground; }
|
||||
.header-social { fill: $color-foreground; }
|
||||
.header-social-accent { fill: $color-dot-accent; }
|
||||
.header-link:hover { color: $color-nav-link !important; } // used for navigation links on homepage
|
||||
.text-accent { color: $color-text-accent; } // used for date in post list and home link
|
||||
|
||||
/* Layout utilities */
|
||||
.container { max-width: $container-width; }
|
||||
|
||||
.col-1 { width: (1 / 12 * 100%); }
|
||||
.col-2 { width: (2 / 12 * 100%); }
|
||||
.col-3 { width: (3 / 12 * 100%); }
|
||||
.col-4 { width: (4 / 12 * 100%); }
|
||||
.col-5 { width: (5 / 12 * 100%); }
|
||||
.col-6 { width: (6 / 12 * 100%); }
|
||||
.col-7 { width: (7 / 12 * 100%); }
|
||||
.col-8 { width: (8 / 12 * 100%); }
|
||||
.col-9 { width: (9 / 12 * 100%); }
|
||||
.col-10 { width: (10 / 12 * 100%); }
|
||||
.col-11 { width: (11 / 12 * 100%); }
|
||||
.col-12 { width: 100%; }
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.sm-width-full { width: 100% !important; }
|
||||
}
|
||||
|
||||
.block { display: block !important; }
|
||||
.inline-block { display: inline-block !important; }
|
||||
|
||||
.table { display: table !important; }
|
||||
|
||||
.left { float: left; }
|
||||
.right { float: right; }
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table
|
||||
}
|
||||
.clearfix:after { clear: both }
|
||||
|
||||
.align-middle { vertical-align: middle; }
|
||||
|
||||
/* Padding */
|
||||
.px-0 { padding-left: 0; padding-right: 0 }
|
||||
.py-0 { padding-top: 0; padding-bottom: 0 }
|
||||
|
||||
.px-1 { padding-left: $spacer-1; padding-right: $spacer-1 }
|
||||
.py-1 { padding-top: $spacer-1; padding-bottom: $spacer-1 }
|
||||
|
||||
.px-2 { padding-left: $spacer-2; padding-right: $spacer-2; }
|
||||
.py-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }
|
||||
|
||||
.px-3 { padding-left: $spacer-3; padding-right: $spacer-3; }
|
||||
.py-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }
|
||||
|
||||
.px-4 { padding-left: $spacer-4; padding-right: $spacer-4; }
|
||||
.py-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }
|
||||
|
||||
/* Margin */
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.ml-0 { margin-left: 0; }
|
||||
|
||||
.mt-1 { margin-top: $spacer-1; }
|
||||
.mr-1 { margin-right: $spacer-1; }
|
||||
.mb-1 { margin-bottom: $spacer-1; }
|
||||
.ml-1 { margin-left: $spacer-1; }
|
||||
|
||||
.mt-2 { margin-top: $spacer-2; }
|
||||
.mr-2 { margin-right: $spacer-2; }
|
||||
.mb-2 { margin-bottom: $spacer-2; }
|
||||
.ml-2 { margin-left: $spacer-2; }
|
||||
|
||||
.mt-3 { margin-top: $spacer-3; }
|
||||
.mr-3 { margin-right: $spacer-3; }
|
||||
.mb-3 { margin-bottom: $spacer-3; }
|
||||
.ml-3 { margin-left: $spacer-3; }
|
||||
|
||||
.mt-4 { margin-top: $spacer-4; }
|
||||
.mr-4 { margin-right: $spacer-4; }
|
||||
.mb-4 { margin-bottom: $spacer-4; }
|
||||
.ml-4 { margin-left: $spacer-4; }
|
||||
|
||||
// Responsive margin
|
||||
@media (min-width: 52em) {
|
||||
.mx-lg-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
.mt-lg-0 { margin-top: 0; }
|
||||
.mr-lg-0 { margin-right: 0; }
|
||||
.mb-lg-0 { margin-bottom: 0; }
|
||||
.ml-lg-0 { margin-left: 0; }
|
||||
|
||||
.mt-lg-1 { margin-top: $spacer-1; }
|
||||
.mr-lg-1 { margin-right: $spacer-1; }
|
||||
.mb-lg-1 { margin-bottom: $spacer-1; }
|
||||
.ml-lg-1 { margin-left: $spacer-1; }
|
||||
|
||||
.mt-lg-2 { margin-top: $spacer-2; }
|
||||
.mr-lg-2 { margin-right: $spacer-2; }
|
||||
.mb-lg-2 { margin-bottom: $spacer-2; }
|
||||
.ml-lg-2 { margin-left: $spacer-2; }
|
||||
|
||||
.mt-lg-3 { margin-top: $spacer-3; }
|
||||
.mr-lg-3 { margin-right: $spacer-3; }
|
||||
.mb-lg-3 { margin-bottom: $spacer-3; }
|
||||
.ml-lg-3 { margin-left: $spacer-3; }
|
||||
|
||||
.mt-lg-4 { margin-top: $spacer-4; }
|
||||
.mr-lg-4 { margin-right: $spacer-4; }
|
||||
.mb-lg-4 { margin-bottom: $spacer-4; }
|
||||
.ml-lg-4 { margin-left: $spacer-4; }
|
||||
}
|
||||
|
||||
// Link styles for social icons
|
||||
.link-social {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Link styles for navigation
|
||||
.link-primary {
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary-link;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
35
_sass/_variables.scss
Normal file
35
_sass/_variables.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
// Font family
|
||||
$body-font-family: "Helvetica Neue", Arial, sans-serif;
|
||||
$body-font-size: 16px;
|
||||
$prose-font-size: 20px;
|
||||
|
||||
|
||||
// Type scale
|
||||
$h0-mobile: 64px;
|
||||
$h0-desktop: 128px;
|
||||
|
||||
$h1-size: 40px !default;
|
||||
$h2-size: 32px !default;
|
||||
$h3-size: 24px !default;
|
||||
$h4-size: 20px !default;
|
||||
$h5-size: 16px !default;
|
||||
$h6-size: 12px !default;
|
||||
|
||||
// Default border color
|
||||
$color-border: #ddd !default;
|
||||
|
||||
// Container width
|
||||
$container-width: 64em;
|
||||
|
||||
// Large breakpoint
|
||||
$breakpoint-lg: 52em;
|
||||
|
||||
// Spacing unit
|
||||
$spacer: 8px !default;
|
||||
|
||||
// Spacing scale
|
||||
$spacer-1: $spacer !default; // 8px
|
||||
$spacer-2: ($spacer * 2) !default; // 16px
|
||||
$spacer-3: ($spacer * 4) !default; // 32px
|
||||
$spacer-4: ($spacer * 8) !default; // 64px
|
||||
Reference in New Issue
Block a user