From ee3f3a3bdb9807cba082e26eac7c78efca6a5777 Mon Sep 17 00:00:00 2001
From: SamuelmdLow <samuel.m.d.low@gmail.com>
Date: Fri, 22 Nov 2024 08:03:01 +0000
Subject: [PATCH] increase flex image size and add alt text, add via @ubyssey
 for bluesky and hell, FINALLY make coverstory headline look good with a cool
 css trick I saw policyoptions.irpp.org using for their headlines

---
 infinitefeed/blocks.py                        |  2 ++
 .../sidebar/sidebar_image_link_block.html     |  2 +-
 ubyssey/static_src/src/js/main.js             |  6 +++---
 .../src/styles/components/_infinitefeed.scss  | 19 ++++++++++++-------
 .../src/styles/objects/_article_cover.scss    | 12 +++++++++---
 5 files changed, 27 insertions(+), 14 deletions(-)

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_image_link_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_image_link_block.html
index 6540399a9..93108aab4 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 %}
     <a href={{ self.link }}>
 {% endif %}
-{% image self.image width-320 format-webp %}
+{% image self.image width-700 format-webp alt=self.alt_text title=self.alt_text %}
 {% if self.link %}
     </a>
 {% endif %}
\ No newline at end of file
diff --git a/ubyssey/static_src/src/js/main.js b/ubyssey/static_src/src/js/main.js
index 91b337792..f12e5054d 100644
--- a/ubyssey/static_src/src/js/main.js
+++ b/ubyssey/static_src/src/js/main.js
@@ -295,7 +295,7 @@ 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');
   });
 
@@ -307,14 +307,14 @@ function initializeSocialMediaActions() {
 
   $(document).on('click', '.share-bsky', function (e) {
     e.preventDefault();
-    window.open('https://bsky.app/intent/compose/?text=' + title + '%20' + window.location.href + ' #ubyssey',
+    window.open('https://bsky.app/intent/compose/?text=' + title + '%20' + window.location.href + '%20via%20@ubyssey.bsky.social',
     '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 + ' via @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/styles/components/_infinitefeed.scss b/ubyssey/static_src/src/styles/components/_infinitefeed.scss
index f1fa9660b..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 {
@@ -56,13 +68,6 @@
     }
 }
 
-.flex-stream {
-    img {
-        margin: auto;
-        display: block;
-    }
-}
-
 .c-section__sidebar {
     margin-left: 20px;
     width: 37%;
diff --git a/ubyssey/static_src/src/styles/objects/_article_cover.scss b/ubyssey/static_src/src/styles/objects/_article_cover.scss
index bd72220bd..3a9bcb3b8 100644
--- a/ubyssey/static_src/src/styles/objects/_article_cover.scss
+++ b/ubyssey/static_src/src/styles/objects/_article_cover.scss
@@ -77,15 +77,21 @@
     }
   
     .o-article__headline {
+      margin-left: 1em;
       position: relative;
-      color: #ffffff;
+
       background-color: $color-ubyssey-blue;
+      box-shadow: 0.75em 0 0 $color-ubyssey-blue, -0.75em 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 {