Restyled section banner text, defined size for section banner, added …

…mobile nav background transition, use reduced image for queer substance abuse article
ubyssey · Oct 24, 2024 · 7e41f21 · 7e41f21
1 parent c19eb1d
commit 7e41f21
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/section/templates/section/section_page.html b/section/templates/section/section_page.html
@@ -34,10 +34,10 @@
     <div class="u-container u-container--mid">
 
       {% if banner %}
-        {% image banner original as banner_image %}
+        {% image banner fill-2200x734-c100 format-webp as banner_image %}
         <div class="banner" style="background-image: url('{{banner_image.full_url}}');" aria-label="{{title}} Banner" >
           <svg class="c-section__heading" viewBox="0 0 450 70">
-            <text class="c-section__heading" x="10" y="50" {% if not category %}style="stroke: {{self.colour}}"{% endif %}>{{title}}</text>
+            <text class="c-section__heading" x="10" y="50">{{title}}</text>
           </svg>
         </div>
       {%else%}

diff --git a/ubyssey/static_src/src/styles/components/_section-page.scss b/ubyssey/static_src/src/styles/components/_section-page.scss
@@ -61,15 +61,16 @@
   position:relative;
   margin-bottom:40px;
   background-size:cover;
+  background-position: center;
   svg.c-section__heading {
     position: absolute;
-    bottom: -50px;
+    bottom: -55px;
     padding-inline: 20px;
-    stroke: black;
     box-sizing: border-box;
     @media($bp-smaller-than-phablet) {
-      bottom: -20px;
+      bottom: -25px;
       padding-inline: 10px;
+      font-size: 2em;
     }
   }
 
@@ -199,15 +200,16 @@
 }
 
 .c-section__heading {
-  fill: white;
-  stroke: black;
-  stroke-width: 4px;
+  fill: var(--header_color);
+  stroke: var(--background);
+  stroke-width: 0.5em;
   stroke-linejoin: round;
   paint-order: stroke;
-  font-size: 2rem;
+  font-size: 1em;
   font-weight: bolder;
-  text-transform: uppercase;
-  font-family: $font-banner;
+
+  transition: stroke 0.5s ease, color 0.5s ease;
+  //font-family: $font-banner;
 }
 
 .section_infinitefeed {

diff --git a/ubyssey/static_src/src/styles/modules/_header.scss b/ubyssey/static_src/src/styles/modules/_header.scss
@@ -504,6 +504,8 @@ nav.mobile {
   color: $nav-span-color;
   z-index: 200;
 
+  transition: background 0.5s ease, color 0.5s ease;
+
   h2 {
     font-size: 1.5em;
     margin-top: 0;

diff --git a/ubyssey/static_src/src/styles/queer-substance-abuse.scss b/ubyssey/static_src/src/styles/queer-substance-abuse.scss
@@ -69,14 +69,14 @@ article > div > * {
         padding: 0;
         @media only screen and (max-width: 800px) {
             background-size: cover;
-            background-image: url("https://storage.googleapis.com/ubyssey/media/renditions/i_janmohamed_elena_cover.original.jpg");
+            background-image: url("https://storage.googleapis.com/ubyssey/media/renditions/i_janmohamed_elena_cover-resized.original.jpg");
             background-position: center;
             background-repeat: no-repeat;
         }
     }
     @media only screen and (min-width: 800px) {
         background-size: contain;
-        background-image: url('https://storage.googleapis.com/ubyssey/media/renditions/i_janmohamed_elena_cover.original.jpg');
+        background-image: url('https://storage.googleapis.com/ubyssey/media/renditions/i_janmohamed_elena_cover-resized.original.jpg');
         background-position: top;
         background-repeat: no-repeat;
         h1 {