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/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 %} + + +{% endblock %} \ No newline at end of file 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/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/supplement-2024-nocturne.scss b/ubyssey/static_src/src/styles/supplement-2024-nocturne.scss new file mode 100644 index 000000000..afc96a81b --- /dev/null +++ b/ubyssey/static_src/src/styles/supplement-2024-nocturne.scss @@ -0,0 +1,564 @@ +/*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; + } + .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 { + margin: 2em auto; + padding: 1em; + max-width: 700px; + + 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'),