Merge pull request #694 from git/ideas-page-git-logo

SoC-2024: improve positioning of logo in small screens

Author: chriscool

SoC-2024-Ideas.md

@@ -3,7 +3,7 @@ layout: default
 title: SoC 2024 Ideas
 ---
 
-<imgstyle="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.
 

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;
+ }
+ */
+}