mirror of
https://github.com/FoggedLens/foggedlens.github.io.git
synced 2026-07-25 04:50:49 +02:00
first post
This commit is contained in:
frillweeman
@@ -0,0 +1,37 @@
|
||||
/* Copyright comment */
|
||||
@import "minimal-mistakes/copyright";
|
||||
|
||||
/* Variables */
|
||||
@import "minimal-mistakes/variables";
|
||||
|
||||
/* Mixins and functions */
|
||||
@import "minimal-mistakes/vendor/breakpoint/breakpoint";
|
||||
@include breakpoint-set("to ems", true);
|
||||
@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
|
||||
@import "minimal-mistakes/vendor/susy/susy";
|
||||
@import "minimal-mistakes/mixins";
|
||||
|
||||
/* Core CSS */
|
||||
@import "minimal-mistakes/reset";
|
||||
@import "minimal-mistakes/base";
|
||||
@import "minimal-mistakes/forms";
|
||||
@import "minimal-mistakes/tables";
|
||||
@import "minimal-mistakes/animations";
|
||||
|
||||
/* Components */
|
||||
@import "minimal-mistakes/buttons";
|
||||
@import "minimal-mistakes/notices";
|
||||
@import "minimal-mistakes/masthead";
|
||||
@import "minimal-mistakes/navigation";
|
||||
@import "minimal-mistakes/footer";
|
||||
@import "minimal-mistakes/search";
|
||||
@import "minimal-mistakes/syntax";
|
||||
|
||||
/* Utility classes */
|
||||
@import "minimal-mistakes/utilities";
|
||||
|
||||
/* Layout specific */
|
||||
@import "minimal-mistakes/page";
|
||||
@import "minimal-mistakes/archive";
|
||||
@import "minimal-mistakes/sidebar";
|
||||
@import "minimal-mistakes/print";
|
||||
@@ -0,0 +1,21 @@
|
||||
/* ==========================================================================
|
||||
ANIMATIONS
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes intro {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes intro {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
/* ==========================================================================
|
||||
ARCHIVE
|
||||
========================================================================== */
|
||||
|
||||
.archive {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: inline-end;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
padding-inline-end: $right-sidebar-width-narrow;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
padding-inline-end: $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
a[rel="permalink"] {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__subtitle {
|
||||
margin: 1.414em 0 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
font-size: $type-size-5;
|
||||
color: $muted-text-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
+ .list__item .archive__item-title {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-bottom: 0.25em;
|
||||
font-family: $sans-serif-narrow;
|
||||
line-height: initial;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a[rel="permalink"]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
a + a {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* remove border*/
|
||||
.page__content {
|
||||
.archive__item-title {
|
||||
margin-top: 1em;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-excerpt {
|
||||
margin-top: 0;
|
||||
font-size: $type-size-6;
|
||||
|
||||
& + p {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-family: $caption-font-family;
|
||||
font-size: $type-size-8;
|
||||
background: #000;
|
||||
text-align: end;
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
border-radius: $border-radius 0 0 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
List view
|
||||
========================================================================== */
|
||||
|
||||
.list__item {
|
||||
.page__meta {
|
||||
margin: 0 0 4px;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Grid view
|
||||
========================================================================== */
|
||||
|
||||
.archive {
|
||||
.grid__wrapper {
|
||||
/* extend grid elements to the right */
|
||||
|
||||
@include breakpoint($large) {
|
||||
margin-inline-end: -1 * $right-sidebar-width-narrow;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
margin-inline-end: -1 * $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid__item {
|
||||
margin-bottom: 2em;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: inline-start;
|
||||
width: span(5 of 10);
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
clear: both;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(of 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
margin-inline: 0; /* override margin*/
|
||||
width: span(3 of 12);
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&:nth-child(4n + 1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:nth-child(4n + 2) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
|
||||
&:nth-child(4n + 3) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
|
||||
&:nth-child(4n + 4) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
}
|
||||
|
||||
.page__meta {
|
||||
margin: 0 0 4px;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.page__meta-sep {
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-top: 0.5em;
|
||||
font-size: $type-size-5;
|
||||
}
|
||||
|
||||
.archive__item-excerpt {
|
||||
display: none;
|
||||
|
||||
@include breakpoint($medium) {
|
||||
display: block;
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
@include breakpoint($small) {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Features
|
||||
========================================================================== */
|
||||
|
||||
.feature__wrapper {
|
||||
@include clearfix();
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.archive__item-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.feature__item {
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
font-size: 1.125em;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: inline-start;
|
||||
margin-bottom: 0;
|
||||
width: span(4 of 12);
|
||||
|
||||
&:nth-child(3n + 1) {
|
||||
clear: both;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(of 12);
|
||||
}
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
clear: none;
|
||||
margin-inline-start: gutter(of 12);
|
||||
}
|
||||
|
||||
.feature__item-teaser {
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
padding-inline: gutter(1 of 12);
|
||||
}
|
||||
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&--left, &--right {
|
||||
position: relative;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 1.125em;
|
||||
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&--left {
|
||||
float: inline-start;
|
||||
|
||||
.archive__item {
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
.archive__item-teaser {
|
||||
float: inline-start;
|
||||
width: span(5 of 12);
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
float: inline-end;
|
||||
width: span(7 of 12);
|
||||
padding-inline-start: gutter(0.5 of 12);
|
||||
padding-inline-end: gutter(1 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
float: inline-end;
|
||||
|
||||
.archive__item {
|
||||
float: inline-end;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
text-align: end;
|
||||
|
||||
.archive__item-teaser {
|
||||
float: inline-end;
|
||||
width: span(5 of 12);
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
float: inline-start;
|
||||
width: span(7 of 12);
|
||||
padding-inline-start: gutter(1 of 12);
|
||||
padding-inline-end: gutter(0.5 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
position: relative;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 1.125em;
|
||||
|
||||
.archive__item {
|
||||
float: inline-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
text-align: center;
|
||||
|
||||
.archive__item-teaser {
|
||||
margin: 0 auto;
|
||||
width: span(5 of 12);
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
margin: 0 auto;
|
||||
width: span(7 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Place inside an archive layout */
|
||||
|
||||
.archive {
|
||||
.feature__wrapper {
|
||||
.archive__item-title {
|
||||
margin-top: 0.25em;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.feature__item,
|
||||
.feature__item--left,
|
||||
.feature__item--center,
|
||||
.feature__item--right {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Wide Pages
|
||||
========================================================================== */
|
||||
|
||||
.wide {
|
||||
.archive {
|
||||
@include breakpoint($large) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Place inside a single layout */
|
||||
|
||||
.layout--single {
|
||||
.feature__wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,341 @@
|
||||
/* ==========================================================================
|
||||
BASE ELEMENTS
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
/* sticky footer fix */
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $text-color;
|
||||
font-family: $global-font-family;
|
||||
line-height: 1.5;
|
||||
|
||||
&.overflow--hidden {
|
||||
/* when primary navigation is visible, the content in the background won't scroll */
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 2em 0 0.5em;
|
||||
line-height: 1.2;
|
||||
font-family: $header-font-family;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: $h-size-1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h-size-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h-size-3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $h-size-4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $h-size-5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: $h-size-6;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $text-color;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
del a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* reduce orphans and widows when printing */
|
||||
|
||||
p,
|
||||
pre,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
fieldset {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
/* abbreviations */
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $text-color;
|
||||
}
|
||||
|
||||
/* blockquotes */
|
||||
|
||||
blockquote {
|
||||
margin-block: 2em;
|
||||
margin-inline-end: 1em;
|
||||
padding-inline: 1em;
|
||||
font-style: italic;
|
||||
border-inline-start: 0.25em solid $primary-color;
|
||||
|
||||
cite {
|
||||
font-style: italic;
|
||||
|
||||
&::before {
|
||||
content: "\2014";
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* links */
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $link-color-visited;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
button:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
|
||||
/* code */
|
||||
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: $monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto; /* add scrollbars to wide code blocks*/
|
||||
}
|
||||
|
||||
/* horizontal rule */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Media and embeds
|
||||
========================================================================== */
|
||||
|
||||
/* Figures and images */
|
||||
|
||||
figure {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin: 2em 0;
|
||||
|
||||
img,
|
||||
iframe,
|
||||
.fluid-width-video-wrapper {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.half {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.third {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(33.3333% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Figure captions */
|
||||
|
||||
figcaption {
|
||||
margin-bottom: 0.5em;
|
||||
color: $muted-text-color;
|
||||
font-family: $caption-font-family;
|
||||
font-size: $type-size-6;
|
||||
|
||||
a {
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix IE9 SVG bug */
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Navigation lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Removes margins, padding, and bullet points from navigation lists
|
||||
*
|
||||
* Example usage:
|
||||
* <nav>
|
||||
* <ul>
|
||||
* <li><a href="#link-1">Link 1</a></li>
|
||||
* <li><a href="#link-2">Link 2</a></li>
|
||||
* <li><a href="#link-3">Link 3</a></li>
|
||||
* </ul>
|
||||
* </nav>
|
||||
*/
|
||||
|
||||
nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* override white-space for nested lists */
|
||||
ul li,
|
||||
ol li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Global animation transition
|
||||
========================================================================== */
|
||||
|
||||
b,
|
||||
i,
|
||||
strong,
|
||||
em,
|
||||
blockquote,
|
||||
p,
|
||||
q,
|
||||
span,
|
||||
figure,
|
||||
img,
|
||||
h1,
|
||||
h2,
|
||||
header,
|
||||
input,
|
||||
a,
|
||||
tr,
|
||||
td,
|
||||
form button,
|
||||
input[type="submit"],
|
||||
.btn,
|
||||
.highlight,
|
||||
.archive__item-teaser {
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* ==========================================================================
|
||||
BUTTONS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default button
|
||||
========================================================================== */
|
||||
|
||||
.btn {
|
||||
/* default */
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-6;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-width: 0;
|
||||
border-radius: $border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
.icon + .hidden {
|
||||
margin-inline-start: -0.5em; /* override for hidden text*/
|
||||
}
|
||||
|
||||
/* button colors */
|
||||
$buttoncolors:
|
||||
(primary, $primary-color),
|
||||
(inverse, #fff),
|
||||
(light-outline, transparent),
|
||||
(success, $success-color),
|
||||
(warning, $warning-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
/* brands */
|
||||
(bluesky, $bluesky-color),
|
||||
(facebook, $facebook-color),
|
||||
(linkedin, $linkedin-color),
|
||||
(mastodon, $mastodon-color),
|
||||
(twitter, $twitter-color),
|
||||
(x, $x-color);
|
||||
|
||||
@each $buttoncolor, $color in $buttoncolors {
|
||||
&--#{$buttoncolor} {
|
||||
@include yiq-contrasted($color);
|
||||
@if ($buttoncolor == inverse) {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
@if ($buttoncolor == light-outline) {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
@include yiq-contrasted($color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include yiq-contrasted(mix(#000, $color, 20%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fills width of parent container */
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
+ .btn--block {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
&--disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
filter: alpha(opacity=65);
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* extra large button */
|
||||
&--x-large {
|
||||
font-size: $type-size-4;
|
||||
}
|
||||
|
||||
/* large button */
|
||||
&--large {
|
||||
font-size: $type-size-5;
|
||||
}
|
||||
|
||||
/* small button */
|
||||
&--small {
|
||||
font-size: $type-size-7;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Minimal Mistakes Jekyll Theme 4.27.2 by Michael Rose
|
||||
* Copyright 2013-2025 Michael Rose - mademistakes.com | @mmistakes
|
||||
* Free for personal and commercial use under the MIT license
|
||||
* https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE
|
||||
*/
|
||||
@@ -0,0 +1,83 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
|
||||
.page__footer {
|
||||
@include clearfix;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
margin-top: 3em;
|
||||
color: $muted-text-color;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.45s;
|
||||
animation-delay: 0.45s;
|
||||
background-color: $footer-background-color;
|
||||
|
||||
footer {
|
||||
@include clearfix;
|
||||
margin-inline: auto;
|
||||
margin-top: 2em;
|
||||
max-width: 100%;
|
||||
padding: 0 1em 2em;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $x-large;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.fas,
|
||||
.fab,
|
||||
.far,
|
||||
.fal {
|
||||
color: $muted-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page__footer-copyright {
|
||||
font-family: $global-font-family;
|
||||
font-size: $type-size-7;
|
||||
}
|
||||
|
||||
.page__footer-follow {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: $type-size-6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
li + li::before {
|
||||
content: "";
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-inline-end: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
form {
|
||||
margin-bottom: 5px;
|
||||
padding: 1em;
|
||||
background-color: $form-background-color;
|
||||
|
||||
fieldset {
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px * 2;
|
||||
margin-inline-start: -7px;
|
||||
padding: 0;
|
||||
color: $text-color;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: (5px / 2);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0 0 5px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
|
||||
small {
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0.25em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
border: $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.input-mini {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.input-small {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
input[type="image"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 3px 0;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border: 0 \9;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: auto;
|
||||
padding: initial;
|
||||
line-height: initial;
|
||||
border: initial;
|
||||
background-color: transparent;
|
||||
background-color: initial;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
padding-inline-start: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: inline-start;
|
||||
margin-inline-start: -18px;
|
||||
}
|
||||
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled state
|
||||
========================================================================== */
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
Focus & active state
|
||||
========================================================================== */
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: $primary-color;
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
box-shadow: inset 0 1px 3px rgba($text-color, 0.06),
|
||||
0 0 5px rgba($primary-color, 0.7);
|
||||
}
|
||||
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus,
|
||||
select:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Help text
|
||||
========================================================================== */
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: $muted-text-color;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
.form-group
|
||||
========================================================================== */
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.form-inline
|
||||
========================================================================== */
|
||||
|
||||
.form-inline input,
|
||||
.form-inline textarea,
|
||||
.form-inline select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox,
|
||||
.form-inline .radio {
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
float: inline-start;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
.form-search
|
||||
========================================================================== */
|
||||
|
||||
.form-search input,
|
||||
.form-search textarea,
|
||||
.form-search select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-search .search-query {
|
||||
padding-inline: 14px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.form-search label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio {
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-search .radio input[type="radio"],
|
||||
.form-search .checkbox input[type="checkbox"] {
|
||||
float: inline-start;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
.form--loading
|
||||
========================================================================== */
|
||||
|
||||
.form--loading::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.form--loading .form__spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.form__spinner {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 50%;
|
||||
z-index: 11;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* ==========================================================================
|
||||
MASTHEAD
|
||||
========================================================================== */
|
||||
|
||||
.masthead {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $border-color;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.15s;
|
||||
animation-delay: 0.15s;
|
||||
z-index: 20;
|
||||
|
||||
&__inner-wrap {
|
||||
@include clearfix;
|
||||
margin-inline: auto;
|
||||
padding: 1em;
|
||||
max-width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
font-family: $sans-serif-narrow;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-logo img {
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
font-weight: bold;
|
||||
// z-index: 20;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
display: block;
|
||||
font-size: $type-size-8;
|
||||
}
|
||||
|
||||
.masthead__menu {
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
|
||||
.site-nav {
|
||||
margin-inline-start: 0;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: inline-end;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
.masthead__menu-item {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&--lg {
|
||||
padding-inline-end: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/* ==========================================================================
|
||||
MIXINS
|
||||
========================================================================== */
|
||||
|
||||
%tab-focus {
|
||||
/* Default*/
|
||||
outline: thin dotted $focus-color;
|
||||
/* Webkit*/
|
||||
outline: 5px auto $focus-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/*
|
||||
em function
|
||||
========================================================================== */
|
||||
|
||||
@function em($target, $context: $doc-font-size) {
|
||||
@return ($target / $context) * 1em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Bourbon clearfix
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Provides an easy way to include a clearfix for containing floats.
|
||||
* link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
*
|
||||
* example scss - Usage
|
||||
*
|
||||
* .element {
|
||||
* @include clearfix;
|
||||
* }
|
||||
*
|
||||
* example css - CSS Output
|
||||
*
|
||||
* .element::after {
|
||||
* clear: both;
|
||||
* content: "";
|
||||
* display: table;
|
||||
* }
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
clear: both;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Compass YIQ Color Contrast
|
||||
https://github.com/easy-designs/yiq-color-contrast
|
||||
========================================================================== */
|
||||
|
||||
@function yiq-is-light(
|
||||
$color,
|
||||
$threshold: $yiq-contrasted-threshold
|
||||
) {
|
||||
$red: red($color);
|
||||
$green: green($color);
|
||||
$blue: blue($color);
|
||||
|
||||
$yiq: (($red*299)+($green*587)+($blue*114))/1000;
|
||||
|
||||
@if $yiq-debug { @debug $yiq, $threshold; }
|
||||
|
||||
@return if($yiq >= $threshold, true, false);
|
||||
}
|
||||
|
||||
@function yiq-contrast-color(
|
||||
$color,
|
||||
$dark: $yiq-contrasted-dark-default,
|
||||
$light: $yiq-contrasted-light-default,
|
||||
$threshold: $yiq-contrasted-threshold
|
||||
) {
|
||||
@return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default);
|
||||
}
|
||||
|
||||
@mixin yiq-contrasted(
|
||||
$background-color,
|
||||
$dark: $yiq-contrasted-dark-default,
|
||||
$light: $yiq-contrasted-light-default,
|
||||
$threshold: $yiq-contrasted-threshold
|
||||
) {
|
||||
background-color: $background-color;
|
||||
color: yiq-contrast-color($background-color, $dark, $light, $threshold);
|
||||
}
|
||||
@@ -0,0 +1,571 @@
|
||||
/* ==========================================================================
|
||||
NAVIGATION
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Breadcrumb navigation links
|
||||
========================================================================== */
|
||||
|
||||
.breadcrumbs {
|
||||
@include clearfix;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding-inline: 1em;
|
||||
font-family: $sans-serif;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $x-large;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: $type-size-6;
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: inline-end;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Post pagination navigation links
|
||||
========================================================================== */
|
||||
|
||||
.pagination {
|
||||
@include clearfix();
|
||||
float: inline-start;
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: inline-start;
|
||||
margin-inline-start: -1px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
font-family: $sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: $muted-text-color;
|
||||
border: 1px solid mix(#000, $border-color, 25%);
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
|
||||
&.current,
|
||||
&.current.disabled {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: rgba($muted-text-color, 0.5);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-inline-start: 0;
|
||||
|
||||
a {
|
||||
border-start-start-radius: $border-radius;
|
||||
border-end-start-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
border-start-end-radius: $border-radius;
|
||||
border-end-end-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* next/previous buttons */
|
||||
&--pager {
|
||||
display: block;
|
||||
padding: 1em 2em;
|
||||
float: inline-start;
|
||||
width: 50%;
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-5;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: $muted-text-color;
|
||||
border: 1px solid mix(#000, $border-color, 25%);
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
@include yiq-contrasted($muted-text-color);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-start: -1px;
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: rgba($muted-text-color, 0.5);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page__content + .pagination,
|
||||
.page__meta + .pagination,
|
||||
.page__share + .pagination,
|
||||
.page__comments + .pagination {
|
||||
margin-top: 2em;
|
||||
padding-top: 2em;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Priority plus navigation
|
||||
========================================================================== */
|
||||
|
||||
.greedy-nav {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: $nav-height;
|
||||
background: $background-color;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
color: $masthead-link-color;
|
||||
text-decoration: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
color: $masthead-link-color-hover;
|
||||
}
|
||||
|
||||
&.site-logo {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
&.site-title {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
height: $nav-toggle-height;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.visible-links {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: $primary-color;
|
||||
width: 100%;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
-webkit-transform: scaleX(0) translate3d(0, 0, 0);
|
||||
transform: scaleX(0) translate3d(0, 0, 0); // hide
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1); // reveal
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-links {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-inline-end: 0;
|
||||
margin-top: 15px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background: $background-color;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
|
||||
0 2px 10px 0 rgba(#000, 0.12);
|
||||
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
font-size: $type-size-5;
|
||||
|
||||
&:hover {
|
||||
color: $masthead-link-color-hover;
|
||||
background: $navicon-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
inset-inline-end: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
inset-inline-end: 10px;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $background-color transparent;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-js {
|
||||
.greedy-nav {
|
||||
.visible-links {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Navigation list
|
||||
========================================================================== */
|
||||
|
||||
.nav__list {
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
input[type="checkbox"],
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include breakpoint(max-width $large - 1px) {
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5em 2.5em 0.5em 1em;
|
||||
color: $gray;
|
||||
font-size: $type-size-6;
|
||||
font-weight: bold;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
z-index: 20;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-end: 1em;
|
||||
top: 1.25em;
|
||||
width: 0.75em;
|
||||
height: 0.125em;
|
||||
line-height: 1;
|
||||
background-color: $gray;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: $gray;
|
||||
background-color: mix(white, #000, 20%);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* selected*/
|
||||
input:checked + label {
|
||||
color: white;
|
||||
background-color: mix(white, #000, 20%);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* on hover show expand*/
|
||||
label:hover:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
input:checked + label:hover:after {
|
||||
-webkit-transform: rotate(0);
|
||||
-ms-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25em 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
padding-top: 0.125em;
|
||||
padding-bottom: 0.125em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__list .nav__items {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.active {
|
||||
margin-inline-start: -0.5em;
|
||||
padding-inline: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@include breakpoint(max-width $large - 1px) {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
opacity: 0%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
-webkit-transition: 0.3s ease-in-out;
|
||||
transition: 0.3s ease-in-out;
|
||||
-webkit-transform: translate(0, 10%);
|
||||
-ms-transform: translate(0, 10%);
|
||||
transform: translate(0, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(max-width $large - 1px) {
|
||||
.nav__list input:checked ~ .nav__items {
|
||||
-webkit-transition: 0.5s ease-in-out;
|
||||
transition: 0.5s ease-in-out;
|
||||
max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
margin-top: 1em;
|
||||
-webkit-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.nav__title {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: $type-size-5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav__sub-title {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.25rem 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: $type-size-6;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Table of contents navigation
|
||||
========================================================================== */
|
||||
|
||||
.toc {
|
||||
font-family: $sans-serif-narrow;
|
||||
color: $gray;
|
||||
background-color: $background-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.nav__title {
|
||||
color: #fff;
|
||||
font-size: $type-size-6;
|
||||
background: $primary-color;
|
||||
border-start-start-radius: $border-radius;
|
||||
border-start-end-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Scrollspy marks toc items as .active when they are in focus
|
||||
.active a {
|
||||
@include yiq-contrasted($active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toc__menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
font-size: $type-size-6;
|
||||
|
||||
@include breakpoint($large) {
|
||||
font-size: $type-size-7;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
color: $muted-text-color;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
li ul > li a {
|
||||
padding-inline-start: 1.25rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
li ul li ul > li a {
|
||||
padding-inline-start: 1.75rem;
|
||||
}
|
||||
|
||||
li ul li ul li ul > li a {
|
||||
padding-inline-start: 2.25rem;
|
||||
}
|
||||
|
||||
li ul li ul li ul li ul > li a {
|
||||
padding-inline-start: 2.75rem;
|
||||
}
|
||||
|
||||
li ul li ul li ul li ul li ul > li a {
|
||||
padding-inline-start: 3.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/* ==========================================================================
|
||||
NOTICE TEXT BLOCKS
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Default Kramdown usage (no indents!):
|
||||
* <div class="notice" markdown="1">
|
||||
* #### Headline for the Notice
|
||||
* Text for the notice
|
||||
* </div>
|
||||
*/
|
||||
|
||||
@mixin notice($notice-color) {
|
||||
margin: 2em 0 !important; /* override*/
|
||||
padding: 1em;
|
||||
color: $text-color;
|
||||
font-family: $global-font-family;
|
||||
font-size: $type-size-6 !important;
|
||||
text-indent: initial; /* override*/
|
||||
background-color: mix($background-color, $notice-color, $notice-background-mix);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
|
||||
|
||||
h4 {
|
||||
margin-top: 0 !important; /* override*/
|
||||
margin-bottom: 0.75em;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@at-root .page__content #{&} h4 {
|
||||
/* using at-root to override .page-content h4 font size*/
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important; /* override*/
|
||||
}
|
||||
}
|
||||
|
||||
h4 + p {
|
||||
/* remove space above paragraphs that appear directly after notice headline*/
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: mix(#000, $notice-color, 10%);
|
||||
|
||||
&:hover {
|
||||
color: mix(#000, $notice-color, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{selector-unify(&, "blockquote")} {
|
||||
border-inline-start-color: mix(#000, $notice-color, 10%);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: mix($background-color, $notice-color, $code-notice-background-mix)
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
&:last-child {
|
||||
margin-bottom: 0; /* override*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Default notice */
|
||||
|
||||
.notice {
|
||||
@include notice($light-gray);
|
||||
}
|
||||
|
||||
/* Primary notice */
|
||||
|
||||
.notice--primary {
|
||||
@include notice($primary-color);
|
||||
}
|
||||
|
||||
/* Info notice */
|
||||
|
||||
.notice--info {
|
||||
@include notice($info-color);
|
||||
}
|
||||
|
||||
/* Warning notice */
|
||||
|
||||
.notice--warning {
|
||||
@include notice($warning-color);
|
||||
}
|
||||
|
||||
/* Success notice */
|
||||
|
||||
.notice--success {
|
||||
@include notice($success-color);
|
||||
}
|
||||
|
||||
/* Danger notice */
|
||||
|
||||
.notice--danger {
|
||||
@include notice($danger-color);
|
||||
}
|
||||
@@ -0,0 +1,562 @@
|
||||
/* ==========================================================================
|
||||
SINGLE PAGE/POST
|
||||
========================================================================== */
|
||||
|
||||
#main {
|
||||
@include clearfix;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1em;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
max-width: 100%;
|
||||
-webkit-animation-delay: 0.15s;
|
||||
animation-delay: 0.15s;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $max-width;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.initial-content,
|
||||
.search-content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.page {
|
||||
@include breakpoint($large) {
|
||||
float: inline-end;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
padding-inline-end: $right-sidebar-width-narrow;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
padding-inline-end: $right-sidebar-width;
|
||||
}
|
||||
|
||||
.page__inner-wrap {
|
||||
float: inline-start;
|
||||
margin-top: 1em;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
|
||||
.page__content,
|
||||
.page__meta,
|
||||
.page__share {
|
||||
position: relative;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page__title {
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& + .page__meta {
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.page__lead {
|
||||
font-family: $global-font-family;
|
||||
font-size: $type-size-4;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
h2 {
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.header-link {
|
||||
position: relative;
|
||||
inset-inline-start: 0.5em;
|
||||
opacity: 0;
|
||||
font-size: 0.8em;
|
||||
-webkit-transition: opacity 0.2s ease-in-out 0.1s;
|
||||
-moz-transition: opacity 0.2s ease-in-out 0.1s;
|
||||
-o-transition: opacity 0.2s ease-in-out 0.1s;
|
||||
transition: opacity 0.2s ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
&:hover .header-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
dl {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* paragraph indents */
|
||||
p {
|
||||
margin: 0 0 $indent-var;
|
||||
margin-bottom: $space-after-paragraph;
|
||||
|
||||
/* sibling indentation*/
|
||||
@if $paragraph-indent == true {
|
||||
& + p {
|
||||
text-indent: $indent-var;
|
||||
margin-top: -($indent-var);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
img {
|
||||
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
font-size: 0.8em;
|
||||
background: $code-background-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0"; /* non-breaking space*/
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-top: 1em;
|
||||
font-family: $sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 1em;
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
/* blockquote citations */
|
||||
blockquote + .small {
|
||||
margin-top: -1.5em;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page__hero {
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
@include clearfix;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
|
||||
&--overlay {
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
padding: 3em 0;
|
||||
@include clearfix;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-inline: 1em;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $x-large;
|
||||
}
|
||||
}
|
||||
|
||||
.page__title,
|
||||
.page__meta,
|
||||
.page__lead,
|
||||
.btn {
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 4px rgba(#000, 0.5);
|
||||
}
|
||||
|
||||
.page__lead {
|
||||
max-width: $medium;
|
||||
}
|
||||
|
||||
.page__title {
|
||||
font-size: $type-size-2;
|
||||
|
||||
@include breakpoint($small) {
|
||||
font-size: $type-size-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page__hero-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
.page__hero-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-family: $caption-font-family;
|
||||
font-size: $type-size-7;
|
||||
background: #000;
|
||||
text-align: end;
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
border-radius: $border-radius 0 0 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Social sharing
|
||||
========================================================================== */
|
||||
|
||||
.page__share {
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
@include breakpoint(max-width $small) {
|
||||
.btn span {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page__share-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: $type-size-6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
Page meta
|
||||
========================================================================== */
|
||||
|
||||
.page__meta {
|
||||
margin-top: 2em;
|
||||
color: $muted-text-color;
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-6;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.page__meta-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: $type-size-6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page__meta-sep::before {
|
||||
content: "\2022";
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Page taxonomy
|
||||
========================================================================== */
|
||||
|
||||
.page__taxonomy {
|
||||
.sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.page__taxonomy-item {
|
||||
display: inline-block;
|
||||
margin-inline-end: 5px;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border: 1px solid mix(#000, $border-color, 25%);
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.taxonomy__section {
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px $border-color;
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.archive__subtitle {
|
||||
clear: both;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
+ .taxonomy__section {
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.taxonomy__title {
|
||||
margin-bottom: 0.5em;
|
||||
color: $muted-text-color;
|
||||
}
|
||||
|
||||
.taxonomy__count {
|
||||
color: $muted-text-color;
|
||||
}
|
||||
|
||||
.taxonomy__index {
|
||||
display: grid;
|
||||
grid-column-gap: 2em;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 1.414em 0;
|
||||
padding: 0;
|
||||
font-size: 0.75em;
|
||||
list-style: none;
|
||||
|
||||
@include breakpoint($large) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0.25em 0;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
display: block;
|
||||
clear: both;
|
||||
color: $muted-text-color;
|
||||
font-size: 0.6em;
|
||||
text-transform: uppercase;
|
||||
text-align: end;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Comments
|
||||
========================================================================== */
|
||||
|
||||
.page__comments {
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.page__comments-title {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 2rem;
|
||||
font-size: $type-size-6;
|
||||
border-top: 1px solid $border-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page__comments-form {
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
|
||||
&.disabled {
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
label {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
filter: alpha(opacity=65);
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
@include clearfix();
|
||||
margin: 1em 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__avatar-wrapper {
|
||||
float: inline-start;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__content-wrapper {
|
||||
float: inline-end;
|
||||
width: calc(100% - 60px);
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
.comment__author {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__date {
|
||||
@extend .page__meta;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Related
|
||||
========================================================================== */
|
||||
|
||||
.page__related {
|
||||
@include clearfix();
|
||||
float: inline-start;
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: inline-end;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(100% - #{$right-sidebar-width});
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page__related-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: $type-size-6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
Wide Pages
|
||||
========================================================================== */
|
||||
|
||||
.wide {
|
||||
.page, .page__related {
|
||||
@include breakpoint($large) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
/* ==========================================================================
|
||||
PRINT STYLES
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: auto !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #000;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 2px solid #bbb;
|
||||
height: 0;
|
||||
margin: 2.25rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
acronym[title] {
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
figure,
|
||||
li,
|
||||
hr,
|
||||
ul,
|
||||
ol,
|
||||
a,
|
||||
tr {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h1 + p,
|
||||
h2 + p,
|
||||
h3 + p {
|
||||
page-break-before: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-after: auto;
|
||||
page-break-before: auto;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a[href^='http://']:after,
|
||||
a[href^='https://']:after,
|
||||
a[href^='ftp://']:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
abbr[title]:after,
|
||||
acronym[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
#main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-break,
|
||||
.page-break-before {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.page-break-after {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.no-reformat:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
abbr[title].no-reformat:after,
|
||||
acronym[title].no-reformat:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.page__hero-caption {
|
||||
color: #000 !important;
|
||||
background: #fff !important;
|
||||
opacity: 1;
|
||||
|
||||
a {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Hide the following elements on print
|
||||
========================================================================== */
|
||||
|
||||
.masthead,
|
||||
.toc,
|
||||
.page__share,
|
||||
.page__related,
|
||||
.pagination,
|
||||
.ads,
|
||||
.page__footer,
|
||||
.page__comments-form,
|
||||
.author__avatar,
|
||||
.author__content,
|
||||
.author__urls-wrapper,
|
||||
.nav__list,
|
||||
.sidebar,
|
||||
.adsbygoogle {
|
||||
display: none !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
/* ==========================================================================
|
||||
STYLE RESETS
|
||||
========================================================================== */
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
/* apply a natural box layout model to all elements */
|
||||
box-sizing: border-box;
|
||||
background-color: $background-color;
|
||||
font-size: $doc-font-size;
|
||||
|
||||
@include breakpoint($medium) {
|
||||
font-size: $doc-font-size-medium;
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
font-size: $doc-font-size-large;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
font-size: $doc-font-size-x-large;
|
||||
}
|
||||
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Remove margin */
|
||||
|
||||
body { margin: 0; }
|
||||
|
||||
/* Selected elements */
|
||||
|
||||
::-moz-selection {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Display HTML5 elements in IE6-9 and FF3 */
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Display block in IE6-9 and FF3 */
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Prevents modern browsers from displaying 'audio' without controls */
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
/* Apply focus state */
|
||||
|
||||
a:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
|
||||
/* Remove outline from links */
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Prevent sub and sup affecting line-height in all browsers */
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* img border in anchor's and image quality */
|
||||
|
||||
img {
|
||||
/* Responsive images (ensure images don't scale beyond their parents) */
|
||||
max-width: 100%; /* part 1: Set a maximum relative to the parent*/
|
||||
width: auto\9; /* IE7-8 need help adjusting responsive images*/
|
||||
height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
|
||||
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
/* Prevent max-width from affecting Google Maps */
|
||||
|
||||
#map_canvas img,
|
||||
.google-maps img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Consistent form font size in all browsers, margin changes, misc */
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
|
||||
cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
|
||||
}
|
||||
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
|
||||
}
|
||||
|
||||
input[type="search"] { /* Appearance in Safari/Chrome*/
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* remove vertical scrollbar in IE6-9*/
|
||||
vertical-align: top; /* readability and alignment cross-browser*/
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/* ==========================================================================
|
||||
SEARCH
|
||||
========================================================================== */
|
||||
|
||||
.layout--search {
|
||||
.archive__item-teaser {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.search__toggle {
|
||||
margin-inline: 1rem;
|
||||
height: $nav-toggle-height;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: $primary-color;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: mix(#000, $primary-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
|
||||
&__inner-wrap {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1em;
|
||||
-webkit-animation: $intro-transition;
|
||||
animation: $intro-transition;
|
||||
-webkit-animation-delay: 0.15s;
|
||||
animation-delay: 0.15s;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__form {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
font-size: $type-size-3;
|
||||
|
||||
@include breakpoint($large) {
|
||||
font-size: $type-size-2;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
font-size: $type-size-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.is--visible {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.results__found {
|
||||
margin-top: 0.5em;
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
.archive__item {
|
||||
margin-bottom: 2em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.archive__item-excerpt {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Algolia search */
|
||||
|
||||
.ais-search-box {
|
||||
max-width: 100% !important;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.archive__item-title .ais-Highlight {
|
||||
color: $primary-color;
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.archive__item-excerpt .ais-Highlight {
|
||||
color: $primary-color;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
/* ==========================================================================
|
||||
SIDEBAR
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default
|
||||
========================================================================== */
|
||||
|
||||
.sidebar {
|
||||
@include clearfix();
|
||||
// @include breakpoint(max-width $large) {
|
||||
// /* fix z-index order of follow links */
|
||||
// position: relative;
|
||||
// z-index: 10;
|
||||
// -webkit-transform: translate3d(0, 0, 0);
|
||||
// transform: translate3d(0, 0, 0);
|
||||
// }
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: inline-start;
|
||||
width: calc(#{$right-sidebar-width-narrow} - 1em);
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
overflow-y: auto;
|
||||
/* calculate height of nav list
|
||||
viewport height - nav height - masthead x-padding
|
||||
*/
|
||||
max-height: calc(100vh - #{$nav-height} - 2em);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: calc(#{$right-sidebar-width} - 1em);
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-6;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
&.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__right {
|
||||
margin-bottom: 1em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
width: $right-sidebar-width-narrow;
|
||||
margin-inline-end: -1 * $right-sidebar-width-narrow;
|
||||
padding-inline-start: 1em;
|
||||
z-index: 10;
|
||||
|
||||
&.sticky {
|
||||
@include clearfix();
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2em;
|
||||
float: inline-end;
|
||||
|
||||
.toc {
|
||||
.toc__menu {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 7em);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: $right-sidebar-width;
|
||||
margin-inline-end: -1 * $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.splash .sidebar__right {
|
||||
@include breakpoint($large) {
|
||||
position: relative;
|
||||
float: inline-end;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Author profile and links
|
||||
========================================================================== */
|
||||
|
||||
.author__avatar {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 110px;
|
||||
border-radius: 50%;
|
||||
|
||||
@include breakpoint($large) {
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author__content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
padding-inline: 15px 25px;
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.author__name {
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.sidebar .author__name {
|
||||
font-family: $sans-serif;
|
||||
font-size: $type-size-5;
|
||||
}
|
||||
|
||||
.author__bio {
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.author__urls-wrapper {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-family: $sans-serif;
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
|
||||
li:last-child {
|
||||
a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.author__urls {
|
||||
span.label {
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:before {
|
||||
@supports (pointer-events: none) {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
&:before {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author__urls {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background: $background-color;
|
||||
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
|
||||
cursor: default;
|
||||
|
||||
&.is--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
inset-inline-start: calc(50% - 10px);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $border-color transparent;
|
||||
z-index: 0;
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
inset-inline-start: calc(50% - 10px);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: $background-color transparent;
|
||||
z-index: 1;
|
||||
|
||||
@include breakpoint($large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
padding-block: 2px;
|
||||
padding-inline-end: 5px;
|
||||
color: inherit;
|
||||
font-size: $type-size-5;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Wide Pages
|
||||
========================================================================== */
|
||||
|
||||
.wide .sidebar__right {
|
||||
margin-bottom: 1em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
position: initial;
|
||||
top: initial;
|
||||
inset-inline-end: initial;
|
||||
width: initial;
|
||||
margin-inline-end: initial;
|
||||
padding-inline-start: initial;
|
||||
z-index: initial;
|
||||
|
||||
&.sticky {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
width: initial;
|
||||
margin-inline-end: initial;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
/* ==========================================================================
|
||||
Syntax highlighting
|
||||
========================================================================== */
|
||||
|
||||
div.highlighter-rouge,
|
||||
figure.highlight {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
background: $base00;
|
||||
color: $base05;
|
||||
font-family: $monospace;
|
||||
font-size: $type-size-6;
|
||||
line-height: 1.8;
|
||||
border-radius: $border-radius;
|
||||
|
||||
[dir=rtl] & {
|
||||
direction: ltr;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
> pre,
|
||||
pre.highlight {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight table {
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
border: 0;
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
width: calc(100% - 1em);
|
||||
border: 0;
|
||||
|
||||
/* line numbers*/
|
||||
&.gutter,
|
||||
&.rouge-gutter {
|
||||
padding-inline-end: 1em;
|
||||
width: 1em;
|
||||
color: $base04;
|
||||
border-inline-end: 1px solid $base04;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
/* code */
|
||||
&.code,
|
||||
&.rouge-code {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.highlight .hll {
|
||||
background-color: $base06;
|
||||
}
|
||||
.highlight {
|
||||
.c {
|
||||
/* Comment */
|
||||
color: $base04;
|
||||
}
|
||||
.err {
|
||||
/* Error */
|
||||
color: $base08;
|
||||
}
|
||||
.k {
|
||||
/* Keyword */
|
||||
color: $base0e;
|
||||
}
|
||||
.l {
|
||||
/* Literal */
|
||||
color: $base09;
|
||||
}
|
||||
.n {
|
||||
/* Name */
|
||||
color: $base05;
|
||||
}
|
||||
.o {
|
||||
/* Operator */
|
||||
color: $base0c;
|
||||
}
|
||||
.p {
|
||||
/* Punctuation */
|
||||
color: $base05;
|
||||
}
|
||||
.cm {
|
||||
/* Comment.Multiline */
|
||||
color: $base04;
|
||||
}
|
||||
.cp {
|
||||
/* Comment.Preproc */
|
||||
color: $base04;
|
||||
}
|
||||
.c1 {
|
||||
/* Comment.Single */
|
||||
color: $base04;
|
||||
}
|
||||
.cs {
|
||||
/* Comment.Special */
|
||||
color: $base04;
|
||||
}
|
||||
.gd {
|
||||
/* Generic.Deleted */
|
||||
color: $base08;
|
||||
}
|
||||
.ge {
|
||||
/* Generic.Emph */
|
||||
font-style: italic;
|
||||
}
|
||||
.gh {
|
||||
/* Generic.Heading */
|
||||
color: $base05;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gi {
|
||||
/* Generic.Inserted */
|
||||
color: $base0b;
|
||||
}
|
||||
.gp {
|
||||
/* Generic.Prompt */
|
||||
color: $base04;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gs {
|
||||
/* Generic.Strong */
|
||||
font-weight: bold;
|
||||
}
|
||||
.gu {
|
||||
/* Generic.Subheading */
|
||||
color: $base0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.kc {
|
||||
/* Keyword.Constant */
|
||||
color: $base0e;
|
||||
}
|
||||
.kd {
|
||||
/* Keyword.Declaration */
|
||||
color: $base0e;
|
||||
}
|
||||
.kn {
|
||||
/* Keyword.Namespace */
|
||||
color: $base0c;
|
||||
}
|
||||
.kp {
|
||||
/* Keyword.Pseudo */
|
||||
color: $base0e;
|
||||
}
|
||||
.kr {
|
||||
/* Keyword.Reserved */
|
||||
color: $base0e;
|
||||
}
|
||||
.kt {
|
||||
/* Keyword.Type */
|
||||
color: $base0a;
|
||||
}
|
||||
.ld {
|
||||
/* Literal.Date */
|
||||
color: $base0b;
|
||||
}
|
||||
.m {
|
||||
/* Literal.Number */
|
||||
color: $base09;
|
||||
}
|
||||
.s {
|
||||
/* Literal.String */
|
||||
color: $base0b;
|
||||
}
|
||||
.na {
|
||||
/* Name.Attribute */
|
||||
color: $base0d;
|
||||
}
|
||||
.nb {
|
||||
/* Name.Builtin */
|
||||
color: $base05;
|
||||
}
|
||||
.nc {
|
||||
/* Name.Class */
|
||||
color: $base0a;
|
||||
}
|
||||
.no {
|
||||
/* Name.Constant */
|
||||
color: $base08;
|
||||
}
|
||||
.nd {
|
||||
/* Name.Decorator */
|
||||
color: $base0c;
|
||||
}
|
||||
.ni {
|
||||
/* Name.Entity */
|
||||
color: $base05;
|
||||
}
|
||||
.ne {
|
||||
/* Name.Exception */
|
||||
color: $base08;
|
||||
}
|
||||
.nf {
|
||||
/* Name.Function */
|
||||
color: $base0d;
|
||||
}
|
||||
.nl {
|
||||
/* Name.Label */
|
||||
color: $base05;
|
||||
}
|
||||
.nn {
|
||||
/* Name.Namespace */
|
||||
color: $base0a;
|
||||
}
|
||||
.nx {
|
||||
/* Name.Other */
|
||||
color: $base0d;
|
||||
}
|
||||
.py {
|
||||
/* Name.Property */
|
||||
color: $base05;
|
||||
}
|
||||
.nt {
|
||||
/* Name.Tag */
|
||||
color: $base0c;
|
||||
}
|
||||
.nv {
|
||||
/* Name.Variable */
|
||||
color: $base08;
|
||||
}
|
||||
.ow {
|
||||
/* Operator.Word */
|
||||
color: $base0c;
|
||||
}
|
||||
.w {
|
||||
/* Text.Whitespace */
|
||||
color: $base05;
|
||||
}
|
||||
.mf {
|
||||
/* Literal.Number.Float */
|
||||
color: $base09;
|
||||
}
|
||||
.mh {
|
||||
/* Literal.Number.Hex */
|
||||
color: $base09;
|
||||
}
|
||||
.mi {
|
||||
/* Literal.Number.Integer */
|
||||
color: $base09;
|
||||
}
|
||||
.mo {
|
||||
/* Literal.Number.Oct */
|
||||
color: $base09;
|
||||
}
|
||||
.sb {
|
||||
/* Literal.String.Backtick */
|
||||
color: $base0b;
|
||||
}
|
||||
.sc {
|
||||
/* Literal.String.Char */
|
||||
color: $base05;
|
||||
}
|
||||
.sd {
|
||||
/* Literal.String.Doc */
|
||||
color: $base04;
|
||||
}
|
||||
.s2 {
|
||||
/* Literal.String.Double */
|
||||
color: $base0b;
|
||||
}
|
||||
.se {
|
||||
/* Literal.String.Escape */
|
||||
color: $base09;
|
||||
}
|
||||
.sh {
|
||||
/* Literal.String.Heredoc */
|
||||
color: $base0b;
|
||||
}
|
||||
.si {
|
||||
/* Literal.String.Interpol */
|
||||
color: $base09;
|
||||
}
|
||||
.sx {
|
||||
/* Literal.String.Other */
|
||||
color: $base0b;
|
||||
}
|
||||
.sr {
|
||||
/* Literal.String.Regex */
|
||||
color: $base0b;
|
||||
}
|
||||
.s1 {
|
||||
/* Literal.String.Single */
|
||||
color: $base0b;
|
||||
}
|
||||
.ss {
|
||||
/* Literal.String.Symbol */
|
||||
color: $base0b;
|
||||
}
|
||||
.bp {
|
||||
/* Name.Builtin.Pseudo */
|
||||
color: $base05;
|
||||
}
|
||||
.vc {
|
||||
/* Name.Variable.Class */
|
||||
color: $base08;
|
||||
}
|
||||
.vg {
|
||||
/* Name.Variable.Global */
|
||||
color: $base08;
|
||||
}
|
||||
.vi {
|
||||
/* Name.Variable.Instance */
|
||||
color: $base08;
|
||||
}
|
||||
.il {
|
||||
/* Literal.Number.Integer.Long */
|
||||
color: $base09;
|
||||
}
|
||||
}
|
||||
|
||||
.gist {
|
||||
th, td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/* ==========================================================================
|
||||
TABLES
|
||||
========================================================================== */
|
||||
|
||||
table {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
font-family: $global-font-family;
|
||||
font-size: $type-size-6;
|
||||
border-collapse: collapse;
|
||||
overflow-x: auto;
|
||||
|
||||
& + table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: $border-color;
|
||||
border-bottom: 2px solid mix(#000, $border-color, 25%);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid mix(#000, $border-color, 25%);
|
||||
}
|
||||
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,569 @@
|
||||
/* ==========================================================================
|
||||
UTILITY CLASSES
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Visibility
|
||||
========================================================================== */
|
||||
|
||||
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
|
||||
|
||||
.hidden,
|
||||
.is--hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* for preloading images */
|
||||
|
||||
.load {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
|
||||
|
||||
.visually-hidden,
|
||||
.screen-reader-text,
|
||||
.screen-reader-text span,
|
||||
.screen-reader-shortcut {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
border: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body:hover .visually-hidden a,
|
||||
body:hover .visually-hidden input,
|
||||
body:hover .visually-hidden button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* screen readers */
|
||||
|
||||
.screen-reader-text:focus,
|
||||
.screen-reader-shortcut:focus {
|
||||
clip: auto !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
padding: 15px 23px 14px;
|
||||
background: #fff;
|
||||
z-index: 100000;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*
|
||||
Skip links
|
||||
========================================================================== */
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
margin: 0;
|
||||
font-family: $sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.skip-link li {
|
||||
height: 0;
|
||||
width: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Type
|
||||
========================================================================== */
|
||||
|
||||
$text-alignments: left, right, start, end, center, justify;
|
||||
@each $alignment in $text-alignments {
|
||||
.text-#{$alignment} {
|
||||
text-align: $alignment;
|
||||
}
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
Task lists
|
||||
========================================================================== */
|
||||
|
||||
.task-list {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-inline-end: 0.5em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list .task-list {
|
||||
margin-inline-start: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
Alignment
|
||||
========================================================================== */
|
||||
|
||||
/* clearfix */
|
||||
|
||||
.cf {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Images
|
||||
========================================================================== */
|
||||
|
||||
/* image align left */
|
||||
|
||||
.align-left {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* image align right */
|
||||
|
||||
.align-right {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* image align center */
|
||||
|
||||
.align-center {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* file page content container */
|
||||
|
||||
.full {
|
||||
@include breakpoint($large) {
|
||||
margin-inline-end: -1 * span(2.5 of 12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Icons
|
||||
========================================================================== */
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
width: 1em;
|
||||
height: 1.1em;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -0.1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* social icons*/
|
||||
|
||||
.social-icons {
|
||||
.fas,
|
||||
.fab,
|
||||
.far,
|
||||
.fal {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@each $color, $icons in (
|
||||
$behance-color: ".fa-behance, .fa-behance-square",
|
||||
$bitbucket-color: ".fa-bitbucket",
|
||||
$dribbble-color: ".fa-dribbble, .fa-dribbble-square",
|
||||
$facebook-color: ".fa-facebook, .fa-facebook-square, .fa-facebook-f",
|
||||
$flickr-color: ".fa-flickr",
|
||||
$foursquare-color: ".fa-foursquare",
|
||||
$github-color: ".fa-github, .fa-github-alt, .fa-github-square",
|
||||
$gitlab-color: ".fa-gitlab",
|
||||
$instagram-color: ".fa-instagram",
|
||||
$keybase-color: ".fa-keybase",
|
||||
$lastfm-color: ".fa-lastfm, .fa-lastfm-square",
|
||||
$linkedin-color: ".fa-linkedin, .fa-linkedin-in",
|
||||
$mastodon-color: ".fa-mastodon, .fa-mastodon-square",
|
||||
$pinterest-color: ".fa-pinterest, .fa-pinterest-p, .fa-pinterest-square",
|
||||
$reddit-color: ".fa-reddit",
|
||||
$rss-color: ".fa-rss, .fa-rss-square",
|
||||
$soundcloud-color: ".fa-soundcloud",
|
||||
$stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow",
|
||||
$tumblr-color: ".fa-tumblr, .fa-tumblr-square",
|
||||
$twitter-color: ".fa-twitter, .fa-twitter-square",
|
||||
$x-color: ".fa-x-twitter, .fa-square-x-twitter",
|
||||
$vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-vimeo-v",
|
||||
$vine-color: ".fa-vine",
|
||||
$xing-color: ".fa-xing, .fa-xing-square",
|
||||
$youtube-color: ".fa-youtube",
|
||||
) {
|
||||
#{$icons} {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Navicons
|
||||
========================================================================== */
|
||||
|
||||
.navicon {
|
||||
position: relative;
|
||||
width: $navicon-width;
|
||||
height: $navicon-height;
|
||||
background: $primary-color;
|
||||
margin: auto;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
width: $navicon-width;
|
||||
height: $navicon-height;
|
||||
background: $primary-color;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: (-2 * $navicon-height);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: (-2 * $navicon-height);
|
||||
}
|
||||
}
|
||||
|
||||
.close .navicon {
|
||||
/* hide the middle line*/
|
||||
background: transparent;
|
||||
|
||||
/* overlay the lines by setting both their top values to 0*/
|
||||
&:before,
|
||||
&:after {
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
top: 0;
|
||||
width: $navicon-width;
|
||||
}
|
||||
|
||||
/* rotate the lines to form the x shape*/
|
||||
&:before {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
}
|
||||
&:after {
|
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.greedy-nav__toggle {
|
||||
&:before {
|
||||
@supports (pointer-events: none) {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background-color: $background-color;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
&:before {
|
||||
opacity: 0.9;
|
||||
-webkit-transition: $global-transition;
|
||||
transition: $global-transition;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.greedy-nav__toggle:hover {
|
||||
.navicon,
|
||||
.navicon:before,
|
||||
.navicon:after {
|
||||
background: mix(#000, $primary-color, 25%);
|
||||
}
|
||||
|
||||
&.close {
|
||||
.navicon {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Sticky, fixed to top content
|
||||
========================================================================== */
|
||||
|
||||
.sticky {
|
||||
@include breakpoint($large) {
|
||||
@include clearfix();
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2em;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Wells
|
||||
========================================================================== */
|
||||
|
||||
.well {
|
||||
min-height: 20px;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/*
|
||||
Modals
|
||||
========================================================================== */
|
||||
|
||||
.show-modal {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
top: 50%;
|
||||
inset-inline-start: 50%;
|
||||
margin-inline-start: -150px;
|
||||
margin-top: -150px;
|
||||
min-height: 0;
|
||||
z-index: 9999;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
&__supporting-text {
|
||||
padding: 0 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
padding: 0.5em 1em;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Footnotes
|
||||
========================================================================== */
|
||||
|
||||
.footnote {
|
||||
color: mix(#fff, $gray, 25%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
color: mix(#fff, $gray, 25%);
|
||||
|
||||
ol,
|
||||
li,
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
}
|
||||
|
||||
a.reversefootnote {
|
||||
color: $gray;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Required
|
||||
========================================================================== */
|
||||
|
||||
.required {
|
||||
color: $danger-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
Google Custom Search Engine
|
||||
========================================================================== */
|
||||
|
||||
.gsc-control-cse {
|
||||
table,
|
||||
tr,
|
||||
td {
|
||||
border: 0; /* remove table borders widget */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Responsive Video Embed
|
||||
========================================================================== */
|
||||
|
||||
.responsive-video-container {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// full screen video fixes
|
||||
:-webkit-full-screen-ancestor {
|
||||
.masthead,
|
||||
.page__footer {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Copy <pre> block to clipboard
|
||||
========================================================================== */
|
||||
|
||||
// a <textarea> to hold text for document.execCommand("copy")
|
||||
.clipboard-helper {
|
||||
// Prevent zooming on iOS
|
||||
font-size: 12pt !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
outline: none !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
pre {
|
||||
&.highlight .clipboard-copy-button {
|
||||
color: #ffffca;
|
||||
}
|
||||
|
||||
.clipboard-copy-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.6em;
|
||||
inset-inline-end: 0.5em;
|
||||
width: 1.8em;
|
||||
height: 1.5em;
|
||||
z-index: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 0.1em;
|
||||
padding: 0.2em 0.5em;
|
||||
opacity: 0.4;
|
||||
transition: color 0.25s linear -0.25s, opacity 0.25s linear;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
inset-inline-end: 0.25em;
|
||||
&.copied {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.copied i {
|
||||
opacity: 0;
|
||||
&.copied {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.no-copy & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .clipboard-copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
/* ==========================================================================
|
||||
Variables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
$doc-font-size: 16px !default;
|
||||
$doc-font-size-medium: $doc-font-size * 1.125 !default;
|
||||
$doc-font-size-large: $doc-font-size * 1.25 !default;
|
||||
$doc-font-size-x-large: $doc-font-size * 1.375 !default;
|
||||
|
||||
/* paragraph */
|
||||
$paragraph-indent: true !default; // true, false (default)
|
||||
$indent-var: 1.3em !default;
|
||||
$space-after-paragraph: 2em !default; // space after paragraphs, used in the body text
|
||||
|
||||
/* Modern font stack */
|
||||
/* https://github.com/system-fonts/modern-font-stacks */
|
||||
|
||||
/* Sans serif - modern font stack */
|
||||
$system-ui: system-ui, sans-serif;
|
||||
$humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
||||
$geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
$classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
||||
$neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||
$industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
||||
$rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
||||
|
||||
/* sans serif typefaces - defined in Minimal Mistakes */
|
||||
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
|
||||
|
||||
/* Serif - modern font stack */
|
||||
$transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||
$old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;;
|
||||
$monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
|
||||
$slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
||||
$antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
||||
$didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
||||
|
||||
/* serif typefaces - defined in Minimal Mistakes */
|
||||
$georgia: Georgia, serif !default;
|
||||
$times: Times, serif !default;
|
||||
$bodoni: "Bodoni MT", serif !default;
|
||||
$calisto: "Calisto MT", serif !default;
|
||||
$garamond: Garamond, serif !default;
|
||||
|
||||
/* Monospace - modern font stack */
|
||||
$monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
|
||||
/* Handwritten - modern font stack */
|
||||
$handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
||||
|
||||
/* Defaults used in Minimal mistakes */
|
||||
$default-sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
||||
$default-serif: Georgia, Times, serif;
|
||||
$default-monospace: Monaco, Consolas, "Lucida Console", monospace;
|
||||
|
||||
/* Emoji native from modern font stack - add to the end of the font-face for native emojis */
|
||||
$emoji-native: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
/* system typefaces */
|
||||
$serif: "PT Serif", $default-serif !default;
|
||||
$sans-serif: $default-sans-serif !default;
|
||||
$sans-serif-narrow: $sans-serif !default;
|
||||
$monospace: $default-monospace !default;
|
||||
|
||||
$global-font-family: $serif !default;
|
||||
$header-font-family: $sans-serif !default;
|
||||
$caption-font-family: $serif !default;
|
||||
|
||||
/* type scale */
|
||||
$type-size-1: 2.441em !default; // ~39.056px
|
||||
$type-size-2: 1.953em !default; // ~31.248px
|
||||
$type-size-3: 1.563em !default; // ~25.008px
|
||||
$type-size-4: 1.25em !default; // ~20px
|
||||
$type-size-5: 1em !default; // ~16px
|
||||
$type-size-6: 0.75em !default; // ~12px
|
||||
$type-size-7: 0.6875em !default; // ~11px
|
||||
$type-size-8: 0.625em !default; // ~10px
|
||||
|
||||
/* headline scale */
|
||||
$h-size-1: 1.563em !default; // ~25.008px
|
||||
$h-size-2: 1.25em !default; // ~20px
|
||||
$h-size-3: 1.125em !default; // ~18px
|
||||
$h-size-4: 1.0625em !default; // ~17px
|
||||
$h-size-5: 1.03125em !default; // ~16.5px
|
||||
$h-size-6: 1em !default; // ~16px
|
||||
|
||||
/*
|
||||
Colors
|
||||
========================================================================== */
|
||||
|
||||
$gray: #7a8288 !default;
|
||||
$dark-gray: mix(#000, $gray, 50%) !default;
|
||||
$darker-gray: mix(#000, $gray, 60%) !default;
|
||||
$light-gray: mix(#fff, $gray, 50%) !default;
|
||||
$lighter-gray: mix(#fff, $gray, 90%) !default;
|
||||
|
||||
$background-color: #fff !default;
|
||||
$code-background-color: #fafafa !default;
|
||||
$code-background-color-dark: $light-gray !default;
|
||||
$text-color: $dark-gray !default;
|
||||
$muted-text-color: mix(#fff, $text-color, 20%) !default;
|
||||
$border-color: $lighter-gray !default;
|
||||
$form-background-color: $lighter-gray !default;
|
||||
$footer-background-color: $lighter-gray !default;
|
||||
|
||||
$primary-color: #6f777d !default;
|
||||
$success-color: #3fa63f !default;
|
||||
$warning-color: #d67f05 !default;
|
||||
$danger-color: #ee5f5b !default;
|
||||
$info-color: #3b9cba !default;
|
||||
$focus-color: $primary-color !default;
|
||||
$active-color: mix(#fff, $primary-color, 80%) !default;
|
||||
|
||||
/* YIQ color contrast */
|
||||
$yiq-contrasted-dark-default: $dark-gray !default;
|
||||
$yiq-contrasted-light-default: #fff !default;
|
||||
$yiq-contrasted-threshold: 175 !default;
|
||||
$yiq-debug: false !default;
|
||||
|
||||
/* brands */
|
||||
$behance-color: #1769ff !default;
|
||||
$bitbucket-color: #205081 !default;
|
||||
$bluesky-color: #1083fe !default;
|
||||
$dribbble-color: #ea4c89 !default;
|
||||
$facebook-color: #3b5998 !default;
|
||||
$flickr-color: #ff0084 !default;
|
||||
$foursquare-color: #0072b1 !default;
|
||||
$github-color: #171516 !default;
|
||||
$gitlab-color: #e24329 !default;
|
||||
$instagram-color: #517fa4 !default;
|
||||
$keybase-color: #ef7639 !default;
|
||||
$lastfm-color: #d51007 !default;
|
||||
$linkedin-color: #007bb6 !default;
|
||||
$mastodon-color: #2b90d9 !default;
|
||||
$pinterest-color: #cb2027 !default;
|
||||
$reddit-color: #ff4500 !default;
|
||||
$rss-color: #fa9b39 !default;
|
||||
$soundcloud-color: #ff3300 !default;
|
||||
$stackoverflow-color: #fe7a15 !default;
|
||||
$tumblr-color: #32506d !default;
|
||||
$twitter-color: #55acee !default;
|
||||
$x-color: #0f1419 !default;
|
||||
$vimeo-color: #1ab7ea !default;
|
||||
$vine-color: #00bf8f !default;
|
||||
$youtube-color: #bb0000 !default;
|
||||
$xing-color: #006567 !default;
|
||||
|
||||
/* links */
|
||||
$link-color: mix(#000, $info-color, 20%) !default;
|
||||
$link-color-hover: mix(#000, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#fff, $link-color, 15%) !default;
|
||||
$masthead-link-color: $primary-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
|
||||
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
|
||||
|
||||
/* notices */
|
||||
$notice-background-mix: 80% !default;
|
||||
$code-notice-background-mix: 90% !default;
|
||||
|
||||
/* syntax highlighting (base16) */
|
||||
$base00: #263238 !default;
|
||||
$base01: #2e3c43 !default;
|
||||
$base02: #314549 !default;
|
||||
$base03: #546e7a !default;
|
||||
$base04: #b2ccd6 !default;
|
||||
$base05: #eeffff !default;
|
||||
$base06: #eeffff !default;
|
||||
$base07: #ffffff !default;
|
||||
$base08: #f07178 !default;
|
||||
$base09: #f78c6c !default;
|
||||
$base0a: #ffcb6b !default;
|
||||
$base0b: #c3e88d !default;
|
||||
$base0c: #89ddff !default;
|
||||
$base0d: #82aaff !default;
|
||||
$base0e: #c792ea !default;
|
||||
$base0f: #ff5370 !default;
|
||||
|
||||
/*
|
||||
Breakpoints
|
||||
========================================================================== */
|
||||
|
||||
$small: 600px !default;
|
||||
$medium: 768px !default;
|
||||
$medium-wide: 900px !default;
|
||||
$large: 1024px !default;
|
||||
$x-large: 1280px !default;
|
||||
$max-width: $x-large !default;
|
||||
|
||||
/*
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
$right-sidebar-width-narrow: 200px !default;
|
||||
$right-sidebar-width: 300px !default;
|
||||
$right-sidebar-width-wide: 400px !default;
|
||||
|
||||
/*
|
||||
Other
|
||||
========================================================================== */
|
||||
|
||||
$border-radius: 4px !default;
|
||||
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
||||
$nav-height: 2em !default;
|
||||
$nav-toggle-height: 2rem !default;
|
||||
$navicon-width: 1.5rem !default;
|
||||
$navicon-height: 0.25rem !default;
|
||||
$global-transition: all 0.2s ease-in-out !default;
|
||||
$intro-transition: intro 0.3s both !default;
|
||||
@@ -0,0 +1,23 @@
|
||||
/* ==========================================================================
|
||||
Air skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #eeeeee !default;
|
||||
$text-color: #222831 !default;
|
||||
$muted-text-color: #393e46 !default;
|
||||
$primary-color: #0092ca !default;
|
||||
$border-color: mix(#fff, #393e46, 75%) !default;
|
||||
$footer-background-color: $primary-color !default;
|
||||
$link-color: #393e46 !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
.page__footer {
|
||||
color: #fff !important; // override
|
||||
}
|
||||
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/* ==========================================================================
|
||||
Aqua skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$gray : #1976d2 !default;
|
||||
$dark-gray : mix(#000, $gray, 40%) !default;
|
||||
$darker-gray : mix(#000, $gray, 60%) !default;
|
||||
$light-gray : mix(#fff, $gray, 50%) !default;
|
||||
$lighter-gray : mix(#fff, $gray, 90%) !default;
|
||||
|
||||
$body-color : #fff !default;
|
||||
$background-color : #f0fff0 !default;
|
||||
$code-background-color : $lighter-gray !default;
|
||||
$code-background-color-dark : $light-gray !default;
|
||||
$text-color : $dark-gray !default;
|
||||
$border-color : $lighter-gray !default;
|
||||
|
||||
$primary-color : $gray !default;
|
||||
$success-color : #27ae60 !default;
|
||||
$warning-color : #e67e22 !default;
|
||||
$danger-color : #c0392b !default;
|
||||
$info-color : #03a9f4 !default;
|
||||
|
||||
/* links */
|
||||
$link-color : $info-color !default;
|
||||
$link-color-hover : mix(#000, $link-color, 25%) !default;
|
||||
$link-color-visited : mix(#fff, $link-color, 25%) !default;
|
||||
$masthead-link-color : $primary-color !default;
|
||||
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
|
||||
|
||||
/* notices */
|
||||
$notice-background-mix: 90% !default;
|
||||
$code-notice-background-mix: 95% !default;
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ==========================================================================
|
||||
Contrast skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$text-color: #000 !default;
|
||||
$muted-text-color: $text-color !default;
|
||||
$primary-color: #b60000 !default;
|
||||
$border-color: mix(#fff, $text-color, 75%) !default;
|
||||
$footer-background-color: #000 !default;
|
||||
$link-color: #0000ff !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
/* contrast syntax highlighting (base16) */
|
||||
$base00: #000000 !default;
|
||||
$base01: #242422 !default;
|
||||
$base02: #484844 !default;
|
||||
$base03: #6c6c66 !default;
|
||||
$base04: #918f88 !default;
|
||||
$base05: #b5b3aa !default;
|
||||
$base06: #d9d7cc !default;
|
||||
$base07: #fdfbee !default;
|
||||
$base08: #ff6c60 !default;
|
||||
$base09: #e9c062 !default;
|
||||
$base0a: #ffffb6 !default;
|
||||
$base0b: #a8ff60 !default;
|
||||
$base0c: #c6c5fe !default;
|
||||
$base0d: #96cbfe !default;
|
||||
$base0e: #ff73fd !default;
|
||||
$base0f: #b18a3d !default;
|
||||
|
||||
.page__content {
|
||||
.notice,
|
||||
.notice--primary,
|
||||
.notice--info,
|
||||
.notice--warning,
|
||||
.notice--success,
|
||||
.notice--danger {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page__footer {
|
||||
color: #fff !important; // override
|
||||
}
|
||||
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/* ==========================================================================
|
||||
Dark skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #252a34 !default;
|
||||
$text-color: #eaeaea !default;
|
||||
$primary-color: #00adb5 !default;
|
||||
$border-color: mix(#fff, $background-color, 20%) !default;
|
||||
$code-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$code-background-color-dark: mix(#000, $background-color, 20%) !default;
|
||||
$form-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$footer-background-color: mix(#000, $background-color, 30%) !default;
|
||||
$link-color: mix($primary-color, $text-color, 40%) !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
.author__urls.social-icons i,
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ais-search-box .ais-search-box--input {
|
||||
background-color: $form-background-color;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/* ==========================================================================
|
||||
Default skin
|
||||
========================================================================== */
|
||||
|
||||
// Intentionally left blank
|
||||
@@ -0,0 +1,33 @@
|
||||
/* ==========================================================================
|
||||
Dirt skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #f3f3f3 !default;
|
||||
$text-color: #343434 !default;
|
||||
$muted-text-color: #8e8b82 !default;
|
||||
$primary-color: #343434 !default;
|
||||
$border-color: #e9dcbe !default;
|
||||
$footer-background-color: #e9dcbe !default;
|
||||
$link-color: #343434 !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
/* dirt syntax highlighting (base16) */
|
||||
$base00: #231e18 !default;
|
||||
$base01: #302b25 !default;
|
||||
$base02: #48413a !default;
|
||||
$base03: #9d8b70 !default;
|
||||
$base04: #b4a490 !default;
|
||||
$base05: #cabcb1 !default;
|
||||
$base06: #d7c8bc !default;
|
||||
$base07: #e4d4c8 !default;
|
||||
$base08: #d35c5c !default;
|
||||
$base09: #ca7f32 !default;
|
||||
$base0a: #e0ac16 !default;
|
||||
$base0b: #b7ba53 !default;
|
||||
$base0c: #6eb958 !default;
|
||||
$base0d: #88a4d3 !default;
|
||||
$base0e: #bb90e2 !default;
|
||||
$base0f: #b49368 !default;
|
||||
@@ -0,0 +1,24 @@
|
||||
/* ==========================================================================
|
||||
Mint skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #f3f6f6 !default;
|
||||
$text-color: #40514e !default;
|
||||
$muted-text-color: #40514e !default;
|
||||
$primary-color: #11999e !default;
|
||||
$border-color: mix(#fff, #40514e, 75%) !default;
|
||||
$footer-background-color: #30e3ca !default;
|
||||
$link-color: #11999e !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: $text-color !default;
|
||||
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
|
||||
|
||||
.page__footer {
|
||||
color: #fff !important; // override
|
||||
}
|
||||
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* ==========================================================================
|
||||
Neon skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #141010 !default;
|
||||
$text-color: #fff6fb !default;
|
||||
$primary-color: #f21368 !default;
|
||||
$border-color: mix(#fff, $background-color, 20%) !default;
|
||||
$code-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$code-background-color-dark: mix(#000, $background-color, 20%) !default;
|
||||
$form-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$footer-background-color: mix($primary-color, #000, 10%) !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* notices */
|
||||
$notice-background-mix: 90% !default;
|
||||
$code-notice-background-mix: 95% !default;
|
||||
|
||||
/* neon syntax highlighting (base16) */
|
||||
$base00: #ffffff !default;
|
||||
$base01: #e0e0e0 !default;
|
||||
$base02: #d0d0d0 !default;
|
||||
$base03: #b0b0b0 !default;
|
||||
$base04: #000000 !default;
|
||||
$base05: #101010 !default;
|
||||
$base06: #151515 !default;
|
||||
$base07: #202020 !default;
|
||||
$base08: #ff0086 !default;
|
||||
$base09: #fd8900 !default;
|
||||
$base0a: #aba800 !default;
|
||||
$base0b: #00c918 !default;
|
||||
$base0c: #1faaaa !default;
|
||||
$base0d: #3777e6 !default;
|
||||
$base0e: #ad00a1 !default;
|
||||
$base0f: #cc6633 !default;
|
||||
|
||||
.author__urls.social-icons i,
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* next/previous buttons */
|
||||
.pagination--pager {
|
||||
color: $text-color;
|
||||
background-color: $primary-color;
|
||||
border-color: transparent;
|
||||
|
||||
&:visited {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ais-search-box .ais-search-box--input {
|
||||
background-color: $form-background-color;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/* ==========================================================================
|
||||
Plum skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$background-color: #521477 !default;
|
||||
$text-color: #fffd86 !default;
|
||||
$primary-color: #c327ab !default;
|
||||
$border-color: mix(#fff, $background-color, 20%) !default;
|
||||
$code-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$code-background-color-dark: mix(#000, $background-color, 20%) !default;
|
||||
$form-background-color: mix(#000, $background-color, 15%) !default;
|
||||
$footer-background-color: mix(#000, $background-color, 25%) !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* notices */
|
||||
$notice-background-mix: 70% !default;
|
||||
$code-notice-background-mix: 80% !default;
|
||||
|
||||
/* plum syntax highlighting (base16) */
|
||||
$base00: #ffffff !default;
|
||||
$base01: #e0e0e0 !default;
|
||||
$base02: #d0d0d0 !default;
|
||||
$base03: #b0b0b0 !default;
|
||||
$base04: #000000 !default;
|
||||
$base05: #101010 !default;
|
||||
$base06: #151515 !default;
|
||||
$base07: #202020 !default;
|
||||
$base08: #ff0086 !default;
|
||||
$base09: #fd8900 !default;
|
||||
$base0a: #aba800 !default;
|
||||
$base0b: #00c918 !default;
|
||||
$base0c: #1faaaa !default;
|
||||
$base0d: #3777e6 !default;
|
||||
$base0e: #ad00a1 !default;
|
||||
$base0f: #cc6633 !default;
|
||||
|
||||
.author__urls.social-icons i,
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
a,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* next/previous buttons */
|
||||
.pagination--pager {
|
||||
color: $text-color;
|
||||
background-color: $primary-color;
|
||||
border-color: transparent;
|
||||
|
||||
&:visited {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ais-search-box .ais-search-box--input {
|
||||
background-color: $form-background-color;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* ==========================================================================
|
||||
Sunrise skin
|
||||
========================================================================== */
|
||||
|
||||
/* Colors */
|
||||
$dark-gray: #0e2431 !default;
|
||||
$background-color: #e8d5b7 !default;
|
||||
$text-color: #000 !default;
|
||||
$muted-text-color: $dark-gray !default;
|
||||
$primary-color: #fc3a52 !default;
|
||||
$border-color: mix(#000, $background-color, 20%) !default;
|
||||
$code-background-color: mix(#fff, $background-color, 20%) !default;
|
||||
$code-background-color-dark: mix(#000, $background-color, 10%) !default;
|
||||
$form-background-color: mix(#fff, $background-color, 15%) !default;
|
||||
$footer-background-color: #f9b248 !default;
|
||||
$link-color: mix(#000, $primary-color, 10%) !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$masthead-link-color: $text-color !default;
|
||||
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
|
||||
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
|
||||
|
||||
/* notices */
|
||||
$notice-background-mix: 75% !default;
|
||||
|
||||
/* sunrise syntax highlighting (base16) */
|
||||
$base00: #1d1f21 !default;
|
||||
$base01: #282a2e !default;
|
||||
$base02: #373b41 !default;
|
||||
$base03: #969896 !default;
|
||||
$base04: #b4b7b4 !default;
|
||||
$base05: #c5c8c6 !default;
|
||||
$base06: #e0e0e0 !default;
|
||||
$base07: #ffffff !default;
|
||||
$base08: #cc6666 !default;
|
||||
$base09: #de935f !default;
|
||||
$base0a: #f0c674 !default;
|
||||
$base0b: #b5bd68 !default;
|
||||
$base0c: #8abeb7 !default;
|
||||
$base0d: #81a2be !default;
|
||||
$base0e: #b294bb !default;
|
||||
$base0f: #a3685a !default;
|
||||
|
||||
.author__urls.social-icons i,
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons i,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: inherit;
|
||||
}
|
||||
Reference in New Issue
Block a user