radiocampus: style update

radiocampus/static/radiocampus/backgroundLoad.js

@@ -1,32 +1,11 @@
 // Enable styling body background while using vue hotreload
 // Tags with side effect (<script> and <style>) are ignored in client component templates.
 
-const backgrounds = new Map();
-backgrounds.set('default', "url(/static/radiocampus/backgrounds/campus-degrade.png) repeat-x center top scroll");
-backgrounds.set('/', "url(/static/radiocampus/backgrounds/home.jpg) no-repeat center center fixed");
-//backgrounds.set('default', "linear-gradient(rgba(115, 142, 242, 0.9), white)");
-//backgrounds.set('default', "white");
-/*
-backgrounds.set('default', "linear-gradient(#738ef2, white)");
-backgrounds.set('/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
-backgrounds.set('/publications/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
-backgrounds.set('/pages/a-propos/', "white");
-backgrounds.set('/emissions/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/emissions/c/musicale/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/emissions/c/communautaire/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/emissions/c/magazine/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/emissions/c/creation/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/emissions/c/agenda-culturel/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
-backgrounds.set('/grille/', "url(/static/radiocampus/backgrounds/photo-04-19.jpg) no-repeat center center fixed");
-backgrounds.set('/podcasts/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-backgrounds.set('/podcasts/c/musicale/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-backgrounds.set('/podcasts/c/communautaire/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-backgrounds.set('/podcasts/c/magazine/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-backgrounds.set('/podcasts/c/creation/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-backgrounds.set('/podcasts/c/agenda-culturel/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
-*/
 
 class BackgroundLoad {
+    // change background style on load
+    // and also on vuejs pageLoaded event
+
     constructor () {
         let url = new URL(document.location);
         this.path = url.pathname;
@@ -40,28 +19,30 @@ class BackgroundLoad {
     }
 
     update () {
-        let background = backgrounds.get(this.path) || backgrounds.get("default");
+        let theme = this.get_theme_name();
-        let target = document.body;
+        document.body.className = theme;
-        // let target = document.getElementsByClassName("page")[0];
-        //let target = document.getElementById("background");
-        target.style.background = background;
-        if (this.path == '/') {
-            target.style.backgroundSize = "cover";
 
-            const styleEl = document.createElement("style");
+        // home page uses different theme
-            document.head.appendChild(styleEl);
+        if (this.path == "/") {
-            const styleSheet = styleEl.sheet;
+            document.body.classList.add('home');
-            styleSheet.insertRule('.preview .headings a { color: white; }', styleSheet.cssRules.length);
+        }
-            styleSheet.insertRule('.preview .headings a:hover { color: #ffcdee !important; }', styleSheet.cssRules.length);
+
-        } else {
+    }
-            const styleEl = document.createElement("style");
+
-            document.head.appendChild(styleEl);
+    get_theme_name () {
-            const styleSheet = styleEl.sheet;
+        var currentTime = new Date().getHours();
-            styleSheet.insertRule('.preview .headings a { color: #75124e; }', styleSheet.cssRules.length);
+        if (document.body) {
-            styleSheet.insertRule('.preview .headings a:hover { color: #75124e !important; }', styleSheet.cssRules.length);
+                if (3 <= currentTime && currentTime <15) {
+                    return "yellow";
+                }
+                else {
+                    return "blue";
+                }
         }
     }
 }
+
+
 window.onload = function() {
     let backgroundLoad = new BackgroundLoad();
 }

radiocampus/static/radiocampus/radiocampus.css

@@ -7,7 +7,7 @@
     --a-player-panel-bg: #738ef2;
     --a-player-panel-fg: white;
     --a-sound-hv-bg: #f6ed80;
-    --a-sound-hv-fg: #444; /*fff667;*/
+    --a-sound-hv-fg: #444;
     --a-sound-bg: #f6ed80;
     --body-bg: unset;
     --break-color: transparent;
@@ -16,10 +16,10 @@
     --button-hv-bg: #F4F88D;
     --button-hv-fg: #1d3cab;
     --button-active-fg: white;
-    --button-active-bg: #eef289;
+    --button-active-bg: #738ef2;
     --heading-font-family: "campus_grotesk";
     --heading-link-hv-fg: #aa217b;
-    --heading-hg-fg: #e65fb1;
+    --heading-hg-fg: #fff;
     --link-fg: #3b47ff;
     --link-hv-fg: #c40c85;
     --main-color-light: #F4F881;
@@ -28,121 +28,186 @@
     --nav-secondary-bg: transparent;
     --nav-hv-bg: unset;
     --nav-active-bg: unset;
-    --nav-active-fg: white; /* #fdffba; */
+    --nav-active-fg: white;
-    --text-color: #75124e; /*#ed43ab;*/
+    --text-color: #75124e;
     --text-color-light: #bbb;
 }
 
-@font-face {
-    font-family: 'campus_grotesk';
-    src: url("/static/radiocampus/fonts/CampusGroteskv23-Regular.otf");
-}
-
 @font-face {
   font-family: "campus_grotesk";
   src:
     local("campus_grotesk"),
-    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv23-Regular.woff2") format("woff2"),
+    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff2") format("woff2"),
-    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv23-Regular.woff") format("woff"),
+    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff") format("woff"),
-    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv23-Regular.otf") format("opentype") tech(color-COLRv1);
+    url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.otf") format("opentype") tech(color-COLRv1);
 }
 
-
 body {
     color: #222;
+    background-size: cover;
 }
 
-#grandlogo {
+
+body.home, body.home .preview .headings a, body.home .page a {
+    color: #fff;
+}
+body.home .preview .headings a:hover {
+    color: #f4f88d !important;
+}
+body.home .nav.primary {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+body.yellow {
+    background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
+}
+body.yellow.home {
+    background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
+    background-attachment: fixed;
+}
+body.blue {
+    background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top fixed;
+}
+body.blue.home {
+    background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
+    background-attachment: fixed;
+}
+body.blue #grandlogo img {
+    content: url('/static/radiocampus/logos/logo-RC-blanc1.png');
+}
+body.yellow #grandlogo img {
+    content: url('/static/radiocampus/logos/logo-RC-bleu1.png');
+}
+body.blue.home #grandlogo img {
+    content: url('/static/radiocampus/logos/logo-RC-blanc2.png');
+}
+body.yellow.home #grandlogo img {
+     content: url('/static/radiocampus/logos/logo-RC-bleu2.png');
+}
+body.yellow .nav .nav-item.active {
+    color: #7E6B64 !important;
+}
+body.blue #grandlogo img, body.yellow #grandlogo img {
+    width: 120px;
+    margin: 12px 0 0 48px;
+}
+body.blue.home #grandlogo, body.yellow.home #grandlogo {
+    text-align: center;
     width: 100%;
-    background: url('/static/radiocampus/images/grand-logo.png') no-repeat scroll top center;
-    background-size: contain;
-    height: 107px;
-
 }
+body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
+    margin: 12px auto 0 auto;
+    width: 960px;
+    opacity: 0.8;
+}
+
 
 .a-player-bar {
     border-top: 1px solid #555;
 }
-
 .a-player .button, .a-player-bar-content {
     color: white;
 }
-
 #player .a-sound-item .label {
-    color: white;
+    color: white !important;
 }
-
 .a-switch-nav span {
     color: white;
 }
-
 .a-switch-nav span:hover {
     color: #333;
 }
-
 .button, a.button, button.button {
-  border: var(--link-fg) 1px solid;
+  border: 0;
-  border-radius: 20px;
 }
-
 .nav.primary .nav-brand {
     display: none;
 }
-
-/*
-.navs {
-    background-color: #738ef2;
-}
-*/
-
 .nav.secondary .nav-item {
     color: #7E6B64 !important;
 }
-
 .nav-item:hover {
     opacity: 0.8;
 }
-
+.nav.primary .nav-item {
+    font-weight: unset;
+    font-size: 1.4em;
+}
 .page section.container {
     margin-top: 0;
     padding-top: 0.6rem;
 }
 
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 400px) {
-  .nav.primary {
+    body {
-      background-color: #738ef2;
+        font-size: 16px;
     }
+}
 
+@media screen and (max-width: 1024px) {
     .page {
         margin-top: 0;
         padding-top: var(--nav-primary-height);
     }
     .nav.primary .nav-brand {
         display: inline-block;
-          background-color: #738ef2;
     }
-
+    .nav.secondary .nav-item {
+        color: white !important;
+    }
     .dropdown-trigger .icon, .icon.bullet {
         color: white;
     }
-
     .dropdown.is-right .dropdown-menu {
         left: 0;
     }
-
     #grandlogo {
         display: none;
     }
-
+    .navs, .nav-menu.active {
-
+        background-color: #7892f1; /*#738ef2;*/
-    .nav .nav-menu {
-        background-color: #738ef2;
     }
     .nav .nav-item {
         color: white !important;
     }
+    body.yellow .nav .nav-item.active {
+        color: white !important;
+    }
 
+    /* yellow theme is not implemented for small screens */
+    body.yellow {
+        background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top/auto 520px;
+    }
+    body.yellow.home {
+        background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
+    }
+
+    .navs .nav + .nav {
+        flex-grow: 1 !important;
+    }
+}
+
+@media screen and (min-width: 1408px) {
+    .container:not(.is-max-desktop):not(.is-max-widescreen) {
+        max-width: unset;
+        margin: 10px 64px;
+    }
+    body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (min-width: 1216px) {
+    .container:not(.is-max-desktop):not(.is-max-widescreen) {
+        max-width: unset;
+        margin: 10px 64px;
+    }
+    body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
+        max-width: 1152px;
+        margin: 0 auto;
+    }
 }
 
 .list-item:nth-child(3n+1):not(.wide) .media {
@@ -203,7 +268,9 @@ body {
 }
 
 .nav.secondary .nav-item{
-    color: #1d3cab !important;
+    olor: #1d3cab !important;
+    color: #8c827e !important;
+    font-size: 1.1em;
 }
 
 .nav .nav-item:hover {

radiocampus/templates/aircox/base.html

@@ -8,16 +8,10 @@
 {% endblock %}
 
 {% block nav %}
-<a href="/"><div id="grandlogo"></div></a>
+<div id="grandlogo"><a href="/"><img /></a></div>
 {{ block.super }}
 {% endblock %}
 
-{% block main-container %}
-<div id="background">
-{{ block.super }}
-</div>
-{% endblock %}
-
 {% block header-container %}
 {% if not page.attach_to %}
 {{ block.super }}