diff --git a/styles.css b/styles.css index 76400f7..0950ea4 100644 --- a/styles.css +++ b/styles.css @@ -3,7 +3,7 @@ ======================================================================== Description : CSS stylesheet Author : echolib & neox - Website : https://a-lec.org + Website : https://chalec.org License : AGPL ======================================================================== */ @@ -14,11 +14,11 @@ ======================================================================== */ :root { - --a-lec_blue: #00bdff; - --a-lec_red: #b11107; - --a-lec_yellow: #ecb41a; - --a-lec_black: #2d3842; - --a-lec_white: #fefff9; + --chalec_blue: #00bdff; + --chalec_red: #b11107; + --chalec_yellow: #ecb41a; + --chalec_black: #2d3842; + --chalec_white: #fefff9; } /* @@ -46,16 +46,16 @@ title { } body { - color: var(--a-lec_black); - background: var(--a-lec_white); + color: var(--chalec_black); + background: var(--chalec_white); font-family: sans-serif; font-size: 100%; text-align: justify; text-justify: auto; - background: var(--a-lec_white); + background: var(--chalec_white); } -section#a-lec_page-wrapper { +section#chalec_page-wrapper { display: flex; margin: 0 25px; } @@ -63,7 +63,7 @@ section#a-lec_page-wrapper { article, aside { margin: 7px; - background-color: var(--a-lec_white); + background-color: var(--chalec_white); background-repeat: repeat; padding: 10px; } @@ -94,15 +94,15 @@ header { background-size: auto, cover; } -#a-lec_banner, -#a-lec_footer { +#chalec_banner, +#chalec_footer { display: flex; height: 300px; width: 100%; padding: 20px 25px; } -#a-lec_site-logo img { +#chalec_site-logo img { display: flex; flex-direction: column; align-items: start; @@ -111,11 +111,11 @@ header { place-content: baseline center; } -#a-lec_site-logo a { +#chalec_site-logo a { background-color: unset; } -#a-lec_site-titles { +#chalec_site-titles { display: flex; flex-direction: column; align-items: start; @@ -123,20 +123,20 @@ header { padding: 20px } -#a-lec_site-titles h2 { +#chalec_site-titles h2 { font-weight: normal; color: #FFF; font-size: 130%; } -#a-lec_site-name a { +#chalec_site-name a { color: #FFF; font-weight: bold; font-size: 240%; vertical-align: middle; } -#a-lec_site-name a:hover { +#chalec_site-name a:hover { font-size: 280%; background-color: unset; } @@ -157,39 +157,39 @@ footer { background-size: auto, cover; } -#a-lec_footer h1 { +#chalec_footer h1 { font-size: 130%; color: #FFF; font-weight: bold; } -#a-lec_footer { +#chalec_footer { color: #FFF; height: 100%; } -#a-lec_footer a { - color: var(--a-lec_yellow); +#chalec_footer a { + color: var(--chalec_yellow); } -#a-lec_footer a:hover { +#chalec_footer a:hover { color: #000; } -#a-lec_footer b { - color: var(--a-lec_blue); +#chalec_footer b { + color: var(--chalec_blue); } -div#a-lec_copyright { +div#chalec_copyright { font-size: 90%; flex-basis: 25%; } -div#a-lec_infos { +div#chalec_infos { flex-basis: 75%; font-size: 105%; } -.a-lec_list-cr { +.chalec_list-cr { display: block; margin: 0 0 5px 25px; } @@ -200,34 +200,34 @@ div#a-lec_infos { ======================================================================== */ -.a-lec_latest-posts { - color: var(--a-lec_yellow); +.chalec_latest-posts { + color: var(--chalec_yellow); font-style: italic; } -.a-lec_list-post-title { +.chalec_list-post-title { display: block; padding: 15px; - background-color: var(--a-lec_yellow); - color: var(--a-lec_white); + background-color: var(--chalec_yellow); + color: var(--chalec_white); font-weight: bold; padding: 10px; margin: 10px 0px 0px 0px; } -.a-lec_list-post-metas { +.chalec_list-post-metas { display: block; padding: 15px; background-color: #FDF1B8; - color: var(--a-lec_red);; + color: var(--chalec_red);; font-size: 80%; padding: 10px; font-weight: bold; } -.a-lec_list-post-info { +.chalec_list-post-info { display: block; - color: var(--a-lec_black); + color: var(--chalec_black); font-weight: normal; } @@ -240,9 +240,9 @@ div#a-lec_infos { /* * Sticky Author Date */ -#a-lec_metas { +#chalec_metas { display: block; - background-color: var(--a-lec_yellow); + background-color: var(--chalec_yellow); position: relative; text-align: left; float: right; @@ -277,27 +277,27 @@ abbr { /* * Lists */ -.a-lec_post-content li { +.chalec_post-content li { padding: 3px 0; } -.a-lec_list-1 { +.chalec_list-1 { display: block; } -.a-lec_list-2 { +.chalec_list-2 { display: block; margin-left: 20px; } -.a-lec_list-3 { +.chalec_list-3 { display: block; margin-left: 40px; } -.a-lec_list-1::before, -.a-lec_list-2::before, -.a-lec_list-3::before { +.chalec_list-1::before, +.chalec_list-2::before, +.chalec_list-3::before { display: inline-block; content: "\2022"; width: 10px; @@ -306,43 +306,43 @@ abbr { font-weight: bold; } -.a-lec_list-1::before { - color: var(--a-lec_red); +.chalec_list-1::before { + color: var(--chalec_red); } -.a-lec_list-2::before { - color: var(--a-lec_blue); +.chalec_list-2::before { + color: var(--chalec_blue); } -.a-lec_list-3::before { - color: var(--a-lec_yellow); +.chalec_list-3::before { + color: var(--chalec_yellow); } /* * Blockquotes */ -.a-lec_fgc-quote, -.a-lec_quote, -.a-lec_simple-quote { +.chalec_fgc-quote, +.chalec_quote, +.chalec_simple-quote { } -.a-lec_quote, -.a-lec_simple-quote { +.chalec_quote, +.chalec_simple-quote { display: block; font-style: italic; margin: 25px 0px 0px 0px; - color: var(--a-lec_black); + color: var(--chalec_black); } -.a-lec_paragraph-2 { +.chalec_paragraph-2 { display: block; margin: 30px; } -.a-lec_quote p::before, -.a-lec_simple-quote p::before { - color: var(--a-lec_blue); +.chalec_quote p::before, +.chalec_simple-quote p::before { + color: var(--chalec_blue); content: "“"; font-size: 3rem; margin-left: -30px; @@ -350,9 +350,9 @@ abbr { display: block; } -.a-lec_quote p::after, -.a-lec_simple-quote p::after { - color: var(--a-lec_blue); +.chalec_quote p::after, +.chalec_simple-quote p::after { + color: var(--chalec_blue); content: "„"; font-size: 3rem; margin-right: -30px; @@ -361,31 +361,31 @@ abbr { text-align: right; } -.a-lec_fgc-quote { +.chalec_fgc-quote { display: block; margin: -20px 0px 20px 0px; text-align: right; padding-bottom: 3px; } -.a-lec_simple-quote { +.chalec_simple-quote { padding-bottom: 3px; } -.a-lec_fgc-quote a { - background-color: var(--a-lec_yellow); +.chalec_fgc-quote a { + background-color: var(--chalec_yellow); padding: 4px; - color: var(--a-lec_black); + color: var(--chalec_black); } -.a-lec_fgc-quote a:hover { +.chalec_fgc-quote a:hover { padding: 4px; } /* * Block-Codes */ -.a-lec_block-code { +.chalec_block-code { display: block; padding: 15px; margin: 10px 30px 15px 10px; @@ -394,14 +394,14 @@ abbr { font-size: 88%; padding: 10px; margin: 30px 30px 30px 10px; - border: 3px solid var(--a-lec_blue); + border: 3px solid var(--chalec_blue); border-radius: 10px; } /* * Inline-Codes */ -.a-lec_inline-code { +.chalec_inline-code { display: inline-block; background-color: #000; padding: 0 5px; @@ -414,7 +414,7 @@ abbr { * Links */ a { - color: var(--a-lec_red); + color: var(--chalec_red); padding: 0 2px; font-weight: bold; -webkit-transition: all 0.25s ease-out; @@ -424,7 +424,7 @@ a { a:hover { padding: 0 2px; - background-color: var(--a-lec_blue); + background-color: var(--chalec_blue); color: #000; cursor: pointer; } @@ -434,12 +434,12 @@ a:active { cursor: progress; } -a.a-lec_file-link { +a.chalec_file-link { background-color: #FFF; } -a.a-lec_file-link:hover { - background-color: var(--a-lec_yellow); +a.chalec_file-link:hover { + background-color: var(--chalec_yellow); color: #000; cursor: pointer; } @@ -447,37 +447,37 @@ a.a-lec_file-link:hover { /* * Paragraphs */ -p.a-lec_paragraph { +p.chalec_paragraph { display: block; margin-top: 10px; margin-bottom: 10px; } -div.a-lec_content-p1{ +div.chalec_content-p1{ display: block; } -div.a-lec_content-p2{ +div.chalec_content-p2{ display: block; margin-left: 20px; } -div.a-lec_content-p3{ +div.chalec_content-p3{ display: block; margin-left: 35px; } -div.a-lec_content-p4{ +div.chalec_content-p4{ display: block; margin-left: 45px; } -div.a-lec_content-p5{ +div.chalec_content-p5{ display: block; margin-left: 55px; } -div.a-lec_content-p6{ +div.chalec_content-p6{ display: block; margin-left: 65px; } @@ -530,59 +530,59 @@ h1,h2,h3,h4,h5,h6 { */ @media screen and (max-width: 700px) { - section#a-lec_page-wrapper { + section#chalec_page-wrapper { display: block; margin: 0 25px; } - aside#a-lec_sidebar { + aside#chalec_sidebar { background: none; } - .a-lec_latest-posts { + .chalec_latest-posts { margin-left: -35px; } - div#a-lec_metas { + div#chalec_metas { margin: 10px -10px 0px 0px; } - article#a-lec_index { + article#chalec_index { margin-left: -10px; } - #a-lec_footer { + #chalec_footer { display: block; padding: 5px; } - #a-lec_footer .a-lec_paragraph{ + #chalec_footer .chalec_paragraph{ margin-bottom: 30px; font-size: 80%; - border: 2px solid var(--a-lec_blue); + border: 2px solid var(--chalec_blue); border-top : unset; border-left: unset; border-right: unset; padding: 15px; } - #a-lec_footer h1 { + #chalec_footer h1 { margin-top: 10px; font-size: 115%; padding: 15px; margin-bottom: -20px; } - #a-lec_footer li { + #chalec_footer li { text-align: center; } - #a-lec_banner, - #a-lec_footer { + #chalec_banner, + #chalec_footer { display: block; } - #a-lec_site-logo img { + #chalec_site-logo img { all: unset; display: inline-block; float: left; @@ -591,12 +591,12 @@ h1,h2,h3,h4,h5,h6 { height: 35%; } - #a-lec_site-titles { + #chalec_site-titles { all: unset; } - #a-lec_site-name a { + #chalec_site-name a { margin-top: -30px; margin-bottom: -20px; position: relative; @@ -605,7 +605,7 @@ h1,h2,h3,h4,h5,h6 { } - #a-lec_site-name a:hover { + #chalec_site-name a:hover { margin-top: -30px; margin-bottom: -20px; position: relative; @@ -613,7 +613,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 3rem; } - #a-lec_site-description { + #chalec_site-description { all: unset; margin-top: 15px; position: relative;