auth module (breeze) + styled components

laravel/public/style.css

@@ -1,9 +1,15 @@
-html, body {
+:root {
+    --main-color: #333534;
+    --text-color: #bfbfbf;
+}
+
+html,
+body {
     height: 100%;
 }
 
 body {
-    color: #bfbfbf;
+    color: var(--text-color);
     background: black;
     font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif;
 }
@@ -13,28 +19,31 @@ h1 {
 }
 
 .titreBillet {
-    margin-bottom : 0px;
+    margin-bottom: 0px;
 }
 
 #global {
-    min-height: 100%;  /* Voir commentaire sur html et body plus haut */
-    background: #333534;
+    min-height: 100%;
+    /* Voir commentaire sur html et body plus haut */
+    background: var(--main-color);
     width: 70%;
-    margin: auto;	/* Permet de centrer la div */
+    margin: auto;
+    /* Permet de centrer la div */
     text-align: justify;
     padding: 5px 20px;
 }
 
 #contenu {
-    margin-bottom : 30px;
+    margin-bottom: 30px;
 }
 
-#titreBlog, #piedBlog {
+#titreBlog,
+#piedBlog {
     text-align: center;
 }
 
 #titreReponses {
-    font-size : 100%;
+    font-size: 100%;
 }
 
 #txtCommentaire {
@@ -42,9 +51,30 @@ h1 {
 }
 
 #titreReponses {
-  font-size: 100%;
+    font-size: 100%;
 }
 
 #txtCommentaire {
-  width: 50%;
+    width: 50%;
+}
+
+#organizer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+a#logout-button {
+    text-decoration: none;
+    color: white;
+    background-color: var(--main-color);
+    padding: 5px 10px;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
+
+    &:hover {
+        background-color: #fff;
+        color: var(--main-color);
+    }
 }