Rick/web
1
0
Fork 0
Code Issues Pull requests Activity

Compare commits

...

3 commits
2afc5cd36b ... dfe6575b26

Author SHA1 Message Date
rick
dfe6575b26
add responsive 2024-10-13 18:56:08 +02:00
rick
09d1777aa7
add border for news box 2024-10-13 18:07:50 +02:00
rick
e65d24700c
rework grid to use template-area 2024-10-13 18:07:09 +02:00
5 changed files with 60 additions and 10 deletions

2
css/index.css
View file

@ -1,4 +1,6 @@
#news { #news {
overflow: auto; overflow: auto;
height: 150px; height: 150px;
border: solid black;
padding-left: 1em;
} }

59
css/style.css
View file

@ -1,11 +1,10 @@
body { body {
margin: 0; margin: 0;
/*display: flex;
flex-direction: column;*/
display: grid; display: grid;
min-height: 100vh; grid-template-areas:
/*grid-template-rows: auto 1fr auto;*/ "header header"
grid-template-columns: 0.2fr 1fr; "menu main"
"footer footer";
} }
header { header {
@ -14,7 +13,7 @@ header {
margin-top: 2em; margin-top: 2em;
margin-left: 3em; margin-left: 3em;
margin-right: 3em; margin-right: 3em;
grid-column: 1 / 3; grid-area: header;
} }
header a { header a {
@ -59,7 +58,7 @@ header h2 {
margin: 2em 0 2em 3em; margin: 2em 0 2em 3em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: 1; grid-area: menu;
} }
#header-links a { #header-links a {
@ -74,13 +73,14 @@ header h2 {
#main { #main {
margin: 2em 3em 5em 1em; margin: 2em 3em 5em 1em;
grid-area: main;
} }
footer { footer {
background-color: #304B99; background-color: #304B99;
padding: 1em; padding: 1em;
padding-bottom: 0; padding-bottom: 0;
grid-column: 1/4; grid-area: footer;
} }
#buttons { #buttons {
@ -130,3 +130,46 @@ footer {
#buttons div { #buttons div {
margin-bottom: 1em; margin-bottom: 1em;
} }
@media only screen and (max-width: 641px) {
body {
grid-template-areas:
"header header"
"main main"
"menu menu"
"footer footer";
}
#header-links {
position: sticky;
bottom: 0;
margin-left: 0;
margin-top: 0;
flex-direction: row;
background-color: white;
border-top: solid black;
flex-wrap: wrap;
}
header {
display: flex;
flex-direction: column;
}
#lang {
justify-items: center;
}
#main {
margin: 2em 1em 2em 1em;
}
#footer-main {
display: flex;
flex-direction: column;
}
.pred-buttons {
align-self: center;
}
}

1
header.html
View file

@ -2,6 +2,7 @@
<html lang="%lang%"> <html lang="%lang%">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';"> <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<link rel="icon" href="/img/favicon.gif" type="image/gif" /> <link rel="icon" href="/img/favicon.gif" type="image/gif" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />

4
lang/en/index.html
View file

@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css"
<p><code>13-04-2022:</code> add this section.</p> <p><code>13-04-2022:</code> add this section.</p>
</div> </div>
<hr /> <!--
<hr />
-->
<!-- <!--
<h3>A propos de l'annuaire</h3> <h3>A propos de l'annuaire</h3>

4
lang/fr/index.html
View file

@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css"
<p><code>13-04-2022:</code> ajout de cette section.</p> <p><code>13-04-2022:</code> ajout de cette section.</p>
</div> </div>
<hr /> <!--
<hr />
-->
<!-- <!--
<h2>L'annuaire est temporairement supprimé.</h2> <h2>L'annuaire est temporairement supprimé.</h2>