increase flex image size and add alt text, add via @ubyssey for blues…

…ky and hell, FINALLY make coverstory headline look good with a cool css trick I saw policyoptions.irpp.org using for their headlines
ubyssey · Nov 22, 2024 · ee3f3a3 · ee3f3a3
1 parent 215a39f
commit ee3f3a3
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git 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
@@ -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 %}
diff --git 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
@@ -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
@@ -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 {