Used mixins in scss

4 files changed, 184 insertions, 48 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a3a8d18..2cd4cd1 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,4 +1,4 @@
-baseURL = "https://example.com"
+baseURL = "/"
 languageCode = "en-us"
 title = "Hugo Apps Theme"
 paginate = 10
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index af46a98..32a3254 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,17 +1,19 @@
 {{ define "main" }}
-  {{ range .Pages }}
-    <div class="apps-app-item">
-      <div class="apps-app-icon">
-        <a href="{{ .URL }}">
-	  {{ $img := default "/img/no-image.svg" .Params.img }}
-          <img src="{{ $img }}"/>
-        </a>
+  <div class="apps-list">
+    {{ range .Pages }}
+      <div class="apps-app-item">
+        <div class="apps-app-icon">
+          <a href="{{ .URL }}">
+            {{ $img := default "/img/no-image.svg" .Params.img }}
+            <img src="{{ $img }}"/>
+          </a>
+        </div>
+        <div class="apps-app-name">
+          <a href="{{ .URL }}">
+            {{ .Title }}
+          </a>
+        </div>
       </div>
-      <div class="apps-app-name">
-        <a href="{{ .URL }}">
-          {{ .Title }}
-        </a>
-      </div>
-    </div>
-  {{ end }}
+    {{ end }}
+  </div>
 {{ end }}
diff --git a/static/css/hugo-apps-theme.css b/static/css/hugo-apps-theme.css
index 136909a..e96bbe8 100644
--- a/static/css/hugo-apps-theme.css
+++ b/static/css/hugo-apps-theme.css
@@ -1,17 +1,31 @@
 @import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
-@media (min-width: 0px) { html { background-color: black; font-size: 10px; } }
+@media (min-width: 0px) and (orientation: landscape) { html { background-color: black; font-size: 10px; } }
 
-@media (min-width: 320px) { html { background-color: red; font-size: 20px; } }
+@media (min-width: 320px) and (orientation: landscape) { html { background-color: red; font-size: 20px; } }
 
-@media (min-width: 480px) { html { background-color: orange; font-size: 20px; } }
+@media (min-width: 480px) and (orientation: landscape) { html { background-color: orange; font-size: 20px; } }
 
-@media (min-width: 600px) { html { background-color: yellow; font-size: 15px; } }
+@media (min-width: 600px) and (orientation: landscape) { html { background-color: yellow; font-size: 15px; } }
 
-@media (min-width: 801px) { html { background-color: green; font-size: 20px; } }
+@media (min-width: 801px) and (orientation: landscape) { html { background-color: green; font-size: 20px; } }
 
-@media (min-width: 1025px) { html { background-color: blue; font-size: 15px; } }
+@media (min-width: 1025px) and (orientation: landscape) { html { background-color: blue; font-size: 15px; } }
 
-@media (min-width: 1281px) { html { background-color: indigo; font-size: 10px; } }
+@media (min-width: 1281px) and (orientation: landscape) { html { background-color: indigo; font-size: 10px; } }
+
+@media (min-width: 0px) and (orientation: portrait) { html { background-color: black; font-size: 10px; } }
+
+@media (min-width: 320px) and (orientation: portrait) { html { background-color: red; font-size: 20px; } }
+
+@media (min-width: 480px) and (orientation: portrait) { html { background-color: orange; font-size: 20px; } }
+
+@media (min-width: 600px) and (orientation: portrait) { html { background-color: yellow; font-size: 15px; } }
+
+@media (min-width: 801px) and (orientation: portrait) { html { background-color: green; font-size: 30px; } }
+
+@media (min-width: 1025px) and (orientation: portrait) { html { background-color: blue; font-size: 15px; } }
+
+@media (min-width: 1281px) and (orientation: portrait) { html { background-color: indigo; font-size: 10px; } }
 
 body { background-color: silver; font-family: 'Press Start 2P', cursive; line-height: 2rem; text-align: center; word-wrap: break-word; }
 
@@ -43,30 +57,32 @@ table, thead, tr, th, td, tfoot, fieldset, input, textarea { border: 0.2rem soli
 
 thead, th { border-bottom-width: 0.4rem; }
 
-.apps-content { margin: 0 auto; background-color: white; }
+.apps-list, .apps-content { margin: 0 auto; }
+
+@media (min-width: 0px) { .apps-list, .apps-content { width: 100%; } }
 
-@media (min-width: 0px) { .apps-content { width: 100%; } }
+@media (min-width: 320px) { .apps-list, .apps-content { width: 100%; } }
 
-@media (min-width: 320px) { .apps-content { width: 100%; } }
+@media (min-width: 480px) { .apps-list, .apps-content { width: 100%; } }
 
-@media (min-width: 480px) { .apps-content { width: 100%; } }
+@media (min-width: 600px) { .apps-list, .apps-content { width: 75%; } }
 
-@media (min-width: 600px) { .apps-content { width: 75%; } }
+@media (min-width: 801px) { .apps-list, .apps-content { width: 75%; } }
 
-@media (min-width: 801px) { .apps-content { width: 75%; } }
+@media (min-width: 1025px) { .apps-list, .apps-content { width: 50%; } }
 
-@media (min-width: 1025px) { .apps-content { width: 50%; } }
+@media (min-width: 1281px) { .apps-list, .apps-content { width: 50%; } }
 
-@media (min-width: 1281px) { .apps-content { width: 50%; } }
+.apps-content { background-color: white; }
 
 .apps-header { color: black; }
 
 .apps-header .apps-header-title { font-size: 2.5rem; }
 
-.apps-app-item { display: inline-block; width: 10rem; vertical-align: top; margin-right: 1.5rem; }
+.apps-app-item { display: inline-block; width: 8rem; vertical-align: top; margin-right: 1.5rem; }
 
-.apps-app-icon { display: inline-block; border: 0.5rem solid white; border-radius: 1.5rem; width: 10rem; height: 10rem; padding-bottom: 0; overflow: hidden; }
+.apps-app-icon { display: inline-block; border: 0.5rem solid white; border-radius: 1.5rem; width: 8rem; height: 8rem; padding-bottom: 0; overflow: hidden; }
 
-.apps-app-icon img { width: 10rem; height: 10rem; }
+.apps-app-icon img { width: 8rem; height: 8rem; }
 
 .apps-app-name { padding-top: 1rem; }
diff --git a/static/css/hugo-apps-theme.scss b/static/css/hugo-apps-theme.scss
index ee2dc37..3f53ae6 100644
--- a/static/css/hugo-apps-theme.scss
+++ b/static/css/hugo-apps-theme.scss
@@ -1,34 +1,148 @@
 @import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
 
+@mixin screen-p1 {
+  @media (min-width: 0px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p2 {
+  @media (min-width: 320px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p3 {
+  @media (min-width: 480px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p4 {
+  @media (min-width: 600px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p5 {
+  @media (min-width: 801px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p6 {
+  @media (min-width: 1025px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-p7 {
+  @media (min-width:1281px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin screen-l1 {
+  @media (min-width: 0px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l2 {
+  @media (min-width: 320px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l3 {
+  @media (min-width: 480px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l4 {
+  @media (min-width: 600px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l5 {
+  @media (min-width: 801px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l6 {
+  @media (min-width: 1025px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin screen-l7 {
+  @media (min-width:1281px) and (orientation: landscape) {
+    @content;
+  }
+}
+
 html {
-  @media (min-width:0px) {
+  @include screen-l1 {
     background-color: black;
     font-size: 10px;
   }
-  @media (min-width:320px) {
+  @include screen-l2 {
     background-color: red;
     font-size: 20px;
   }
-  @media (min-width:480px) {
+  @include screen-l3 {
     background-color: orange;
     font-size: 20px;
   }
-  @media (min-width:600px) {
+  @include screen-l4 {
     background-color: yellow;
     font-size: 15px;
   }
-  @media (min-width:801px) {
+  @include screen-l5 {
     background-color: green;
     font-size: 20px;
   }
-  @media (min-width:1025px) {
+  @include screen-l6 {
     background-color: blue;
     font-size: 15px;
   }
-  @media (min-width:1281px) {
+  @include screen-l7 {
     background-color: indigo;
     font-size: 10px;
   }
+
+  @include screen-p1 {
+    background-color: black;
+    font-size: 10px;
+  }
+  @include screen-p2 {
+    background-color: red;
+    font-size: 20px;
+  }
+  @include screen-p3 {
+    background-color: orange;
+    font-size: 20px;
+  }
+  @include screen-p4 {
+    background-color: yellow;
+    font-size: 15px;
+  }
+  @include screen-p5 {
+    background-color: green;
+    font-size: 30px;
+  }
+  @include screen-p6 {
+    background-color: blue;
+    font-size: 15px;
+  }
+  @include screen-p7 {
+    background-color: indigo;
+    font-size: 10px;
+  }
+
 }
 
 body {
@@ -92,9 +206,8 @@ thead, th{
   border-bottom-width: 0.4rem;
 }
 
-.apps-content {
+.apps-list {
   margin: 0 auto;
-  background-color: white;
   @media (min-width:0px) {
     width: 100%;
   }
@@ -116,7 +229,12 @@ thead, th{
   @media (min-width:1281px) {
     width: 50%;
   }
-} 
+}
+
+.apps-content {
+  @extend .apps-list;
+  background-color: white;
+}
 
 .apps-header {
   color: black;
@@ -127,7 +245,7 @@ thead, th{
 
 .apps-app-item {
   display: inline-block;
-  width: 10rem;
+  width: 8rem;
   vertical-align: top;
   margin-right: 1.5rem;
 }
@@ -136,13 +254,13 @@ thead, th{
   display: inline-block;
   border: 0.5rem solid white;
   border-radius: 1.5rem;
-  width: 10rem;
-  height: 10rem;
+  width: 8rem;
+  height: 8rem;
   padding-bottom: 0;
   overflow: hidden;
   img {
-    width: 10rem;
-    height: 10rem;
+    width: 8rem;
+    height: 8rem;
   }
 }