You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
 
 
 

929 lines
15 KiB

@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: 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, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
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;
}
@mixin 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 */
@mixin 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);
}
* {
@include color(color, contrast-text);
}
}
/* 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);
white-space: pre-wrap;
}
code {
padding: 0 5px;
}
pre {
display: block;
padding: 20px;
margin-bottom: 20px;
@include color(color, strong-text);
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 {
position: relative;
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;
margin-bottom: 10px;
}
}
@mixin 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;
}
&:hover {
cursor: pointer;
}
}
}
.post-meta {
@include meta;
padding: 5px 0;
@include color-border(border-top, 1px, dotted, border);
@include color-border(border-bottom, 1px, dotted, border);
}
.main-content {
@extend .content;
@include clearfix;
margin-bottom: 20px;
}
.oldcontent {
padding: 5px;
@include color-border(border, 1px, solid, border);
}
.content {
@include clearfix;
a {
font-weight: 700;
text-decoration: underline;
&:hover {
@include color(color, main-color);
}
}
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 {
@include clearfix;
margin-bottom: 20px;
font-size: .75rem;
line-height: 1;
&-list {
list-style: none;
}
&-item {
@include btn;
float: left;
margin: 0 6px 6px 0;
text-transform: uppercase;
display: block;
padding: 10px 15px;
}
}
.actions {
@include clearfix;
margin-top: 15px;
margin-bottom: 15px;
font-size: .75rem;
line-height: 1;
@include color(color, contrast-text);
.action-item {
float: left;
margin: 0 6px 6px 0;
text-transform: uppercase;
@include color(background, contrast-background);
&:hover {
@include color(background, main-color);
}
.action-link {
@include btn;
display: block;
padding: 10px 15px;
}
}
}
@mixin subarticle-element {
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
@include color-border(border-top, 1px, dotted, border);
@include color-border(border-bottom, 1px, dotted, border);
}
/* Authorbox */
.authorbox {
@include subarticle-element;
@include clearfix;
line-height: 1.5;
display: block;
@media screen and (max-width: $break1) {
text-align: center;
}
.author-avatar {
float: left;
margin: 0 25px 0 0;
height: 90px;
width: 90px;
@media screen and (max-width: $break1) {
display: inline-block;
float: none;
margin: 0 0 20px;
}
}
.author-header {
margin-bottom: 10px;
}
.author-name {
text-transform: uppercase;
font-size: 1rem;
font-weight: 700;
}
}
/* Promo */
.promo {
@include subarticle-element;
font-weight: bold;
a {
text-decoration: underline;
}
}
/* Webmentionform */
.wm-form {
@include subarticle-element;
line-height: 1.5;
#wm-form {
display: flex;
#wm-source {
flex-grow: 1;
}
.action {
@include btn;
margin-left: 6px;
}
@media screen and (max-width: $break1) {
display: block;
text-align: center;
.action {
margin-left: inherit;
margin-top: 10px;
width: 100%;
}
}
}
#anon-comment {
margin-top: 10px;
margin-bottom: 0px;
a {
text-decoration: underline;
}
}
}
/* List content */
.list {
&-item {
padding-bottom: 20px;
margin-bottom: 20px;
@include color-border(border-bottom, 1px, solid, border);
}
&-header {
margin-bottom: 10px;
}
&-title {
margin: 0;
&:hover {
@include color(color, main-color);
}
}
&-meta {
@include meta;
margin-top: 5px;
}
&-excerpt {
@extend .content;
@include clearfix;
}
&-footer {
@include clearfix;
}
.read-more {
@include 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);
}
&-item:hover, .current {
@include color(color, contrast-text);
@include color(background, main-color);
}
}
/* Post Navigation */
.post-nav {
@include subarticle-element;
justify-content: space-between;
display: flex;
@media screen and (max-width: $break1) {
display: block;
}
.item {
flex: 1 1 50%;
max-width: 100%;
text-align: center;
@media screen and (max-width: $break1) {
&:last-of-type:not(:first-of-type) {
padding-top: 10px;
}
}
@media screen and (min-width: $break1) {
max-width: 48%;
&:only-child {
max-width: 100%;
}
&--prev {
text-align: left;
}
&--next {
text-align: right;
}
}
.link {
display: block;
.post-title {
margin-bottom: 0;
overflow: hidden;
font-size: .8125rem;
margin-top: 5px;
}
.caption {
display: block;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
}
}
}
/* Related articles and webmentions */
.related, .mentions {
@include subarticle-element;
@media screen and (max-width: $break1) {
min-width: 100%;
text-align: center;
}
&-caption {
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
&-list {
margin-top: 5px;
list-style: none;
}
}
/* 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] {
@include 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;
}
}
.links {
order: 2;
a {
margin-left: 15px;
&:first-child {
margin-left: 0;
}
&:hover {
cursor: pointer;
}
}
@media screen and (max-width: $break3) {
padding-bottom: 8px;
text-align: center;
}
}
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
&:target {
outline: none;
display: block;
}
}