and

*/ main { background-color: var(--a-lec_white); } /* ---------------------------------------------------------------------------- * Article contents styles */ article#article { display: flex; margin: 0 25px; } header#article_header {} img#article_logo { display: inline; vertical-align: middle; max-width: 100%; height: auto; float: left; margin-right: 1rem; } h1#article_title { font-size: 150%; margin-top: 30px; margin-bottom: 40px; } a#article_title_link { color: var(--a-lec_blue_darker); } div#article_refs { background-color: var(--a-lec_yellow); float: right; padding: 5px; font-size: 82%; margin-bottom: 10px; margin-top: -3em; } a#post_code { color: var(--a-lec_red); padding: 0 0px; font-weight: normal; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } /* ! TOC */ h2.toc_title { font-size: 100%; color: #808080; } nav.toc {} ul.toc_items {} li.toc_item {} /*Also css from DOMAIN*/ a.toc_item_link {} /* TITLES * ------ * Order title show id="toc_1", id="toc_2".... for h2 to h6 * h2 to h6 class set to css DOMAIN (default "tyto") */ h2.tyto { font-size: 130%; margin-top: 30px; margin-bottom: 15px; color: #454545; } h3.tyto { font-size: 110%; margin-top: 20px; margin-bottom: 10px; color: #505050; } h4.tyto { font-size: 100%; color: #606060; } h5.tyto { font-size: 100%; color: #707070; } h6.tyto { font-size: 100%; color: #808080; } /* Misc in

* ----------------- * "tyto" is default css DOMAIN. * Class can be set for these markers */ p.tyto { display: block; margin-top: 20px; text-align: justify; } ul.tyto { line-height: 24px; } ol.tyto { line-height: 24px; } li.tyto { padding: 3px 0; } /* * Words tags */ a.tyto { color: var(--a-lec_red); padding: 0 2px; font-weight: bold; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } a.tyto:hover { padding: 0 2px; background-color: var(--a-lec_blue); color: #000; cursor: pointer; } a.tyto:active { text-decoration: none; cursor: progress; } /* link to a file. Also a.tyto */ a.file { background-color: #FFF; } a.tyto:hover { background-color: var(--a-lec_yellow); color: #000; cursor: pointer; } br.tyto {} hr.tyto {} strong.tyto { color: #454545; font-weight: bold; } bold.tyto { color: #676767; font-weight: bold; } q.tyto {} cite.tyto {} u.tyto {} em.tyto {} i.tyto { font-style: italic; } del.tyto {} span.tyto {} /* inline code*/ code.tyto {} /* * Blockquotes */ blockquote.tyto { display: block; margin: 20px 20px 20px 20px; color: var(--a-lec_black); padding-bottom: 5px; } blockquote.tyto p { font-style: italic; } blockquote.tyto p::before { color: var(--a-lec_blue); content: "“"; font-size: 2rem; margin-left: -20px; margin-bottom: -25px; display: block; } blockquote.tyto p::after { color: var(--a-lec_blue); content: "„"; font-size: 2rem; margin-right: -15px; margin-top: -25px; text-align: right; display: block; } blockquote.tyto a.tyto { display: block; float: right; background-color: var(--a-lec_yellow); padding: 4px; color: var(--a-lec_black); margin-right: -10px; font-size: initial; } blockquote.tyto a.tyto:hover { display: block; float: right; background-color: var(--a-lec_blue); padding: 4px; color: var(--a-lec_black); margin-right: -10px; font-size: initial; } blockquote.tyto a.tyto:active { display: block; float: right; background-color: var(--a-lec_yellow); padding: 4px; color: var(--a-lec_black); margin-right: -10px; font-size: initial; } /* If blockquote has metadatas, footer.tyto also gets new custom CSS */ footer.tyto {} /* BlockCode "{{...}}" * - defaylt "bcode". If Class set: "bcode" is replaced. i.e pre.MYCSS_pre * "code::NAME" (file contents) -> "::NAME" * - NO custom CSS */ pre.bcode_pre {} ol.bcode_items {} li.bcode_item {} code.bcode_code {} /* ---------------------------------------------------------------------------- * Header (Wensite Logo, Description) */ a#site_link { display: flex; background-attachment: fixed; background-image: url(../template/electronic.jpg); background-position: 0 0; } header#header { display: flex; flex-direction: row; } div#header_logo { display: flex; } img#header_logo_image { align-items: start; width: 160px; height: 160px; color: #FFF; font-weight: bold; font-size: 300%; margin: 20px; } div#header_abouts { display: flex; flex-direction: column; } p#header_title { padding-left: 50px; margin-top: 70px; color: #FFF; font-weight: bold; font-size: 300%; } p#header_about { font-weight: normal; color: #FFF; font-size: 130%; margin-left: 60px; margin-top: -30px; } /* ---------------------------------------------------------------------------- * Menu navbar (Website) */ nav#menu {} menu#menu_items {} li.menu_item {} a.menu_link {} /* ---------------------------------------------------------------------------- * Sidebar navbar (Website) */ aside#sidebar {} div#sidebar_title {} nav#sidebar_menu {} ul#sidebar_items {} li.sidebar_item {} div.sidebar_post_title {} a.sidebar_post_link {} div.sidebar_post_about {} p.sidebar_post_about_p {} /* ---------------------------------------------------------------------------- * Footer (Website) */ footer#footer { background: #2d4b63; /* old IE fallback */ background-image: url(../template/electronic.jpg); background-position: 0 0; background-repeat: cover; background-size: auto; color: #FFF; height: 100%; } div#footer_title { display: block; font-size: 150%; color: #FFF; font-weight: bold; margin-top: 10px; margin-bottom: 10px; padding: 20px; } div#footer_about_menu { display: flex; flex-direction: row; margin-bottom: 10px; border-top : unset; border-left: unset; border-right: unset; padding: 15px; } div#footer_about { display: flex; flex-basis: 80%; justify-content: center; align-items: center; } p#footer_about_p { font-size: 120%; margin: 0px 0px 0px 0px; } p#footer_about_p a { color: var(--a-lec_yellow); font-weight: bold; } p#footer_about_p b { color: var(--a-lec_blue); font-weight: bold; } nav#footer_menu { display: flex; flex-basis: 30%; justify-content: center; align-items: center; } ul#footer_items { color: var(--a-lec_yellow); } li.footer_item { text-align: justify; margin-left: 0px; margin-right: 0px; padding: 0px; list-style-type: none; } a.footer_item_link { color: var(--a-lec_yellow); font-weight: bold; } a.footer_item_link:hover { color: #000; } div#footer_credit {} p#footer_copyright { text-align: center; font-weight: bold; margin-top: 5px; margin-bottom: 5px; } p#footer_tyto { text-align: center; padding-bottom: 10px; margin: auto; } a.footer_cr_link { color: var(--a-lec_blue); font-weight: bold; } /* ---------------------------------------------------------------------------- * Small screens */ @media screen and (max-width: 700px) { header#header { flex-direction: column; } img#header_logo_image { all: unset; display: inline-block; width: 100%; margin-top: 20px; height: min(20vw,20vh); } p#header_title { padding-left: 0px; color: #FFF; font-weight: bold; font-size: 180%; text-align: center; } p#header_about { font-weight: normal; color: #FFF; font-size: 100%; margin-left: 60px; margin-top: -10px; } }