forked from rc/aircox
radiocampus: style update
This commit is contained in:
parent
a8719bbc80
commit
070af46ef1
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
--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;
|
||||
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-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 +268,9 @@ body {
|
|||
}
|
||||
|
||||
.nav.secondary .nav-item{
|
||||
color: #1d3cab !important;
|
||||
olor: #1d3cab !important;
|
||||
color: #8c827e !important;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.nav .nav-item:hover {
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user