diff options
Diffstat (limited to 'src/css')
| -rw-r--r-- | src/css/custom/blockquotes.less | 18 | ||||
| -rw-r--r-- | src/css/custom/helpers.less | 5 | ||||
| -rw-r--r-- | src/css/custom/navigation.less | 30 | ||||
| -rw-r--r-- | src/css/formats/asciidoc.less | 45 | ||||
| -rw-r--r-- | src/css/language-war.less | 69 | ||||
| -rw-r--r-- | src/css/main.less | 144 | ||||
| -rw-r--r-- | src/css/pygments.scss | 74 | ||||
| -rw-r--r-- | src/css/variables.less | 14 |
8 files changed, 399 insertions, 0 deletions
diff --git a/src/css/custom/blockquotes.less b/src/css/custom/blockquotes.less new file mode 100644 index 0000000..3984472 --- /dev/null +++ b/src/css/custom/blockquotes.less @@ -0,0 +1,18 @@ +@import "../variables.less"; + +.quoteblock { + width: 90%; + margin: 0 auto; + border-left: double black; + padding: 0.5em; + background-color: @blockBackgroundColor; + + blockquote { + font-style: italic; + } + + div.attribution { + text-align: right; + margin-right: 1em; + } +} diff --git a/src/css/custom/helpers.less b/src/css/custom/helpers.less new file mode 100644 index 0000000..2c4d80b --- /dev/null +++ b/src/css/custom/helpers.less @@ -0,0 +1,5 @@ +@import "../variables.less"; + +.center { + text-align: center; +} diff --git a/src/css/custom/navigation.less b/src/css/custom/navigation.less new file mode 100644 index 0000000..9c9ef4e --- /dev/null +++ b/src/css/custom/navigation.less @@ -0,0 +1,30 @@ +@import "../variables.less"; + +// Navigation bar +nav { + padding-bottom: 8px; + border-bottom: double @bodyTextColor; + text-align: center; + font-family: Sans; + + a, a:visited { + margin: 0 0.5em; + font-size: 24px; + text-decoration: none; + color: @bodyTextColor; + } + + .brand-name { + text-align: center; + display: block; + font-weight: bold; + font-size: 32px; + color: @bodyTextColor; + margin-bottom: 8px; + } +} + +// Generic links +a, a:visited { + color: @linkColor; +} diff --git a/src/css/formats/asciidoc.less b/src/css/formats/asciidoc.less new file mode 100644 index 0000000..89dfcb2 --- /dev/null +++ b/src/css/formats/asciidoc.less @@ -0,0 +1,45 @@ +@import "../variables.less"; + +.toc { + font-weight: bold; + + ul { + font-weight: normal; + list-style-type: decimal; + } +} + +.admonitionblock { + background-color: @blockBackgroundColor; + border: 1px solid @blockBorderColor; + margin: 0.5em auto 1.75em auto; + width: 90%; + padding: 0.5em; + + table { + td.icon { + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + font-size: 1.5em; + + div.title { + margin: 0 1em; + } + } + + td.content { + padding: 0 1.125em; + border-left: 1px solid #ddd; + } + } +} + +div#footnotes { + font-size: smaller; + + hr { + margin-top: 2em; + width: 80%; + text-align: left; + color: @blockBorderColor; + } +} diff --git a/src/css/language-war.less b/src/css/language-war.less new file mode 100644 index 0000000..c7f563b --- /dev/null +++ b/src/css/language-war.less @@ -0,0 +1,69 @@ +@import "./variables.less"; + +main { + max-width: 80em; + margin: 0 auto; + text-align: justify; + + @media(max-width: @mainWidth) { + padding: 1rem; + } + + h1, h2, p { + max-width: @mainWidth; + margin-left: auto; + margin-right: auto; + } + + .language-announcer { + max-width: @mainWidth; + margin: 0 auto; + } + + .admonitionblock { + max-width: @mainWidth * .9; + margin: 0 auto; + } + + figure.highlight pre { + overflow-x: auto; + } + + @media(min-width: @mainWidth) { + .language-arena { + display: grid; + + grid-template-columns: [challenger] 1fr [defender] 1fr [end]; + grid-template-rows: [code] auto [comments] auto [end]; + + .language-challenger { + grid-column-start: challenger; + grid-column-end: defender; + grid-row-start: code; + grid-row-end: end; + } + + .language-defender { + grid-column-start: defender; + grid-column-end: end; + grid-row-start: code; + grid-row-end: end; + } + + .language-code { + grid-row-start: code; + grid-row-end: comments; + + max-width: 40em; + } + + .language-commentary { + max-width: @mainWidth; + grid-row-start: comments; + grid-row-end: end; + + margin: 0 40px; + } + } + } +} diff --git a/src/css/main.less b/src/css/main.less new file mode 100644 index 0000000..bb22e74 --- /dev/null +++ b/src/css/main.less @@ -0,0 +1,144 @@ +@import "./variables.less"; + +@import "./custom/blockquotes.less"; +@import "./custom/helpers.less"; +@import "./custom/navigation.less"; + +@import "./formats/asciidoc.less"; + +html { + background-color: @bodyBackgroundColor; +} + +body { + color: @bodyTextColor; + font-size: 16px; + line-height: 1.4; + text-align: justify; + width: 100%; + margin: 0; +} + +small { + font-size: 0.7em; +} + +li p { + margin: 0; +} + +table { + width: 100%; +} + +a.image-link { + text-decoration: none; +} + +span.footer-link-seperator { + margin: .5rem; + overflow: hidden; +} + +figure.highlight, pre.highlight { + border: 2px solid @blockBorderColor; + background-color: @blockBackgroundColor; + overflow-x: auto; + + pre, pre.pygments { + margin: 0; + padding: 6px 6px; + } + + .code-link { + border-top: 1px dotted @blockBorderColor; + padding: 3px 8px; + text-align: right; + } +} + +code { + padding: 2px; +} + +pre code { + padding: 0; +} + +div.container { + max-width: @mainWidth; + margin: 0 auto 0.5em auto; + padding: 1em 2em 0 2em; +} + +span.citneed{ + vertical-align: top; + font-size: 0.7em; + padding-left: 0.3em; +} + +p.text-center { + text-align: center; +} + +article { + footer hr { + width: 50% + } +} + +section.admonition { + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + margin: .5rem auto 1.74rem auto; + width: 85%; + max-width: @mainWidth * .9; + padding: 1.5rem; + + .admonition-title { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + } + + p { + margin: 0; + } +} + +@media(min-width: @mainWidth) { + section.admonition { + display: grid; + + grid-template-columns: [title] .25fr [body] 1fr [end]; + + .admonition-title { + grid-column-start: title; + grid-column-end: body; + } + + p { + grid-column-start: body; + grid-column-end: end; + + padding-left: 10px; + border-left: 1px solid #ddd; + } + } +} + +@media(max-width: @mainWidth) { + section.admonition { + .admonition-title { + text-align: center; + margin-top: 0; + } + + p { + padding-top: 10px; + border-top: 1px solid #ddd; + } + } +} diff --git a/src/css/pygments.scss b/src/css/pygments.scss new file mode 100644 index 0000000..8c1f06d --- /dev/null +++ b/src/css/pygments.scss @@ -0,0 +1,74 @@ +--- +--- +.listingblock .pygments, .highlight pre { + background: #f8f8f8; + + .hll { background-color: #ffffcc } + .c, .tok-c { color: #008800; font-style: italic } /* Comment */ + .err, .tok-err { border: 1px solid #FF0000 } /* Error */ + .k, .tok-k { color: #AA22FF; font-weight: bold } /* Keyword */ + .o, .tok-o { color: #666666 } /* Operator */ + .ch, .tok-ch { color: #008800; font-style: italic } /* Comment.Hashbang */ + .cm, .tok-cm { color: #008800; font-style: italic } /* Comment.Multiline */ + .cp, .tok-cp { color: #008800 } /* Comment.Preproc */ + .cpf, .tok-cpf { color: #008800; font-style: italic } /* Comment.PreprocFile */ + .c1, .tok-c1 { color: #008800; font-style: italic } /* Comment.Single */ + .cs, .tok-cs { color: #008800; font-weight: bold } /* Comment.Special */ + .gd, .tok-gd { color: #A00000 } /* Generic.Deleted */ + .ge, .tok-ge { font-style: italic } /* Generic.Emph */ + .gr, .tok-gr { color: #FF0000 } /* Generic.Error */ + .gh, .tok-gh { color: #000080; font-weight: bold } /* Generic.Heading */ + .gi, .tok-gi { color: #00A000 } /* Generic.Inserted */ + .go, .tok-go { color: #888888 } /* Generic.Output */ + .gp, .tok-gp { color: #000080; font-weight: bold } /* Generic.Prompt */ + .gs, .tok-gs { font-weight: bold } /* Generic.Strong */ + .gu, .tok-gu { color: #800080; font-weight: bold } /* Generic.Subheading */ + .gt, .tok-gt { color: #0044DD } /* Generic.Traceback */ + .kc, .tok-kc { color: #AA22FF; font-weight: bold } /* Keyword.Constant */ + .kd, .tok-kd { color: #AA22FF; font-weight: bold } /* Keyword.Declaration */ + .kn, .tok-kn { color: #AA22FF; font-weight: bold } /* Keyword.Namespace */ + .kp, .tok-kp { color: #AA22FF } /* Keyword.Pseudo */ + .kr, .tok-kr { color: #AA22FF; font-weight: bold } /* Keyword.Reserved */ + .kt, .tok-kt { color: #00BB00; font-weight: bold } /* Keyword.Type */ + .m, .tok-m { color: #666666 } /* Literal.Number */ + .s, .tok-s { color: #BB4444 } /* Literal.String */ + .na, .tok-na { color: #BB4444 } /* Name.Attribute */ + .nb, .tok-nb { color: #AA22FF } /* Name.Builtin */ + .nc, .tok-nc { color: #0000FF } /* Name.Class */ + .no, .tok-no { color: #880000 } /* Name.Constant */ + .nd, .tok-nd { color: #AA22FF } /* Name.Decorator */ + .ni, .tok-ni { color: #999999; font-weight: bold } /* Name.Entity */ + .ne, .tok-ne { color: #D2413A; font-weight: bold } /* Name.Exception */ + .nf, .tok-nf { color: #00A000 } /* Name.Function */ + .nl, .tok-nl { color: #A0A000 } /* Name.Label */ + .nn, .tok-nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ + .nt, .tok-nt { color: #008000; font-weight: bold } /* Name.Tag */ + .nv, .tok-nv { color: #B8860B } /* Name.Variable */ + .ow, .tok-ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ + .w, .tok-w { color: #bbbbbb } /* Text.Whitespace */ + .mb, .tok-mb { color: #666666 } /* Literal.Number.Bin */ + .mf, .tok-mf { color: #666666 } /* Literal.Number.Float */ + .mh, .tok-mh { color: #666666 } /* Literal.Number.Hex */ + .mi, .tok-mi { color: #666666 } /* Literal.Number.Integer */ + .mo, .tok-mo { color: #666666 } /* Literal.Number.Oct */ + .sa, .tok-sa { color: #BB4444 } /* Literal.String.Affix */ + .sb, .tok-sb { color: #BB4444 } /* Literal.String.Backtick */ + .sc, .tok-sc { color: #BB4444 } /* Literal.String.Char */ + .dl, .tok-dl { color: #BB4444 } /* Literal.String.Delimiter */ + .sd, .tok-sd { color: #BB4444; font-style: italic } /* Literal.String.Doc */ + .s2, .tok-s2 { color: #BB4444 } /* Literal.String.Double */ + .se, .tok-se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ + .sh, .tok-sh { color: #BB4444 } /* Literal.String.Heredoc */ + .si, .tok-si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ + .sx, .tok-sx { color: #008000 } /* Literal.String.Other */ + .sr, .tok-sr { color: #BB6688 } /* Literal.String.Regex */ + .s1, .tok-s1 { color: #BB4444 } /* Literal.String.Single */ + .ss, .tok-ss { color: #B8860B } /* Literal.String.Symbol */ + .bp, .tok-bp { color: #AA22FF } /* Name.Builtin.Pseudo */ + .fm, .tok-fm { color: #00A000 } /* Name.Function.Magic */ + .vc, .tok-vc { color: #B8860B } /* Name.Variable.Class */ + .vg, .tok-vg { color: #B8860B } /* Name.Variable.Global */ + .vi, .tok-vi { color: #B8860B } /* Name.Variable.Instance */ + .vm, .tok-vm { color: #B8860B } /* Name.Variable.Magic */ + .il, .tok-il { color: #666666 } /* Literal.Number.Integer.Long */ +} diff --git a/src/css/variables.less b/src/css/variables.less new file mode 100644 index 0000000..9441283 --- /dev/null +++ b/src/css/variables.less @@ -0,0 +1,14 @@ +// Main site colors +@bodyBackgroundColor: #fefefe; +@bodyTextColor: #454545; + +// Link Colors +@linkColor: #07a; +@linkVisitedInvertedColor: #ac5a82; + +// Special blocks +@blockBackgroundColor: #f6f6f6; +@blockBorderColor: #d7d7d7; + +// Sizes +@mainWidth: 900px; |