282 lines
6.0 KiB
CSS
282 lines
6.0 KiB
CSS
|
|
/*
|
|
========================================================================
|
|
Description : CSS stylesheet
|
|
Author : echolib & neox
|
|
Website : https://a-lec.org
|
|
License : AGPL
|
|
========================================================================
|
|
*/
|
|
|
|
/*
|
|
========================================================================
|
|
ROOT VARIABLES DOCUMENT
|
|
========================================================================
|
|
*/
|
|
:root {
|
|
--a-lec_blue: #00bdff;
|
|
--a-lec_red: #b11107;
|
|
--a-lec_yellow: #ecb41a;
|
|
--a-lec_black: #2d3842;
|
|
--a-lec_white: #fefff9;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Template website
|
|
*/
|
|
|
|
* {
|
|
text-decoration: none;
|
|
}
|
|
|
|
body {
|
|
line-height: 1.5em;
|
|
background-attachment: fixed;
|
|
background-image: url(../template/electronic.jpg);
|
|
background-position: 0 0;
|
|
}
|
|
|
|
/* Contains all website, after <body> */
|
|
div#site_container {
|
|
}
|
|
|
|
/* div contains <article> and <aside> */
|
|
main {
|
|
background-color: var(--a-lec_white);
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Article contents styles
|
|
*/
|
|
article#article {
|
|
padding: 10px 10px 10px 10px;
|
|
}
|
|
|
|
header#article_header {}
|
|
img#article_logo {}
|
|
h1#article_title {}
|
|
a#article_title_link {}
|
|
div#article_refs {}
|
|
a#post_code {}
|
|
|
|
/* ! TOC */
|
|
h2.toc_title {}
|
|
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 {}
|
|
h3.tyto {}
|
|
h4.tyto {}
|
|
h5.tyto {}
|
|
h6.tyto {}
|
|
|
|
/* Misc in <article>
|
|
* -----------------
|
|
* "tyto" is default css DOMAIN.
|
|
* Class can be set for these markers
|
|
*/
|
|
p.tyto {}
|
|
ul.tyto {}
|
|
ol.tyto {}
|
|
li.tyto {}
|
|
|
|
/*
|
|
* Words tags
|
|
*/
|
|
a.tyto {}
|
|
/* link to a file. Also a.tyto */
|
|
a.file {}
|
|
br.tyto {}
|
|
hr.tyto {}
|
|
strong.tyto {}
|
|
bold.tyto {}
|
|
q.tyto {}
|
|
cite.tyto {}
|
|
u.tyto {}
|
|
em.tyto {}
|
|
i.tyto {}
|
|
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 {
|
|
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 {}
|
|
header#header {
|
|
display: flex;
|
|
place-content: baseline center;
|
|
}
|
|
div#header_logo {
|
|
display:none;
|
|
background-image:url("logo_a-lec.svg");
|
|
}
|
|
img#header_logo_image {
|
|
align-items: start;
|
|
width: 160px;
|
|
height: 160px;
|
|
place-content: baseline center;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
font-size: 300%;
|
|
}
|
|
div#header_abouts {}
|
|
p#header_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
padding-left: 50px;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
font-size: 300%;
|
|
}
|
|
p#header_about {
|
|
font-weight: normal;
|
|
color: #FFF;
|
|
font-size: 130%;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* 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: 130%;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
margin-bottom: 10px;
|
|
margin-left: 0px;
|
|
}
|
|
div#footer_about_menu {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
border: 2px solid var(--a-lec_blue);
|
|
border-top : unset;
|
|
border-left: unset;
|
|
border-right: unset;
|
|
font-size: 90%;
|
|
padding: 15px;
|
|
}
|
|
div#footer_about {}
|
|
p#footer_about_p {}
|
|
nav#footer_menu {}
|
|
ul#footer_items {
|
|
color: var(--a-lec_yellow);
|
|
}
|
|
li.footer_item {}
|
|
a.footer_item_link {}
|
|
div#footer_credit {}
|
|
p#footer_copyright {}
|
|
p#footer_tyto {}
|
|
a.footer_cr_link {}
|