/* Basic */ html { font-family: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; background: #ffffff; color: #333; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; } //article::after { // content: ""; // background: url(/logo.png) no-repeat; // opacity: 0.8; // top: 200px; // left: -50px; // bottom: 0; // right: 0; // position: absolute; // z-index: -1; //} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } .container { max-width: 42em; margin: 0 auto; } main { outline: none; } /* Headers */ h1 { font-size: 1.35em; } h2 { font-size: 1.2em; } h3 { font-size: 1.1em; } /* Links */ a { color: #1d60a3; text-decoration: none; } a:active, a:hover { outline: 0; } a:hover, a:focus { color: #a31d1d; border-bottom: 1px solid rgba(163, 29, 29, 0.5); } a:active { color: #a31d1d; opacity: 0.9; border-bottom: 1px solid rgba(163, 29, 29, 0.5); } a.active { color: #a31d1d; } a.skip-main { left: -999px; position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999; } a.skip-main:focus, a.skip-main:active { left: auto; top: 0px; width: auto; height: auto; overflow: auto; z-index: 999; padding: 4px 6px 4px 6px; text-decoration: underline; border: none; } /* Table */ .table-wrapper { overflow-x: auto; } table { max-width: 100%; border-spacing: 0; } thead { background: lightgrey; } th, td { padding: 0.5em 1em; border: 1px double lightgrey; } /* Code */ pre { padding: 1em; background-color: #f1f1f1; max-width: 100%; overflow: auto; } code, pre, kbd { font-family: monospace; font-size: 0.9em; line-height: 154%; } /* Styles */ blockquote { border-left: 2px solid #cccccc; padding: 0.1em 1em; margin-left: 0.75em; } p { margin-top: 0.5em; margin-bottom: 0.5em; } hr { height: 1px; border: 0; border-top: 1px solid #cccccc; } ul ol, ol ol, ul ul { margin: 0em 2em; } /* Header */ header { display: flex; justify-content: space-between; } header h1 { margin-top: auto; margin-bottom: auto; font-weight: bold; } header h2 { font-size: 1em; margin: 0; font-weight: normal; } .nav__spacer { flex: 2; } header nav { margin: auto; max-width: 100%; text-align: right; } /* header nav a { margin-left: 2em; } */ header a { color: #333; } .site-header { white-space: nowrap; } /* Pages */ main h1 { margin-top: 0.7em; font-size: 2em; font-weight: normal; line-height: 1.1em; margin-bottom: 0.5em; font-weight: 600; } .post-short-list:first-of-type { margin-top: 1em; } /* Articles */ article:not(:last-of-type) { border-bottom: thin solid #f1f1f1; padding-bottom: 2em; } article header { font-size: 1.35em; line-height: 1.1em; margin-bottom: 0.5em; font-weight: 600; } article header h1 a { border: none; text-decoration: none; color: #333; } .article-info { font-size: 0.75em; color: grey; margin-top: 1em; } .article-info a { color: grey; } .article-info a:hover { color: #a31d1d; } .post-short-list .article-info { margin-top: 0; margin-bottom: 1.5em; } .article-taxonomies { display: inline; } .article-date { white-space: nowrap; } .article-categories { display: inline; list-style-type: none; padding: 0; } .article-categories li { display: inline; margin-right: 1em; } .article-tags { display: inline; list-style-type: none; padding: 0; margin: 0; } .article-tags li { display: inline; margin-right: 1em; } article img { max-width: 100%; display: block; height: auto; margin: 0 auto 0.5em; } .read-more { font-size: 0.85em; } .divider { display: block; height: 1px; border: 0; border-top: thin solid #f1f1f1; width: 25%; margin: 1em auto; } .post-summary { margin-top: 0.5em; display: block; } .post-summary > p { display: block; } /* Other pages */ .terms { list-style-type: none; padding: 0; line-height: 2em; } /* Pagination */ .pagination { display: flex; justify-content: space-between; margin-top: 3em; } .pagination { text-align: center; } .pagination-item { background: #fafafa; padding: 0.75em 0.75em; } .disabled { visibility: hidden; } .pagination-item a { color: #333333; } .pagination-item a:hover, .pagination-item a:focus { color: #a31d1d; border-bottom: 0; } /* Footer */ footer { border-top: thin solid #f1f1f1; margin-top: 3em; font-size: 16px; } ul.language-select { padding-left: 0; list-style: none; display: flex; } ul.language-select > li { margin-right: 1em; } .header-img { margin-top: 20px !important; } /* Media Queries */ @media (max-width: 840px) { .main-wrapper { margin: 0; max-width: none; overflow-x: hidden; padding-left: 25px; padding-right: 25px; } .header-img { margin: 10px auto !important; width: 200px; height: 150px; } .container { max-width: 90%; margin: 0 auto; } .pagination-item { padding: 0.5em 0.5em; font-size: 14px; } header { display: block; } .site-header { text-align: center; } header nav { max-width: 100%; text-align: center; background: #fafafa; padding: 0.5em 0; flex-direction: column; } header h1 { margin: auto; text-align: center; } header nav a:first-of-type { margin-left: 0; } header nav a { margin-left: 5%; } article::after { background: none; } main h1 { margin: auto; } .nav__spacer { display: none; } } .footnote-definition-label::before { content: "["; } .footnote-definition-label::after { content: "] :"; } .footnote-definition-label { // zola renders the footnotes as , // so it looks weird on the website // This snippet makes this particular look like normal text top: 4px; position: relative; font-size: 18px; } .footnote-definition-label, .footnote-definition > p { display: inline; }