cominfra
/
www2
8
0
Fork 0
Code Issues Pull Requests Actions Activity
www2/template/styles.css

418 lines
9.3 KiB
CSS
Raw Blame History

/*
========================================================================
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 {
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: 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 {}
/* ----------------------------------------------------------------------------
* 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;
}
}
Reference in New Issue View Git Blame Copy Permalink