<%- include("normalize.css") %> <%- include("syntax-highlighting.css") %> // Fonts $sansSerif: Avenir, Lucida Grande, Arial, sans-serif; $serif: Charter, Georgia, serif; $monospace: SF Mono, monospace; // General html { background-color: var(--content-background-color); font-family: $sansSerif; font-size: 16px; line-height: 1.6; color: var(--ui-text-color); } .container { margin: 0 auto; padding: 0 15px; } .main { max-width: 720px; margin: 0 auto; .page-heading { max-width: 720px; margin: 20px auto; margin-bottom: 0; color: var(--content-text-color); } .rss { margin-top: 0; font-size: 0.75rem; font-weight: lighter; color: var(--secondary-ui-text-color); } } article { margin-bottom: 75px; color: var(--content-text-color); border-bottom: 1px solid var(--accent-color); .article-title { margin-top: 0.7em; margin-bottom: 0; font-size: 1.7rem; &::before { content: "#"; font-family: $monospace; color: var(--accent-color); user-select: none; } > a { color: var(--content-text-color); text-decoration: none; transition: 0.3s ease all; &:hover { color: var(--accent-color); } &::before, &::after { content: ""; } } } .article-meta { margin-top: 0; font-size: 0.9rem; font-weight: lighter; color: var(--secondary-ui-text-color); a { text-decoration: underline; } a::before, a::after { content: ""; } } .article-content { font-family: $serif; font-size: 1.25rem; word-wrap: break-word; h1, h2, h3, h4, h5, h6 { font-family: $sansSerif; .header-anchor { font-family: $monospace; color: var(--accent-color); user-select: none; text-decoration: none; // hide link destination for header anchor links &::before, &::after { content: ""; } } } h1 { font-size: 1.6rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.4rem; } hr.footnotes-sep { border: none; height: 1px; background: var(--accent-color); } // Markdown decorations @media screen and (min-width: 768px) { a { text-decoration: none; &::before { content: "["; } &::after { content: "](" attr(data-link) ")"; word-wrap: break-word; } &::before, &::after { color: var(--secondary-ui-text-color); font-family: $monospace; font-size: 0.75em; } } a[data-no-link-decoration] { text-decoration: underline; &::before { content: ""; } &::after { content: ""; } } sup.footnote-ref > a::before, sup.footnote-ref > a::after, a.footnote-backref::before, a.footnote-backref::after { content: ""; } } code::before, code::after { content: "`"; font-family: $monospace; color: var(--secondary-ui-text-color); } pre code::before, pre code::after { // we don't show the decorations for pre blocks, because it can interfere with scrolling horizontally content: ""; display: none; } strong::before, strong::after { content: "**"; font-family: $monospace; color: var(--secondary-ui-text-color); } em::before, em::after { content: "_"; font-family: $monospace; color: var(--secondary-ui-text-color); } } } #comments-container { border-top: 1px solid var(--accent-color); padding: 1rem 0; #comments-container-title { display: inline-block; margin: 0; cursor: pointer; vertical-align: middle; } #comments-info { margin-top: 0; } #comments-js-warning { background-color: var(--atom-hue-5-2); padding: 10px; margin-top: 0; border: 1px solid var(--atom-hue-5); border-radius: 5px; } .comment-user-avatar { width: 50px; border-radius: 5px; float: left; margin-right: 10px; } @media (min-width: 768px) { .comments-list { margin-top: 0px; padding-left: 0px; } .comment-info { margin-top: 0px; margin-bottom: 5px; } .comment-children { margin-left: 60px; margin-top: 20px; } } } .error-page { margin: 0 auto; text-align: center; h3 { position: relative; color: var(--content-text-color); line-height: 1.3; text-align: center; margin: 0; } input#q { display: block; width: 75%; margin: 10px auto; padding: 4px; background-color: var(--content-background-color); border: 1px solid var(--accent-color); font-size: 1rem; color: var(--content-text-color); } input[type=submit] { display: block; margin: 10px auto; background-color: var(--ui-background-color); border: 1px solid var(--accent-color); color: var(--accent-color); line-height: 2rem; padding: 0 1rem; text-decoration: none; font-weight: bold; text-transform: uppercase; -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out; &:hover { background-color: var(--accent-color); color: var(--ui-background-color); cursor: pointer; } } } .icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; color: grey; } a { color: var(--accent-color); text-decoration: underline; &.fancy-link { position: relative; color: var(--ui-text-color); text-decoration: none; transition: 0.3s ease all; > span { position: absolute; top: -0.15em; transition: 0.3s ease all; font-family: $monospace; color: transparent; &:first-child { left: 0.5em; } &:last-child { right: 0.5em; } } &:hover { color: var(--accent-color); > span { color: var(--accent-color); &:first-child { left: -0.75em; } &:last-child { right: -0.75em; } } } } } pre { overflow-x: scroll; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; word-wrap: normal; } pre, code { font-family: $monospace; font-size: 1rem; } img { display: block; margin: 0 auto; max-width: 100%; } figure { margin: 0; figcaption { font-family: $sansSerif; font-size: 1rem; font-style: italic; color: var(--secondary-ui-text-color); text-align: center; } } // Header .site-header { padding-top: 20px; padding-bottom: 20px; background-color: var(--ui-background-color); font-size: 1rem; > div { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 3px solid var(--accent-color); } .site-title { margin: 0; font-size: 2em; font-variant: small-caps; } .site-description { color: var(--secondary-ui-text-color); font-variant: small-caps; margin: 0; } .site-nav ul { padding: 0; margin: 0; display: inline-block; position: relative; li { list-style: none; display: inline; font-variant: small-caps; font-weight: bold; &:not(:last-child) { margin-right: 1em; } a.dropdown-link { color: var(--ui-text-color); text-decoration: none; .arrow-down { display: inline-block; width: 0.5em; height: 0.5em; margin-bottom: 2px; margin-left: 2px; border-bottom: 2px solid var(--ui-text-color); border-right: 2px solid var(--ui-text-color); transform: rotate(45deg); } } ul { visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: 0.3s ease all; right: -1em; display: block; padding: 1em; background-color: var(--ui-background-color); border: 1px solid var(--accent-color); z-index: 10; li { width: 100%; display: block; margin-right: 0px; text-align: right; &:not(:last-child) { margin-bottom: 1em; } } } &:hover > ul, &:focus-within > ul, ul:hover, ul:focus { visibility: visible; opacity: 1; display: block; } } } } // Footer .site-footer { margin-top: 75px; margin-bottom: 20px; background-color: var(--ui-background-color); font-size: 16px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; .site-title { margin: 0; font-variant: small-caps; font-size: 1.5em; } .ui-controls { input { display: none; } label { color: var(--accent-color); text-decoration: underline; &:hover { cursor: pointer; } } input:checked + label { color: var(--ui-text-color); text-decoration: none; font-weight: bold; &:hover { cursor: default; } } } .social-links ul { padding: 0; margin: 0; li { list-style: none; display: inline; font-variant: small-caps; font-weight: bold; &:not(:last-child) { margin-right: 1em; } } } } // Pagination .pagination { text-align: center; p { margin: 0; } .pagination-link { color: var(--accent-color); a { text-decoration: none; span:not(.arrow) { text-decoration: underline; } } .arrow-left { display: inline-block; width: 0.5em; height: 0.5em; margin-right: -5px; border-left: 2px solid var(--accent-color); border-bottom: 2px solid var(--accent-color); transform: rotate(45deg); } .arrow-right { display: inline-block; width: 0.5em; height: 0.5em; margin-left: -5px; border-right: 2px solid var(--accent-color); border-bottom: 2px solid var(--accent-color); transform: rotate(-45deg); } } } // Media Queries @media (min-width: 540px) { .container { max-width: 540px; } article::after { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } article::after { max-width: 720px; } }