cominfra
/
www2
8
0
Fork 0
Code Issues Pull Requests Actions Activity

template/styles.css: travail sur header

This commit is contained in:
Adrien Bourmault 2024-02-29 10:50:08 +01:00
parent d1482c9fcb
commit ded6d4c431
Signed by: neox
GPG Key ID: 2974E1D5F25DFCC8
1 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
template/styles.css
View File

@ -228,14 +228,20 @@ code.bcode_code {}
* Header (Wensite Logo, Description)
*/
a#site_link {}
a#site_link {
display: flex;
}
header#header {
background-attachment: fixed;
background-image: url(../template/electronic.jpg);
background-position: 0 0;
display: flex;
flex-direction: row;
}
div#header_logo {
display: flex;
}
div#header_logo {}
img#header_logo_image {
align-items: start;
width: 160px;
@ -245,12 +251,11 @@ img#header_logo_image {
font-size: 300%;
margin: 20px;
}
div#header_abouts {}
p#header_title {
div#header_abouts {
display: flex;
flex-direction: column;
align-items: center;
}
p#header_title {
padding-left: 50px;
color: #FFF;
font-weight: bold;
@ -260,7 +265,7 @@ p#header_about {
font-weight: normal;
color: #FFF;
font-size: 130%;
margin-top: 15px;
margin: 50px;
}
@ -288,7 +293,7 @@ div.sidebar_post_about {}
p.sidebar_post_about_p {}
/* ============================================================================
/* ----------------------------------------------------------------------------
* Footer (Website)
*/
footer#footer {
@ -332,3 +337,36 @@ 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 {
padding-left: 0px;
margin-top: 0px;
color: #FFF;
font-size: 100%;
text-align: center;
}
}