radiocampus: integrate marielle design (step 1)

This commit is contained in:
2024-08-29 11:59:49 +02:00
parent a0be3c0fda
commit b7429e11f0
7 changed files with 378 additions and 13 deletions

View File

@ -11,13 +11,14 @@
--a-sound-bg: #f6ed80;
--body-bg: unset;
--break-color: transparent;
--button-bg: #F4F88D;
--button-bg: #e9e9ed;
--button-fg: #222;
--button-hv-bg: #F4F88D;
--button-hv-fg: #1d3cab;
--button-active-fg: white;
--button-active-bg: #738ef2;
--heading-font-family: "campus_grotesk";
--header-height: 320px;
--heading-link-hv-fg: #aa217b;
--heading-hg-fg: #fff;
--link-fg: #3b47ff;
@ -29,6 +30,7 @@
--nav-hv-bg: unset;
--nav-active-bg: unset;
--nav-active-fg: white;
--preview-title-sz: 21px;
--text-color: #75124e;
--text-color-light: #bbb;
}
@ -61,6 +63,9 @@ body.home .nav.primary {
body.yellow {
background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
}
body.yellow :root {
--nav-active-fg: #f4f88d;
}
body.yellow.home {
background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
background-attachment: fixed;
@ -117,9 +122,26 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
.a-switch-nav span:hover {
color: #333;
}
a.heading.title {
color: black;
}
a.heading.title:hover {
color: var(--link-hv-fg);
}
.button, a.button, button.button {
border: 0;
}
.header-cover:not(:only-child) {
float: left;
margin: 0 1.2rem 1.2rem 0;
}
.header.has-cover {
min-height: unset;
}
.mt-3 {
margin-top: unset !important;
}
.nav.primary .nav-brand {
display: none;
}
@ -135,9 +157,18 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
}
.page section.container {
margin-top: 0;
padding-top: 0.6rem;
}
.schedule {
background-color: unset;
font-size: 0.9em;
margin: 0 0.2rem;
opacity: 0.6;
padding: 0 0.2rem 0.2rem 0.2rem;
}
.schedules {
margin-bottom: 0.4rem !important;
}
@media screen and (max-width: 400px) {
body {
@ -146,6 +177,9 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
}
@media screen and (max-width: 1024px) {
:root {
--header-height: 200px;
}
.page {
margin-top: 0;
padding-top: var(--nav-primary-height);
@ -171,18 +205,9 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
.nav .nav-item {
color: white !important;
}
body.yellow .nav .nav-item.active {
.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;
}
@ -218,6 +243,13 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
border-color: transparent !important;
}
.list-item:not(.wide) .media {
padding: 0.2rem;
}
.media-content .content p, .episode-date {
opacity: 0.7;
}
/*
.nav-urls .urls a, .nav-urls .urls span {
@ -262,7 +294,6 @@ body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
padding-left: 12px;
}
.nav.secondary {
opacity: 0.9;
}