www2/template/styles.css

493 lines
11 KiB
CSS
Raw Normal View History

2024-02-28 18:23:50 +01:00
2024-02-28 12:31:36 +01:00
/*
2024-02-28 18:23:50 +01:00
========================================================================
Description : CSS stylesheet
Author : echolib & neox
Website : https://a-lec.org
License : AGPL
========================================================================
2024-02-28 12:31:36 +01:00
*/
2024-02-28 18:23:50 +01:00
/*
========================================================================
ROOT VARIABLES DOCUMENT
========================================================================
*/
:root {
--a-lec_blue: #00bdff;
--a-lec_blue_darker: #00adef;
2024-02-28 18:23:50 +01:00
--a-lec_red: #b11107;
--a-lec_yellow: #ecb41a;
--a-lec_black: #2d3842;
--a-lec_white: #fefff9;
}
2024-02-28 12:31:36 +01:00
/* ----------------------------------------------------------------------------
* Template website
2024-02-28 18:23:50 +01:00
*/
* {
text-decoration: none;
}
body {
2024-02-29 09:48:22 +01:00
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);
2024-02-28 18:23:50 +01:00
}
2024-02-28 12:31:36 +01:00
/* Contains all website, after <body> */
2024-02-29 09:48:22 +01:00
div#site_container {}
2024-02-28 12:31:36 +01:00
/* div contains <article> and <aside> */
2024-02-28 18:23:50 +01:00
main {
background-color: var(--a-lec_white);
}
2024-02-28 12:31:36 +01:00
/* ----------------------------------------------------------------------------
* Article contents styles
*/
2024-02-28 18:23:50 +01:00
article#article {
2024-02-29 09:48:22 +01:00
display: flex;
margin: 0 25px;
2024-02-28 18:23:50 +01:00
}
2024-02-28 12:31:36 +01:00
header#article_header {}
2024-02-29 09:48:22 +01:00
img#article_logo {
display: inline;
vertical-align: middle;
max-width: 100%;
height: auto;
float: left;
margin-right: 1rem;
2024-02-29 09:48:22 +01:00
}
h1#article_title {
font-size: 150%;
margin-top: 30px;
margin-bottom: 40px;
2024-02-29 09:48:22 +01:00
}
a#article_title_link {
color: var(--a-lec_blue_darker);
}
2024-02-29 09:48:22 +01:00
div#article_refs {
background-color: var(--a-lec_yellow);
float: right;
padding: 5px;
font-size: 82%;
margin-bottom: 10px;
margin-top: -3em;
2024-02-29 09:48:22 +01:00
}
2024-02-29 10:20:23 +01:00
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;
}
2024-02-28 12:31:36 +01:00
/* ! TOC */
2024-02-29 09:48:22 +01:00
h2.toc_title {
font-size: 100%;
color: #808080;
2024-02-29 09:48:22 +01:00
}
2024-02-28 12:31:36 +01:00
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")
*/
2024-02-29 09:48:22 +01:00
h2.tyto {
font-size: 130%;
margin-top: 30px;
margin-bottom: 15px;
color: #454545;
}
h3.tyto {
font-size: 110%;
margin-top: 20px;
margin-bottom: 10px;
2024-02-29 09:48:22 +01:00
color: #505050;
}
h4.tyto {
font-size: 100%;
color: #606060;
}
h5.tyto {
font-size: 100%;
color: #707070;
}
h6.tyto {
font-size: 100%;
color: #808080;
}
2024-02-28 12:31:36 +01:00
/* Misc in <article>
* -----------------
* "tyto" is default css DOMAIN.
* Class can be set for these markers
*/
2024-02-29 09:48:22 +01:00
p.tyto {
display: block;
margin-top: 20px;
text-align: justify;
2024-02-29 09:48:22 +01:00
}
ul.tyto {
line-height: 24px;
2024-02-29 09:48:22 +01:00
}
ol.tyto {
line-height: 24px;
2024-02-29 09:48:22 +01:00
}
li.tyto {
padding: 3px 0;
2024-02-29 09:48:22 +01:00
}
2024-02-28 12:31:36 +01:00
/*
* 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;
}
2024-02-28 12:31:36 +01:00
/* 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;
}
2024-02-28 12:31:36 +01:00
br.tyto {}
hr.tyto {}
strong.tyto {
color: #454545;
font-weight: bold;
}
bold.tyto {
color: #676767;
font-weight: bold;
}
2024-02-28 12:31:36 +01:00
q.tyto {}
cite.tyto {}
u.tyto {}
em.tyto {}
i.tyto {
font-style: italic;
}
2024-02-28 12:31:36 +01:00
del.tyto {}
span.tyto {}
/* inline code*/
code.tyto {}
/*
* Blockquotes
*/
2024-02-28 18:23:50 +01:00
blockquote.tyto {
display: block;
margin: 20px 20px 20px 20px;
color: var(--a-lec_black);
padding-bottom: 5px;
2024-02-28 18:23:50 +01:00
}
blockquote.tyto p {
font-style: italic;
2024-02-28 18:23:50 +01:00
}
blockquote.tyto p::before {
color: var(--a-lec_blue);
content: "“";
font-size: 2rem;
margin-left: -20px;
margin-bottom: -25px;
display: block;
2024-02-28 18:23:50 +01:00
}
blockquote.tyto p::after {
color: var(--a-lec_blue);
content: "„";
font-size: 2rem;
margin-right: -15px;
margin-top: -25px;
text-align: right;
display: block;
2024-02-28 18:23:50 +01:00
}
2024-02-29 11:23:48 +01:00
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;
2024-02-28 18:23:50 +01:00
}
2024-02-28 12:31:36 +01:00
/* 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)
*/
2024-02-28 18:23:50 +01:00
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;
2024-02-28 18:23:50 +01:00
}
img#header_logo_image {
align-items: start;
width: 160px;
height: 160px;
color: #FFF;
font-weight: bold;
font-size: 300%;
margin: 20px;
2024-02-28 18:23:50 +01:00
}
div#header_abouts {
2024-02-28 18:23:50 +01:00
display: flex;
flex-direction: column;
}
p#header_title {
2024-02-28 18:23:50 +01:00
padding-left: 50px;
margin-top: 70px;
2024-02-28 18:23:50 +01:00
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;
2024-02-28 18:23:50 +01:00
}
2024-02-28 12:31:36 +01:00
/* ----------------------------------------------------------------------------
* 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 {}
/* ----------------------------------------------------------------------------
2024-02-28 12:31:36 +01:00
* Footer (Website)
*/
2024-02-28 18:23:50 +01:00
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%;
2024-02-28 18:23:50 +01:00
}
2024-02-28 18:23:50 +01:00
div#footer_title {
display: block;
font-size: 150%;
color: #FFF;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
2024-02-28 18:23:50 +01:00
}
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;
}
2024-02-29 12:53:24 +01:00
div#footer_custom_about {
flex-basis: 70%;
}
div#footer_custom_nav {
display: flex;
flex-direction: column;
2024-02-29 12:53:24 +01:00
flex-basis: 30%;
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%;
}
2024-02-28 18:23:50 +01:00
ul#footer_items {
color: var(--a-lec_yellow);
2024-02-28 18:23:50 +01:00
}
li.footer_item {
display: inline;
2024-02-29 12:53:24 +01:00
show: grid;
list-style-type: none;
2024-02-29 12:53:24 +01:00
padding: 0px;
border-radius: 5px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
a.footer_item_link {
color: var(--a-lec_yellow);
font-weight: bold;
}
a.footer_item_link:hover {
color: #000;
}
2024-02-28 12:31:36 +01:00
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;
}
}