site-catium

git clone git://bebou.netlib.re/site-catium
Log | Files | Refs | README |

commit b440cc0a78a218507b213bfc3e66a375b2f33739
parent e990eaf2533d0c2035c00b8d92311c8fa34171f7
Auterice: timotheegoguely <timothee@goguely.com>
Date:   Thu, 17 Oct 2024 10:43:57 +0200

styles.css: améliorations et simplifications diverses

Diffstat:
M
contents/style.css
 | 
105
+++++++++++++++++++++++++++++++++----------------------------------------------

1 file changed, 44 insertions(+), 61 deletions(-)
diff --git a/contents/style.css b/contents/style.css
@@ -40,7 +40,7 @@ Puis adaptée par Guillaume Porte en 2024 pour Estrades
     --red: #cc0000;
 }
 
-html, body{
+html, body {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -50,54 +50,42 @@ html {
   -webkit-font-smoothing: antialiased; 
   --moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
-  font-size: 100%; /* 16 pixels par défaut en moyenne */
+  font-size: 100%; /* 16 pixels par défaut en moyenne */
+}
+
+:target {
+  scroll-margin-top: 83px; /* permet aux ancres de ne pas se retrouvées sous le header fixed */
 }
 
 body {
-  font-family: var(--font-system); /* Utilisation d'une font système */
+  font-family: var(--font-system); /* Utilisation d'une font système */
   font-weight: 400;
   line-height: 1.56;
   text-rendering: optimizeSpeed;
   background-color: var(--verylightgrey);
 }
 
-body > * { max-width: 800px; }
+body, .container { padding: 1rem 2rem }
 
-body, .container { padding: 1rem }
-
-#wrapper{
-    min-height:100%;
-    width:800px;
-    position:relative;
-    margin: auto;
+#wrapper {
+  min-height: 100%;
+  width: 100%;
+  max-width: 800px;
+  position: relative;
+  margin: auto;
 }
 
-#wrapper img{
-  max-width:100%;
+#wrapper img {
+  max-width: 100%;
   display: block;
   margin: auto;
   margin-bottom: 3rem;
 }
 
-
-@media screen and (max-width: 800px) {
-  body > * {
-    max-width: 940px;
-  }
- 
-  body, .container {
-    padding: 1rem var(--space-2xl);
-  }
-
-  #wrapper{
-    width:350px;
-  }
-}
-
 /*TYPO*/
 
-a { color: var(--blue); }
-a:hover { color: var(--grey); }
+a { color: var(--blue) }
+a:hover { color: var(--grey) }
 
 /*TITLES*/
 
@@ -108,7 +96,6 @@ h1, h2, h3, h4, h5 {
 
 h1, h2, h3 {
   padding: 0;
-  margin: ;
   color: var(--grey);
   max-width: max-content;
 }
@@ -150,15 +137,15 @@ tbody tr:nth-child(even), th {
 
 header { 
   position:fixed;
-  top:0;
-  left:0;
-  right:0;
-  z-index:1000;
-  height:50px;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 50px;
   padding: 1rem 0;
   width: 800px;
   margin: 0 auto;
-  border-bottom:1px solid var(--lightgrey);
+  border-bottom: 1px solid var(--lightgrey);
   background-color: var(--verylightgrey);
 }
 
@@ -169,8 +156,8 @@ header {
   display: inline-block;
 }
 
-#logo img{
-  width:var(--space-2xl)
+#logo img {
+  width: var(--space-2xl)
 }
 
 #nom {
@@ -179,11 +166,11 @@ header {
 	padding-right: 1em;
 }
 
-nav#menu{
+nav#menu {
   display: inline-block;
   position: fixed;
   top: 28px;
-  margin-left:var(--space-lg)
+  margin-left: var(--space-lg)
 }
 
 nav#menu ul { 
@@ -201,14 +188,14 @@ nav#menu ul li a {
   font-size: var(--space-base);
   color: var(--grey);
   font-weight: bold;
-  text-decoration:none;
+  text-decoration: none;
 }
 
 nav#menu ul li a:hover { 
   font-size: var(--space-base);
   color: var(--lightgrey);
   font-weight: bold;
-  text-decoration:none;
+  text-decoration: none;
 }
 
 
@@ -236,22 +223,18 @@ nav#menu ul li a:hover {
 
 /* MAIN */
 main{
-  padding-top: 100px;
-  padding-bottom: 300px;
+  padding: 100px 0;
 }
 
 
 /* FOOTER */
 
 
-footer{
-   border-top:1px solid var(--lightgrey);
-   position:absolute;
-   bottom:0;
-   padding: var(--space-lg);
-   text-align: center;
-   width:100%;
-   font-size: 90%;
+footer {
+  border-top: 1px solid var(--lightgrey);
+  padding: var(--space-lg);
+  text-align: center;
+  font-size: 90%;
 }
 
 /*@TODO un pattern + interaction design -> univers Katzele*/
@@ -284,18 +267,18 @@ pre {
 
 /* Blog */
 
-#pageBlog > ul > li{
+#pageBlog > ul > li {
   border-bottom : 1px dotted var(--lightgrey);
   margin-bottom: 0;
   list-style: none;
   padding: var(--space-lg);
 }
 
-#pageBlog > ul > li > a{
+#pageBlog > ul > li > a {
   font-weight: bold;
 }
 
-#pageBlog > ul > li > p{
+#pageBlog > ul > li > p {
   margin-top: 0;
   margin-bottom: var(--space-xs);
 }
@@ -303,14 +286,14 @@ pre {
 /* Mentions légales */
 
 
-#mentions-legales img{
+#mentions-legales img {
   height: var(--space-2xl);
-  margin-left:0;
-  margin-right:0;
+  margin-left: 0;
+  margin-right: 0;
   display: inline-block;
   text-align: center;
 }
 
-#mentions-legales img:not(:last-child){
-  margin-right:var(--space-2xl);
+#mentions-legales img:not(:last-child) {
+  margin-right: var(--space-2xl);
 }