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 32e5c79e88
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
// 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 target = document.body;
// let target = document.getElementsByClassName("page")[0];
//let target = document.getElementById("background");
target.style.background = background;
if (this.path == '/') {
target.style.backgroundSize = "cover";
let theme = this.get_theme_name();
document.body.className = theme;
const styleEl = document.createElement("style");
document.head.appendChild(styleEl);
const styleSheet = styleEl.sheet;
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);
const styleSheet = styleEl.sheet;
styleSheet.insertRule('.preview .headings a { color: #75124e; }', styleSheet.cssRules.length);
styleSheet.insertRule('.preview .headings a:hover { color: #75124e !important; }', styleSheet.cssRules.length);
// home page uses different theme
if (this.path == "/") {
document.body.classList.add('home');
}
}
get_theme_name () {
var currentTime = new Date().getHours();
if (document.body) {
if (3 <= currentTime && currentTime <15) {
return "yellow";
}
else {
return "blue";
}
}
}
}
window.onload = function() {
let backgroundLoad = new BackgroundLoad();
}

191
radiocampus/static/radiocampus/radiocampus.css
View File

@ -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,184 @@
--nav-secondary-bg: transparent;
--nav-hv-bg: unset;
--nav-active-bg: unset;
--nav-active-fg: white; /* #fdffba; */
--text-color: #75124e; /*#ed43ab;*/
--nav-active-fg: white;
--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/CampusGroteskv23-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.woff2") format("woff2"),
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff") format("woff"),
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;
}
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;
}
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-radius: 20px;
border: 0;
}
.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: 400px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 1024px) {
.nav.primary {
background-color: #738ef2;
}
.page {
margin-top: 0;
padding-top: var(--nav-primary-height);
}
.nav.primary .nav-brand {
display: inline-block;
background-color: #738ef2;
}
.dropdown-trigger .icon, .icon.bullet {
color: white;
}
.dropdown.is-right .dropdown-menu {
left: 0;
}
.page {
margin-top: 0;
padding-top: var(--nav-primary-height);
}
.nav.primary .nav-brand {
display: inline-block;
}
.nav.secondary .nav-item {
color: white !important;
}
.dropdown-trigger .icon, .icon.bullet {
color: white;
}
.dropdown.is-right .dropdown-menu {
left: 0;
}
#grandlogo {
display: none;
}
.nav .nav-menu {
background-color: #738ef2;
.navs, .nav-menu.active {
background-color: #7892f1; /*#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 +266,9 @@ body {
}
.nav.secondary .nav-item{
color: #1d3cab !important;
olor: #1d3cab !important;
color: #8c827e !important;
font-size: 1.1em;
}
.nav .nav-item:hover {

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

@ -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 }}