494 lines
11 KiB
CSS
494 lines
11 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_blue_darker: #00adef;
|
|
--a-lec_red: #b11107;
|
|
--a-lec_yellow: #ecb41a;
|
|
--a-lec_black: #2d3842;
|
|
--a-lec_white: #fefff9;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Template website
|
|
*/
|
|
|
|
* {
|
|
text-decoration: none;
|
|
}
|
|
|
|
body {
|
|
display: contents;
|
|
color: var(--a-lec_black);
|
|
background: var(--a-lec_white);
|
|
font-family: sans-serif;
|
|
font-size: 100%;
|
|
text-justify: auto;
|
|
background: var(--a-lec_white);
|
|
}
|
|
|
|
/* 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 {
|
|
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 <article>
|
|
* -----------------
|
|
* "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;
|
|
margin: auto;
|
|
}
|
|
div#footer_about {
|
|
display: flex;
|
|
flex-basis: 60%;
|
|
}
|
|
|
|
div#footer_custom_nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-basis: 40%;
|
|
flex-wrap: wrap;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
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;
|
|
justify-content: right;
|
|
font-size: 80%;
|
|
}
|
|
ul#footer_items {
|
|
color: var(--a-lec_yellow);
|
|
}
|
|
li.footer_item {
|
|
display: inline;
|
|
list-style-type: none;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
padding: 10px;
|
|
}
|
|
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: right;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
font-size: 80%;
|
|
}
|
|
p#footer_tyto {
|
|
text-align: right;
|
|
padding-bottom: 10px;
|
|
font-size: 80%;
|
|
}
|
|
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;
|
|
}
|
|
}
|