SoC-2024: improve positioning of logo in small screens

sivaraam · sivaraam · commit 8f6175a33865 · 2024-02-25T20:59:03.000+05:30
We could align the image to right only on bigger screens as it looks
good only when the space on the left is enough for some decent amount
of content to be shown. On smaller screens, we could just place the
image on its one chunk of space (default behaviour when including
images in Markdown) and let the content follow it.

Tweak the styles to accordingly for this.
diff --git a/SoC-2024-Ideas.md b/SoC-2024-Ideas.md
@@ -3,7 +3,7 @@ layout: default
 title: SoC 2024 Ideas
 ---
 
-<img style="float: right;" src="https://git-scm.com/images/logos/downloads/Git-Logo-2Color.svg">
+![git logo >](https://git-scm.com/images/logos/downloads/Git-Logo-2Color.svg)
 
 This is the idea page for Summer of Code 2024 for Git.
 
diff --git a/css/main.css b/css/main.css
@@ -2062,3 +2062,30 @@ img {
   padding-left: 2em;
   text-indent: -2em;
 }
+
+@media screen and (min-width: 800px) {
+  img[alt$=">"] {
+    float: right;
+  }
+
+  /*
+   * Below styles could be useful when we position
+   * images to left / center. They're commented now
+   * since we don't use images in our site much.
+   *
+   * Ref: https://stackoverflow.com/a/39614958/5614968
+   */
+  /*
+  img[alt$="<"] {
+    float: left;
+  }
+
+  img[alt$="><"] {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: auto;
+    float: none!important;
+  }
+  */
+}
