radiocampus: fred css reshape

radiocampus/static/radiocampus/radiocampus.css

@@ -141,19 +141,19 @@ a.heading.title:hover {
 .header.has-cover {
     min-height: unset;
 }
-.grid.listfive {
+.grid.list-emissions {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     grid-auto-flow: dense;
     gap: 0.2rem;
 }
-.grid.listfive .media-content {
+.grid.list-emissions .media-content {
     font-size: 0.84rem;
 }
 .today {
    color:  yellow;
    font-size: 1.4em !important;
 }
-.lagrille:not(.homedisplay) article {
+.list-grille article {
     border-bottom: 1px solid black;
 }
 .lagrille .category {
@@ -188,35 +188,35 @@ a.nav-item:hover {
     flex-direction: column;
 }
 
-.radiocampus-grid {
+.list-home {
     display: block;
 }
-.radiocampus-grid article div.media {
+.list-home article div.media {
     line-height: 1;
     padding: 0;
 }
-.radiocampus-grid article.active div.media div.media-content a, .radiocampus-grid article.active div.media div.media-content span {
+.list-home article.active div.media div.media-content a, .list-home article.active div.media div.media-content span {
     color: yellow;
 }
 
-.radiocampus-grid article.active div.media a:before {
+.list-home article.active div.media a:before {
     content: "\2192";
     margin-right: 6px;
 }
 
-.radiocampus-grid article div.media a.preview-cover {
+.list-home article div.media a.preview-cover {
     display: none;
 }
-.radiocampus-grid article div.media div.media-content.flex-column {
+.list-home article div.media div.media-content.flex-column {
     display: unset;
 }
-.radiocampus-grid article div.media div.media-content section.content {
+.list-home article div.media div.media-content section.content {
     display: none;
 }
-.radiocampus-grid article div.media div.media-content div.episode-date {
+.list-home article div.media div.media-content div.episode-date {
     display: none;
 }
-.radiocampus-grid article div.media div.media-content span.heading.subtitle {
+.list-home article div.media div.media-content span.heading.subtitle {
     float: right;
 }
 .schedule {
@@ -263,7 +263,7 @@ a.nav-item:hover {
     .dropdown.is-right .dropdown-menu {
         left: 0;
     }
-    .grid.listfive {
+    .grid.list-emissions {
         grid-template-columns: 1fr 1fr 1fr;
     }
     #grandlogo {
@@ -306,7 +306,7 @@ a.nav-item:hover {
 }
 
 @media screen and (max-width: 900px) {
-  .grid.listfive {
+  .grid.list-emissions {
         grid-template-columns: 1fr 1fr;
   }
 }
@@ -444,3 +444,97 @@ a.nav-item:hover {
   }
 }
 */
+
+
+
+/* fred fixes */
+.grid.list-emissions:not(.list-home) {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}
+
+.grid.list-emissions:not(.list-home) > .list-item {width: calc(25% - 2rem) !important ;}
+
+.grid.list-emissions:not(.list-home) > .list-item .preview-cover {max-width: 100% !important;
+    display: block;
+    width: 50% !important;
+    min-width: auto;
+    aspect-ratio: 1 / 1;
+    height: fit-content;
+background-size: contain;
+background-position: center;
+background-color: white;}
+
+.grid.list-emissions:not(.list-home) .media-content {margin-top: 0;}
+
+.grid.list-emissions:not(.list-home) > .list-item .media .media-content > br, .grid.listfive > .list-item .media .media-content .episode-date > br {display: none;}
+
+.grid.list-emissions:not(.list-home) .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}
+
+
+.grid.list-emissions:not(.list-home) .preview.active .heading:not(:empty) {
+    color: #738EF2 !important;
+}
+
+.grid.list-podcasts {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}
+
+.grid.list-podcasts > .list-item {width: calc(50% - 2rem) !important ;}
+
+.grid.list-podcasts > .list-item .preview-cover {max-width: 100% !important;
+    display: block;
+    width: 50% !important;
+    min-width: auto;
+    aspect-ratio: 1 / 1;
+    height: fit-content;
+background-size: contain;
+background-position: center;
+background-color: white;}
+
+.grid.list-podcasts .media-content {margin-top: 0;}
+
+.grid.list-podcasts .media .media-left {width: 25% !important;}
+.grid.list-podcasts .media .media-content {width: 75%;}
+
+.grid.list-podcasts > .list-item .media .media-content > br, .grid.list-emissions > .list-item .media .media-content .episode-date > br {display: none;}
+
+.grid.list-podcasts .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}
+
+
+.grid.list-podcasts .preview.active .heading:not(:empty) {
+    color: #738EF2 !important;
+}
+
+@media screen and (max-width: 1224px) {
+.grid.list-emissions > .list-item {width: calc(33% - 2rem) !important;;}
+}
+
+@media screen and (max-width: 924px) {
+    .grid.list-emissions > .list-item {width: calc(50% - 2rem) !important;}
+}
+
+@media screen and (max-width: 690px) {
+    .grid.list-emissions > .list-item {width: 100% !important;}
+    .program-list {flex-direction: row;}
+    .grid.list-podcasts > .list-item {width: 100% !important ;}
+}
+
+.list-item .subtitle:not(:empty) {
+     min-width: auto !important;
+}
+
+@media screen and (max-width: 924px) {
+  .a-player-bar-content {overflow: hidden;}
+  .a-player-bar-content .title {
+      display: inline-block;
+      padding-right: 2em;
+      padding-left: 100%;
+      white-space: nowrap;
+      animation: defilement-rtl 55s infinite linear;
+      overflow: visible;}
+
+  @keyframes defilement-rtl {
+          0% {
+              transform: translate3d(0,0,0);      /* position initiale à droite */
+          }
+          100% {
+              transform: translate3d(-100%,0,0);  /* position finale à gauche */
+          }
+  }
+}

radiocampus/templates/aircox/home.html

@@ -55,7 +55,7 @@ function display(id) {
 <!-- <a href="{% url "timetable-list" date=date %}">{{ date|date:"l d F Y" }}</a> -->
 <section class="clear-both list grid radiocampus-grid" role="list">
 </section>
-{% with list_class="radiocampus-grid" %}
+{% with list_class="list-home" %}
 {{ block.super }}
 {% endwith %}
 </div>

radiocampus/templates/aircox/page_list.html

@@ -65,7 +65,7 @@
 {% endblock %}
 
 {% block list-container %}
-<section class="container clear-both list grid {{ list_class|default:"" }} listfive" role="list">
+<section class="container clear-both list grid {{ list_class|default:"" }} list-emissions" role="list">
 {% block list %}
 {% with has_headline=True %}
     {% for object in object_list %}

radiocampus/templates/aircox/timetable_list.html

@@ -36,7 +36,7 @@
 
 {% block list-container %}
 {% with list_class="grid" %}
-<section class="container clear-both list grid radiocampus-grid listfive" role="list">
+<section class="container clear-both list grid list-grille list-home list-emissions" role="list">
 <section class="container" style="display:flex;justify-content:flex-end;min-height:600px">
 <div style="max-width:600px;">
 {% block list %}