Merge branch 'main' into feat/status

css/style.css

@@ -2,7 +2,7 @@ html {
 	font-family: 'arial', sans-serif;
 	font-weight: 400;
 	font-size: 1em;
-	color: #8a8683;
+	color: #cfcfcf;
     max-width: 100%;
     overflow-x: hidden;
     background: url("../images/world_network.muted.jpg");
@@ -30,96 +30,132 @@ a:link {
 	text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: white;
 	background-color:black;
+    text-decoration: underline;
 }
 
 a:visited {
 	color:yellow;
 }
 
+hr {
+    border: none;
+    height: 2em;
+}
+
 /* Header */
 
 #main-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
-    align-items: stretch;
+    display: grid;
+    grid-template-columns: 95px 1fr 400px;
+    grid-template-rows: min-content;
+    align-items: center;
 
     gap: 15px;
 
-    padding: 10px;
+    padding: 50px 10px 10px;
     position: relative;
     margin-bottom: 25px;
 }
 
-#main-header::before {
-    content: "";
-    z-index: -1;
-    width: 100vw;
-    background: black;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+#main-header > * {
+    grid-row: 1;
 }
 
-#main-header > nav {
-    flex: 1;
+#main-header h1 {
+    line-height: 25px;
+    font-size: 20px;
+    font-weight: normal;
+    font-family: monospace;
+    color: yellow;
 
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    align-items: center;
+    flex: 1;
+    grid-column: 2;
+}
+
+#main-header nav {
+    grid-column: 3;
 }
 
 @media screen and (max-width: 600px) {
     #main-header {
-        flex-direction: column;
-        align-items: center;
+        grid-template-columns: 1fr 1fr;
+        grid-auto-rows: min-content;
     }
 
-    #main-header > nav {
-        justify-content: center;
+    #main-header img {
+        grid-column: 1;
+        margin-left: auto;
+    }
+
+    #main-header h1 {
+        grid-column: 2;
+    }
+
+    #main-header #main-nav {
+        grid-row: 2;
+        grid-column: 1 / 3;
     }
 }
 
-/* main area */ 
+/* main area */
 
 #homepage {
     display: grid;
     grid-template-columns: 1fr 400px;
     grid-auto-rows: min-content;
-    gap: 5px;
+    row-gap: 15px;
+    column-gap: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 15vh;
 }
 
-#homepage > section {
-    padding: 0 10px;
+main #main-info {
+    grid-column: 2;
+    grid-row: 1;
 }
 
-#homepage aside {
-    padding: 10px;
+main #events {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+main #description {
+    grid-column: 1;
+    grid-row: 1 / 5;
 }
 
 #homepage .toolbar {
     grid-column: 1 / 3;
-    padding: 0 10px;
-
     text-align: right;
 }
 
 @media screen and (max-width: 889px){
     #homepage {
         grid-template-columns: 1fr;
+        row-gap: 50px;
     }
 
-    #homepage > aside {
+    main #main-info {
         grid-row: 3;
+        grid-column: 1;
     }
-
-    #homepage .toolbar {
+    
+    main #events {
+        grid-column: 1;
+        grid-row: 5;
+    }
+    
+    main #description {
+        grid-column: 1;
+        grid-row: 2;
+    }
+    
+    main .toolbar {
+        grid-column: 1;
         grid-row: 1;
     }
 }
@@ -146,13 +182,32 @@ a:visited {
 /* description */
 
 #description {
-    text-align: justify;
+    text-align: left;
+    line-height: 1.5;
+
+    grid-column: 1;
 }
 
 #description > *:first-child {
     margin-top: 0;
 }
 
+dl.definitions > * {
+    display: inline;
+    padding: 0;
+    margin: 0;
+}
+
+dl.definitions > dt:not(:first-child)::before {
+    content: "";
+    display: block;
+    margin-top: 1em;
+}
+
+dl.definitions > dt {
+    font-weight: bold;
+}
+
 .hackerspace-logo {
     float: right;
     width: 100px;
@@ -169,23 +224,23 @@ a:visited {
 
 /* side */
 
-#main-side h2 {
-    color: white;
-    font-size: 1em;
+main > aside {
+    grid-column: 2;
+    text-align: center;
 }
 
-#main-side address {
+#main-info address {
     display: inline;
 }
 
-#main-side .info > * {
+#main-info > * {
     margin: 1.33em 0;
     font-weight: bold;
     color: yellow;
 }
 
 @media screen and (max-width: 889px){
-    #main-side {
+    #main-info {
         text-align: center;
     }
 }
@@ -238,37 +293,40 @@ a:visited {
     background: linear-gradient(to top, black, rgba(0,0,0,0));
 }
 
-/* Status */
+/* nav */
 
-aside .status-container > * {
-    text-align: inherit;
+#main-nav {
+    text-align: center;
 }
 
-.status-container > * {
-	text-align: center;
+#main-nav > *:not(:last-child)::after {
+    content: " | ";
+    content: " | " / "";
+    text-decoration: none !important;
 }
 
-a.status-container > p {
-	text-align: inherit;
+/* Affiches */
+
+.affiche {
+    border: solid 1px currentColor;
+    padding: 10px;
+    background: black;
+    position: relative;
 }
 
-.status-container.opened strong {
-	color: green;
-	font-weight: bold;
+.affiche:not(:first-child){
+    margin-top: 25px;
 }
 
-.status-container.closed strong {
-	color: red;
-	font-weight: bold;
+.affiche:not(:last-child){
+    margin-bottom: 25px;
 }
 
-img.status-icon {
-	max-width: 100px;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
+.affiche .credits {
+    font-size: 0.5em;
+    text-align: right;
 }
 
-aside img.status-icon {
-	margin-left: 0;
+.affiche .credits, .affiche .credits * {
+    color: inherit;
 }