/* Minimal style sheet for the HTML output of Docutils. */
/* */
/* :Author: Günter Milde, based on html4css1.css by David Goodger */
/* :Id: $Id: minimal.css 9079 2022-06-19 14:00:56Z milde $ */
/* :Copyright: © 2015, 2021 Günter Milde. */
/* :License: Released under the terms of the `2-Clause BSD license`_, */
/* in short: */
/* */
/* Copying and distribution of this file, with or without modification, */
/* are permitted in any medium without royalty provided the copyright */
/* notice and this notice are preserved. */
/* */
/* This file is offered as-is, without any warranty. */
/* */
/* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause */
/* This CSS3 stylesheet defines rules for Docutils elements without */
/* HTML equivalent. It is required to make the document semantics visible. */
/* */
/* .. _validates: http://jigsaw.w3.org/css-validator/validator$link */
/* titles */
p.topic-title,
p.admonition-title,
p.system-message-title {
font-weight: bold;
}
p.sidebar-title,
p.rubric {
font-weight: bold;
font-size: larger;
}
p.rubric {
color: maroon;
}
p.subtitle,
p.section-subtitle,
p.sidebar-subtitle {
font-weight: bold;
margin-top: -0.5em;
}
h1 + p.subtitle {
font-size: 1.6em;
}
a.toc-backref {
color: inherit;
text-decoration: none;
}
/* Warnings, Errors */
.system-messages h2,
.system-message-title,
span.problematic {
color: red;
}
/* Inline Literals */
.docutils.literal {
font-family: monospace;
white-space: pre-wrap;
}
/* do not wrap at hyphens and similar: */
.literal > span.pre { white-space: nowrap; }
/* Lists */
/* compact and simple lists: no margin between items */
.simple li, .simple ul, .simple ol,
.compact li, .compact ul, .compact ol,
.simple > li p, dl.simple > dd,
.compact > li p, dl.compact > dd {
margin-top: 0;
margin-bottom: 0;
}
/* Nested Paragraphs
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
details > p:last-child { margin-bottom: 1em; }
*/
/* Table of Contents */
.contents ul.auto-toc { /* section numbers present */
list-style-type: none;
}
/* Enumerated Lists */
ol.arabic { list-style: decimal }
ol.loweralpha { list-style: lower-alpha }
ol.upperalpha { list-style: upper-alpha }
ol.lowerroman { list-style: lower-roman }
ol.upperroman { list-style: upper-roman }
/* Definition Lists and Derivatives */
dt .classifier { font-style: italic }
dt .classifier:before {
font-style: normal;
margin: 0.5em;
content: ":";
}
/* Field Lists and similar */
/* bold field name, content starts on the same line */
dl.field-list,
dl.option-list,
dl.docinfo,
dl.footnote,
dl.citation {
display: flow-root;
}
dl.field-list > dt,
dl.option-list > dt,
dl.docinfo > dt,
dl.footnote > dt,
dl.citation > dt {
font-weight: bold;
clear: left;
float: left;
margin: 0;
padding: 0;
padding-right: 0.2em;
}
/* Offset for field content (corresponds to the --field-name-limit option) */
dl.field-list > dd,
dl.option-list > dd,
dl.docinfo > dd {
margin-left: 9em; /* ca. 14 chars in the test examples, fit all Docinfo fields */
}
/* start nested lists on new line */
dd > dl:first-child,
dd > ul:first-child,
dd > ol:first-child {
clear: left;
}
/* start field-body on a new line after long field names */
dl.field-list > dd > *:first-child,
dl.option-list > dd > *:first-child
{
display: inline-block;
width: 100%;
margin: 0;
}
/* Bibliographic Fields (docinfo) */
dl.docinfo pre.address {
font: inherit;
margin: 0.5em 0;
}
dl.docinfo > dd.authors > p { margin: 0; }
/* Option Lists */
dl.option-list > dt { font-weight: normal; }
span.option { white-space: nowrap; }
/* Footnotes and Citations */
.footnote, .citation { margin: 1em 0; } /* default paragraph skip (Firefox) */
/* hanging indent */
.citation { padding-left: 2em; }
.footnote { padding-left: 1.7em; }
.footnote.superscript { padding-left: 1.0em; }
.citation > .label { margin-left: -2em; }
.footnote > .label { margin-left: -1.7em; }
.footnote.superscript > .label { margin-left: -1.0em; }
.footnote > .label + *,
.citation > .label + * {
display: inline-block;
margin-top: 0;
vertical-align: top;
}
.footnote > .backrefs + *,
.citation > .backrefs + * {
margin-top: 0;
}
.footnote > .label + p, .footnote > .backrefs + p,
.citation > .label + p, .citation > .backrefs + p {
display: inline;
vertical-align: inherit;
}
.backrefs { user-select: none; }
.backrefs > a { font-style: italic; }
/* superscript footnotes */
a[role="doc-noteref"].superscript,
.footnote.superscript > .label,
.footnote.superscript > .backrefs {
vertical-align: super;
font-size: smaller;
line-height: 1;
}
a[role="doc-noteref"].superscript > .fn-bracket,
.footnote.superscript > .label > .fn-bracket {
/* hide brackets in display but leave for copy/paste */
display: inline-block;
width: 0;
overflow: hidden;
}
[role="doc-noteref"].superscript + [role="doc-noteref"].superscript {
padding-left: 0.15em; /* separate consecutive footnote references */
/* TODO: unfortunately, "+" also selects with text between the references. */
}
/* Legacy Footnotes and Citations */
dl.footnote.superscript > dd { margin-left: 1em; }
dl.footnote.brackets > dd { margin-left: 2em; }
dl.footnote > dt { font-weight: normal; }
dt.label > span.brackets:before { content: "["; }
dt.label > span.brackets:after { content: "]"; }
a.footnote-reference.superscript,
dl.footnote.superscript > dt.label {
vertical-align: super;
font-size: small;
}
dt.label > span.fn-backref {
margin-left: 0.2em;
font-weight: normal;
}
dt.label > span.fn-backref > a { font-style: italic; }
/* Alignment */
.align-left {
text-align: left;
margin-right: auto;
}
.align-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.align-right {
text-align: right;
margin-left: auto;
}
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
img.align-left, img.align-center, img.align-right,
.figure.align-left, .figure.align-center, .figure.align-right,
object.align-left, object.align-center, object.align-right {
display: block;
}
/* reset inner alignment in figures and tables */
figure.align-left, figure.align-right,
table.align-left, table.align-center, table.align-right {
text-align: inherit;
}
/* Text Blocks */
.topic { margin: 1em 2em; }
.sidebar,
.admonition,
.system-message {
margin: 1em 2em;
border: thin solid;
padding: 0.5em 1em;
}
div.line-block { display: block; }
div.line-block div.line-block, pre { margin-left: 2em; }
/* Code line numbers: dropped when copying text from the page */
pre.code .ln { display: none; }
pre.code code:before {
content: attr(data-lineno); /* …, none) fallback not supported by any browser */
color: gray;
}
/* Tables */
td > p:first-child, th > p:first-child { margin-top: 0; }
td > p, th > p { margin-bottom: 0; }
.borderless td, .borderless th {
border: 0;
padding: 0;
padding-right: 0.5em /* separate table cells */
}
table > caption {
text-align: left;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
table.captionbelow {
caption-side: bottom;
}
/* CSS31_ style sheet for the output of Docutils HTML writers. */
/* Rules for easy reading and pre-defined style variants. */
/* */
/* :Author: Günter Milde, based on html4css1.css by David Goodger */
/* :Id: $Id: plain.css 9081 2022-06-19 20:23:12Z milde $ */
/* :Copyright: © 2015 Günter Milde. */
/* :License: Released under the terms of the `2-Clause BSD license`_, */
/* in short: */
/* */
/* Copying and distribution of this file, with or without modification, */
/* are permitted in any medium without royalty provided the copyright */
/* notice and this notice are preserved. */
/* */
/* This file is offered as-is, without any warranty. */
/* */
/* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause */
/* .. _CSS3: https://www.w3.org/Style/CSS/ */
/* Document Structure */
/* ****************** */
/* Table of Contents */
ul.auto-toc > li > p {
padding-left: 1em;
text-indent: -1em;
}
nav.contents ul {
padding-left: 1em;
}
main > nav.contents ul ul ul ul:not(.auto-toc) {
list-style-type: '\2B29\ ';
}
main > nav.contents ul ul ul ul ul:not(.auto-toc) {
list-style-type: '\2B1D\ ';
}
/* Transitions */
hr.docutils {
width: 80%;
margin-top: 1em;
margin-bottom: 1em;
clear: both;
}
dl > dd {
margin-bottom: 0.5em;
}
/* Lists */
/* ===== */
/* Definition Lists */
/* Indent lists nested in definition lists */
dd > ul:only-child, dd > ol:only-child { padding-left: 1em; }
/* Description Lists */
/* styled like in most dictionaries, encyclopedias etc. */
dl.description {
display: flow-root;
}
dl.description > dt {
font-weight: bold;
clear: left;
float: left;
margin: 0;
padding: 0;
padding-right: 0.3em;
}
dl.description > dd:after {
display: table;
content: "";
clear: left; /* clearfix for empty descriptions */
}
/* Field Lists */
dl.field-list > dd,
dl.docinfo > dd {
margin-left: var(--field-indent); /* adapted in media queries or HTML */
}
/* example for custom field-name width */
dl.field-list.narrow > dd {
--field-indent: 5em;
}
/* run-in: start field-body on same line after long field names */
dl.field-list.run-in > dd p {
display: block;
}
/* Bibliographic Fields */
/* generally, bibliographic fields use dl.docinfo */
/* but dedication and abstract are placed into divs */
div.abstract p.topic-title {
text-align: center;
}
div.dedication {
margin: 2em 5em;
text-align: center;
font-style: italic;
}
div.dedication p.topic-title {
font-style: normal;
}
/* disclosures */
details { padding-left: 1em; }
summary { margin-left: -1em; }
/* Text Blocks */
/* =========== */
/* Literal Blocks */
pre.literal-block, pre.doctest-block,
pre.math, pre.code {
font-family: monospace;
}
/* Block Quotes and Topics */
blockquote p.attribution,
.topic p.attribution {
text-align: right;
margin-left: 20%;
}
/* Tables */
/* ====== */
/* th { vertical-align: bottom; } */
table tr { text-align: left; }
/* "booktabs" style (no vertical lines) */
table.booktabs {
border: 0;
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
table.booktabs * {
border: 0;
}
table.booktabs th {
border-bottom: thin solid;
}
/* numbered tables (counter defined in div.document) */
table.numbered > caption:before {
counter-increment: table;
content: "Table " counter(table) ": ";
font-weight: bold;
}
/* Explicit Markup Blocks */
/* ====================== */
/* Footnotes and Citations */
/* ----------------------- */
/* line on the left */
.footnote-list {
border-left: solid thin;
padding-left: 0.25em;
}
/* same thing for old docutils versions */
dl.footnote {
padding-left: 1ex;
border-left: solid;
border-left-width: thin;
}
/* Directives */
/* ---------- */
/* Body Elements */
/* ~~~~~~~~~~~~~ */
/* Images and Figures */
/* let content flow to the side of aligned images and figures */
figure.align-left,
img.align-left,
video.align-left,
object.align-left {
clear: left;
float: left;
margin-right: 1em;
}
figure.align-right,
img.align-right,
video.align-right,
object.align-right {
clear: right;
float: right;
margin-left: 1em;
}
/* Numbered figures */
figure.numbered > figcaption > p:before {
counter-increment: figure;
content: "Figure " counter(figure) ": ";
font-weight: bold;
}
/* Admonitions and System Messages */
.caution p.admonition-title,
.attention p.admonition-title,
.danger p.admonition-title,
.error p.admonition-title,
.warning p.admonition-title,
div.error {
color: red;
}
/* Sidebar */
/* Move right. In a layout with fixed margins, */
/* it can be moved into the margin. */
aside.sidebar {
width: 30%;
max-width: 26em;
float: right;
clear: right;
margin-left: 1em;
margin-right: -1%;
background-color: #fffffa;
}
div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning, div.sidebar,
div.system-message {
/* stolen from Boostrap 4 (.card) */
margin-bottom: 2rem;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
color: #212529;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
padding: 0;
}
div.attention, div.caution, div.danger, div.error, div.warning {
/* stolen from Boostrap 3 (.border-danger) */
border-color: #dc3545!important;
}
div.admonition p, div.hint p,
div.important p, div.note p,
div.tip p, div.sidebar p,
div.attention p, div.caution p,
div.danger p, div.error p,
div.warning p, div.system-message p {
padding-left: 1rem;
padding-right: 1rem;
}
div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title, div.sidebar p.sidebar-title,
div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, div.system-message p.system-message-title {
/* stolen from Boostrap 4 (.card .card-header) */
font-weight: 400;
font-size: 1.25rem;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
}
div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, div.system-message p.system-message-title {
/* stolen from Boostrap 4 (.card .card-header .bg-danger) */
background-color: #dc3545;
color: white;
}
div.sidebar {
margin-right: 0;
}
/* Improved margin overrides */
div.topic,
pre.literal-block,
pre.doctest-block,
pre.math,
pre.code,
div.code {
margin-left: 1rem;
margin-right: 1rem;
}
div.code {
margin-bottom: 1rem;
}
/* code.css file generated by Nikola */
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
pre.code .hll, .code .codetable .hll, .highlight pre .hll { background-color: #ffffcc }
pre.code , .code .codetable , .highlight pre { background: #f8f8f8; }
pre.code .c, .code .codetable .c, .highlight pre .c { color: #3D7B7B; font-style: italic } /* Comment */
pre.code .err, .code .codetable .err, .highlight pre .err { border: 1px solid #F00 } /* Error */
pre.code .k, .code .codetable .k, .highlight pre .k { color: #008000; font-weight: bold } /* Keyword */
pre.code .o, .code .codetable .o, .highlight pre .o { color: #666 } /* Operator */
pre.code .ch, .code .codetable .ch, .highlight pre .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
pre.code .cm, .code .codetable .cm, .highlight pre .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
pre.code .cp, .code .codetable .cp, .highlight pre .cp { color: #9C6500 } /* Comment.Preproc */
pre.code .cpf, .code .codetable .cpf, .highlight pre .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
pre.code .c1, .code .codetable .c1, .highlight pre .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
pre.code .cs, .code .codetable .cs, .highlight pre .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
pre.code .gd, .code .codetable .gd, .highlight pre .gd { color: #A00000 } /* Generic.Deleted */
pre.code .ge, .code .codetable .ge, .highlight pre .ge { font-style: italic } /* Generic.Emph */
pre.code .ges, .code .codetable .ges, .highlight pre .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
pre.code .gr, .code .codetable .gr, .highlight pre .gr { color: #E40000 } /* Generic.Error */
pre.code .gh, .code .codetable .gh, .highlight pre .gh { color: #000080; font-weight: bold } /* Generic.Heading */
pre.code .gi, .code .codetable .gi, .highlight pre .gi { color: #008400 } /* Generic.Inserted */
pre.code .go, .code .codetable .go, .highlight pre .go { color: #717171 } /* Generic.Output */
pre.code .gp, .code .codetable .gp, .highlight pre .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
pre.code .gs, .code .codetable .gs, .highlight pre .gs { font-weight: bold } /* Generic.Strong */
pre.code .gu, .code .codetable .gu, .highlight pre .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
pre.code .gt, .code .codetable .gt, .highlight pre .gt { color: #04D } /* Generic.Traceback */
pre.code .kc, .code .codetable .kc, .highlight pre .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
pre.code .kd, .code .codetable .kd, .highlight pre .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
pre.code .kn, .code .codetable .kn, .highlight pre .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
pre.code .kp, .code .codetable .kp, .highlight pre .kp { color: #008000 } /* Keyword.Pseudo */
pre.code .kr, .code .codetable .kr, .highlight pre .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
pre.code .kt, .code .codetable .kt, .highlight pre .kt { color: #B00040 } /* Keyword.Type */
pre.code .m, .code .codetable .m, .highlight pre .m { color: #666 } /* Literal.Number */
pre.code .s, .code .codetable .s, .highlight pre .s { color: #BA2121 } /* Literal.String */
pre.code .na, .code .codetable .na, .highlight pre .na { color: #687822 } /* Name.Attribute */
pre.code .nb, .code .codetable .nb, .highlight pre .nb { color: #008000 } /* Name.Builtin */
pre.code .nc, .code .codetable .nc, .highlight pre .nc { color: #00F; font-weight: bold } /* Name.Class */
pre.code .no, .code .codetable .no, .highlight pre .no { color: #800 } /* Name.Constant */
pre.code .nd, .code .codetable .nd, .highlight pre .nd { color: #A2F } /* Name.Decorator */
pre.code .ni, .code .codetable .ni, .highlight pre .ni { color: #717171; font-weight: bold } /* Name.Entity */
pre.code .ne, .code .codetable .ne, .highlight pre .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
pre.code .nf, .code .codetable .nf, .highlight pre .nf { color: #00F } /* Name.Function */
pre.code .nl, .code .codetable .nl, .highlight pre .nl { color: #767600 } /* Name.Label */
pre.code .nn, .code .codetable .nn, .highlight pre .nn { color: #00F; font-weight: bold } /* Name.Namespace */
pre.code .nt, .code .codetable .nt, .highlight pre .nt { color: #008000; font-weight: bold } /* Name.Tag */
pre.code .nv, .code .codetable .nv, .highlight pre .nv { color: #19177C } /* Name.Variable */
pre.code .ow, .code .codetable .ow, .highlight pre .ow { color: #A2F; font-weight: bold } /* Operator.Word */
pre.code .w, .code .codetable .w, .highlight pre .w { color: #BBB } /* Text.Whitespace */
pre.code .mb, .code .codetable .mb, .highlight pre .mb { color: #666 } /* Literal.Number.Bin */
pre.code .mf, .code .codetable .mf, .highlight pre .mf { color: #666 } /* Literal.Number.Float */
pre.code .mh, .code .codetable .mh, .highlight pre .mh { color: #666 } /* Literal.Number.Hex */
pre.code .mi, .code .codetable .mi, .highlight pre .mi { color: #666 } /* Literal.Number.Integer */
pre.code .mo, .code .codetable .mo, .highlight pre .mo { color: #666 } /* Literal.Number.Oct */
pre.code .sa, .code .codetable .sa, .highlight pre .sa { color: #BA2121 } /* Literal.String.Affix */
pre.code .sb, .code .codetable .sb, .highlight pre .sb { color: #BA2121 } /* Literal.String.Backtick */
pre.code .sc, .code .codetable .sc, .highlight pre .sc { color: #BA2121 } /* Literal.String.Char */
pre.code .dl, .code .codetable .dl, .highlight pre .dl { color: #BA2121 } /* Literal.String.Delimiter */
pre.code .sd, .code .codetable .sd, .highlight pre .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
pre.code .s2, .code .codetable .s2, .highlight pre .s2 { color: #BA2121 } /* Literal.String.Double */
pre.code .se, .code .codetable .se, .highlight pre .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
pre.code .sh, .code .codetable .sh, .highlight pre .sh { color: #BA2121 } /* Literal.String.Heredoc */
pre.code .si, .code .codetable .si, .highlight pre .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
pre.code .sx, .code .codetable .sx, .highlight pre .sx { color: #008000 } /* Literal.String.Other */
pre.code .sr, .code .codetable .sr, .highlight pre .sr { color: #A45A77 } /* Literal.String.Regex */
pre.code .s1, .code .codetable .s1, .highlight pre .s1 { color: #BA2121 } /* Literal.String.Single */
pre.code .ss, .code .codetable .ss, .highlight pre .ss { color: #19177C } /* Literal.String.Symbol */
pre.code .bp, .code .codetable .bp, .highlight pre .bp { color: #008000 } /* Name.Builtin.Pseudo */
pre.code .fm, .code .codetable .fm, .highlight pre .fm { color: #00F } /* Name.Function.Magic */
pre.code .vc, .code .codetable .vc, .highlight pre .vc { color: #19177C } /* Name.Variable.Class */
pre.code .vg, .code .codetable .vg, .highlight pre .vg { color: #19177C } /* Name.Variable.Global */
pre.code .vi, .code .codetable .vi, .highlight pre .vi { color: #19177C } /* Name.Variable.Instance */
pre.code .vm, .code .codetable .vm, .highlight pre .vm { color: #19177C } /* Name.Variable.Magic */
pre.code .il, .code .codetable .il, .highlight pre .il { color: #666 } /* Literal.Number.Integer.Long */
.highlight table, .highlight tr, .highlight td, .code table, .code tr, .code td { border-spacing: 0; border-collapse: separate; padding: 0 }
.highlight pre, .code pre { white-space: pre-wrap; line-height: normal }
.highlighttable td.linenos, .codetable td.linenos { vertical-align: top; padding-left: 10px; padding-right: 10px; user-select: none; -webkit-user-select: none }
.highlighttable td.linenos code:before, .codetable td.linenos code:before { content: attr(data-line-number) }
.highlighttable td.code, .codetable td.code { overflow-wrap: normal; border-collapse: collapse }
.highlighttable td.code code, .codetable td.code code { overflow: unset; border: none; padding: 0; margin: 0; white-space: pre-wrap; line-height: unset; background: none }
.highlight .lineno.nonumber, .code .lineno.nonumber { list-style: none }
table.codetable, table.highlighttable { width: 100%;}
.codetable td.linenos, td.linenos { text-align: right; width: 3.5em; padding-right: 0.5em; background: rgba(127, 127, 127, 0.2) }
.codetable td.code, td.code { padding-left: 0.5em; }
/* Oniric Theme - Modern AI Software Solutions Blog Theme */
/* Basic reset for consistent layout behavior */
*, *::before, *::after {
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* CSS Variables for Oniric Theme */
:root {
--oniric-primary: #2563eb; /* Modern blue */
--oniric-secondary: #6366f1; /* Indigo accent */
--oniric-accent: #06b6d4; /* Cyan for highlights */
--oniric-success: #10b981; /* Emerald green */
--oniric-warning: #f59e0b; /* Amber warning */
--oniric-error: #ef4444; /* Red error */
/* Light theme colors */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #e2e8f0;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* Gradient backgrounds */
--gradient-primary: linear-gradient(135deg, var(--oniric-primary) 0%, var(--oniric-secondary) 100%);
--gradient-accent: linear-gradient(135deg, var(--oniric-accent) 0%, var(--oniric-primary) 100%);
}
/* Dark theme colors */
#dark-mode:checked ~ .theme {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border-color: #334155;
--shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
/* Base theme styling */
.theme {
background: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 100vh;
}
/* Layout improvements */
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 800px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
padding: 0 0.5rem;
}
/* Header with logo as background image */
.cover {
position: relative;
background: #000000 url('/images/oniricapps-logo-background.png') no-repeat top;
/*background-size: 200px auto;
background-position: 2rem 2rem;*/
color: white;
text-align: center;
padding: 2rem 0.5rem 3rem;
margin: 0 auto;
border-radius: 0 0 2rem 2rem;
box-shadow: var(--shadow-large);
width: 100%;
max-width: 800px;
box-sizing: border-box;
}
.cover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat-x bottom;
background-size: 100% 60px;
opacity: 0.1;
}
/* Header controls positioning */
.header-controls {
position: absolute;
top: 1rem;
left: 1rem;
display: flex;
align-items: center;
gap: 1rem;
z-index: 100;
}
/* Logo placeholder for moon logo - hidden when real logo is present */
.logo-placeholder {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.logo-placeholder::before {
content: '🌙';
font-size: 2rem;
filter: grayscale(0) brightness(1.2);
}
/* Hide placeholder when real logo is present */
#logo + .logo-placeholder,
.site-logo ~ .logo-placeholder {
display: none;
}
/* Hide inline logo since we're using it as background */
.site-logo,
#logo {
display: none;
}
/* Title styling - consistent across all pages */
#brand,
.cover__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin: 2rem 0 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 10;
text-align: center;
}
#brand {
font-size: clamp(2rem, 4vw, 3rem) !important;
}
#brand a,
.cover__title a {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#brand a:hover,
.cover__title a:hover {
transform: scale(1.02);
opacity: 0.9;
}
#blog-title {
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Dark mode toggle - moved to top right */
.dark-mode-label {
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.dark-mode-label:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
.dark-mode-label svg {
fill: currentColor;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Mobile menu button - modern hamburger menu */
.cool-menu__label {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.cool-menu__label:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
.cool-menu__label svg {
color: inherit;
stroke: currentColor;
}
/* On desktop, make sure icons in header controls are visible */
@media (min-width: 1024px) {
.cool-menu__label {
display: none;
}
}
.cool-menu {
color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hide checkbox inputs */
#cool-menu,
#dark-mode {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Menu styling */
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--bg-primary);
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-100%);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 999;
opacity: 0;
visibility: hidden;
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
}
#cool-menu:checked ~ .menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.menu ul li {
margin: 1.5rem 0;
transform: translateY(20px);
opacity: 0;
animation: slideInMenu 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
#cool-menu:checked ~ .menu ul li {
animation-delay: calc(var(--i, 0) * 0.1s);
}
.menu ul li:nth-child(1) { --i: 1; }
.menu ul li:nth-child(2) { --i: 2; }
.menu ul li:nth-child(3) { --i: 3; }
.menu ul li:nth-child(4) { --i: 4; }
.menu ul li:nth-child(5) { --i: 5; }
@keyframes slideInMenu {
to {
transform: translateY(0);
opacity: 1;
}
}
.menu ul li a {
color: var(--text-primary);
text-decoration: none;
font-size: 1.5rem;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 1rem;
display: block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--bg-secondary);
border: 2px solid transparent;
}
.menu ul li a:hover,
.menu ul li.active a {
background: var(--gradient-primary);
color: white;
transform: scale(1.05);
box-shadow: var(--shadow-large);
}
/* Content area styling */
.content {
flex: 1;
padding: 1rem 0.5rem;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
/* Desktop layout - keep header at top */
@media (min-width: 1024px) {
.layout {
flex-direction: column;
max-width: 800px;
margin: 0 auto;
padding: 0 0.5rem;
}
.cover {
width: 100%;
max-width: 800px;
margin: 0 auto 3rem auto;
min-height: auto;
border-radius: 0 0 2rem 2rem;
display: block;
text-align: center;
padding: 3rem 2rem 4rem;
position: relative;
background: #000000 url('/images/oniricapps-logo-background.png') no-repeat top;
box-sizing: border-box;
/*background-size: 250px auto;
background-position: 3rem 3rem;*/
}
#brand,
.cover__title {
font-size: 3.5rem;
margin: 2rem 0;
text-align: center;
}
.header-controls {
position: absolute;
top: 2rem;
left: 2rem;
flex-direction: row;
gap: 1.5rem;
}
.cool-menu__label {
display: none;
}
.menu {
position: static;
width: 100%;
max-width: 800px;
margin: 0 auto 2rem auto;
height: auto;
background: var(--bg-secondary);
backdrop-filter: blur(10px);
border-radius: 1rem;
transform: none;
opacity: 1;
visibility: visible;
display: block;
padding: 1.5rem 2rem;
box-shadow: var(--shadow-medium);
border: 1px solid var(--border-color);
}
.menu ul {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.menu ul li {
margin: 0;
transform: none;
opacity: 1;
animation: none;
}
.menu ul li a {
font-size: 1rem;
padding: 0.75rem 1.5rem;
background: var(--bg-secondary);
color: var(--text-primary);
border-radius: 2rem;
border: 2px solid var(--border-color);
font-weight: 500;
}
.menu ul li a:hover,
.menu ul li.active a {
background: var(--gradient-primary);
color: white;
border-color: var(--oniric-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.content {
flex: 1;
padding: 2rem 0;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
}
/* Article styling */
article {
margin-bottom: 3rem;
background: var(--bg-secondary);
border-radius: 1rem;
padding: 2rem;
box-shadow: var(--shadow-light);
border: 1px solid var(--border-color);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
article:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-large);
}
article .header__title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
line-height: 1.3;
}
article .header__title a {
color: inherit;
text-decoration: none;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
article .header__title a:hover {
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
article .article__meta {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 1rem 0;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
article .article__meta a {
color: var(--oniric-primary);
text-decoration: none;
font-weight: 600;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
article .article__meta a:hover {
background: var(--oniric-primary);
color: white;
transform: scale(1.05);
}
/* Content typography */
section p {
margin: 1.5rem 0;
line-height: 1.8;
color: var(--text-primary);
}
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
color: var(--text-primary);
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.3;
}
section h1 { font-size: 2.5rem; }
section h2 { font-size: 2rem; }
section h3 { font-size: 1.75rem; }
section h4 { font-size: 1.5rem; }
section h5 { font-size: 1.25rem; }
section h6 { font-size: 1.125rem; }
section a {
color: var(--oniric-primary);
text-decoration: none;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
section a:hover {
border-bottom-color: var(--oniric-primary);
}
section a:visited {
color: var(--oniric-secondary);
}
/* Code styling */
section code {
background: var(--bg-tertiary);
color: var(--text-primary);
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.875rem;
border: 1px solid var(--border-color);
}
pre.code,
pre.doctest-block,
pre.literal-block,
pre.math,
section pre {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.5rem;
overflow-x: auto;
margin: 2rem 0;
box-shadow: var(--shadow-light);
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.875rem;
line-height: 1.6;
}
/* Blockquotes */
article blockquote {
background: var(--bg-secondary);
border-left: 4px solid var(--oniric-primary);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 0.5rem 0.5rem 0;
font-style: italic;
color: var(--text-secondary);
position: relative;
}
article blockquote::before {
content: '"';
font-size: 4rem;
color: var(--oniric-primary);
position: absolute;
top: -0.5rem;
left: 1rem;
opacity: 0.3;
}
/* Tables */
article table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
background: var(--bg-secondary);
border-radius: 0.75rem;
overflow: hidden;
box-shadow: var(--shadow-light);
}
article table thead {
background: var(--gradient-primary);
color: white;
}
article table th,
article table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
article table th {
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Lists */
article ul,
article ol {
padding-left: 1.5rem;
margin: 1.5rem 0;
}
article ul li,
article ol li {
margin: 0.5rem 0;
line-height: 1.7;
}
article ul li {
list-style-type: none;
position: relative;
}
article ul li::before {
content: '•';
color: var(--oniric-primary);
font-weight: bold;
position: absolute;
left: -1rem;
}
article ol li {
list-style-type: decimal;
list-style-position: outside;
}
/* Images */
article img {
max-width: 100%;
height: auto;
border-radius: 0.75rem;
margin: 2rem 0 0.5rem 0; /* Reduced bottom margin to bring caption closer */
box-shadow: var(--shadow-medium);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
article img:hover {
transform: scale(1.02);
box-shadow: var(--shadow-large);
}
/* Image captions using tag */
article img + small,
article small:has(a[href*="unsplash"]),
article p > small:only-child {
display: block;
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
margin: 0.5rem 0 2rem 0;
line-height: 1.4;
font-style: italic;
}
article img + small a,
article small:has(a[href*="unsplash"]) a,
article p > small:only-child a {
color: var(--text-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
article img + small a:hover,
article small:has(a[href*="unsplash"]) a:hover,
article p > small:only-child a:hover {
color: var(--oniric-primary);
border-bottom-color: var(--oniric-primary);
}
/* Pagination */
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin: 3rem 0;
padding: 1.5rem;
background: var(--bg-secondary);
border-radius: 1rem;
box-shadow: var(--shadow-light);
}
.pagination a {
color: var(--oniric-primary);
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
background: var(--bg-tertiary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 600;
}
.pagination a:hover {
background: var(--oniric-primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Tags */
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0;
}
.tags li {
list-style: none;
}
.tags a {
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 1rem;
background: var(--bg-tertiary);
border-radius: 1.5rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-color);
}
.tags a:hover {
background: var(--oniric-primary);
color: white;
border-color: var(--oniric-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-light);
}
/* Search form */
.searchform {
margin: 2rem 0;
}
.searchform input {
width: 100%;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 0.75rem;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.searchform input:focus {
outline: none;
border-color: var(--oniric-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Dark mode persistence */
.theme {
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Responsive improvements */
@media (max-width: 640px) {
.cover {
padding: 1.5rem 0.5rem 3rem;
max-width: 800px;
margin: 0 auto;
}
.header-controls {
top: 0.75rem;
left: 0.75rem;
gap: 0.75rem;
}
.content {
padding: 1rem 0.5rem;
}
article {
padding: 1.5rem;
margin-bottom: 2rem;
}
.cover__title {
font-size: 2rem;
margin: 1.5rem 0 1rem;
}
}
/* Utility classes */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Extra large screens - add more padding for better centering */
@media (min-width: 1400px) {
.layout {
padding: 0 3rem;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--oniric-primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--oniric-secondary);
}
/* Focus states for accessibility */
*:focus {
outline: 2px solid var(--oniric-primary);
outline-offset: 2px;
}
/* ===================== */
/* Share Component Styles */
/* ===================== */
.share-container {
position: relative;
display: inline-block;
margin: 1rem 0;
}
.share-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: var(--oniric-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-medium);
position: relative;
z-index: 10;
}
.share-button:hover {
background: var(--oniric-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-large);
}
.share-button:active {
transform: translateY(0);
}
.share-icon {
width: 1.25rem;
height: 1.25rem;
}
.share-menu {
position: absolute;
top: 100%;
left: 0;
transform: translateY(8px);
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.5rem;
min-width: 280px;
max-width: 90vw;
box-shadow: var(--shadow-large);
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
.share-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(8px) scale(1);
}
/* Smart positioning to prevent menu from going off-screen */
.share-menu.align-right {
left: auto;
right: 0;
}
.share-menu.align-right::before {
left: auto;
right: 1.25rem; /* Align arrow with the button */
}
@media (max-width: 480px) {
.share-menu {
left: auto;
right: 0;
min-width: 260px;
}
}
.share-menu::before {
content: '';
position: absolute;
top: -6px;
left: 1.25rem; /* Position arrow above the share button */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--bg-primary);
}
@media (max-width: 480px) {
.share-menu::before {
left: auto;
right: 1.25rem; /* Align with button when menu is right-aligned */
}
}
.share-menu-title {
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
}
.share-options {
display: grid;
gap: 0.5rem;
}
.share-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
transition: all 0.2s ease;
text-align: left;
width: 100%;
}
.share-option:hover {
background: var(--bg-secondary);
border-color: var(--oniric-primary);
transform: translateY(-1px);
}
.share-option svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.share-option[data-platform="linkedin"]:hover {
background: #0077b5;
color: white;
border-color: #0077b5;
}
.share-option[data-platform="twitter"]:hover {
background: #000000;
color: white;
border-color: #000000;
}
.share-option[data-platform="facebook"]:hover {
background: #1877f2;
color: white;
border-color: #1877f2;
}
.share-option[data-platform="copy"]:hover {
background: var(--oniric-success);
color: white;
border-color: var(--oniric-success);
}
.share-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.share-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile optimization */
@media (max-width: 768px) {
.share-menu {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
border-radius: 1rem 1rem 0 0;
min-width: auto;
max-width: 100vw;
margin: 0;
}
.share-menu.active {
transform: translateY(0);
}
.share-menu::before {
display: none;
}
.share-options {
gap: 0.75rem;
}
.share-option {
padding: 1rem;
font-size: 1rem;
}
.share-button {
width: 3rem;
height: 3rem;
}
.share-icon {
width: 1.5rem;
height: 1.5rem;
}
}
/* Animation for mobile share button */
@media (hover: none) and (pointer: coarse) {
.share-button:active {
transform: scale(0.95);
}
}
/* Native share fallback styles */
.native-share-active .share-menu {
display: none;
}
/* Copy success feedback */
.share-option.copy-success {
background: var(--oniric-success) !important;
color: white !important;
border-color: var(--oniric-success) !important;
}
.share-option.copy-success svg {
animation: checkmark 0.6s ease-in-out;
}
@keyframes checkmark {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* Dark theme adjustments */
#dark-mode:checked ~ .theme .share-menu {
background: var(--bg-secondary);
border-color: var(--bg-tertiary);
}
#dark-mode:checked ~ .theme .share-menu::before {
border-bottom-color: var(--bg-secondary);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.share-button {
border: 2px solid var(--text-primary);
}
.share-option {
border-width: 2px;
}
}
/* ===================== */
/* Post List Styles */
/* ===================== */
.postlist {
list-style: none;
padding: 0;
margin: 0;
}
.postlist li {
margin-bottom: 1rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.listdate {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.postlist-separator {
color: var(--text-muted);
font-weight: 300;
user-select: none;
flex-shrink: 0;
}
.listtitle {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s ease;
flex: 1;
min-width: 0; /* Allow text to wrap */
}
.listtitle:hover {
color: var(--oniric-primary);
text-decoration: underline;
}
/* Responsive adjustments for mobile */
@media (max-width: 640px) {
.postlist li {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.postlist-separator {
display: none;
}
.listdate {
font-size: 0.8rem;
}
}
/* ===================== */
/* Related Posts Styles */
/* ===================== */
.related-posts {
margin: 3rem 0 0 0;
}
.related-posts__section-title {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* The related posts use the same .postindex and article styles as the main index */
/*!
* baguetteBox.js
* @author feimosi
* @version 1.11.1
* @url https://github.com/feimosi/baguetteBox.js
*/#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}