Femme final touches, top articles style changes, article list style c…

…hanges, slight footer colour change.
ubyssey · Nov 19, 2024 · 2f287dd · 2f287dd
1 parent 8e3b0c6
commit 2f287dd
Show file tree

Hide file tree

Showing 16 changed files with 215 additions and 133 deletions.
diff --git a/article/templates/article/objects/top_article.html b/article/templates/article/objects/top_article.html
@@ -7,12 +7,30 @@
 {% if article %}
   <article class="o-article o-article--top_article{% if padded %} o-article--padded{% endif %}">
     <div class="o-article__left">
-      <a href="{{article|get_section_link}}" class="o-article__section-tag">{{article|get_section_title}}</a>
+      <div class="o-article__above-headline">
+        <a href="{{article|get_section_link}}" class="o-article__section-tag">{{article|get_section_title}}</a>
+        {% if article.title_tag %}
+          <div class="top_article-title-tag">{{article.title_tag}}//</div>
+        {% elif article.category %}
+          <div class="top_article-title-tag">{{article.category.title}}//</div>
+        {% endif %}
+      </div>  
+      <h2 class="o-article__headline">
+        <a href="{% pageurl article %}">{{ article.title|safe }}</a>
+      </h2>
+      <div class="o-article__byline">
+        <span class="o-article__author">{{ article.get_authors_split_out_visual_bylines|safe }}</span>
+        <span> &nbsp;&nbsp; </span>
+        <span class="o-article__published">{{ article.explicit_published_at|display_pubdate }}</span>
+      </div>
+    </div>
+
+    <div class="o-article__right">
       <div class="o-article__meta__image">
         {% if article.featured_media.first %}
             <a class="o-article__image" href="{% pageurl article %}">
               {% if article.featured_media.first.image %}
-              {% image article.featured_media.first.image fill-150x150-c100 format-webp loading='lazy' alt=article.featured_media.first.alt_text %}
+              {% image article.featured_media.first.image fill-168x168-c100 format-webp loading='lazy' alt=article.featured_media.first.alt_text %}
               {% elif article.featured_media.first.video %}
               <img src='http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg' alt="{{article.featured_media.first.alt_text}}">
               {% endif %}
@@ -29,22 +47,5 @@
 
       </div>
     </div>
-    <div class="o-article__right">
-
-      {% if article.title_tag %}
-        <div class="top_article-title-tag">{{article.title_tag}}//</div>
-      {% elif article.category %}
-        <div class="top_article-title-tag">{{article.category.title}}//</div>
-      {% endif %}
-
-      <h2 class="o-article__headline">
-        <a href="{% pageurl article %}">{{ article.title|safe }}</a>
-      </h2>
-      <div class="o-article__byline">
-        <span class="o-article__author">{{ article.get_authors_split_out_visual_bylines|safe }}</span>
-        <span> &nbsp;&nbsp; </span>
-        <span class="o-article__published">{{ article.explicit_published_at|display_pubdate }}</span>
-      </div>
-    </div>
   </article>
 {% endif %}
diff --git a/article/templates/article/supplements/article_page_supplement_2024_femme.html b/article/templates/article/supplements/article_page_supplement_2024_femme.html
diff --git a/article/templatetags/articletags.py b/article/templatetags/articletags.py
@@ -42,8 +42,6 @@ def display_pubdate(value):
     pubdate = value.astimezone(timezone.get_current_timezone())
     today = timezone.now().astimezone(timezone.get_current_timezone())
     delta = today - pubdate
-    print(today.date())
-    print(pubdate.date())
 
     if delta.total_seconds() > datetime.timedelta(days=365).total_seconds():
         return pubdate.strftime("%B xx%d, %Y").replace("xx0","").replace("xx","")

diff --git a/home/templates/home/stream_blocks/section_block.html b/home/templates/home/stream_blocks/section_block.html
@@ -1,7 +1,7 @@
 {% load wagtailcore_tags %}
 
 <section class="c-homepage__section">
-    <h1 class="section" style="color: {{section.colour}}">
+    <h1 class="section">
         <a href={% pageurl section %}>{{ section|title }}</a>
     </h1>
 

diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html
@@ -1,8 +1,8 @@
 {% load articletags %}
 
-<div class="article-list blog sidebar-block">
+<div class="sidebar-block latest-list">
     {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Updated' textBold=articles.0.first_published_at|time_ago %}
-	<ul class="article-list">
+	<ul>
 		{% for article in articles %}
 		<li>
 			{% include 'article/objects/blog_column-latest.html' with sameColour=True article=article %}

diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_section_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_section_block.html
@@ -1,4 +1,6 @@
-<div class="article-list blog sidebar-block">
+{% load wagtailcore_tags %}
+
+<div class="article-list sidebar-block">
 	<h2 class="block-title" style="color: {{section.colour}}">
 		{% if link %}
 		<a href="{{link}}">{{ title }}</a>
@@ -9,7 +11,7 @@ <h2 class="block-title" style="color: {{section.colour}}">
 	<ul class="article-list">
 		{% for article in articles %}
 		<li>
-			{% include 'article/objects/blog_column.html' with article=article %}
+			<b>{{ article.published_at|date:'N j, Y' }}</b> <a href="{% pageurl article %}">{{ article.title|safe }}</a>
 		</li>
 		{% endfor %}
 	</ul>

diff --git a/navigation/templates/navigation/footer.html b/navigation/templates/navigation/footer.html
@@ -7,7 +7,7 @@
         <div class="about">
             <div class="footer-branding">
                 <img class="logo mobile" src="{% static 'ubyssey/images/ubyssey-logo-blue.svg' %}" alt="The Ubyssey"/>
-                <img class="logo desktop" src="{% static 'ubyssey/images/ubyssey_logo_dark_classic.svg' %}" alt="The Ubyssey"/>
+                <img class="logo desktop" src="{% static 'ubyssey/images/logos/ubyssey-logo-blue-dark.svg' %}" alt="The Ubyssey"/>
                 <img class="funding mobile" src="{% static 'ubyssey/images/canada-funding-dark.png' %}" loading="lazy" alt="Funded by the Government of Canada"/>
                 <p>
                     <b><i>The Ubyssey</i></b> has been the definitive source of news on campus since 1918. Published by an independent non-profit society, written and 

diff --git a/section/templates/section/objects/section_bulleted.html b/section/templates/section/objects/section_bulleted.html
@@ -7,7 +7,7 @@
 	{% endif %}
 </div>
 <div>
-	<ul class="c-homepage__section__bullets" style="color: {{section.colour}}">
+	<ul class="c-homepage__section__bullets">
 		{% for article in articles %}
 		{% if forloop.counter != 1 %}
 			<li>{% include 'article/objects/bullet.html' with article=article %}</li>

diff --git a/ubyssey/static_src/src/styles/components/_infinitefeed.scss b/ubyssey/static_src/src/styles/components/_infinitefeed.scss
@@ -153,6 +153,33 @@
     }
 }
 
+.article-list.sidebar-block {
+    background: #c3e2f0;
+    padding: 2em 1.5em;
+    border-radius: 1.5em;
+
+    ul.article-list {
+        padding-inline: 2em;
+        list-style-type: circle;
+        li {
+            padding-bottom: 0.5em;
+            border-bottom: 1px solid #00000045;
+            a {
+                display: contents;
+            }
+            b {
+                margin-right: 1em;
+            }
+        }
+    }
+}
+
+.latest-list ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
 [color-css-theme="dark"] {
 
     h2.block-title {

diff --git a/ubyssey/static_src/src/styles/components/_section-page.scss b/ubyssey/static_src/src/styles/components/_section-page.scss
@@ -229,6 +229,14 @@
           }
       }
   }
+  .sidebar-block--advertisement, .o-advertisement--ad-page-promo {
+    display: none;
+  }
+
+  .c-sidebar_container {
+    min-height: 125vh;
+    margin-bottom: 25vh;
+  }
 }
 
 .section-error {

diff --git a/ubyssey/static_src/src/styles/modules/_footer.scss b/ubyssey/static_src/src/styles/modules/_footer.scss
@@ -14,7 +14,7 @@ footer {
   right: 0;
 
   h3 {
-    color: $color-ubyssey-blue-classic;
+    color: $color-ubyssey-blue;
     text-transform: uppercase;
     font-size: 1em;
   }

diff --git a/ubyssey/static_src/src/styles/modules/_homepage.scss b/ubyssey/static_src/src/styles/modules/_homepage.scss
@@ -1,4 +1,5 @@
 @import 'fonts';
+@import 'modules/variables';
 
 img.featured {
   width: 100%;
@@ -52,11 +53,18 @@ html.hairlines {
 
 [color-css-theme="light"] {
 
-  h1.section > a {
+  h1.section {
     color: black;
   }
 }
 
+[color-css-theme="dark"] {
+
+  h1.section {
+    color: $color-ubyssey-blue
+  }
+}
+
 .o-breaking-news,
 .o-subsection-banner {
   width: 100%;
@@ -109,11 +117,18 @@ html.hairlines {
   }
 }
 
-.home-top-article-list {
+.home-featured .home-top-article-list {
   background-color: #c3e2f0;
   height: fit-content;
   padding: 10px;
 
+  .boxLabel {
+    --boxPrimary: #{$color-ubyssey-blue-dark-3};
+    --boxSecondary: none;
+    --boxTextLeft: white;
+    --boxTextRight: #{$color-ubyssey-blue-dark};
+  }
+
   @media only screen and (min-width: 900px) {
     margin-top: -30px;
     filter: drop-shadow(-7px 10px 4px #0416201c);
@@ -123,6 +138,12 @@ html.hairlines {
   }
 }
 
+[color-css-theme="dark"] { 
+  .home-featured .home-top-article-list .boxLabel {
+    --boxPrimary: #{$color-ubyssey-blue-dark};
+  }
+}
+
 .linkTitle {
   font-size: 1.2rem;
   font-weight: 600;
@@ -186,6 +207,10 @@ html.hairlines {
   }
 }
 
+.c-homepage__section__bullets {
+  color: $color-ubyssey-blue;
+}
+
 .c-homepage__sections {
   width: 100%;
   padding-bottom: 3em;

diff --git a/ubyssey/static_src/src/styles/modules/_variables.scss b/ubyssey/static_src/src/styles/modules/_variables.scss
@@ -29,6 +29,7 @@ $color-ub-blue-light: #006DCC;
 $color-ubyssey-blue:#0071c9;
 $color-ubyssey-blue-dark:#041620;
 $color-ubyssey-blue-dark-2: #031621;
+$color-ubyssey-blue-dark-3: #01283D;
 $color-ubyssey-blue-light:#BBE3F1;
 $color-ubyssey-blue-classic: #0073A9;
 

diff --git a/ubyssey/static_src/src/styles/objects/_article_top.scss b/ubyssey/static_src/src/styles/objects/_article_top.scss
@@ -20,14 +20,24 @@
         margin-right: 0.8em;
     }
 
+    .o-article__right {
+        margin-left: auto;
+    }
+
+    .o-article__above-headline {
+        display: flex;
+        flex-direction: row;
+    }
+
     .o-article__section-tag {
         display: block;
         width: fit-content;
+        margin-right: 1em;
         padding-inline: 0.5em 0.8em;
         padding-top: 0.2em;
         border-radius: 0 0.8em 0 0;
 
-        background-color: #041620;
+        background-color: $color-ubyssey-blue-dark-3;
 
         text-transform: uppercase;
         color: white;
@@ -50,6 +60,9 @@
             bottom: 0px;
             height: 100%;
             width: auto;
+
+            border-radius: 0.5em;
+            border: 2px solid $color-ubyssey-blue-dark;
         }
     }
 
@@ -82,12 +95,10 @@
 
     .o-article__meta__image {
         // Structure
-        width: 4.5em;
+        width: 5em;
         aspect-ratio: 1;
-        margin-bottom: 0.65rem;
+        margin-block: 0.5em 0.2em;
         position: relative;
-        clip-path: inset(0 0 0 0);
-        border: 2px solid $color-ubyssey-blue-dark;
     }
 
     .o-article__meta__image .o-article__headline {
@@ -139,4 +150,7 @@
     .o-article--top_article {
         border-color: white;
     }
+    .o-article__section-tag {
+        background-color: $color-ubyssey-blue-dark;
+    }
 }