rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

radiocampus: style update

Browse Source
This commit is contained in:
Chris Tactic
2024-07-24 10:24:23 +02:00
parent a8719bbc80
commit 861777c05c
3 changed files with 152 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
radiocampus/static/radiocampus/backgroundLoad.js
View File

@ -1,32 +1,11 @@
// Enable styling body background while using vue hotreload // Enable styling body background while using vue hotreload
// Tags with side effect (<script> and <style>) are ignored in client component templates. // 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 { class BackgroundLoad {
// change background style on load
// and also on vuejs pageLoaded event
constructor () { constructor () {
let url = new URL(document.location); let url = new URL(document.location);
this.path = url.pathname; this.path = url.pathname;
@ -40,28 +19,30 @@ class BackgroundLoad {
} }
update () { 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() { window.onload = function() {
let backgroundLoad = new BackgroundLoad(); let backgroundLoad = new BackgroundLoad();
} }

163
radiocampus/static/radiocampus/radiocampus.css
View File

@ -7,7 +7,7 @@
--a-player-panel-bg: #738ef2; --a-player-panel-bg: #738ef2;
--a-player-panel-fg: white; --a-player-panel-fg: white;
--a-sound-hv-bg: #f6ed80; --a-sound-hv-bg: #f6ed80;
--a-sound-hv-fg: #444; /*fff667;*/ --a-sound-hv-fg: #444;
--a-sound-bg: #f6ed80; --a-sound-bg: #f6ed80;
--body-bg: unset; --body-bg: unset;
--break-color: transparent; --break-color: transparent;
@ -16,10 +16,10 @@
--button-hv-bg: #F4F88D; --button-hv-bg: #F4F88D;
--button-hv-fg: #1d3cab; --button-hv-fg: #1d3cab;
--button-active-fg: white; --button-active-fg: white;
--button-active-bg: #eef289; --button-active-bg: #738ef2;
--heading-font-family: "campus_grotesk"; --heading-font-family: "campus_grotesk";
--heading-link-hv-fg: #aa217b; --heading-link-hv-fg: #aa217b;
--heading-hg-fg: #e65fb1; --heading-hg-fg: #fff;
--link-fg: #3b47ff; --link-fg: #3b47ff;
--link-hv-fg: #c40c85; --link-hv-fg: #c40c85;
--main-color-light: #F4F881; --main-color-light: #F4F881;
@ -28,121 +28,184 @@
--nav-secondary-bg: transparent; --nav-secondary-bg: transparent;
--nav-hv-bg: unset; --nav-hv-bg: unset;
--nav-active-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; --text-color-light: #bbb;
} }
@font-face {
font-family: 'campus_grotesk';
src: url("/static/radiocampus/fonts/CampusGroteskv23-Regular.otf");
}
@font-face { @font-face {
font-family: "campus_grotesk"; font-family: "campus_grotesk";
src: src:
local("campus_grotesk"), 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 { body {
color: #222; 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 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 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%; 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 { .a-player-bar {
border-top: 1px solid #555; border-top: 1px solid #555;
} }
.a-player .button, .a-player-bar-content { .a-player .button, .a-player-bar-content {
color: white; color: white;
} }
#player .a-sound-item .label { #player .a-sound-item .label {
color: white; color: white !important;
} }
.a-switch-nav span { .a-switch-nav span {
color: white; color: white;
} }
.a-switch-nav span:hover { .a-switch-nav span:hover {
color: #333; color: #333;
} }
.button, a.button, button.button { .button, a.button, button.button {
border: var(--link-fg) 1px solid; border: 0;
border-radius: 20px;
} }
.nav.primary .nav-brand { .nav.primary .nav-brand {
display: none; display: none;
} }
/*
.navs {
background-color: #738ef2;
}
*/
.nav.secondary .nav-item { .nav.secondary .nav-item {
color: #7E6B64 !important; color: #7E6B64 !important;
} }
.nav-item:hover { .nav-item:hover {
opacity: 0.8; opacity: 0.8;
} }
.nav.primary .nav-item {
font-weight: unset;
font-size: 1.4em;
}
.page section.container { .page section.container {
margin-top: 0; margin-top: 0;
padding-top: 0.6rem; 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 { .page {
margin-top: 0; margin-top: 0;
padding-top: var(--nav-primary-height); padding-top: var(--nav-primary-height);
} }
.nav.primary .nav-brand { .nav.primary .nav-brand {
display: inline-block; display: inline-block;
background-color: #738ef2;
} }
.nav.secondary .nav-item {
color: white !important;
}
.dropdown-trigger .icon, .icon.bullet { .dropdown-trigger .icon, .icon.bullet {
color: white; color: white;
} }
.dropdown.is-right .dropdown-menu { .dropdown.is-right .dropdown-menu {
left: 0; left: 0;
} }
#grandlogo { #grandlogo {
display: none; display: none;
} }
.navs, .nav-menu.active {
background-color: #7892f1; /*#738ef2;*/
.nav .nav-menu {
background-color: #738ef2;
} }
.nav .nav-item { .nav .nav-item {
color: white !important; 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 { .list-item:nth-child(3n+1):not(.wide) .media {
@ -203,7 +266,9 @@ body {
} }
.nav.secondary .nav-item{ .nav.secondary .nav-item{
color: #1d3cab !important; olor: #1d3cab !important;
color: #8c827e !important;
font-size: 1.1em;
} }
.nav .nav-item:hover { .nav .nav-item:hover {

8
radiocampus/templates/aircox/base.html
View File

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