Add some mobile css for themes

ARitz-Cracker · Mar 5, 2018 · fcd6cbc · fcd6cbc
1 parent c0ea30e
commit fcd6cbc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/docs/sass/_themes.scss b/docs/sass/_themes.scss
@@ -1,12 +1,21 @@
 
 .themes-container {
   padding: 3rem;
+  width: 80%;
+  margin: 0 auto;
 
   img {
     max-width: 100%;
   }
 }
 
+@media only screen and (max-width: 1000px)  {
+  .themes-container {
+    width: 100%;
+    margin: 0 1rem;
+  }
+}
+
 .themes {
   display: flex;
   flex-wrap: wrap;
@@ -50,3 +59,21 @@
 
   padding: 1rem;
 }
+
+
+@media only screen and (max-width: 1000px)  {
+  .themes .theme {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 1000px)  {
+  .theme-info {
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      margin-bottom: 1rem;
+    }
+  }
+}
diff --git a/docs/templates/theme.html b/docs/templates/theme.html
@@ -9,7 +9,7 @@ <h1>{{ page.title }}</h1>
             <p>{{ page.description }}</p>
             <p><b>Author:</b> {{page.extra.author.name}}</p>
             <p><b>License:</b> {{page.extra.license}}</p>
-            <p><b>Homepage:</b> {{page.extra.homepage}}</p>
+            <p><b>Homepage:</b> <a href="{{page.extra.homepage}}">{{page.extra.homepage}}</a></p>
             <p><b>Last updated:</b> {{page.extra.updated }}</p>
         </div>
     </div>