template/styles.css: travail sur mise en forme texte
This commit is contained in:
parent
be1d4e8d76
commit
f9afb42c1f
GPG Key ID:
2974E1D5F25DFCC8
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue