From f9afb42c1fcda22f115cf0f65c840148d5ccabdd Mon Sep 17 00:00:00 2001 From: neox Date: Thu, 29 Feb 2024 11:07:01 +0100 Subject: [PATCH] template/styles.css: travail sur mise en forme texte --- template/styles.css | 197 ++++++++++++++++++++++++++------------------ 1 file changed, 115 insertions(+), 82 deletions(-) diff --git a/template/styles.css b/template/styles.css index 1c7228b..87d7220 100644 --- a/template/styles.css +++ b/template/styles.css @@ -105,8 +105,8 @@ h2.tyto { } h3.tyto { font-size: 110%; - margin-top: 30px; - margin-bottom: 15px; + margin-top: 20px; + margin-bottom: 10px; color: #505050; } h4.tyto { @@ -128,36 +128,69 @@ h6.tyto { * Class can be set for these markers */ p.tyto { - display: block; - margin-top: 20px; - margin-bottom: 10px; - text-align: justify; + display: block; + margin-top: 20px; + text-align: justify; } ul.tyto { - line-height: 24px; + line-height: 24px; } ol.tyto { - line-height: 24px; + line-height: 24px; } li.tyto { - padding: 3px 0; + padding: 3px 0; } /* * Words tags */ -a.tyto {} +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 {} +a.file { + background-color: #FFF; +} +a.tyto:hover { + background-color: var(--a-lec_yellow); + color: #000; + cursor: pointer; +} + br.tyto {} hr.tyto {} -strong.tyto {} -bold.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 {} +i.tyto { + font-style: italic; +} del.tyto {} span.tyto {} @@ -169,43 +202,43 @@ code.tyto {} * Blockquotes */ blockquote.tyto { - display: block; - margin: 20px 20px 20px 20px; - color: var(--a-lec_black); - padding-bottom: 5px; + display: block; + margin: 20px 20px 20px 20px; + color: var(--a-lec_black); + padding-bottom: 5px; } blockquote.tyto p { - font-style: italic; + font-style: italic; } blockquote.tyto p::before { - color: var(--a-lec_blue); - content: "“"; - font-size: 2rem; - margin-left: -20px; - margin-bottom: -25px; - display: block; + 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; + 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; + 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 */ @@ -230,17 +263,17 @@ code.bcode_code {} a#site_link { display: flex; - background-attachment: fixed; - background-image: url(../template/electronic.jpg); - background-position: 0 0; + background-attachment: fixed; + background-image: url(../template/electronic.jpg); + background-position: 0 0; } header#header { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } div#header_logo { - display: flex; + display: flex; } img#header_logo_image { align-items: start; @@ -301,37 +334,37 @@ p.sidebar_post_about_p {} 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%; + 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; + 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; + 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); + color: var(--a-lec_yellow); } li.footer_item {} a.footer_item_link {} @@ -345,30 +378,30 @@ a.footer_cr_link {} */ @media screen and (max-width: 700px) { header#header { - flex-direction: column; + flex-direction: column; } img#header_logo_image { - all: unset; - display: inline-block; - width: 100%; - margin-top: 20px; - height: min(20vw,20vh); + 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; + 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; + font-weight: normal; + color: #FFF; + font-size: 100%; + margin-left: 60px; + margin-top: -10px; } }