Nouvelles couleurs, Plus de templates, Calendrier (sommaire)

gestioncof/cms/static/cofcms/sass/_colors.scss

@@ -1,4 +1,6 @@
-$fond: #ff7869;
-$bandeau: #02c082;
-$aside: #ffe896;
-$titre: #e23427;
+$fond: #ffcc6f;
+$bandeau: #30355a;
+$sousbandeau: #47395e;
+$aside: #7a504c;
+$titre: #31597e;
+$lien: #f9752b;

gestioncof/cms/static/cofcms/sass/screen.scss

@@ -9,6 +9,10 @@
 
 @import "_colors";
 
+*, *:after, *:before {
+    box-sizing: content-box;
+}
+
 body {
     background: $fond;
     font: 17px "Source Sans Pro", "sans-serif";
@@ -26,18 +30,37 @@ h1 {
     font-size: 2.3em;
 }
 
+h2 {
+    font-size: 1.6em;
+}
+
 a {
-    color: #fff;
+    color: $lien;
     text-decoration: none;
 }
 
 header {
+    section {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: stretch;
+
+        &.bottom-menu {
+            justify-content: space-around;
+            text-align: center;
+            background: $sousbandeau;
+        }
+    }
+    h1 {
+        padding: 0 15px;
+    }
     nav {
         ul {
             display: flex;
             li {
                 display: inline-block;
-                > * {
+                & > * {
                     display: block;
                     padding: 10px 15px;
                     font-weight: bold;
@@ -49,10 +72,76 @@ header {
             }
         }
     }
-    section {
-        display: flex;
-        width: 100%;
-        justify-content: space-between;
-        align-items: stretch;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    position: relative;
+    
+    .aside-wrap {
+        position: absolute;
+        top: 30px;
+        height: 100%;
+        width: 250px;
+        
+        .aside {
+            position: fixed;
+            position: sticky;
+            top: 5px;
+            width: 100%;
+            background: $aside;
+            padding: 15px;
+            box-shadow: -4px 4px 1px rgba(#000, 0.3);
+
+            .calendar {
+                margin: 0 auto;
+                display: block;
+            }
+        }
+    }
+    
+    .content {
+        max-width: 700px;
+        margin-left: auto;
+        margin-right: 0;
+        
+        
+        section {
+            article {
+                background: #fff;
+                padding: 30px;
+                box-shadow: -4px 4px 1px rgba(#000, 0.3);
+                a {
+                    color: $bandeau;
+                }
+            }
+
+            article + h2 {
+                margin-top: 15px;
+            }
+        }
+    }
+}
+
+.calendar {
+    td, th {
+        text-align: center;
+        vertical-align: center;
+        border: 2px solid transparent;
+        padding: 1px;
+    }
+
+    th {
+        font-weight: bold;
+    }
+
+    td {
+        &.out {
+            opacity: 0.3;
+        }
+        &.today {
+            border-bottom-color: #000;
+        }
     }
 }