new css, more purple
This commit is contained in:
parent
e1c3ce1efa
commit
1dddb610f3
SSH Key Fingerprint:
SHA256:FBkvrOlhq5use1XEttyUGT4bUTDVA1ar9SgIc9P03cM
262
assets/blog.css
262
assets/blog.css
@ -1,44 +1,27 @@
|
||||
@import url("monokai.css") screen and (prefers-color-scheme: dark);
|
||||
@import url("pastie.css") (prefers-color-scheme: light), print;
|
||||
|
||||
:root
|
||||
{
|
||||
--bg: #1d1f21;
|
||||
--bg-code: #101;
|
||||
--bg-code-trans: #1018;
|
||||
--bg-hover: #282a2e;
|
||||
--bg-dark: #1b1b1b;
|
||||
--fg: LightGray;
|
||||
--fg-dim: Gray;
|
||||
--link: SkyBlue;
|
||||
--link-hover: MediumAquamarine;
|
||||
--link-visited: Plum;
|
||||
:root {
|
||||
--bg: #308;
|
||||
--fg: #e8e;
|
||||
--accent: #f4c;
|
||||
--semitrans: #0004;
|
||||
--link: #4cf;
|
||||
|
||||
--fg-note: LimeGreen;
|
||||
--fg-tip: CornflowerBlue;
|
||||
--fg-important: Gold;
|
||||
--fg-caution: Orange;
|
||||
--fg-warning: OrangeRed;
|
||||
|
||||
--font-serif: "Source Serif Pro", serif;
|
||||
--font-sans-serif: "Source Sans Pro", sans-serif;
|
||||
--font-mono: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light), print
|
||||
{
|
||||
:root
|
||||
{
|
||||
--bg: #eee;
|
||||
--bg-code: #fff; /* From pastie.css */
|
||||
--bg-code-trans: #fff8;
|
||||
--bg-hover: #f8f8f8;
|
||||
--bg-dark: #ddd;
|
||||
--fg: #1d1f21;
|
||||
--fg-dim: Gray;
|
||||
--link: MediumBlue;
|
||||
--link-hover: ForestGreen;
|
||||
--link-visited: MediumVioletRed;
|
||||
@media (prefers-color-scheme: light), print {
|
||||
:root {
|
||||
--bg: #e8e;
|
||||
--fg: #308;
|
||||
--accent: #704;
|
||||
--semitrans: #fff4;
|
||||
--link: #04f;
|
||||
|
||||
--fg-note: ForestGreen;
|
||||
--fg-tip: DodgerBlue;
|
||||
@ -48,245 +31,220 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
:root
|
||||
{
|
||||
@media print {
|
||||
:root {
|
||||
--bg: white;
|
||||
--fg: black;
|
||||
}
|
||||
}
|
||||
|
||||
html
|
||||
{
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-serif);
|
||||
font-family: serif;
|
||||
text-align: justify;
|
||||
scroll-padding-top: 0.5em;
|
||||
scrollbar-color: var(--accent) var(--semitrans);
|
||||
}
|
||||
|
||||
/* Exception for /posts/, /tags/ and headlines */
|
||||
.list, .terms, h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
.list, .terms, h1, h2, h3, h4, h5, h6 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
body {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
p {
|
||||
text-indent: 0.5em;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.content > div:first-of-type > p:first-of-type,
|
||||
.sectionbody > div:first-of-type > p:first-of-type
|
||||
{
|
||||
.sectionbody > div:first-of-type > p:first-of-type {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* No indent for <b> tags and whatnot. */
|
||||
p *
|
||||
{
|
||||
p * {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
li p, dd p
|
||||
{
|
||||
li p, dd p {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:visited
|
||||
{
|
||||
color: var(--link-visited);
|
||||
a:visited {
|
||||
color: color-mix(in srgb, var(--link) 50%, var(--fg));
|
||||
}
|
||||
|
||||
a:hover, a:hover:visited
|
||||
{
|
||||
color: var(--link-hover);
|
||||
a:hover, a:hover:visited {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
font-family: var(--font-sans-serif);
|
||||
a:active {
|
||||
background-color: var(--semitrans);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.header .title, .nav a
|
||||
{
|
||||
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-shadow: -1px -2px 4px var(--accent);
|
||||
}
|
||||
|
||||
.header .title, .nav a {
|
||||
padding: 0.2em 0.4em;
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.header .title
|
||||
{
|
||||
.header .title {
|
||||
margin-left: -0.4em;
|
||||
font-family: var(--font-serif);
|
||||
font-family: serif;
|
||||
font-variant: small-caps;
|
||||
text-shadow: 0 0 8px var(--accent);
|
||||
}
|
||||
|
||||
.header a:hover, .nav a:hover
|
||||
{
|
||||
background-color: var(--bg-hover);
|
||||
.header a:hover, .nav a:hover {
|
||||
background-color: var(--semitrans);
|
||||
}
|
||||
|
||||
.header .description::before
|
||||
{
|
||||
.nav a {
|
||||
text-shadow: 1px 2px 4px var(--accent);
|
||||
}
|
||||
|
||||
|
||||
.header .description::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.description
|
||||
{
|
||||
.description {
|
||||
font-size: 115%;
|
||||
float: right;
|
||||
color: var(--fg-dim);
|
||||
filter: hue-rotate(-30deg);
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
hr {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.nav-top, .nav-bottom
|
||||
{
|
||||
.nav-top, .nav-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Needed to position the language menu right. */
|
||||
.nav ul
|
||||
{
|
||||
.nav ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.language-menu
|
||||
{
|
||||
.language-menu {
|
||||
float: right;
|
||||
bottom: 0;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.language-menu a
|
||||
{
|
||||
.language-menu a {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
code, kbd, pre, samp
|
||||
{
|
||||
font-family: var(--font-mono);
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
p > code, td > code
|
||||
{
|
||||
background-color: var(--bg-code-trans);
|
||||
p > code, td > code {
|
||||
background-color: var(--semitrans);
|
||||
text-shadow: 0 0 2px var(--accent);
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
pre {
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
div.admonitionblock td.icon
|
||||
{
|
||||
border-color: var(--bg-hover);
|
||||
div.admonitionblock td.icon {
|
||||
border-color: var(--semitrans);
|
||||
}
|
||||
|
||||
div.admonitionblock table
|
||||
{
|
||||
background-color: var(--bg-dark);
|
||||
/* box-shadow: 0 0 0.1em 0 var(--link-hover); */
|
||||
div.admonitionblock table {
|
||||
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
||||
}
|
||||
|
||||
div.note td.icon
|
||||
{
|
||||
div.note td.icon {
|
||||
color: var(--fg-note);
|
||||
}
|
||||
|
||||
div.note table
|
||||
{
|
||||
div.note table {
|
||||
box-shadow: 0 0 0.1em 0 var(--fg-note);
|
||||
}
|
||||
|
||||
div.tip td.icon
|
||||
{
|
||||
div.tip td.icon {
|
||||
color: var(--fg-tip);
|
||||
}
|
||||
|
||||
div.tip table
|
||||
{
|
||||
div.tip table {
|
||||
box-shadow: 0 0 0.1em 0 var(--fg-tip);
|
||||
}
|
||||
|
||||
div.important td.icon
|
||||
{
|
||||
div.important td.icon {
|
||||
color: var(--fg-important);
|
||||
}
|
||||
|
||||
div.important table
|
||||
{
|
||||
div.important table {
|
||||
box-shadow: 0 0 0.1em 0 var(--fg-important);
|
||||
}
|
||||
|
||||
div.caution td.icon
|
||||
{
|
||||
div.caution td.icon {
|
||||
color: var(--fg-caution);
|
||||
}
|
||||
|
||||
div.caution table
|
||||
{
|
||||
div.caution table {
|
||||
box-shadow: 0 0 0.1em 0 var(--fg-caution);
|
||||
}
|
||||
|
||||
div.warning td.icon
|
||||
{
|
||||
div.warning td.icon {
|
||||
color: var(--fg-warning);
|
||||
}
|
||||
|
||||
div.warning table
|
||||
{
|
||||
div.warning table {
|
||||
box-shadow: 0 0 0.1em 0 var(--fg-warning);
|
||||
}
|
||||
|
||||
/* Overwrite background color for highlighted sections. */
|
||||
.highlight
|
||||
{
|
||||
background-color: var(--bg-code) !important;
|
||||
.highlight {
|
||||
background-color: var(--semitrans) !important;
|
||||
}
|
||||
|
||||
div, table, code, img
|
||||
{
|
||||
div, table, code, img {
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
kbd
|
||||
{
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.05em;
|
||||
background-color: var(--fg);
|
||||
color: var(--bg);
|
||||
border: 0.15em inset var(--fg-dim);
|
||||
border: 0.15em inset color-mix(in srgb, var(--fg) 50%, var(--semitrans));
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0 0.1em;
|
||||
border: 0.15em outset var(--bg-dark);
|
||||
border: 0.15em outset color-mix(in srgb, var(--bg) 50%, var(--semitrans));
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.toc
|
||||
{
|
||||
.toc {
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
padding: 0 0.2em;
|
||||
@ -295,58 +253,48 @@ kbd
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
|
||||
.toc h2, .toc ul, .toc ol
|
||||
{
|
||||
.toc h2, .toc ul, .toc ol {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.toc h2
|
||||
{
|
||||
.toc h2 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80ch)
|
||||
{
|
||||
.toc
|
||||
{
|
||||
@media screen and (min-width: 80ch) {
|
||||
.toc {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination
|
||||
{
|
||||
.pagination {
|
||||
margin-top: 0.5em;
|
||||
font-family: var(--font-sans-serif);
|
||||
background-color: var(--bg-dark);
|
||||
font-family: sans-serif;
|
||||
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
||||
padding-left: 0.2em;
|
||||
border-top: 0.1em dotted var(--bg-hover);
|
||||
border-top: 0.1em dotted var(--accent);
|
||||
}
|
||||
|
||||
.changelog
|
||||
{
|
||||
.changelog {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.quoteblock
|
||||
{
|
||||
border-color: var(--bg-hover);
|
||||
.quoteblock {
|
||||
border-color: var(--semitrans);
|
||||
}
|
||||
|
||||
#footnotes
|
||||
{
|
||||
#footnotes {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:target
|
||||
{
|
||||
outline: 0.01em dotted var(--fg-dim);
|
||||
:target {
|
||||
outline: 0.01em dotted var(--accent);
|
||||
}
|
||||
|
||||
/* Includes title above code examples */
|
||||
.listingblock
|
||||
{
|
||||
background-color: var(--bg-dark);
|
||||
.listingblock {
|
||||
background-color: var(--semitrans);
|
||||
}
|
||||
|
||||
.listingblock .title {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user