828 lines
14 KiB
SCSS
828 lines
14 KiB
SCSS
@import 'custom.scss';
|
|
|
|
/* Themes */
|
|
$colors: (
|
|
body-background: #f7f7f7,
|
|
container-background: #fff,
|
|
contrast-text: #fff,
|
|
contrast-background: #263238,
|
|
headline: #000,
|
|
strong-text: #000,
|
|
light-background: #f5f5f5,
|
|
border: #ebebeb,
|
|
border-hover: #aaa,
|
|
meta: #666,
|
|
hr: #dadada,
|
|
body-background-dark: #263238,
|
|
container-background-dark:#000a12,
|
|
contrast-text-dark:#fff,
|
|
contrast-background-dark:#4f5b62,
|
|
headline-dark:#fff,
|
|
strong-text-dark:#000,
|
|
light-background-dark:#4f5b62,
|
|
border-dark:#ebebeb,
|
|
border-hover-dark:#aaa,
|
|
meta-dark:#666,
|
|
hr-dark:#dadada,
|
|
main-color: $mainColor
|
|
);
|
|
|
|
@mixin color($property, $varName) {
|
|
#{$property}: map-get($colors, $varName);
|
|
#{$property}: var(--#{$varName}, map-get($colors, $varName));
|
|
}
|
|
|
|
@mixin color-border($property, $val1, $val2, $varName) {
|
|
#{$property}: #{$val1} #{$val2} map-get($colors, $varName);
|
|
#{$property}: #{$val1} #{$val2} var(--#{$varName}, map-get($colors, $varName));
|
|
}
|
|
|
|
@mixin lightmode {
|
|
--body-background: #{map-get($colors, body-background)};
|
|
--container-background: #{map-get($colors, container-background)};
|
|
--contrast-text: #{map-get($colors, contrast-text)};
|
|
--contrast-background: #{map-get($colors, contrast-background)};
|
|
--headline: #{map-get($colors, headline)};
|
|
--strong-text: #{map-get($colors, strong-text)};
|
|
--light-background: #{map-get($colors, light-background)};
|
|
--border: #{map-get($colors, border)};
|
|
--border-hover: #{map-get($colors, border-hover)};
|
|
--meta: #{map-get($colors, meta)};
|
|
--hr: #{map-get($colors, hr)};
|
|
--main-color: #{map-get($colors, main-color)};
|
|
color: #000;
|
|
}
|
|
|
|
@mixin darkmode {
|
|
--body-background: #{map-get($colors, body-background-dark)};
|
|
--container-background: #{map-get($colors, container-background-dark)};
|
|
--contrast-text: #{map-get($colors, contrast-text-dark)};
|
|
--contrast-background: #{map-get($colors, contrast-background-dark)};
|
|
--headline: #{map-get($colors, headline-dark)};
|
|
--strong-text: #{map-get($colors, strong-text-dark)};
|
|
--light-background: #{map-get($colors, light-background-dark)};
|
|
--border: #{map-get($colors, border-dark)};
|
|
--border-hover: #{map-get($colors, border-hover-dark)};
|
|
--meta: #{map-get($colors, meta-dark)};
|
|
--hr: #{map-get($colors, hr-dark)};
|
|
--main-color: #{map-get($colors, main-color)};
|
|
color: #fff;
|
|
}
|
|
|
|
* {
|
|
@include lightmode;
|
|
@media (prefers-color-scheme: light) {
|
|
@include lightmode;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
@include darkmode;
|
|
}
|
|
}
|
|
|
|
.dark, .dark * {
|
|
@include darkmode;
|
|
}
|
|
|
|
/* Structure */
|
|
|
|
$break1: 620px;
|
|
$break2: 767px;
|
|
$break3: 900px;
|
|
$break4: 1475px;
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
article,
|
|
aside,
|
|
dialog,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
@include color(background, body-background);
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.body-container {
|
|
@extend .container;
|
|
margin: 25px auto;
|
|
@media screen and (max-width: $break4) {
|
|
width: 95%;
|
|
}
|
|
@media screen and (max-width: $break3) {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
padding: 25px;
|
|
@include color(background, container-background);
|
|
@media screen and (max-width: $break3) {
|
|
padding: 20px;
|
|
}
|
|
@media screen and (max-width: $break2) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.primary {
|
|
flex: 1 0 65.83%;
|
|
order: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.clearfix {
|
|
display: block;
|
|
&::after {
|
|
display: block;
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
clear: both;
|
|
line-height: 0;
|
|
visibility: hidden;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
input,
|
|
button,
|
|
select,
|
|
optgroup,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* Button */
|
|
.btn {
|
|
padding: 5px 10px;
|
|
font-weight: 700;
|
|
white-space: pre-line;
|
|
@include color(color, contrast-text);
|
|
@include color(background, contrast-background);
|
|
&:hover {
|
|
@include color(color, contrast-text);
|
|
@include color(background, main-color);
|
|
}
|
|
}
|
|
|
|
/* Typography */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0 0 20px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
@include color(color, headline);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
h5,
|
|
h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
&:hover {
|
|
@include color(color, main-color);
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 0 0 20px;
|
|
border: 0;
|
|
@include color-border(border-top, 1px, solid, hr);
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font: inherit;
|
|
font-weight: 700;
|
|
}
|
|
|
|
i,
|
|
em {
|
|
font: inherit;
|
|
font-style: italic;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
small {
|
|
font-size: .75rem;
|
|
}
|
|
|
|
figure {
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: 4px;
|
|
@include color(color, meta);
|
|
h4 {
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: inherit;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
@include color(background, light-background);
|
|
@include color-border(border, 1px, solid, border);
|
|
}
|
|
|
|
code {
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
@include color(color, strong-text);
|
|
white-space: pre-wrap;
|
|
code {
|
|
padding: 0;
|
|
color: inherit;
|
|
white-space: inherit;
|
|
background: inherit;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
display: block;
|
|
padding: 5px 0 5px 15px;
|
|
margin: 0 0 20px;
|
|
line-height: 1.6;
|
|
@include color-border(border-left, 5px, solid, main-color);
|
|
p:last-child {
|
|
margin: 0;
|
|
}
|
|
footer {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
sup,
|
|
sub {
|
|
font-size: .625rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
sup {
|
|
vertical-align: super;
|
|
}
|
|
|
|
sub {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
abbr[title] {
|
|
text-decoration: none;
|
|
cursor: help;
|
|
border-bottom: 1px dotted;
|
|
}
|
|
|
|
q {
|
|
font-style: italic;
|
|
}
|
|
|
|
dl {
|
|
margin: 0 0 10px 20px;
|
|
}
|
|
|
|
dt,
|
|
dd {
|
|
display: list-item;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
list-style-type: square;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 20px;
|
|
list-style-type: circle;
|
|
}
|
|
|
|
select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.warning {
|
|
padding: 20px 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
@include color(background, container-background);
|
|
.logo {
|
|
padding: 25px;
|
|
@media screen and (max-width: $break3) {
|
|
padding: 20px;
|
|
}
|
|
@media screen and (max-width: $break2) {
|
|
text-align: center;
|
|
}
|
|
.link {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
.title {
|
|
font-size: 2rem;
|
|
@include color(color, headline);
|
|
}
|
|
.tagline {
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
font-size: .875rem;
|
|
@include color(color, main-color);
|
|
@include color-border(border-top, 1px, solid, border);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Main menu */
|
|
.menu {
|
|
.expand {
|
|
display: block;
|
|
width: 100%;
|
|
@include color(background, contrast-background);
|
|
border: 0;
|
|
cursor: pointer;
|
|
@media screen and (min-width: $break2) {
|
|
display: none;
|
|
}
|
|
.title {
|
|
font-size: .9375rem;
|
|
@include color(color, contrast-text);
|
|
display: block;
|
|
padding: 10px 15px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
#menu-toggle {
|
|
display: none;
|
|
}
|
|
#menu-list {
|
|
list-style: none;
|
|
@include color(background, contrast-background);
|
|
position: absolute;
|
|
width: 100%;
|
|
visibility: hidden;
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
@media screen and (min-width: $break2) {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
visibility: visible;
|
|
transform: none;
|
|
}
|
|
.item {
|
|
.link {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
font-weight: 700;
|
|
font-size: .9375rem;
|
|
@include color(color, contrast-text);
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
@include color(color, contrast-text);
|
|
@include color(background, main-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#menu-toggle:checked + #menu-list {
|
|
visibility: visible;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 5px;
|
|
margin: 0;
|
|
@include color(background, main-color);
|
|
border: 0;
|
|
}
|
|
|
|
/* Posts/Pages */
|
|
.main-header {
|
|
margin-bottom: 20px;
|
|
.main-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
.post-title {
|
|
margin: 0;
|
|
}
|
|
.post-meta {
|
|
@extend .meta;
|
|
padding: 5px 0;
|
|
margin-top: 10px;
|
|
@include color-border(border-top, 1px, dotted, border);
|
|
@include color-border(border-bottom, 1px, dotted, border);
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
@extend .content;
|
|
@extend .clearfix;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.meta {
|
|
font-size: .8125rem;
|
|
vertical-align: baseline;
|
|
@include color(color, meta);
|
|
.item {
|
|
display: inline;
|
|
margin-left: 15px;
|
|
@media screen and (max-width: $break1) {
|
|
display: block;
|
|
margin-left: 0;
|
|
}
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.text {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
a {
|
|
font-weight: 700;
|
|
&:hover {
|
|
@include color(color, main-color);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
ul {
|
|
list-style: square;
|
|
}
|
|
ol {
|
|
list-style: decimal;
|
|
}
|
|
ul, ol {
|
|
margin: 0 0 20px 40px;
|
|
@media screen and (max-width: $break1) {
|
|
margin: 0 0 20px 20px;
|
|
}
|
|
}
|
|
ul ul, ol ol, ol ul, ul ol {
|
|
margin: 0 0 0 40px;
|
|
@media screen and (max-width: $break1) {
|
|
margin: 0 0 0 20px;
|
|
}
|
|
}
|
|
li {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
@extend .clearfix;
|
|
margin-bottom: 20px;
|
|
font-size: .75rem;
|
|
line-height: 1;
|
|
@include color(color, contrast-text);
|
|
.tags-list {
|
|
list-style: none;
|
|
.tag-item {
|
|
float: left;
|
|
margin: 0 6px 6px 0;
|
|
text-transform: uppercase;
|
|
@include color(background, contrast-background);
|
|
&:hover {
|
|
@include color(background, main-color);
|
|
}
|
|
.tag-link {
|
|
@extend .btn;
|
|
display: block;
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Authorbox */
|
|
.authorbox {
|
|
padding: 25px 0;
|
|
margin-bottom: 25px;
|
|
line-height: 1.5;
|
|
@include color-border(border-top, 1px, solid, border);
|
|
@include color-border(border-bottom, 1px, solid, border);
|
|
display: block;
|
|
@media screen and (max-width: $break1) {
|
|
text-align: center;
|
|
}
|
|
.author-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
.author-name {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
/* Webmentionform */
|
|
.wm-form {
|
|
margin-bottom: 25px;
|
|
line-height: 1.5;
|
|
display: block;
|
|
#wm-source {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.description {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/* List content */
|
|
.list {
|
|
.list-item {
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
@include color-border(border-bottom, 1px, solid, border);
|
|
.list-header {
|
|
margin-bottom: 10px;
|
|
.list-title {
|
|
margin: 0;
|
|
&:hover {
|
|
@include color(color, main-color);
|
|
}
|
|
}
|
|
.list-meta {
|
|
@extend .meta;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
.list-excerpt {
|
|
@extend .content;
|
|
@extend .clearfix;
|
|
}
|
|
.list-footer {
|
|
@extend .clearfix;
|
|
.read-more {
|
|
@extend .btn;
|
|
float: right;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
margin-top: 20px;
|
|
.item {
|
|
display: inline-block;
|
|
padding: 10px 15px;
|
|
font-weight: 700;
|
|
@include color(color, strong-text);
|
|
@include color(background, light-background);
|
|
&:hover, &--current {
|
|
@include color(color, contrast-text);
|
|
@include color(background, main-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Post Navigation */
|
|
.post-nav {
|
|
justify-content: space-between;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
margin-bottom: 25px;
|
|
@include color-border(border-bottom, 1px, solid, border);
|
|
display: flex;
|
|
@media screen and (max-width: $break1) {
|
|
display: block;
|
|
}
|
|
.item {
|
|
flex: 1 1 50%;
|
|
max-width: 48%;
|
|
@media screen and (max-width: $break1) {
|
|
max-width: 100%;
|
|
}
|
|
&--prev {
|
|
margin-right: auto;
|
|
text-align: left;
|
|
@media screen and (max-width: $break1) {
|
|
padding-bottom: 25px;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&--next {
|
|
margin-left: auto;
|
|
text-align: right;
|
|
@media screen and (max-width: $break1) {
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.link {
|
|
display: block;
|
|
.post-title {
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
font-size: .8125rem;
|
|
}
|
|
.caption {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Images / Video */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
iframe,
|
|
embed,
|
|
object,
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Table */
|
|
table {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
@include color-border(border-top, 1px, solid, border);
|
|
@include color-border(border-left, 1px, solid, border);
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 5px 10px;
|
|
@include color-border(border-right, 1px, solid, border);
|
|
@include color-border(border-bottom, 1px, solid, border);
|
|
}
|
|
|
|
th {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Forms */
|
|
input {
|
|
padding: 5px;
|
|
vertical-align: middle;
|
|
@include color(background, light-background);
|
|
@include color-border(border, 1px, solid, border);
|
|
&[type=text], &[type=email], &[type=tel], &[type=url] {
|
|
width: 100%;
|
|
}
|
|
&[type=submit], &[type=reset] {
|
|
@extend .btn;
|
|
min-width: 100px;
|
|
border: 0;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
padding: 5px;
|
|
overflow: auto;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
@include color(background, light-background);
|
|
@include color-border(border, 1px, solid, border);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 10px 25px;
|
|
font-size: .75rem;
|
|
@include color(background, contrast-background);
|
|
*, *:hover {
|
|
@include color(color, contrast-text);
|
|
}
|
|
.container {
|
|
@extend .flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
@media screen and (max-width: $break3) {
|
|
display: block;
|
|
}
|
|
}
|
|
.copyright {
|
|
order: 1;
|
|
@media screen and (max-width: $break3) {
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.toggle {
|
|
order: 2;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
@media screen and (max-width: $break3) {
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
.no-js & {
|
|
display: none;
|
|
}
|
|
}
|
|
.links {
|
|
order: 3;
|
|
a:hover {
|
|
cursor: pointer;
|
|
}
|
|
@media screen and (max-width: $break3) {
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
} |