/*
This document has been created with Marked.app <http://marked2app.com>, Copyright 2013 Brett Terpstra
Content is property of the document author
Please leave this notice in place, along with any additional credits below.
---------------------------------------------------------------
Title: GitHub
Author: Brett Terpstra
Description: Github README style. Includes theme for Pygmentized code blocks.
---------------------------------------------------------------
Modified by Olivier Spinnler (OpSpl, dr-spinnler.ch):
* nice colors imitating pen on paper
* font family
* maximum column width of 50 rem
* column centered and not into window borders
* table caption
* figure caption
* built-in paper background + ornament for separating lines (<hr> element)
* special care of the vertical spacing
* links and footnote markers are visible but discreet; they are hightlighted when hovered
* vertical text positionning inside table cells and headers
* easy to configure via variables at the top of the file
Version date: 2020-10-10
*/
:root{
--font-size-normal: 20px;
--line-height: 1.0rem; /* line spacing, relative to the font size */
--line-Height-h1: 1.8rem;
--max-width: 50rem; /* line length, relative to the font size */
--font-family: "ITC Stone Sans Std", Lato, "Noto Sans", "PT Sans", "Palatino Sans Com", "Frutiger Neue LT Pro", "IBM Plex Sans", "Between 2", "Helvetica Neue", Optima, Candara, "Avenir Next", Avenir, Verdana, sans-serif;
/* —————— If you prefer a “Serifs” version, uncomment this font family, for example ——————
--font-family: "PT Serif", "Palatino eText", "ITC Stone Serif Com", "ITC Stone Informal Std", "IBM Plex Serif", "Gentium Plus", "Frutiger Serif LT Pro", "Gentium Book Basic", "Warnock Pro", Constantia, Cochin, Optima, Cambria, Georgia, serif;
*/
--blockquote-font-family: "ITC Stone Serif Com", Cochin, Optima, Cambria, "Times New Roman", serif; /* OpSpl: was: "Lucida Grande", Lucida, Verdana, sans-serif; */
--blockquote-font-size: 22px;
--blockquote-color: #5463a9;
--text-color: #042264; /* deep blue ink */
--link-color: #4183c4; /* light blue, kind of sky blue */
--link-hover-bg-color: #FFE5BA; /* kind of beige */
--link-hover-color: #619FDF; /* still light blue, but more readable over beige */
--table-head-bkg-color: hsl(38, 55%, 90%); /* for the header row of tables */
--table-alt-row-color: hsl(38, 55%, 93%); /* for the alternating rows of tables */
--font-size-code: 15px;
--font-size-h1: 2rem;
--font-size-h2: 1.5rem;
--font-size-h3: 1.3rem;
--font-size-h4: 1.15rem;
--font-size-h5: 1rem;
--font-size-h6: 1rem;
--font-weight-h1: 600; /* semibold is enough and more readable */
--font-weight-h2: 550; /* bolder is not necessary… */
--font-weight-h3: 600; /* semibold is enough and more readable */
--font-weight-h4: 700; /* to make them really stand up as headers */
--font-weight-h5: 700; /* to make them really stand up as headers */
--font-weight-h6: 700; /* to make them really stand up as headers */
--img-max-height: 25rem; /* to prevent images with portrait proportions from overwhelming text; put "100%" if you don’t like this idea*/
--text-align: justify; /* rfog: I like text aligned */
--dark-mode-text-color: Wheat; /* rfog: forcing cream-ish color when in dark mode */
}
html, body {
/* background-color: ivory; */ /* OpSpl */
/* background: url(data:image/jpeg;base64,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) 0% 0% repeat scroll;
*/
background-size: auto;
font-family: var(--font-family);
font-size: var(--font-size-normal);
color: var(--text-color);
line-height: var(--line-height);
max-width: var(--max-width);
margin-left: auto; /* to center the content inside the window, left and right margins are set to “auto” */
margin-right: auto;
border-bottom-color: var(--text-color);
padding-left: .75rem; /* “padding” to offset content from window edges */
padding-right: .75rem;
text-align: var(--text-align);
}
@media (prefers-color-scheme: dark) {
html, body {
color: var(--dark-mode-text-color);
}
}
p {
margin-top: 0.6rem;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* OpSpl — to prevent “bold” from being too bold; if the font has a *semibold* variant, it will be preferred */
strong {
font-weight: 600;
}
*:not('#mkdbuttons') {
margin: 0;
padding: 0;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
background-color: var(--link-hover-bg-color);
text-decoration: none;
color: var(--link-hover-color);
border-top: .2rem solid var(--link-hover-bg-color);
border-bottom: .2rem solid var(--link-hover-bg-color);
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.7;
cursor: text;
position: relative;
padding: 0;
margin-top: 1.3em;
margin-bottom: 0em;
text-align: center;
}
h1 {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-h1);
border-bottom: .12em solid;
/*font-variant: small-caps;*/
margin-top: 0; /* As this H1 generally appears at the top of a note or of a page, it’s not necessary to push it further down. Thus, we have more room for text on display, without sacrifycing aesthetics. */
margin-bottom: 1em; /* But we want some breathing room below it. */
}
h2 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-h2);
border-bottom: 0.12em solid;
margin-bottom: 1em; /* Here too, we want some breathing room. */
}
h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-h3);
margin-bottom: 0;
font-style: italic;
}
h4 {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-h4);
margin-bottom: 0;
font-style: italic;
}
h5 {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-h5);
margin-bottom: 0;
font-style: italic;
}
h6 {
font-size: var(--font-size-h6);
font-weight: var(--font-weight-h6);
margin-bottom: 0;
font-style: italic;
}
blockquote, table, pre {
margin: .75em 0 0 1em;
}
/* ———————————— Lists ————————————*/
ul, ol {
margin-left: 1.5rem;
margin-right: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
list-style-position: outside;
list-style-image: none;
}
/* every “list item” gets a small space above */
li {
margin-top: .6rem;
}
li p {
margin-top: .5rem;
}
ul li :last-child,
ol li :last-child {
margin-top: .3rem;
margin-bottom: .4rem;
}
/* unordered or ordered list following a body paragraph */
p + ul,
p + ol {
padding-top: 0;
margin-top: .5rem;
padding-bottom: 0;
margin-bottom: 0.6rem;
}
ol li {
padding-left: 0;
}
ul li,
ol li
{ /* selects every “list item” inside an “unordered list” or an “ordered list” */
margin-top: .3rem;
}
/* ———————————— Definition lists ————————————*/
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: 600; /* OpSpl: was: bold; */
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt > :first-child {
margin-top: 0;
}
dl dt > :last-child {
margin-bottom: 0;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd > :first-child {
margin-top: 0;
}
dl dd > :last-child {
margin-bottom: 0;
}
/* ------------------ Block quotes ------------------ */
blockquote {
border-left: 6px solid ; /* KD: was 4px; OpSpl changed #DDD to blockquote color */
margin: 30px; /* KD */
padding: 0 20px; /* KD; was 15px */
color: var(--blockquote-color);
font-family: var(--blockquote-font-family);
font-size: var(--blockquote-font-size);
font-style: italic;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
hr { /* swirl elaborated by OpSpl */
height: 2rem;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: center;
width: 100%;
max-width: 100%;
margin-top: 30px;
margin-bottom: 30px;
border-style: none;
}
/* ———————————— Tables ————————————————*/
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
font: inherit;
margin: 1em auto;
border: 0.1em solid var(--text-color);
}
table th {
font-weight: 600;
// border-width: 2px;
// border-style: solid;
padding: .3em .5em .4em;
background-color: var(--table-head-bkg-color);
font-size: 1.1em;
border-right-style: none;
vertical-align: bottom;
}
table td {
padding: .4em .5em .4em .4em;
border-width: 2em;
border-style: none;
line-height: 1.2em;
border-right-style: none;
vertical-align: top;
}
/*
table tr {
border-width: 2px;
border-style: solid;
// background-color: #fff;
border-right-style: none;
}
*/
table tr:nth-child(2n) {
background-color: var(--table-alt-row-color);
}
table caption {
font-weight: 600; /* OpSpl: was bold */
font-style: italic;
padding-bottom: .4em;
padding-top: .4em;
font-size: 1.1em;
caption-side: top;
}
/* ———————————— Images ————————————————*/
figure {
margin: 2em 0 2em 0em;
}
figure img { /* OpSpl added a frame via outline property */
outline: 2px solid var(--text-color);
outline-offset: 10px;
left: 10px;
position: relative;
margin-bottom: 7px;
}
figcaption { /* OpSpl: adjusted to frame and overall styling */
font-weight: 600;
font-style: italic;
padding-bottom: 1em;
padding-top: .4em;
padding-left: .6em;
font-size: .9em;
}
img { /* OpSpl: preventing images from overwhelming text */
max-width: 100%;
max-height: var(--img-max-height);
}
/* ———————————— Code ————————————————*/
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
font-family: Menlo, Consolas, 'Liberation Mono', Courier, monospace;
font-size: var(--font-size-code);
color: #333333;
}
pre > code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
.highlight pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 14px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
margin: 26px 0;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
.poetry pre {
font-family: Georgia, Garamond, serif !important;
font-style: italic;
font-size: 110% !important;
line-height: 1.6em;
display: block;
margin-left: 1em;
}
.poetry pre code {
font-family: Georgia, Garamond, serif !important;
word-break: break-all;
word-break: break-word;
/* Non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
white-space: pre-wrap;
}
.feed_header {
margin: 0;
font-size: var(--font-size-h1);
font-weight: var(--font-weight-h1);
line-height: var(--line-Height-h1);
text-align: center;
/*line-height: 180%;*/
}
.feed_date {
font-size: var(--font-size-code);
font-weight: var(--font-weight-h1);
line-height: var(--line-Height-h1);
text-align: center;
color: hsl(0, 0%, 50%);
}
sup, sub, a.footnote {
font-size: 1.4ex;
height: 0;
line-height: 1;
vertical-align: super;
position: relative;
}
a.footnote {
height: 0;
line-height: 1;
vertical-align: super;
position: relative;
color: var(--link-color);
font-size: .9em;
}
a.footnote:hover {
background-color: var(--link-hover-bg-color);
/* text-decoration: underline; */
color: var(--link-hover-color);
border-top: .2rem solid var(--link-hover-bg-color);
border-bottom: .2rem solid var(--link-hover-bg-color);
}
sub {
vertical-align: sub;
top: -1px;
}
Comments