tastytea/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new css, more purple

Browse Source
This commit is contained in:
tastytea 2023-10-14 18:01:19 +02:00
parent e1c3ce1efa
commit 1dddb610f3
Signed by: tastytea
SSH Key Fingerprint: SHA256:FBkvrOlhq5use1XEttyUGT4bUTDVA1ar9SgIc9P03cM
1 changed files with 105 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
assets/blog.css
View File

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