Use CSS to Make Home Layout Responsive with Logo Img

Author: o-ashour

docs/index.md

@@ -3,7 +3,7 @@
 ---
 # Every Tuesday at 12pm Mountain Time
 
-![](assets/logo/svg/horizontal_logo_light.svg){: style="width:450px;float: right;padding-left: 10px;"}
+<img class="logo-article-img" src="assets/logo/svg/horizontal_logo_light.svg" alt="weekly-dev- chat logo">
 
 A casual weekly [virtual chat](join.md) mostly focused on web and software development.
 

docs/stylesheets/extra.css

@@ -0,0 +1,11 @@
+.logo-article-img {
+  width: 300px;
+  margin-left: 20px;
+}
+@media (min-width: 768px) {
+  .logo-article-img {
+    width: 450px;
+    float: right;
+    margin-left: 10px;
+  }
+}

mkdocs.yml

@@ -17,8 +17,6 @@ theme:
     logo: assets/logo/png/square_logo_light_150.png
 
 
-
-
 # Enable the blogging behaviour (builtin plugin)
 # see https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/
 plugins:
@@ -41,4 +39,6 @@ exclude_docs: |
     past_topics.md
 markdown_extensions:
   - attr_list  # This lets us specify image dimensions, etc.
-  
+
+extra_css: 
+  - stylesheets/extra.css