From a78f1101c3420c8054b24f0af2a716a373453dd0 Mon Sep 17 00:00:00 2001
From: Soldat <ryan-68@live.fr>
Date: Sun, 7 Oct 2018 20:38:03 +0200
Subject: [PATCH] Changed site design v1

---
 core/static/core/style.scss    | 176 ++++++++++++++++++++++-----------
 core/templates/core/base.jinja |   9 +-
 2 files changed, 124 insertions(+), 61 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index c7f4f330..cecf9547 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -1,23 +1,23 @@
 $first-color: hsl(220, 100%, 50%);
-$second-color: hsl(40, 100%, 50%);
+$second-color: #ffdd59;
 $primary-color: hsl(219.9, 53.7%, 50%);
-$secondary-color: hsl(40.1, 78.0%, 50%);
+$secondary-color: #2980b9;
 $primary-color-text: hsl(0, 0%, 100%);
 $secondary-color-text: hsla(0, 0%, 0%, 0.87);
 
 $primary-light-color: hsl(219.8, 46.4%, 64.9%);
-$primary-dark-color: hsl(219.8, 46.4%, 35.1%);
+$primary-dark-color: #2d98da;
 
 $secondary-light-color: hsl(40, 68%, 65%);
 $secondary-dark-color: hsl(40, 68%, 35%);
 
 
 $primary-neutral-color: hsl(219.6, 20.8%, 50%);
-$primary-neutral-light-color: hsl(219.6, 20.8%, 83%);
-$primary-neutral-dark-color: hsl(219.6, 20.8%, 17%);
+$primary-neutral-light-color: #efefef;
+$primary-neutral-dark-color: #34495e;
 
-$secondary-neutral-color: hsl(40, 57.6%, 50%);
-$secondary-neutral-light-color: hsl(40, 57.6%, 83%);
+$secondary-neutral-color: #2980b9;
+$secondary-neutral-light-color: #e7e7e7;
 $secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
 
 $white-color: hsl(219.6, 20.8%, 98%);
@@ -26,17 +26,71 @@ $black-color: hsl(40.0, 0%, 17%);
 $faceblue: #3B5998;
 $twitblue: #55acee;
 
+$shadow-color: rgb(223, 223, 223);
 
+$background-bouton-color: #e6e6e6;
 
 /*--------------------------------GENERAL------------------------------*/
 
 body {
-  background-color: $primary-neutral-light-color;
   position: relative;
   width: 100%;
   font-family: sans-serif;
 }
 
+input[type=button], input[type=submit], input[type=reset],input[type=file] {
+  border: none;
+  text-decoration: none;
+  background-color: $background-bouton-color;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: $shadow-color 0px 0px 1px;
+
+  &:hover {
+    background: #d3d3d3;
+  }
+}
+button{
+  border: none;
+  text-decoration: none;
+  background-color: $background-bouton-color;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 5px;
+  box-shadow: $shadow-color 0px 0px 1px;
+  cursor: pointer;
+  &:hover {
+    background: #d3d3d3;
+  }
+}
+input,textarea[type=text],[type=number]{
+  border: none;
+  text-decoration: none;
+  background-color: $background-bouton-color;
+  padding: 7px;
+  font-size: 16px;
+  border-radius: 5px;
+}
+textarea{
+  border: none;
+  text-decoration: none;
+  background-color: $background-bouton-color;
+  padding: 7px;
+  font-size: 16px;
+  border-radius: 5px;
+}
+select{
+  border: none;
+  text-decoration: none;
+  font-size: 15px;
+  background-color: $background-bouton-color;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
 a {
   text-decoration: none;
   color: $primary-dark-color;
@@ -77,7 +131,7 @@ a {
   input {
     display: block;
     width: 100%;
-    padding: 0px;
+    padding: 4px;
     margin: 0px;
   }
   form {
@@ -91,10 +145,10 @@ header {
   width: 90%;
   margin: 0px auto;
   display: flex;
-  box-shadow: grey 1px 1px 5px;
-  border: solid 1px grey;
+  box-shadow: $shadow-color 0px 0px 15px;
   border-top: none;
   background-color: $primary-neutral-dark-color;
+  border-radius: 0px 0px 10px 10px;
 
   #header_logo {
     display: inline-block;
@@ -102,6 +156,8 @@ header {
     background-size: 100% 100%;
     background-color: $white-color;
     padding: 0.2em;
+    border-radius: 0px 0px 0px 9px;
+
     a {
       display: inline-block;
       margin: 0px;
@@ -129,10 +185,11 @@ header {
     display: flex;
     flex: auto;
     width: 80%;
-
+    
     a {
       text-decoration: none;
       margin: 0em 1em;
+      font-weight: bold;
       color: $white-color;
       &:hover {
         color: $secondary-color;
@@ -228,10 +285,10 @@ header {
   margin: 1em auto;
   p {
     margin: 0px;
-    padding: 0px;
+    padding: 7px;
   }
   #alert_box, #info_box {
-    font-size: smaller;
+    font-size: 14px;
     display: inline-block;
     flex: auto;
     padding: 2px;
@@ -239,28 +296,23 @@ header {
     min-width: 10%;
     max-width: 46%;
     min-height: 20px;
-    box-shadow: grey 1px 1px 5px;
     &:before {
       float: left;
       margin: 0.2em;
-      margin-right: 0.5em;
-    }
-    .markdown {
-      margin-top: 0.5em;
     }
   }
   #info_box {
-    border: solid 1px grey;
-    background: $white-color;
+    border-radius: 10px;
+    background: $primary-neutral-light-color;
     &:before {
       font-family: FontAwesome;
       font-size: 4em;
       content: "\f05a";
-      color: darkblue;
+      color: #1e90ff;
     }
   }
   #alert_box {
-    border: solid 1px grey;
+    border-radius: 10px;
     background: $second-color;
     &:before {
       font-family: FontAwesome;
@@ -273,17 +325,17 @@ header {
 
 
 #page {
-  box-shadow: grey 1px 1px 5px;
   width: 90%;
   margin: 0em auto;
-  border: solid 1px grey;
-
 /*---------------------------------NAV---------------------------------*/
   nav {
     display: flex;
     flex-wrap: wrap;
     background-color: $primary-dark-color;
     color: $white-color;
+    border-radius: 10px 10px 0px 0px;
+    box-shadow: $shadow-color 0px 0px 15px;
+
     a {
       flex: auto;
       text-align: center;
@@ -313,6 +365,7 @@ header {
 
   #content {
     padding: 1em 1%;
+    box-shadow: $shadow-color 0px 0px 15px;
     background: $white-color;
     overflow: auto;
   }
@@ -324,23 +377,27 @@ header {
       display: flex;
       flex-wrap: wrap;
       float: right;
-      background: $white-color;
-      border: 1px solid $black-color;
+      background: $primary-neutral-light-color;
+      padding: 5px;
+      border-radius: 10px;
       text-align: center;
       a {
         padding: 10px;
         display: inline-block;
         color: $black-color;
+        font-weight: bold;
         flex: 1;
         flex-wrap: nowrap;
         white-space: nowrap;
         &.selected_tab {
-          background: $second-color;
-          color: $black-color;
+          background: $primary-color;
+          color: $white-color;
+          border-radius: 10px;
         }
         &:hover {
           background: $primary-color;
           color: $white-color;
+          border-radius: 10px;
         }
       }
     }
@@ -364,12 +421,11 @@ header {
       width: 79%;
       h3 {
         background: $second-color;
-        box-shadow: grey 2px 2px 2px;
+        box-shadow: $shadow-color 1px 1px 1px;
         padding: 0.4em;
         margin: 0em 0em 0.5em 0em;
         text-transform: uppercase;
         font-size: 1.1em;
-        border: solid 1px grey;
         &:not(:first-of-type) {
           margin: 2em 0em 1em 0em;
         }
@@ -381,22 +437,22 @@ header {
       display: block;
       width: 100%;
       background: white;
-      box-shadow: grey 2px 2px 2px;
       font-size: 70%;
-      border: solid 1px grey;
       margin-bottom: 1em;
       #agenda_title,#birthdays_title {
         margin: 0em;
+        border-radius: 10px 10px 0px 0px;
+        box-shadow: $shadow-color 1px 1px 1px;
         padding: 0.5em;
         font-weight: bold;
         font-size: 150%;
         text-align: center;
         text-transform: uppercase;
-        border-bottom: solid 1px grey;
         background: $second-color;
       }
       #agenda_content {
         overflow: auto;
+        box-shadow: $shadow-color 1px 1px 1px;
         height: 20em;
       }
       #agenda_content,#birthdays_content {
@@ -440,21 +496,22 @@ header {
 
 /* EVENTS TODAY AND NEXT FEW DAYS */
     .news_events_group {
-      border: solid 1px grey;
-      box-shadow: grey 2px 2px 2px;
+      box-shadow: $shadow-color 1px 1px 1px;
       margin-left: 1em;
       margin-bottom: 0.5em;
       .news_events_group_date {
         display: table-cell;
         padding: 0.6em;
         vertical-align: middle;
-        background: $primary-dark-color;
+        background: $primary-neutral-dark-color;
         color: $white-color;
         text-transform: uppercase;
         text-align: center;
         font-weight: bold;
         font-family: monospace;
         font-size: 1.4em;
+        border-radius: 10px 0px 0px 10px;
+
         div {
           margin: 0px auto;
           .day {
@@ -465,7 +522,6 @@ header {
       .news_events_group_items {
         display: table-cell;
         width: 100%;
-        border-left: solid 1px grey;
         .news_event:nth-of-type(odd) {
           background: white;
         }
@@ -541,9 +597,9 @@ header {
       margin: 0em 0em 1em 1em;
       padding: 0.4em;
       padding-left: 1em;
-      background: lightgrey;
-      border: 1px solid grey;
-      box-shadow: grey 2px 2px 2px;
+      background: $secondary-neutral-light-color;
+      box-shadow: $shadow-color 0px 0px 2px;
+      border-radius: 18px 5px 18px 5px;
       h4 {
         margin: 0em;
       }
@@ -560,7 +616,7 @@ header {
       padding-left: 1em;
       background: $secondary-neutral-light-color;
       border: 1px solid grey;
-      box-shadow: grey 2px 2px 2px;
+      box-shadow: $shadow-color 1px 1px 1px;
       h4 {
         margin: 0em;
       }
@@ -584,6 +640,7 @@ header {
 
 #news_details {
   display: inline-block;
+  margin-top: 20px;
   padding: 0.4em;
   width: 80%;
   background: $white-color;
@@ -603,6 +660,7 @@ header {
       max-width: 12em;
       display: block;
       margin: 0em auto;
+      margin-bottom: 10px;
     }
   }
   .share_button {
@@ -637,6 +695,7 @@ header {
 }
 
 .helptext {
+    margin-top: 10px;
     display: block;
 }
 
@@ -1004,6 +1063,7 @@ u, .underline {
   background: $primary-neutral-light-color;
   float: right;
   padding: 10px;
+  border-radius: 10px;
 }
 
 #products {
@@ -1189,7 +1249,7 @@ u, .underline {
         height: 18em;
         overflow: hidden;
         border: 1px solid black;
-        box-shadow: 2px 2px 5px grey;
+        box-shadow: $shadow-color 1px 1px 1px;
         &:hover {
             box-shadow: 1px 1px 5px $second-color;
         }
@@ -1229,11 +1289,12 @@ textarea {
 
 #forum {
   .button {
-    background-color: $primary-neutral-light-color;
-    border: outset $primary-neutral-dark-color 2px;
-    padding: 4px;
+    background-color: rgb(230, 230, 230);
+    padding: 7px;
+    font-weight: bold;
+    border-radius: 5px;
     &:hover {
-      border: inset $primary-neutral-dark-color 2px;
+      background-color: rgb(211, 211, 211);
     }
   }
   .topic {
@@ -1255,6 +1316,7 @@ textarea {
   .tools {
     font-size: x-small;
     border: none;
+    font-weight: bold;
     a {
       padding: 1px;
     }
@@ -1297,6 +1359,8 @@ textarea {
   .category {
     margin-top: 5px;
     background: $secondary-color;
+    color: #ffffff;
+    border-radius: 10px 10px 0px 0px;
     .title {
       text-transform: uppercase;
     }
@@ -1305,7 +1369,7 @@ textarea {
   .message {
     padding: 1px;
     margin: 1px;
-    background: $white-color;
+    background: #f3f3f3;
     &:nth-child(odd) {
       background: $primary-neutral-light-color;
     }
@@ -1334,7 +1398,6 @@ textarea {
     display: inline-block;
     width: 19%;
     text-align: center;
-    background: $primary-light-color;
     img {
       max-width: 70%;
       margin: 0px auto;
@@ -1415,22 +1478,23 @@ footer {
   width: 90%;
   margin: 2em auto;
 
-  font-size: 80%;
+  font-size: 90%;
   text-align: center;
   vertical-align: middle;
   div {
     margin: 0.6em 0em;
     color: $white-color;
+    border-radius: 5px;
     display: flex;
     background-color: $primary-neutral-dark-color;
-    box-shadow: grey 1px 1px 5px;
-    border: solid 1px grey;
+    box-shadow: $shadow-color 0px 0px 15px;
     a {
       padding: 0.8em;
       flex: 1;
+      font-weight: bold;
       color: $white-color;
       &:hover {
-        color: $secondary-color;
+        color: $primary-dark-color;
       }
     }
   }
@@ -1440,11 +1504,13 @@ footer {
 
 form {
   margin: 0px auto;
+  margin-bottom: 10px;
   width: 60%;
 }
 
 label {
   display: block;
+  margin-bottom: 8px;
 }
 
 .choose_file_widget {
@@ -1490,8 +1556,6 @@ label {
     font-size: 1.2em;
   }
   button {
-    width: 100%;
-    height: 100%;
     vertical-align: middle;
   }
 }
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 07dc9a63..2c7e4c78 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -53,7 +53,7 @@
             </div>
             {% else %}
             <div id="header_logo" style="background-image: url('{{
-                static('core/img/logo.png') }}'); width: 92px; height: 50px;">
+                static('core/img/logo.png') }}'); width: 92px; height: 52px;">
                 <a href="{{ url('core:index') }}"></a>
             </div>
             <div id="header_bar">
@@ -62,11 +62,11 @@
                     <li>
                     <a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
                     {% if bar.is_inactive(): %}
-                        <i class="fa fa-question" style="color: orange"></i>
+                        <i class="fa fa-question" style="color: #f39c12"></i>
                     {% elif bar.is_open(): %}
-                        <i class="fa fa-check" style="color: green"></i>
+                        <i class="fa fa-check" style="color: #2ecc71"></i>
                     {% else %}
-                        <i class="fa fa-times" style="color: red"></i>
+                        <i class="fa fa-times" style="color: #eb2f06"></i>
                     {% endif %}
                         {{ bar }}
                     </a>
@@ -181,7 +181,6 @@
                       >{{ t.name }}</a>
                       {%- endfor %}
                   </div>
-                  <hr>
               </div>
               {% endif %}