595 lines
10 KiB
CSS
595 lines
10 KiB
CSS
@charset "utf-8";
|
|
|
|
/* variables */
|
|
|
|
:root {
|
|
--base-root: 1.5rem;
|
|
--base-relative: 1.5em;
|
|
/* colors */
|
|
--gray: #565656;
|
|
--black: #000;
|
|
--white: #FFF;
|
|
--link-color: peachpuff;
|
|
--link-dark: #ffd777;
|
|
--primary-color: var(--gray);
|
|
--secondary-gray: #DDD;
|
|
--light-gray: #EEE;
|
|
|
|
/* screens */
|
|
--screen-laptop: 1200px;
|
|
|
|
/* fonts */
|
|
--system-fonts: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", "Open Sans", "Noto Sans", "Droid Sans", sans-serif;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
scroll-behavior: smooth;
|
|
animation: fade 0.45s;
|
|
}
|
|
|
|
@keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slidein {
|
|
from { transform: translate(0); }
|
|
to { transform: translate(5px); }
|
|
}
|
|
|
|
/* remove scroll for accessibility*/
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
/* fonts */
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Regular.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-Regular.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Italic.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-Italic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Bold.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-Bold.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-BoldItalic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-Black.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-Black.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("../fonts/Inter-BlackItalic.woff2?v=3.13") format("woff2"),
|
|
url("../fonts/Inter-BlackItalic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
font-family: "Inter", var(--system-fonts);
|
|
font-size: 1.15rem;
|
|
font-kerning: normal;
|
|
letter-spacing:normal;
|
|
font-style: normal;
|
|
line-height: 1.65;
|
|
color: var(--gray);
|
|
fill: var(--gray);
|
|
max-width: var(--screen-laptop);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* typography */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1.25;
|
|
margin-top: calc(var(--base-relative)*1.5);
|
|
margin-bottom: calc(var(--base-relative)/1.5);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.65em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
max-width: 46.971em;
|
|
width: 100%
|
|
}
|
|
|
|
table tr {
|
|
background-color: var(--white);
|
|
border-top: 1px solid var(--secondary-gray);
|
|
}
|
|
|
|
table td, table th {
|
|
padding: calc(var(--base-relative)/2);
|
|
border: 1px solid var(--secondary-gray);
|
|
}
|
|
|
|
table tr:nth-child(2n), table th {
|
|
background-color: var(--light-gray);
|
|
}
|
|
|
|
/* page content */
|
|
|
|
.site-header {
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: var(--base-root);
|
|
line-height: 1;
|
|
}
|
|
|
|
.logo {
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
}
|
|
|
|
|
|
|
|
.nav {
|
|
width: 100%;
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.nav {
|
|
width: unset;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.hamberger {
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 0;
|
|
background-color: var(--white);
|
|
border: none;
|
|
color: var(--gray);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.hamberger {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.menu-list {
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
list-style: none;
|
|
}
|
|
|
|
.menu-noscript {
|
|
margin: var(--base-root) 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.menu-noscript-item {
|
|
list-style: none;
|
|
margin-right: calc(var(--base-root)*1.5);
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
margin: var(--base-root) 0;
|
|
}
|
|
|
|
.menu-item:last-child a {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.menu-item {
|
|
display: inline-block;
|
|
}
|
|
|
|
.menu-list {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-link {
|
|
margin:0 calc(var(--base-root)*1.5) 0 0;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #000;
|
|
}
|
|
|
|
/* header */
|
|
|
|
.content {
|
|
margin: calc(var(--base-root)*2) var(--base-root);
|
|
}
|
|
|
|
.tag-title {
|
|
margin: calc(var(--base-root)*2) auto;
|
|
}
|
|
/* primary */
|
|
|
|
.primary {
|
|
width:100%;
|
|
}
|
|
|
|
@media screen and (min-width:720px) {
|
|
.primary {
|
|
width:75%
|
|
}
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
.sidebar {
|
|
width:100%;
|
|
order:2;
|
|
}
|
|
|
|
@media screen and (min-width:720px) {
|
|
.sidebar {
|
|
width:25%;
|
|
order:unset;
|
|
border-top: none;
|
|
padding: unset;
|
|
margin: unset;
|
|
}
|
|
}
|
|
|
|
.sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.sidebar-list li {
|
|
padding: 0 calc(var(--base-root)/2) calc(var(--base-root)/2) 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media screen and (min-width:720px) {
|
|
.sidebar-list li {
|
|
padding: 0 calc(var(--base-root)/2) calc(var(--base-root)/2) 0;
|
|
display: block;
|
|
}
|
|
.sidebar h3 {
|
|
margin-top:0;
|
|
}
|
|
}
|
|
|
|
.home,
|
|
.post {
|
|
display:flex;
|
|
flex-direction:column
|
|
}
|
|
|
|
@media screen and (min-width:720px) {
|
|
.home,
|
|
.post {
|
|
flex-direction:unset
|
|
}
|
|
}
|
|
|
|
.post:not(:last-child) {
|
|
padding-bottom: var(--base-root);
|
|
margin-bottom: var(--base-root);
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
.divider {
|
|
border: 0;
|
|
overflow: visible;
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
margin: calc(var(--base-root)*1.75) var(--base-root);
|
|
}
|
|
|
|
.title {
|
|
margin: calc(var(--base-root)/2) 0;
|
|
}
|
|
|
|
.content article {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.post-header h1 {
|
|
margin-bottom: calc(var(--base-relative)/3);
|
|
}
|
|
|
|
/* post navigation */
|
|
|
|
.post-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: var(--base-root);
|
|
margin-bottom: var(--base-root);
|
|
border-top: 2px dashed var(--secondary-gray);
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
|
|
.next {
|
|
margin-left: auto;
|
|
padding: calc(var(--base-root)/3) 0;
|
|
}
|
|
|
|
.prev {
|
|
margin-right: auto;
|
|
padding: calc(var(--base-root)/3) 0;
|
|
}
|
|
|
|
.related {
|
|
margin-bottom: calc(var(--base-root)*1.75);
|
|
}
|
|
|
|
.comments {
|
|
border-top: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
.single-page {
|
|
margin-top: calc(var(--base-relative)*2.5);
|
|
}
|
|
|
|
.content-max-width {
|
|
max-width: 45rem;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.static {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
/* elements */
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.figure {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fig-caption {
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin-top: calc(var(--base-relative)/2);
|
|
font-size: calc(var(--base-relative)/2);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--gray);
|
|
transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.1s ease-out, fill 0.2s ease-out;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--black);
|
|
fill: var(--black);
|
|
}
|
|
|
|
|
|
.active,
|
|
.post-text a,
|
|
.link,
|
|
table td a {
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--link-color);
|
|
text-decoration-thickness: 3px;
|
|
}
|
|
|
|
.post-text a:hover,
|
|
.link:hover,
|
|
.to-top:hover,
|
|
table td a:hover {
|
|
background-color: var(--link-color);
|
|
border-bottom: 0;
|
|
box-shadow: 0 0 0 3px var(--link-color);
|
|
border-radius: calc(var(--base-root)/6);
|
|
}
|
|
|
|
.prev:hover .arrow,
|
|
.next:hover .arrow,
|
|
.link:hover .arrow {
|
|
animation: .35s ease-out infinite alternate slidein;
|
|
}
|
|
|
|
|
|
|
|
/* custom css */
|
|
|
|
::selection {
|
|
background-color: var(--secondary-gray);
|
|
}
|
|
|
|
.arrow {
|
|
line-height: 1;
|
|
display: inline-block;
|
|
}
|
|
|
|
.thumb {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.post-image {
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.post-image {
|
|
margin: 0 calc(var(--base-root)*2) 0 0;
|
|
}
|
|
}
|
|
|
|
.post-meta {
|
|
font-size: calc(var(--base-relative)/2);
|
|
text-transform: capitalize;
|
|
line-height:1;
|
|
}
|
|
|
|
.meta {
|
|
padding: calc(var(--base-root)/8) calc(var(--base-root)/4);
|
|
margin-bottom: calc(var(--base-root)/3);
|
|
}
|
|
|
|
.tag-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tag-cloud {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.tag-list-item {
|
|
display: inline-block;
|
|
margin-bottom: calc(var(--base-root)/2);
|
|
}
|
|
|
|
|
|
.tag-link {
|
|
padding: calc(var(--base-root)/8) calc(var(--base-root)/4);
|
|
background-color: var(--light-gray);
|
|
border-radius: calc(var(--base-root)/6);
|
|
margin-right: calc(var(--base-root)/3);
|
|
margin-bottom: calc(var(--base-root)/3);
|
|
}
|
|
|
|
.tag-link:hover {
|
|
background-color: var(--link-color);
|
|
}
|
|
|
|
.quote {
|
|
background-color: #fffcea;
|
|
margin: calc(var(--base-relative)/1.5) 0;
|
|
padding: calc(var(--base-relative)/2);
|
|
border-left: 3px solid var(--link-color);
|
|
}
|
|
|
|
.link,
|
|
.post-text a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.post-text a:hover,
|
|
.link:hover {
|
|
background-color: var(--link-color);
|
|
border-bottom: 0;
|
|
box-shadow: 0 0 0 5px var(--link-color);
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.to-top {
|
|
cursor: pointer;
|
|
margin: calc(var(--base-root)*1.75) auto;
|
|
display: block;
|
|
font-size: calc(var(--base-relative)/1.5);
|
|
border: 0;
|
|
background: none;
|
|
font-weight: 700;
|
|
width: 126px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/** js **/
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.hide {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.nav {
|
|
width: unset;
|
|
}
|
|
}
|
|
|
|
.comments {
|
|
border-top: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
.half {
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.half {
|
|
width: 50%;
|
|
}
|
|
|
|
}
|