update to 2022 design/colours

[panikweb-esperanzah.git] / panikweb_esperanzah / static / css / _specifics.scss

diff --git a/panikweb_esperanzah/static/css/_specifics.scss b/panikweb_esperanzah/static/css/_specifics.scss
index e8d8bd086b8da0b7b255860233e1afa4d2c1d2d4..93cd944302311f6a17efed12c87ddc4a34ed0b53 100644 (file)
--- a/panikweb_esperanzah/static/css/_specifics.scss
+++ b/panikweb_esperanzah/static/css/_specifics.scss
@@ -2,19 +2,17 @@
 
 $black: #000000;
 $white: #FFFFFF;
-$blue: #36a9e1;
-$red: #ff0d45;
+$darkmauve: #231644;
+$blue: #9499FF;
+$red: #f64600;
 $primary: $blue;
 $secondary: $red;
-$yellow: #ffce44;
-$orange: #ff8b57;
-$pink: #f9025a;
 
 
 %text {
-       font-family: Roboto, sans-serif;
-       font-size: 16px;
-       color: #5d5d5d;
+       font-family: Cervo, sans-serif;
+       font-size: 18px;
+       color: $blue;
        text-align: justify;
        line-height: 1.4;
 }
@@ -22,18 +20,13 @@ $pink: #f9025a;
 %image-bordure {
        position: relative;
        padding-bottom: 0;
-       background: url(../img/border1.jpeg) fixed repeat;
+       background: $red;
        .img {
                display: inline-block;
                height: 100%;
                width: 100%;
                transition: transform ease 0.2s;
        }
-       &:hover {
-               .img {
-                       transform: scale(0.9);
-               }
-       }
 }
 
 button {
@@ -216,8 +209,8 @@ button.check:before, a.check:before {
 /**** BODY ****/
 /****************************************************/
 body{
-       background: white;
-       color: $primary;
+       background: $darkmauve;
+       color: $white;
 }
 /****************************************************/
 /**** metaNAV ****/
@@ -323,7 +316,7 @@ body{
 .audio button, .audio a {color:$primary;}
 
 .audio button {
-       background: white;
+       background: transparent;
        border: none;
 }
 
@@ -335,7 +328,7 @@ body{
 #Commons{
        position: relative;
        z-index: 5;
-       height: 330px;
+       height: 230px;
        @media screen and (max-width: $size_m) {
                height: 200px;
        }
@@ -344,8 +337,9 @@ body{
 }
 #mainHeader {
        display: inline-block;
-       background: url(../img/top-flowers.png) bottom left no-repeat;
-       height: 287px;
+       background: url(../img/logo-esperanzah-sun-2022-home-desktop.png) bottom center no-repeat;
+       background-size: contain;
+       height: 252px;
        width: 643px;
        @media screen and (max-width: $size_m) {
                max-width: 90%;
@@ -355,7 +349,7 @@ body{
        }
        position: relative;
        &::before {
-               content: "";
+               content: none;
                background: url(../img/petite.png) no-repeat;
                width: 155px;
                height: 80px;
@@ -390,12 +384,6 @@ body{
        opacity: 1.0;
 }
 
-#Changing {
-       background: white no-repeat;
-       background-image: url(../img/back1.png), url(../img/back2.png), url(../img/back3.png);
-       background-position: top 0 left -30px, top 300px right -30px, top 700px left -50px;
-}
-
 @media screen and (min-width: $size_m) {
        #Commons {
                box-sizing: border-box;
@@ -506,7 +494,7 @@ body{
 
 #All h1.top#radiopanik {
        padding-top: 36px;
-       background: pink;
+       background: $red;
 }
 
 #All #backgroundBox h1 {
@@ -629,10 +617,13 @@ h1.top#frequence {
 
 #Player {
        position: absolute;
-       top: 150px;
-       left: calc(50% - 220px);
+       top: 180px;
+       left: calc(50% - 25px);
        width: 50px;
        text-align: left;
+       @media screen and (max-width: $size_m) {
+               top: 130px;
+       }
 }
 
 #Player.withPlaylist {
@@ -718,37 +709,6 @@ h1.top#frequence {
        overflow: hidden;
 }
 
-@media screen and (max-width: $size_m) {
-        #backgroundBox {
-                background-position: center 30px;
-        }
-        #All h1.top#radiopanik {
-        }
-       #Player{
-        margin-top:1em;
-    }
-       #Player.withPlaylist #player-container #audioPlayer,
-         #Player.withPlaylist #player-container #audioPlayer,
-          #Player.withPlaylist #player-container #Playlist{
-               float:none !important;
-               width:auto !important;
-        border-right:none !important;
-               max-width:auto !important;
-       }
-
-       #player.on-chat-page {
-               display: none;
-       }
-
-       div.chat-page .rightPart {
-               font-size: 95%;
-               margin-top: 4em;
-               padding-top: 1em;
-               border-top: 1px solid #777;
-       }
-
-}
-
 /****************************************************/
 /**** #Changing #Footer ... ****/
 /****************************************************/
@@ -822,16 +782,14 @@ h1.top#frequence {
 }
 
 #Footer {
-       background: url(../img/footer-provisoire-min.jpeg) bottom center no-repeat;
        padding-top: 120px;
-       padding-bottom: 80px;
        font-weight: bold;
        position: relative;
        z-index: 3;
        font-size: 16px;
 
        a {
-               color: $pink;
+               color: $red;
                text-decoration: none;
        }
 
@@ -1403,39 +1361,6 @@ div.userContent a { text-decoration: underline; }
 
 div.userContent a.tag { text-decoration: none; }
 
-@media screen and (max-width: $size_m) {
-       #streamSymbol{
-               top: 0;
-       }
-       #MainHeader {
-               margin: 0 auto;
-       }
-       #All #backgroundBox h1.top {
-               width: 94%;
-       }
-
-       #Player.withoutPlaylist #player-container #audioPlayer{
-           margin:auto;
-           width:100%;
-       }
-       #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
-       #player-container{
-               background: $red;
-       }
-        #player-container * {color: white !important; }
-       #player-container{
-               display: none;
-               z-index:500;
-               position:fixed;
-               width:100% !important;
-               /*top:2em;*/
-               border-top: 2px solid red;
-               bottom:0em;
-               border-bottom:none;
-               height: 50px;
-       }
-}
-
 div.emission-logo {
        margin-left: 1em;
 }
@@ -1456,8 +1381,8 @@ h3.episode-subtitle {
 }
 
 .waveform span {
-       background: $orange;
-       background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
+       background: $red;
+       background: linear-gradient(to top, darken($red, 20%) 0%, $red 40%);
        display: inline-block;
        width: 0.50%;
        cursor: pointer;
@@ -1475,7 +1400,7 @@ h3.episode-subtitle {
        position: absolute;
        right: 4px;
        bottom: 4px;
-       color: black;
+       color: white;
        opacity: 0.5;
        font-style: normal;
        font-weight: bold;
@@ -1612,7 +1537,7 @@ div.gallery > div {
                        background: $secondary;
                        color: white;
                        padding: 0.5ex 1ex;
-                       border-bottom: 3px solid $yellow;
+                       border-bottom: 3px solid $red;
                }
        }
 }
@@ -2013,7 +1938,6 @@ img {
 }
 
 div.emission-tile {
-       background: white;
        position: relative;
        box-sizing: border-box;
        width: 25%;
@@ -2021,10 +1945,7 @@ div.emission-tile {
        float: left;
        height: 310px;
        @media screen and (max-width: $size_s) {
-               width: calc(50% - 1rem);
-               &:nth-child(2n+1) {
-                       margin-right: 1rem;
-               }
+               width: 100%;
                height: 325px;
        }
        overflow: hidden;
@@ -2032,6 +1953,7 @@ div.emission-tile {
                border: none;
                height: 230px;
                width: 230px;
+               text-align: center;
                @extend %image-bordure;
                @media screen and (max-width: $size_s) {
                        height: 260px;
@@ -2041,7 +1963,7 @@ div.emission-tile {
                margin-top: 10px;
                text-transform: uppercase;
                text-align: left;
-               color: $blue;
+               color: $white;
                font-weight: bold;
                span {
                        transition: all ease 0.5s;
@@ -2069,14 +1991,14 @@ div.emission-detail {
        position: absolute;
        top: 58px;
        left: 20px;
-       color: $blue;
+       color: $red;
        border-radius: 3px;
        width: 40px;
        text-align: center;
        padding: 2px 10px;
        transition: all .2s;
        &:hover {
-               background-color: $blue;
+               background-color: $red;
                color: white;
        }
        @media screen and (max-width: $size_s) {
@@ -2098,24 +2020,21 @@ div.emission-detail {
        top: 5px;
        height: 35px;
        width: 35px;
-       background: $yellow url($data_uri_facebook) center center no-repeat;
+       background: $red url($data_uri_facebook) center center no-repeat;
        z-index: 100;
        &:hover {
                background-color: $red;
        }
-       @media screen and (max-width:$size_m) {
-               display: none;
-       }
 }
 
 #twitter {
        top: 45px;
-       background: $yellow url($data_uri_twitter) center center no-repeat;
+       background: $red url($data_uri_twitter) center center no-repeat;
 }
 
 #instagram {
        top: 85px;
-       background: $yellow url($data_uri_instagram) center center no-repeat;
+       background: $red url($data_uri_instagram) center center no-repeat;
 }
 
 #streamSymbol {
@@ -2160,20 +2079,6 @@ div.playListControls {
        }
 }
 
-div#specialHome {
-       background: transparent top center repeat-x;
-       padding-top: 50px;
-}
-
-div#specialHome h1.top {
-       background: transparent bottom center repeat-x;
-       padding-bottom: 62px;
-}
-
-div#specialHome,
-div#specialHome h1.top {
-}
-
 div#actu {
        padding-bottom: 14px;
        h2 {
@@ -2198,10 +2103,11 @@ div#actu {
 div.emission-detail {
        h2 {
                margin-top: 0;
+               margin-bottom: 0;
                font-weight: bold;
        }
        .schedule {
-               color: $orange;
+               color: $blue;
                text-transform: none;
        }
        div.episode-info,
@@ -2318,7 +2224,7 @@ div.emission-episodes {
                a {
                }
                a div.image {
-                       width: 200px;
+                       width: 240px;
                }
        }
 }
@@ -2365,8 +2271,7 @@ div#Playlist {
        text-transform: lowercase;
        display: block;
        text-align: left;
-       color: $pink;
-       padding-bottom: 2rem;
+       color: $red;
        font-size: 16px;
        &::before {
                content: "<";
@@ -2376,17 +2281,12 @@ div#Playlist {
        &:hover::before {
                padding-right: 4px;
        }
-       margin-top: -2em;
 }
 
 .playing button.no-icon-remove::after {
        content: "\0025fc";
 }
 
-#All {
-       background: white;
-}
-
 div#grid table {
        max-width: 1000px;
        margin: 0 auto;
@@ -2417,11 +2317,12 @@ div#loading-page {
 div#header_date {
         text-transform: uppercase;
         position: absolute;
-        text-align: left;
-        color: $red;
-       font-weight: bold;
+        text-align: right;
+        color: $white;
+       font-weight: normal;
+       font-size: 120%;
         top: 63px;
-        left: 135px;
+        right: 55px;
        @media screen and (max-width:$size_m){
                display: none;
        }
@@ -2474,11 +2375,11 @@ h2.top {
                        margin-bottom: 1em;
                        a {
                                padding: 0.3em 0.6em;
-                               background: #ff8b57;
+                               background: $red;
                                color: white;
                                border-radius: 10px;
                                &:hover {
-                                       background: darken(#ff8b57, 20%);
+                                       background: darken($red, 20%);
                                }
                        }
                }