Start Guide 2024

article/models.py

@@ -732,6 +732,8 @@ def get_template(self, request):
             return "article/article_page_magazine_2024.html"
         elif self.layout == 'spoof-2024':
             return "article/article_page_spoof_2024.html"
+        elif self.layout == 'guide-2024':
+            return "article/article_page_guide_2024.html"
 
         return "article/article_page.html"
 
@@ -861,6 +863,7 @@ def get_template(self, request):
                             ('guide-2023', 'Guide (2023 style)'),
                             ('magazine-2024', 'Magazine (2024 style)'),
                             ('spoof-2024', 'Spoof (2024 style)'),
+                            ('guide-2024', 'Guide (2024 style)'),
                         ],
                     ),
                 ),

article/templates/article/article_page_guide_2024.html

@@ -0,0 +1,137 @@
+{% extends 'ubyssey/base.html' %}
+
+{% comment %} {% extends 'specialfeaturelanding/guide/base.html' %} {% endcomment %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load wagtailuserbar %}
+{% load ubyssey_ad_filters %}
+{% load ubyssey_ad_tags %}
+{% load menu_tags %}
+
+{% block stylesheet %}
+<link rel="stylesheet" href="{% static 'ubyssey/css/guide-2024.css' %}" type="text/css" />
+{% endblock %}
+
+{% block head_scripts %}
+<!-- Needed for Bootstrap-->
+<meta charset="utf-8">
+
+<!-- Bootstrap 5 for Guide stuff -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+<!-- Register ads for article page -->
+{% for orderable in settings.ads.AdTagSettings.article_head_tags.all %}
+    {% gpt_define_tag orderable.ad_slot is_mobile %}
+{% endfor %}
+{% endblock %}
+
+{% block header %}
+	{% comment %} {% flat_menu 'guide2021' template="navigation/headers/guide/2021/header.html"  show_menu_heading=False  fall_back_to_default_site_menus=True %} {% endcomment %}
+	{% if page.menu %}
+		<!-- Manually selected menu: {{ page.menu.handle }} -->
+		{% flat_menu page.menu.handle template="navigation/bootstrap/topbar_with_dropdowns.html" show_menu_heading=False fall_back_to_default_site_menus=True %}
+	{% elif create_menu_from_parent %}
+		<!-- Menu created from parent page -->	 
+		{% children_menu parent_page_for_menu_generation template="navigation/bootstrap/topbar_with_dropdowns.html" show_menu_heading=False fall_back_to_default_site_menus=True %}
+	{% endif %}
+{% endblock %}
+
+{% block pre_main_content %}
+{% endblock %}
+
+{% block content %}
+<main class="{{ self.main_class_name }} o-site-wrapper">
+
+    {% block banner_ad %}
+    <div class="guide-ads">
+    <!-- Article Page header ads go here -->
+        {% for orderable in settings.ads.AdTagSettings.article_header_placements.all %}
+            {% gpt_placement_tag orderable.ad_slot %}
+        {% endfor %}
+    </div>
+    {% endblock %}
+
+    {% with self.featured_media.first as featured_image_object %}
+        {% image featured_image_object.image original as featured_image %}
+        <div class="c-banner c-banner--welcome" 
+        style="background-image: url('{{ featured_image.url }}'); {{ featured_image.background_position_style }};" 
+        aria-label="{{featured_image_object.alt_text}}">
+            <div class="c-banner__container">
+                {% comment %} <div class="c-banner--welcome__inner">
+                    <p class="c-banner--welcome__snippet">{{ self.title }}</p>
+                </div>
+                <div class="c-banner-credits article">
+                    {% if featured_image_object.credit %}
+                        {{ featured_image_object.credit }}
+                    {% endif %}
+                </div> {% endcomment %}
+            </div>
+        </div>
+        <main class="c-article">
+
+            <h1 class="c-article__title">
+                {% if self.fw_alternate_title %}
+                    {{self.fw_alternate_title|safe}}
+                {% else %}
+                    {{ self.title|safe }}
+                {% endif %}
+            </h1>
+            {% comment %} <div class="c-banner-credits article">
+                {% if featured_image_object.credit %}
+                    {{ featured_image_object.credit }}
+                {% endif %}
+            </div> {% endcomment %}
+            <div class="c-article__content">
+                {% comment %} <div class="advertisement box sidebar">
+                    {% include 'objects/advertisement.html' with size='box' name='Box_A' id=3 article=article.id %}
+                </div> {% endcomment %}
+                {% for block in self.content %}
+                    {% include_block block with id=block.id %}
+                {% endfor %}
+            </div>
+
+            <div class="article-boxes">
+                {% image prev.featured_media.first.image original as prev_image %}
+                {% include 'article/objects/guide/article-box2023.html' with style='article' title=prev.title page=prev image=prev_image.url prevornext='prev' %}
+                {% image next.featured_media.first.image original as next_image %}
+                {% include 'article/objects/guide/article-box2023.html' with style='article' title=next.title page=next image=next_image.url prevornext='next' %}
+            </div>
+        </main>
+    {% endwith %}        
+</main>
+
+{% endblock %}
+
+{% block post_main_content %}
+{% wagtailuserbar %}
+{% endblock %}
+
+
+{% block footer %}
+<footer class="c-footer{% if subsection %} __{{ subsection }}{% else %} __home{% endif %} {{section}}">
+	<div class="o-container">
+		<div class="o-wrapper">
+			<a class='ubyssey-dingbat' href="https://www.ubyssey.ca"><img
+					src="{% static 'ubyssey/images/ubyssey-dingbat-white.png' %}" /></a>
+
+			<div class="c-footer__social">
+				<ul>
+					<li><a class="facebook-icon" href="https://www.facebook.com/ubyssey" target="_blank"><i
+								class="fa fa-facebook-square"></i></a></li>
+					<li><a class="instagram-icon" href="https://www.instagram.com/ubyssey/" target="_blank"><i
+								class="fa fa-instagram"></i></a></li>
+					<li><a class="twitter-icon" href="https://twitter.com/Ubyssey" target="_blank"><i
+								class="fa fa-twitter"></i></a></li>
+				</ul>
+			</div>
+			<div class="c-footer__copyright">© The Ubyssey</div>
+		</div>
+	</div>
+</footer>
+{% endblock %}
+
+{% block scripts %}
+<script src="{% static 'ubyssey/js/guide-2021.js' %}" type="text/javascript"></script>
+{% endblock %}

article/templates/article/objects/guide/article-box2023.html

@@ -7,7 +7,7 @@
         <p class="article-box--article_prev">{{title}}</p>
     </a>
     <a href="{% pageurl page %}">
-    <ion-icon name="arrow-back-circle-outline"></ion-icon>
+    <ion-icon class="arrow" name="arrow-back-circle-outline"></ion-icon>
     </a>
 </nav>            
 {% elif prevornext == 'next' %}
@@ -17,7 +17,7 @@
         <p class="article-box--article_next">{{title}}</p>
     </a>
     <a href="{% pageurl page %}">
-    <ion-icon name="arrow-forward-circle-outline"></ion-icon>
+    <ion-icon class="arrow" name="arrow-forward-circle-outline"></ion-icon>
     </a>
 </nav>
 {% endif %}

article/templates/article/stream_blocks/pageLink.html

@@ -5,7 +5,7 @@
           {% for item in self.list %}
                <style>
                     .pageLink{{item.id}} {
-                         background-color: #{{item.colour}};
+                         --linkColour: #{{item.colour}};
                     }
                </style>
                <li class="menu-title pageLink{{item.id}}">

ubyssey/static_src/src/styles/guide-2024.scss

@@ -0,0 +1,44 @@
+@import 'modules/reset';
+@import 'modules/_variables.scss';
+
+@import 'modules/article/embeds';
+@import 'modules/advertisements';
+
+@import 'modules/guide/2020/fonts';
+@import 'modules/guide/2020/colors';
+@import 'modules/guide/2023/fonts';
+
+@import 'modules/guide/2020/base';
+@import 'modules/guide/2020/objects';
+@import 'modules/guide/2020/banner';
+@import 'modules/guide/2020/footer';
+
+@import 'modules/guide/2020/header';
+// Pages
+@import 'modules/guide/2020/homepage';
+@import 'modules/guide/2020/article';
+@import 'modules/guide/2020/section';
+
+@import 'modules/guide/2022/objects';
+
+@import 'modules/guide/2022/banner';
+
+@import 'modules/guide/2022/footer';
+@import 'modules/guide/2023/footer';
+
+@import 'modules/guide/2022/header';
+@import 'modules/guide/2023/article-box';
+
+
+@import 'modules/guide/2022/homepage';
+@import 'modules/guide/2022/article';
+@import 'modules/guide/2023/article';
+
+@import 'modules/guide/2022/section';
+
+@import 'modules/guide/2023/nav';
+@import 'modules/guide/2023/advertisements';
+
+
+@import 'modules/article/visual_essay';
+@import 'modules/guide/2024/article';

ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss

@@ -76,10 +76,10 @@
       opacity: 0;
       transition: 0.5s;
     }
-    .fa-circle-arrow-left {
+    [name="arrow-back-circle-outline"] {
       left: -1.5em;
     }
-    .fa-circle-arrow-right {
+    [name="arrow-forward-circle-outline"] {
       right: -1.5em;
     }
 

ubyssey/static_src/src/styles/modules/guide/2024/_article.scss

@@ -0,0 +1,81 @@
+.c-article__title {
+  margin: 1em auto;
+  text-align: center;
+}
+
+.c-article__content {
+  h2 {
+    font-size: 2em;
+  }
+  .guide-section {
+    margin-bottom: 5em;
+  }
+
+  .header {
+    margin: 2em auto;
+    max-width: 400px;
+    h2 {
+      text-align: center;
+    }
+  }
+
+  .header-menu ul {
+    margin: auto auto 5em auto;
+    text-align: center;
+    padding: 0;
+
+    .menu-title a {
+      color: black;
+      line-height: 2em;
+    }
+  }
+  h2, p {
+    margin-bottom: 0;
+    margin-inline: auto;
+    text-align: center;
+  }
+  .o-visual-essay__right-div {
+    p {
+      margin: 0.5em 0;
+      text-align: left;
+    }
+    h2 {
+      text-align: left;
+    }
+    .header {
+      margin: 1em;
+    }
+  }
+}
+
+.o-visual-essay__right-container {
+  margin-top: -100px;
+}
+
+nav.navbar {
+  position: static;
+}
+
+#myBtn {
+  display: none;
+  position: fixed;
+  left: 1em;
+  bottom: 1em;
+  z-index: 10;
+}
+@media($bp-larger-than-phablet) {
+  #myBtn {
+    display: block;
+  }
+  .vs-over-image .o-visual-essay__right-div {
+    width: 50vw;
+    margin-top: 5em;
+  }
+  .vs-side-by-side .o-visual-essay__right-container {
+    max-width: 500px;
+  }
+}
+
+.o-visual-essay__right-div {
+  max-width: 600px;
+}

ubyssey/static_src/src/styles/objects/_article.scss

@@ -367,6 +367,7 @@ ul.article-list, ol.article-list {
     margin: .25rem !important;
     padding: .25rem .5rem;
     color: white;
+    background-color: var(--linkColour);
     transition: .2s;
     cursor: default;
 
@@ -381,7 +382,7 @@ ul.article-list, ol.article-list {
 .header {
   padding: 0.75rem !important;
   font-weight: 600;
-  background-color: #0071c9;
+  background-color: var(--linkColour);
 
   >h2 {
     margin: 0;