Skip to content

GitLab

Commit a78f1101 authored by Soldat's avatar Soldat 🤦🏻
Browse files

Changed site design v1

parent 3a778e21
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 61 deletions
core/static/core/style.scss
View file @ a78f1101
$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;
}
}
......
core/templates/core/base.jinja
View file @ a78f1101
......@@ -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 %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment