diff --git a/Dockerfile b/Dockerfile index 4858144c0..f8dcd4645 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM python:3.9-buster +FROM python:3.10-bullseye COPY . /workspaces/ubyssey.ca/ WORKDIR /workspaces/ubyssey.ca/ # Installs some basics diff --git a/article/models.py b/article/models.py index 7e9a8ff8b..ee75942bd 100644 --- a/article/models.py +++ b/article/models.py @@ -748,6 +748,8 @@ def get_template(self, request): return "article/article_page_supplement_2024_science.html" elif self.layout == 'femme-2024': return "article/supplements/article_page_supplement_2024_femme.html" + elif self.layout == 'nocturne-2024': + return "article/supplements/article_page_supplement_2024_nocturne.html" return "article/article_page.html" @@ -880,6 +882,7 @@ def get_template(self, request): ('guide-2024', 'Guide (2024 style)'), ('science-2024', 'Science Supplement (2024)'), ('femme-2024', 'Femme Culture Special Issue (2024)'), + ('nocturne-2024', 'Nocturne Features Supplement (2024)'), ], ), ), diff --git a/article/templates/article/objects/cover_story.html b/article/templates/article/objects/cover_story.html index 9b9eac3f2..f4a5e1f37 100644 --- a/article/templates/article/objects/cover_story.html +++ b/article/templates/article/objects/cover_story.html @@ -19,9 +19,11 @@ {% endif %}
- - {{ article.title|safe }} - +
+ + {{ article.title|safe }} + +

{% if article.lede %}{{article.lede|safe}}{% else %}{{article.search_description|safe}}{% endif %}

diff --git a/article/templates/article/objects/share_bar.html b/article/templates/article/objects/share_bar.html index e12ae05ce..554c8914d 100644 --- a/article/templates/article/objects/share_bar.html +++ b/article/templates/article/objects/share_bar.html @@ -4,6 +4,11 @@ + diff --git a/article/templates/article/objects/top_article.html b/article/templates/article/objects/top_article.html index 47c1e7156..33da8bcdc 100644 --- a/article/templates/article/objects/top_article.html +++ b/article/templates/article/objects/top_article.html @@ -7,12 +7,31 @@ {% if article %}
+
+ {{article|get_section_title}} + {% if article.title_tag %} +
{{article.title_tag}}//
+ {% elif article.category %} +
{{article.category.title}}//
+ {% endif %} +
+

+ {{ article.title|safe }} +

+
+ {{ article.get_authors_split_out_visual_bylines|safe }} +    + {{ article.explicit_published_at|display_pubdate }} +
+
+ +
{{article|get_section_title}}
{% if article.featured_media.first %} {% 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 %} {{article.featured_media.first.alt_text}} {% endif %} @@ -29,22 +48,5 @@
-
- - {% if article.title_tag %} -
{{article.title_tag}}//
- {% elif article.category %} -
{{article.category.title}}//
- {% endif %} - -

- {{ article.title|safe }} -

-
- {{ article.get_authors_split_out_visual_bylines|safe }} -    - {{ article.explicit_published_at|display_pubdate }} -
-
{% endif %} \ No newline at end of file diff --git a/article/templates/article/supplements/article_page_supplement_2024_femme.html b/article/templates/article/supplements/article_page_supplement_2024_femme.html index c46fb7bed..d1a4f12a4 100644 --- a/article/templates/article/supplements/article_page_supplement_2024_femme.html +++ b/article/templates/article/supplements/article_page_supplement_2024_femme.html @@ -27,13 +27,25 @@ {% endblock %} @@ -139,6 +151,19 @@

+
+ + + + + + + + + + + +
    {% for article in self.get_category_articles %} {% if article.featured_media.first.image %} diff --git a/article/templates/article/supplements/article_page_supplement_2024_nocturne.html b/article/templates/article/supplements/article_page_supplement_2024_nocturne.html new file mode 100644 index 000000000..451394250 --- /dev/null +++ b/article/templates/article/supplements/article_page_supplement_2024_nocturne.html @@ -0,0 +1,210 @@ +{% extends 'ubyssey/base.html' %} + +{% load static %} +{% load wagtailcore_tags %} +{% load wagtailimages_tags %} +{% load wagtailuserbar %} +{% load ubyssey_ad_filters %} +{% load ubyssey_ad_tags %} +{% load menu_tags %} + +{% block root %}style="--highlightColour:{{self.colour}}"{%endblock%} +{% block darkmode %}{%endblock%} + +{% block stylesheet %} + +{% endblock %} + +{% block head_scripts %} + + +{% endblock %} + +{% block header %} + +{% endblock %} + +{% block pre_main_content %} +{% endblock %} + +{% block content %} +
    + +
    +
    + {% block banner %} +
    +
    + +
    + + {% if self.title_tag %} +

    {{self.title_tag}}//

    + {% endif %} + +
    +

    + {% if self.fw_alternate_title %} + {{self.fw_alternate_title|safe}} + {% else %} + {{ self.title|safe }} + {% endif %} +

    +
    + + {% if self.fw_above_cut_lede %} +

    {{ self.fw_above_cut_lede }}

    + {% endif %} +
    +
    + +
    +
    + + + {% if self.featured_media.first.image %} + {% with self.featured_media.first as featured_image_object %} + {% image featured_image_object.image width-2000 format-webp as featured_image %} + {{featured_image_object.alt_text}} + + {% if featured_image_object.caption or featured_image_object.credit%} + {% if featured_image_object.caption %} +

    + {{ featured_image_object.caption }} + + {% if featured_image_object.credit %} + {{ featured_image_object.credit }} + {% endif %} + +

    + {% endif %} + {% endif %} + + {% if self.subtitle %} +

    {{self.subtitle|safe}}

    + {% endif %} + +
    +

    {{self.authors_with_roles |safe }}

    +

    Published {{ self.published_at }}

    +
    + + {% endwith %} + {% endif %} + +
    +
    +
    + {% endblock %} + +
    + {% comment %} {% endcomment %} + {% for block in self.content %} + {% include_block block with id=block.id %} + {% endfor %} + +
    +
    +
    +
    +

    + +

    + +
    +
    + +{% endblock %} + +{% block post_main_content %} +{% wagtailuserbar %} +{% endblock %} + + +{% block footer %} +
    +
    + +
    + +
    +
    +

    Sections

    + {% main_menu show_multiple_levels=False apply_active_classes=False %} +
    +
    +

    Explore

    + {% flat_menu 'second_footer_menu' max_levels=1 show_menu_heading=False fall_back_to_default_site_menus=True %} +
    +
    +
    +
    +

    + The Ubyssey acknowledges we operate on the traditional, ancestral and stolen territories of the Coast Salish peoples including the xʷməθkʷəy̓əm (Musqueam), Sḵwx̱wú7mesh Úxwumixw (Squamish) and səlilwətaɬ (Tsleil-Waututh) nations. Read More. +

    +
    +
    © {% now "Y" %} The Ubyssey
    +
    +
    + +{% endblock %} \ No newline at end of file diff --git a/article/templatetags/articletags.py b/article/templatetags/articletags.py index 4fce05710..acb10b38e 100644 --- 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/authors/templates/authors/author_page.html b/authors/templates/authors/author_page.html index 7f7476f81..77c90af23 100644 --- a/authors/templates/authors/author_page.html +++ b/authors/templates/authors/author_page.html @@ -50,9 +50,9 @@

    Pinned

{% endif %} -
+
{% for type in media_types %} -

{{type.1}}

+

{{type.1}}

{% endfor %}
diff --git a/home/templates/home/stream_blocks/section_block.html b/home/templates/home/stream_blocks/section_block.html index 12e6bf587..a3ff620ea 100644 --- 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|title }}

diff --git a/infinitefeed/blocks.py b/infinitefeed/blocks.py index 8650c0cea..cb615ac1a 100644 --- a/infinitefeed/blocks.py +++ b/infinitefeed/blocks.py @@ -157,6 +157,8 @@ def get_context(self, value, parent_context=None): class SidebarImageLinkBlock(blocks.StructBlock): image = ImageChooserBlock(required=True) link = blocks.URLBlock(required=False) + alt_text = blocks.CharBlock(max_length=255, + help_text="For accessibility to screen reader users, enter a description of this image. Included any relevant text inside the image.") class Meta: template = "infinitefeed/sidebar/sidebar_image_link_block.html" verbose_name = "Sidebar Image with Optional Link" diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_flex_stream_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_flex_stream_block.html index 87eb2ecd6..df084e30c 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_flex_stream_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_flex_stream_block.html @@ -1,6 +1,6 @@ {% load wagtailcore_tags %} -
+

{{ self.title }}

{% for block in self.stream %} diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_image_link_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_image_link_block.html index 6540399a9..009d4fb03 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_image_link_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_image_link_block.html @@ -2,7 +2,7 @@ {% if self.link %} {% endif %} -{% image self.image width-320 format-webp %} +{% image self.image width-700 format-webp loading='lazy' alt=self.alt_text title=self.alt_text %} {% if self.link %} {% endif %} \ No newline at end of file diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_issues_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_issues_block.html index 1733b79bd..752e17471 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_issues_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_issues_block.html @@ -1,8 +1,8 @@ {% load wagtailcore_tags %} -
+

{{ self.title }}

-
    +
      {% for issue in self.issues %} {% include_block issue with iteration=forloop.counter %} {% endfor %} diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html index 4f8423e48..5e4d79be8 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html @@ -1,8 +1,8 @@ {% load articletags %} -
      +
      {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Updated' textBold=articles.0.first_published_at|time_ago %} -
        +
          {% for article in articles %}
        • {% 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 index 3c45fe629..999d8fea4 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_section_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_section_block.html @@ -1,4 +1,6 @@ -
          +{% load wagtailcore_tags %} + +

          {% if link %} {{ title }} @@ -9,7 +11,7 @@

            {% for article in articles %}
          • - {% include 'article/objects/blog_column.html' with article=article %} + {{ article.published_at|date:'N j, Y' }} {{ article.title|safe }}
            • {% endfor %}
          diff --git a/navigation/templates/navigation/footer.html b/navigation/templates/navigation/footer.html index 9c9486646..0bc53999a 100644 --- a/navigation/templates/navigation/footer.html +++ b/navigation/templates/navigation/footer.html @@ -7,7 +7,7 @@
          - + Funded by the Government of Canada

          The Ubyssey has been the definitive source of news on campus since 1918. Published by an independent non-profit society, written and @@ -35,10 +35,12 @@

          Stay in the loop

          Social media

          diff --git a/navigation/templates/navigation/headers/main.html b/navigation/templates/navigation/headers/main.html index 5f1aa488b..42073ab30 100644 --- a/navigation/templates/navigation/headers/main.html +++ b/navigation/templates/navigation/headers/main.html @@ -26,10 +26,15 @@
          - - - + + + + + + + + {% include 'article/objects/darkmode_button.html' with id="main"%}
          diff --git a/requirements-prd.txt b/requirements-prd.txt index 8f1c4b540..bd6421f42 100644 --- a/requirements-prd.txt +++ b/requirements-prd.txt @@ -1,5 +1,5 @@ Django==4.2.0 -wagtail==5.2.5 +wagtail==5.2.7 git+https://github.com/ubyssey/django-google-storage.git@v0.5.4#egg=django-google-storage-updated django-storages[google]==1.14.2 django-canonical-domain==0.3.0 diff --git a/requirements.txt b/requirements.txt index c2a4bc643..550734637 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,5 +1,5 @@ Django==4.2.0 -wagtail==5.2.5 +wagtail==5.2.7 git+https://github.com/ubyssey/django-google-storage.git@v0.5.4#egg=django-google-storage-updated django-storages[google]==1.14.2 django-canonical-domain==0.3.0 diff --git a/section/templates/section/objects/section_bulleted.html b/section/templates/section/objects/section_bulleted.html index 03ae42a8a..cd49d93a1 100644 --- a/section/templates/section/objects/section_bulleted.html +++ b/section/templates/section/objects/section_bulleted.html @@ -7,7 +7,7 @@ {% endif %}
          -
            +
              {% for article in articles %} {% if forloop.counter != 1 %}
            • {% include 'article/objects/bullet.html' with article=article %}
              • diff --git a/ubyssey/static_src/src/fonts/Montserrat-Italic-VariableFont_wght.ttf b/ubyssey/static_src/src/fonts/Montserrat-Italic-VariableFont_wght.ttf new file mode 100644 index 000000000..9f89c9de7 Binary files /dev/null and b/ubyssey/static_src/src/fonts/Montserrat-Italic-VariableFont_wght.ttf differ diff --git a/ubyssey/static_src/src/fonts/Montserrat-VariableFont_wght.ttf b/ubyssey/static_src/src/fonts/Montserrat-VariableFont_wght.ttf new file mode 100644 index 000000000..df7379cd4 Binary files /dev/null and b/ubyssey/static_src/src/fonts/Montserrat-VariableFont_wght.ttf differ diff --git a/ubyssey/static_src/src/js/main.js b/ubyssey/static_src/src/js/main.js index 75510bcd6..b56bc4e6f 100644 --- a/ubyssey/static_src/src/js/main.js +++ b/ubyssey/static_src/src/js/main.js @@ -295,21 +295,26 @@ function initializeSocialMediaActions() { // shares the page $(document).on('click', '.share-facebook', function (e) { e.preventDefault(); - window.open('http://facebook.com/sharer.php?u=' + window.location.href + '&text=' + title + '&', 'facebookwindow', + window.open('http://facebook.com/sharer.php?u=' + window.location.href + '&text=' + title + '%20via%20@ubyssey&', 'facebookwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); }); $(document).on('click', '.share-mastodon', function (e) { e.preventDefault(); - window.open('https://tootpick.org/#text=' + title + '%20' + window.location.href + ' #ubyssey', + window.open('https://tootpick.org/#text=' + title + '%20' + window.location.href + '%20#ubyssey', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); }); + $(document).on('click', '.share-bsky', function (e) { + e.preventDefault(); + window.open('https://bsky.app/intent/compose/?text=' + title + '%20%20via%20@ubyssey.ca%20' + window.location.href, + 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); + }); // on clicking on the a element w/ class=='twitter', share on twitter $(document).on('click', '.share-twitter', function (e) { e.preventDefault(); - window.open('http://twitter.com/share?url=' + window.location.href + '&text=' + title + '&', 'twitterwindow', + window.open('http://twitter.com/share?url=' + window.location.href + '&text=' + title + '%20via%20@ubyssey&', 'twitterwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); }); diff --git a/ubyssey/static_src/src/js/nocturne-window-watching.js b/ubyssey/static_src/src/js/nocturne-window-watching.js new file mode 100644 index 000000000..2cae98ba4 --- /dev/null +++ b/ubyssey/static_src/src/js/nocturne-window-watching.js @@ -0,0 +1,21 @@ +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); + +let mm = gsap.matchMedia(); +mm.add("(min-width: 1px), (min-height: 1px)", () => { + var windowTriggers = gsap.utils.toArray('.window-trigger'); + windowTriggers.forEach((wt) => { + console.log(wt); + gsap.to(wt, { + scrollTrigger: {trigger: wt, start: "start center", end: "bottom center", scrub: true, + onToggle: self => { + document.getElementById("windows").children[parseInt(self.trigger.getAttribute("window"))].classList.toggle("lighted"); + self.trigger.classList.toggle("highlight"); + }, + }, + immediateRender: false, + }); + }) +}); \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/components/_infinitefeed.scss b/ubyssey/static_src/src/styles/components/_infinitefeed.scss index 2e1ac56b0..1ded94c33 100644 --- a/ubyssey/static_src/src/styles/components/_infinitefeed.scss +++ b/ubyssey/static_src/src/styles/components/_infinitefeed.scss @@ -26,6 +26,18 @@ margin-top: 0.5em; display: flex; justify-content: center; + + * { + max-width: 100%; + } + + img { + margin: auto; + display: block; + + max-width: 100%; + height: auto; + } } .c-sidebar_container { @@ -51,22 +63,24 @@ padding: 0; } - @media ($bp-smaller-than-phablet) { + @media ($bp-smaller-than-tablet) { display:none; } } -.flex-stream { - img { - margin: auto; - display: block; - } -} - .c-section__sidebar { margin-left: 20px; width: 37%; top:100px; + + .sidebar-block--advertisement, .o-advertisement--ad-page-promo { + display: none; + } + + .c-sidebar_container { + min-height: 125vh; + margin-bottom: 25vh; + } } .c-infinitefeed__feed { @@ -94,7 +108,7 @@ width: 100%; } -.sidebar-issue{ +.sidebar-issue ul { color:white; padding:0; display: flex; @@ -153,12 +167,44 @@ } } -[color-css-theme="dark"] { +.article-list.sidebar-block { + background: #c3e2f0; + padding: 2em 1.5em; + border-radius: 1.5em; h2.block-title { + color: black; + } + + ul.article-list { + padding-inline: 2em; + list-style-type: circle; + li { + padding-bottom: 0.5em; + border-bottom: 1px solid #00000045; + color: $color-ubyssey-blue-dark; + a { + display: contents; + } + b { + margin-right: 0.5em; + } + } + } +} + +.latest-list ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +[color-css-theme="dark"] { + + .basic-sidebar h2.block-title { text-shadow: #000000 1px 1px 15px; } - div.sidebar-block { + div.basic-sidebar { h2.block-title { color: white; } diff --git a/ubyssey/static_src/src/styles/modules/_core.scss b/ubyssey/static_src/src/styles/modules/_core.scss index f085abf57..d438f9ec7 100644 --- a/ubyssey/static_src/src/styles/modules/_core.scss +++ b/ubyssey/static_src/src/styles/modules/_core.scss @@ -238,7 +238,7 @@ html[color-css-theme="light"] { --text_color: #1b1b1b; --header_color: black; --article_info: #777777; - --article_caption: #5A5A5A; + --article_caption: #{$color-ubyssey-blue-dark-3}; --authors-title-bio: #1B1B1B; --archive-text: #4e4e4e; --article-publish: #2B2B2B; @@ -322,9 +322,11 @@ div.image-inner { } span.credit { + display: inline-block; margin-left: 0.5em; font-style: italic; - color: #888; + font-size: 0.9em; + color: $color-ubyssey-blue; } img.slide-image { diff --git a/ubyssey/static_src/src/styles/modules/_footer.scss b/ubyssey/static_src/src/styles/modules/_footer.scss index 60021671f..6e6ac642e 100644 --- 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/_header.scss b/ubyssey/static_src/src/styles/modules/_header.scss index eeebe75a3..b8219d63e 100644 --- a/ubyssey/static_src/src/styles/modules/_header.scss +++ b/ubyssey/static_src/src/styles/modules/_header.scss @@ -92,6 +92,12 @@ header.main{ margin-right: 1.5em; } + .bluesky-icon svg { + height: 0.85em; + vertical-align: baseline; + fill: var(--header_color); + } + a { position: relative; margin-right: 0.75em; diff --git a/ubyssey/static_src/src/styles/modules/_homepage.scss b/ubyssey/static_src/src/styles/modules/_homepage.scss index a9a78d5ac..e59e68f19 100644 --- 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,11 +207,15 @@ html.hairlines { } } +.c-homepage__section__bullets { + color: $color-ubyssey-blue; +} + .c-homepage__sections { width: 100%; padding-bottom: 3em; - @media ($bp-larger-than-phablet) { + @media ($bp-larger-than-tablet) { margin-right: 20px; width: 50%; padding-right: 20px; diff --git a/ubyssey/static_src/src/styles/modules/_variables.scss b/ubyssey/static_src/src/styles/modules/_variables.scss index a86156010..c91759559 100644 --- 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/modules/article/_banner.scss b/ubyssey/static_src/src/styles/modules/article/_banner.scss index c5f7e740f..51af0fbcf 100644 --- a/ubyssey/static_src/src/styles/modules/article/_banner.scss +++ b/ubyssey/static_src/src/styles/modules/article/_banner.scss @@ -43,6 +43,10 @@ font-family: $font-body; } + + div.caption { + border: none; + } // article // article headers (title, byline and photo) diff --git a/ubyssey/static_src/src/styles/modules/article/_base.scss b/ubyssey/static_src/src/styles/modules/article/_base.scss index b388b9d70..92617e119 100644 --- a/ubyssey/static_src/src/styles/modules/article/_base.scss +++ b/ubyssey/static_src/src/styles/modules/article/_base.scss @@ -200,6 +200,25 @@ div.article-content { text-align: right; } + h1, h2, h3, h4 { + > a { + text-decoration: none; + background-image: linear-gradient($color-ubyssey-blue, $color-ubyssey-blue); + background-position: 0 calc(100% - 0.1em); + background-repeat: no-repeat; + background-size: 100% 0.25em; + transition: background-size 0.3s ease; + color: inherit; + position: relative; + z-index: 1; + + &:hover { + background-size: 100% 100%; + color: #fff; + } + } + } + > p, > h1, > h2 { @@ -216,12 +235,9 @@ div.article-content { div.caption { margin-bottom: 0; - padding-left: 10px; - padding-right: 10px; } > p, - div.caption, > h1, > h2, > h3, @@ -338,17 +354,17 @@ div.article-content { } div.caption { - margin-top: 6px; - font-family: $font-default; + margin-inline: 1em; + padding-block: 1em 0.5em; + padding-inline: 1em; + border-bottom: 2px solid $color-ubyssey-blue; + font-size: 15px; - color: var(--article_caption); line-height: 19px; - padding-left: 15px; - padding-right: 15px; - @media($bp-larger-than-phablet) { - padding: 0; - } + color: var(--article_caption); + font-style: italic; + font-family: $font-default; } div.article-content { @@ -437,9 +453,21 @@ p.c-article__published-at { font-family: $font-default; font-weight: 600; - span.c-share-buttons > a{ - padding: 0px 4px 10px 4px; - color: var(--text_color); - border: none; + .share-bsky svg { + vertical-align: initial; + padding-top: 0.15em; + height: 1em; + width: auto; + fill: var(--text_color); + } + + span.c-share-buttons { + display: inline-block; + + > a{ + padding: 0px 4px 10px 4px; + color: var(--text_color); + border: none; + } } } \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/modules/article/_full_width.scss b/ubyssey/static_src/src/styles/modules/article/_full_width.scss index f8d8902c9..3c64bee53 100644 --- a/ubyssey/static_src/src/styles/modules/article/_full_width.scss +++ b/ubyssey/static_src/src/styles/modules/article/_full_width.scss @@ -7,13 +7,11 @@ > p, > h1, > h2 { - padding-left: 1em; - padding-right: 1em; + padding-inline: 1em; } div.caption { - padding-left: 1em; - padding-right: 1em; + padding-inline: 1em; } } } diff --git a/ubyssey/static_src/src/styles/objects/_article_cover.scss b/ubyssey/static_src/src/styles/objects/_article_cover.scss index bd72220bd..5f433e54f 100644 --- a/ubyssey/static_src/src/styles/objects/_article_cover.scss +++ b/ubyssey/static_src/src/styles/objects/_article_cover.scss @@ -10,7 +10,8 @@ width: 400px; max-width: 685px; - .o-article__headline { + .o-article__headline mark { + margin-left: 1em; // Text font-size: 2rem; line-height: 3.2rem; @@ -28,13 +29,13 @@ width: 100%; .o-article__headline { + margin-inline: 0.5em; + } + + .o-article__headline mark { // Text font-size: 1.5rem; line-height: 2.5rem; - - @media($bp-larger-than-phablet) { - left: 20px; - } } .o-article__image { @@ -76,16 +77,21 @@ } } - .o-article__headline { + .o-article__headline mark { position: relative; - color: #ffffff; + background-color: $color-ubyssey-blue; + box-shadow: 0.4em 0 0 $color-ubyssey-blue, -0.4em 0 0 $color-ubyssey-blue; + box-decoration-break: clone; filter: drop-shadow(-5px 10px 4px #0416201c); - border-bottom: 3px $color-ubyssey-blue-light solid; + + color: #ffffff; + text-decoration: 1px underline #BBE3F1; + transition-duration: 0.1s; &:hover { - border-color: white; + text-decoration-color: white; } a { @@ -117,4 +123,4 @@ font-size: 1.2em; } } - \ No newline at end of file + diff --git a/ubyssey/static_src/src/styles/objects/_article_top.scss b/ubyssey/static_src/src/styles/objects/_article_top.scss index 8b34f7d81..cd27e283c 100644 --- 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-3; } } @@ -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 { @@ -128,6 +139,36 @@ } } +@media ($bp-smaller-than-tablet) { + .o-article--top_article { + flex-direction: row-reverse; + justify-content: left; + .o-article__left .o-article__section-tag { + display: none; + } + .o-article__meta__image { + margin-top: 0; + width: 4.5em; + border: 2px solid $color-ubyssey-blue-dark-3; + img { + border-radius: 0; + border: none; + } + } + .o-article__right { + margin-left: 0; + margin-right: 1em; + } + } +} + +@media ($bp-larger-than-tablet) { + .o-article--top_article { + .o-article__right .o-article__section-tag { + display: none; + } + } +} [color-css-theme="light"] { .o-article--top_article { @@ -138,5 +179,11 @@ [color-css-theme="dark"] { .o-article--top_article { border-color: white; + .o-article__section-tag { + background-color: $color-ubyssey-blue-dark; + } + .o-article__image, .o-article__meta__image { + border-color: $color-ubyssey-blue-dark; + } } } \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/objects/_box-label.scss b/ubyssey/static_src/src/styles/objects/_box-label.scss index d96d9d7b3..359e65688 100644 --- a/ubyssey/static_src/src/styles/objects/_box-label.scss +++ b/ubyssey/static_src/src/styles/objects/_box-label.scss @@ -1,3 +1,5 @@ +@import 'modules/variables'; + .sticky { position: sticky; top: 20px; @@ -38,32 +40,38 @@ transform: translate(0,-50%); } +.boxLabel-left { + background-color: var(--boxPrimary); + border-color: var(--boxPrimary); + .boxText-left { + color:var(--boxTextLeft); + } +} +.boxLabel-right { + background-color: var(--boxSecondary); + border-color: var(--boxPrimary); + .boxText-right { + color: var(--boxTextRight); + } +} + [color-css-theme="light"] { - - .boxLabel-left { - background-color: $color-ubyssey-blue-dark; - border-color: $color-ubyssey-blue-dark; - .boxText-left { - color:white; - } + .boxLabel { + --boxPrimary: #{$color-ubyssey-blue-dark}; + --boxSecondary: none; + --boxTextLeft: white; + --boxTextRight: #{$color-ubyssey-blue-dark}; } - .boxLabel-right { - background-color: white; - border-color: $color-ubyssey-blue-dark; - .boxText-right { - color: $color-ubyssey-blue-dark; - } - } - + + .boxLabel.boxLabel-highlight { + --boxSecondary: #{$color-ubyssey-blue-light}; + } + .boxLabel { &.sticky { filter: drop-shadow(0 5px 6px #00000040); } } - - .boxLabel-highlight .boxLabel-right { - background-color: $color-ubyssey-blue-light; - } } [color-css-theme="dark"] { @@ -74,70 +82,10 @@ } } - .boxLabel-left { - background-color: $color-ubyssey-blue-light; - border-color: $color-ubyssey-blue-light; - - .boxText-left { - color:$color-ubyssey-blue-dark-2; - } - } - .boxLabel-right { - background-color: $color-ubyssey-blue-dark; - border-color: $color-ubyssey-blue-light; - - .boxText-right { - color: $color-ubyssey-blue-light; - } - } -} - -.lightmode { - - > .boxLabel-left { - background-color: $color-ubyssey-blue-dark; - border-color: $color-ubyssey-blue-dark; - .boxText-left { - color:white; - } - } - > .boxLabel-right { - background-color: $color-ubyssey-blue-light; - border-color: $color-ubyssey-blue-dark; - .boxText-right { - color: $color-ubyssey-blue-dark; - } - } - - &.boxLabel { - &.sticky { - filter: drop-shadow(0 5px 6px #00000040); - } - } -} - -.darkmode { - - &.boxLabel { - &.sticky { - box-shadow: 0 5px 20px 6px $color-ubyssey-blue-dark; - } - } - - > .boxLabel-left { - background-color: $color-ubyssey-blue-light; - border-color: $color-ubyssey-blue-light; - - .boxText-left { - color:$color-ubyssey-blue-dark-2; - } - } - > .boxLabel-right { - background-color: $color-ubyssey-blue-dark; - border-color: $color-ubyssey-blue-light; - - .boxText-right { - color: $color-ubyssey-blue-light; - } + .boxLabel { + --boxPrimary: #{$color-ubyssey-blue-light}; + --boxSecondary: #{$color-ubyssey-blue-dark}; + --boxTextLeft: #{$color-ubyssey-blue-dark-2}; + --boxTextRight: #{$color-ubyssey-blue-light}; } } \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/supplement-2024-femme.scss b/ubyssey/static_src/src/styles/supplement-2024-femme.scss index e9afb9c18..3933f92a0 100644 --- a/ubyssey/static_src/src/styles/supplement-2024-femme.scss +++ b/ubyssey/static_src/src/styles/supplement-2024-femme.scss @@ -252,6 +252,25 @@ img { margin: auto; padding: 1em; max-width: 1200px; + .category-list-title { + position: relative; + margin: 4em; + background-color: #a71d2c; + height: 0.5em; + svg { + position: absolute; + padding: 0.25em 1.5em; + height: 5em; + width: auto; + + top: -3.5em; + left: 50%; + transform: translateX(-50%); + + background-color: white; + fill: #a71d2c; + } + } ul { padding: 0; display: flex; @@ -365,14 +384,11 @@ nav.supplement-nav { padding-bottom: 0.25em; } - h1 { - margin: 0; - - text-align: center; - font-variation-settings: 'wght' 700; - font-size: 5em; - color: #a71d2c; - + .femme-logo { + margin-bottom: 1em; + height: 6em; + width: auto; + fill: #a71d2c; } } div.article-list { @@ -410,10 +426,27 @@ nav.supplement-nav { font-size: 3em; } + .c-share { + font-size: 18px; + } + header h1 { font-size: 2.5em; } + .category-list-title { + margin: 4em 1em; + + svg { + height: 3em; + top: -2em; + } + } + + .title { + text-align: center; + } + .pull-quote .quote { line-height: 1.5em; font-size: 1.5em; diff --git a/ubyssey/static_src/src/styles/supplement-2024-nocturne.scss b/ubyssey/static_src/src/styles/supplement-2024-nocturne.scss new file mode 100644 index 000000000..189fe95d9 --- /dev/null +++ b/ubyssey/static_src/src/styles/supplement-2024-nocturne.scss @@ -0,0 +1,572 @@ +/*This style sheet is so terribly messy. I am sorry. - Sam Low*/ + +@import 'modules/_variables.scss'; +@import 'modules/_fonts.scss'; +$accent-colour: #b7b7b7; + +@font-face { + font-family:'playfair-display'; + src: + url('../fonts/PlayfairDisplay-Medium.woff2') format('woff2'), + url('../fonts/PlayfairDisplay-Medium.woff') format('woff'), + url('../fonts/PlayfairDisplay-Medium.ttf') format('truetype'), + url('../fonts/PlayfairDisplay-Medium.svg#PlayfairDisplay-Medium') format('svg'); + font-weight: 500; + font-style: normal; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +@font-face { + font-family:'playfair-display'; + src: + url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'), + url('../fonts/PlayfairDisplay-Bold.woff') format('woff'), + url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype'), + url('../fonts/PlayfairDisplay-Bold.svg#PlayfairDisplay-Bold') format('svg'); + font-weight: 700; + font-style: normal; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +@font-face { + font-family:'playfair-display'; + src: + url('../fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2'), + url('../fonts/PlayfairDisplay-BoldItalic.woff') format('woff'), + url('../fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype'), + url('../fonts/PlayfairDisplay-BoldItalic.svg#PlayfairDisplay-BoldItalic') format('svg'); + font-weight: 700; + font-style: italic; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +@font-face { + font-family:'playfair-display'; + src: + url('../fonts/PlayfairDisplay-Medium.woff2') format('woff2'), + url('../fonts/PlayfairDisplay-Medium.woff') format('woff'), + url('../fonts/PlayfairDisplay-Medium.ttf') format('truetype'), + url('../fonts/PlayfairDisplay-Medium.svg#PlayfairDisplay-Medium') format('svg'); + font-weight: 500; + font-style: normal; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +@font-face { + font-family:'Montserrat'; + src: + url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +@font-face { + font-family:'Montserrat'; + src: + url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + font-stretch: normal; + unicode-range: U+0020-25CA; +} + +html { + --highlightColour: #0D0B0C; +} +body { + margin: 0; + background-color: var(--highlightColour); + color: #D4C5A5; + font-size: 20px; + font-family: 'playfair-display', 'serif'; +} + +article > div > * { + max-width: 1000px; + margin:auto; + padding-inline: 1em; + text-align: center; +} +.banner { + display: flex; + flex-direction: column; + height: 100vh; + .article-info { + position: relative; + margin: auto; + animation: slide-in 1s 1 ease-out; + } + h1 { + color: #fbe284; + text-shadow: 0 0 20px #834714; + border-bottom: solid 2px; + font-size: 5em; + font-family: 'playfair-display', 'serif'; + z-index: 10; + } +} + +.header-container { + margin: auto; + h1 { + margin: 1em auto 0.5em auto; + font-size: 5em; + font-style: italic; + } +} + +.c-article__info { + margin: 3em 1em; + font-weight: 600; + font-style: italic; +} + +.c-article__content { + p { + margin: 2em auto; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.45); + max-width: 800px; + line-height: 2em; + } +} + +@keyframes slide-in { + 0% {opacity: 0; top: 5em;} + 100% {opacity: 1; top: 0;} +} + +.sticky-images { + position: sticky; + top: 0; + margin-bottom: 100vh; + img { + position: absolute; + padding: 0; + margin: 0; + + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ + z-index: -1; + } + .lighted-window { + display: none; + } + img.windows { + right: 0; + top: 0; + width: auto; + height: 100vh; + } + img.windows.lighted { + display: block; + } + .watcher { + left: 0; + top: 20vh; + width: 300px; + } +} + +.content { + z-index: 10; + position: relative; + padding-right: 20%; + padding-bottom: 3em; + margin-inline: 1em; + font-size: 22px; + p { + + position: relative; + margin: 2em auto; + padding: 1em; + max-width: 700px; + z-index: 10; + + background-color: #00000073; + + color: #ccc; + text-align: left; + font-family: "Montserrat", sans-serif; + line-height: 2em; + } + p.highlight { + color: #834714; + background-color: #fbe284; + box-shadow: 0 0 20px #834714; + } + p.large-text { + font-size: 2em; + } +} + + +@media only screen and (max-width: 600px) { + .banner h1, .header-container h1 { + font-size: 2em; + } + .content p.large-text { + font-size: 1.25em; + line-height: 1.5em; + } + p.highlight { + opacity: 0.8; + } +} + + +.end { + display: flex; + flex-direction: column; + a { + text-decoration: underline; + color: white; + border: none; + } +} + +a { + color: inherit; + text-decoration: none; + font-weight: 600; + &:hover { + color: #fbe284; + text-shadow: 0 0 20px #834714; + border-bottom: solid 2px; + } +} + +.branding { + font-style: italic; + text-align: center; + padding-inline: 1em; + margin: 1em auto; + svg { + max-width: 150px; + } + a { + border: none; + } + * { + margin: 0 auto; + } + .title { + width: fit-content; + margin-top: 0.5em; + padding-inline: 2em; + padding-top: 0.25em; + border-top: 1px solid; + + font-size: 2em; + } + .desc { + width: fit-content; + padding-inline: 2em; + padding-bottom: 1em; + border-bottom: 1px solid; + + font-style: normal; + } +} + +.window-watching { + .title, .desc { + border: none; + } +} + +.category-list { + max-width: 1000px; + margin: 1em auto; + text-align: center; + h1 { + font-size: 3em; + font-style: italic; + } + ul { + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 1em; + list-style: none; + li { + position: relative; + max-width: 300px; + flex-grow: 1; + a { + border: none; + } + img { + border: 1px solid #fbe284; + opacity: 0.5; + filter: blur(5px) brightness(0.1); + } + @media ($bp-larger-than-tablet) { + img { + border-radius: 100%; + transition-duration: 1.5s; + } + &:hover img { + border-radius: 0; + opacity: 1; + filter: none; + box-shadow: 0 0 20px #834714; + } + } + h3 { + padding: 1em; + margin: auto; + width: 100%; + box-sizing: border-box; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + } + } +} + + +@media print { + .fade-in-out { + opacity: 1; + } +} + + + +h2, h3, h4 { + margin-top: 1.5em; + font-size: 1.25em; + font-family: 'playfair-display', serif; + font-style: italic; + font-variation-settings: 'wght' 700; +} + +p.drop-cap:first-letter { + padding-top: 0.05em; + padding-right: 0.1em; + height: 0.7em; + float: left; + + color: var(--highlightColour); + font-size: 4em; + line-height: 1em; + font-family: norman-variable, sans-serif; + font-variation-settings: 'wght' 700; +} + +.cookie-disclaimer-wrapper { + padding: 1em 3em; + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: white; + border-top: 2px solid; +} + +.o-container { + padding-inline: 1em; +} + +.subtitle { + max-width: 600px; + margin-inline: auto; + padding: 0.5em 1em; + + font-style: italic; + font-size: 2em; +} + +.caption { + max-width: 600px; + margin-inline: auto; + padding: 0.5em 1em; + + font-style: italic; + font-size: 1em; +} + +.credit { + display: inline-block; + margin-top: 0; + margin-left: 0.5em; + width: fit-content; + + font-size: 0.75em; +} + +.pull-quote { + padding: 1em; + .quote { + color: var(--highlightColour); + font-size: 2em; + font-family: norman-variable, sans-serif; + font-variation-settings: 'wght' 700; + } + .meta { + text-align: right; + .source { + margin-left: 3em; + } + } +} + +img.image-attachment { + width: 100%; + height: auto; + + -webkit-user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + shape-image-threshold: 0.7; + shape-margin: 2em; +} + +img { + width: 100%; + height: auto; +} + +.image-attachment { + margin: auto; + padding: 2em; + + max-width: 100%; + + a { + width: 100%; + height: 100%; + } + + img { + margin: 0; + border: 0.25em solid var(--highlightColour); + + width: 100%; + height: auto; + + -webkit-user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } + + @media ($bp-larger-than-tablet) { + &.right, + &.left { + height: auto; + margin: 0; + margin-top: 15px !important; + } + &.right { + margin-right: 15px !important; + float: right; + clear: right; + } + &.left { + margin-right: 15px !important; + float: left; + clear: left; + } + + &.full { + width: 600px; + } + } +} + +.image-attachment { + max-width: 100%; + &.small { + width: 100px; + } + + &.medium { + width: 200px; + } + + &.large { + width: 300px; + } +} + +.c-share { + font-weight: 600; + .c-share-buttons { + position: relative; + margin-inline: 0.25em; + vertical-align: middle; + a { + margin-inline: 0.25em; + } + } +} +#custom-tooltip { + position: absolute; + display: none; + margin-left: 1em; + padding: 0 0.5em; + + background-color: #fbe284; + border-radius: 4px; + color: #834714; + z-index: 10; + bottom: 100%; +} + + +footer { + margin: auto; + padding: 2em 1em; + max-width: 1000px; + text-align: center; + .footer-links-section { + margin: auto; + display: flex; + width: fit-content; + h3 { + margin: auto 1em; + font-weight: 600; + } + } + ul { + margin-block: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + padding: 0; + li { + margin: 0.5em; + a { + font-weight: 600; + text-decoration: none; + } + } + } + .land-acknowledgement { + margin: auto; + h3 { + margin: 1em; + } + p { + max-width: none; + } + a { + font-weight: 500; + } + } +} \ No newline at end of file diff --git a/ubyssey/static_src/webpack.common.js b/ubyssey/static_src/webpack.common.js index f6430bda9..cb244505d 100644 --- a/ubyssey/static_src/webpack.common.js +++ b/ubyssey/static_src/webpack.common.js @@ -31,6 +31,7 @@ module.exports = { 'events': './src/js/events.jsx', 'queer-substance-abuse': './src/js/queer-substance-abuse.js', + 'nocturne-window-watching': './src/js/nocturne-window-watching.js', }, output: { path: path.join(__dirname, '..', 'static/ubyssey/js'), diff --git a/ubyssey/templates/article/nocturne-window-watching.html b/ubyssey/templates/article/nocturne-window-watching.html new file mode 100644 index 000000000..446bbaab1 --- /dev/null +++ b/ubyssey/templates/article/nocturne-window-watching.html @@ -0,0 +1,164 @@ +{% load static %} +{% load wagtailcore_tags %} +{% load wagtailimages_tags %} + + + + + + + + Window Watching - The Ubyssey + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
              + + + +
              +
              + + + + + + + +
              +
              + +
              +

              + My apartment sits at the top of my building. The Penthouse, as my friends call it, looks out across the woods and over the bay. It’s a beautiful view — one I should probably pay more for. +

              +

              + One of the things I love about the view is the building across the street. The regal exterior boasts large windows and wood panelling, an unobtrusive landmark compared to my own building’s concrete walls. Through those large windows come small glimpses into my neighbours’ lives. I don’t live close enough to see specific details, but having a short impression of someone’s life can be a beautiful thing, and it doesn’t take much to start imagining what I cannot see. +

              +

              + For my overly creative mind, those glimpses turn into stories. True or not. +

              +

              + There’s the girl baking something in the kitchen. She’s wearing headphones so she can speak to her mother about her sibling’s high school play without disturbing her roommates. She laughs as she scoops flour into a measuring cup, some of it dusting her hair. +

              +

              + Two boys sit on a bed together, their hands almost touching as they lean back in a shared ecstasy. A loud rap song plays through a huge speaker, the room vibrating as they scream the lyrics. Both wear sunglasses despite the darkness outside, but they don’t seem to care about the irony of it all. +

              +

              + A group of four friends sit around a dining table, laptops out in front of them. Crushed energy drink cans litter the tabletop, a fresh pack sitting in the kitchen waits to be opened. Their eyes are bloodshot as their fingers type away — nothing can distract them at this moment. Someone offers to order pizza. They all yell at him to shut up. +

              +

              + A couple slow dances in the middle of a studio apartment. Her arms are on his neck, his hands on her waist. They sway back and forth to a jazz song, a prolonged note from a saxophone filling every space in the room besides the one between them. She rests her head on his shoulder and he breathes a sigh of relief. He finally feels safe. +

              +

              + A boy stares out his window at the sky. Tears stain his cheeks as he watches the clouds drift by. He brings a can of beer to his lips, trying to still his quivering chin, but the attempt is futile. Someone knocks on his door. He curses and wipes at his eyes furiously. I can’t see who’s there. +

              +

              + Each of these scenes takes me out of my own life and into someone else’s. I feel their joy, their pain, their stress and their love for one another. I rest my forehead on my own window, the glass chilly from the night air, wishing I could know more about their lives. I want to help them, comfort them, but I’m just a neighbour, an outsider looking in. A hopeful stranger. +

              +

              + I wonder if they look into my window. What do they think? It’s hard to tell, but I hope they see what I do: a person who isn’t so different from them. +

              +
              +
              +
              +

              + + Nocturne + +

              +
              + + + + diff --git a/ubyssey/templates/ubyssey/base.html b/ubyssey/templates/ubyssey/base.html index 84e0c9b3b..2dacb1780 100644 --- a/ubyssey/templates/ubyssey/base.html +++ b/ubyssey/templates/ubyssey/base.html @@ -1,7 +1,7 @@ {% load static %} {% load wagtailuserbar %} - + {% if request.in_preview_panel %} {% endif %} diff --git a/ubyssey/urls.py b/ubyssey/urls.py index 399362085..6ba8b38d2 100644 --- a/ubyssey/urls.py +++ b/ubyssey/urls.py @@ -54,6 +54,7 @@ # Special design articles re_path(r'^features/how-substance-use-impacts-queer-students', TemplateView.as_view(template_name='article/queer-substance-abuse.html')), + re_path(r'^features/window-watching', TemplateView.as_view(template_name='article/nocturne-window-watching.html')), # re_path(r'^culture/special/self-isolation/', IsolationView.as_view(), name='special-isolation'), # re_path(r'^(?P
              culture)/(?Pboredom-and-binging|in-full-bloom|temperature-checks|a-breath-of-fresh-air|paradise-found|under-water|healing-wounds|feeling-raw)/$', ArticleView.as_view()), # re_path(r'^magazine/(?P[0-9]{4})/$', magazine.magazine, name='magazine-landing'),