More reponsive design

4 files changed, 46 insertions, 6 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0618dc4..699568b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -23,11 +23,12 @@
     </div>
     {{ with .Site.Menus.main }}
       {{ range $i, $e := sort . }}
-      <h4 style="display: inline-block;margin:0;{{ if $i }}padding-left:1rem;margin-left: 0.8rem; border-left: 0.2rem solid black{{ end }}">
-      <a href="{{ $e.URL }}">
-        {{- $e.Name -}}
+      <a class="apps-menu-item" href="{{ $e.URL }}">
+<!--        <h4 style="margin:0;{{ if $i }}padding-left:1rem;margin-left: 0.8rem; border-left: 0.2rem solid black{{ end }}">-->
+        <h4>
+          {{- $e.Name -}}
+        </h4>
       </a>
-      </h2>
       {{ end }}
     {{ end }}
     <hr/>
diff --git a/layouts/index.html b/layouts/index.html
index 2a2e6e2..763131c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,7 +6,12 @@
   </div>
   {{ with .Site.Params.social }}
     {{ range $i, $e := sort . }}
-      <a href="{{ .url }}"><h5 style="display:inline;{{ if $i }}padding-left:0.5rem;margin-left: 0.3rem; border-left: 0.2rem solid black{{ end }}">{{ $e.name }}</h5></a>
+      <a class="apps-submenu-item" href="{{ .url }}">
+        <!--<h5 style="{{ if $i }}padding-left:0.5rem;margin-left: 0.3rem; border-left: 0.2rem solid black{{ end }}">{{ $e.name }}</h5>-->
+        <h5>
+          {{- $e.name -}}
+        </h5>
+      </a>
     {{ end }}
   {{ end }}
 {{ end }}
diff --git a/static/css/hugo-apps-theme.css b/static/css/hugo-apps-theme.css
index b45d8b9..be8ff5e 100644
--- a/static/css/hugo-apps-theme.css
+++ b/static/css/hugo-apps-theme.css
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css?family=Rajdhani");body{background-color:silver;font-family:'Rajdhani', cursive;line-height:120%;word-wrap:break-word;overflow:scroll;text-align:center}h1{font-size:3.6rem;margin-top:0.72rem;margin-bottom:0.72rem}h2{font-size:3rem;margin-top:0.6rem;margin-bottom:0.6rem}h3{font-size:2.4rem;margin-top:0.48rem;margin-bottom:0.48rem}h4{font-size:1.8rem;margin-top:0.36rem;margin-bottom:0.36rem}h5{font-size:1.4rem;margin-top:0.28rem;margin-bottom:0.28rem}h6{font-size:1.2rem;margin-top:0.24rem;margin-bottom:0.24rem}h1,h2,h3,h4,h5,h6{line-height:110%}p{font-size:1rem}pre{overflow:auto}a{text-decoration:none;color:black}a:visited{color:black}a:hover{color:red}@media (min-width: 0px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:100%}}@media (min-width: 600px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:75%}}@media (min-width: 1025px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:50%}}@media (min-width: 0px) and (orientation: portrait){.readability,hr,.apps-list,.apps-content{width:100%}}hr{border:0;margin-top:1rem;margin-bottom:1rem;height:1rem;background:black}table{border-collapse:collapse;table-layout:fixed}table,thead,tr,th,td,tfoot,fieldset,input,textarea{border:0.1rem solid black}thead,th{border-bottom-width:0.2rem}.apps-list,.apps-content{margin:0 auto}.apps-content{background-color:lightgray;text-align:left;overflow:auto}.apps-content>*{margin:1rem 2rem 1rem 2rem}.apps-content *{max-width:100%}.apps-header{color:black}.apps-header .apps-header-title{font-size:2.5rem}.apps-app-item{display:inline-block;width:8rem;vertical-align:top;margin-right:1.5rem;margin-bottom:1.5rem}.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:8rem;height:8rem}
+@import url("https://fonts.googleapis.com/css?family=Rajdhani");body{background-color:silver;font-family:'Rajdhani', cursive;line-height:120%;word-wrap:break-word;overflow:scroll;text-align:center}h1{font-size:3.6rem;margin-top:0.72rem;margin-bottom:0.72rem}h2{font-size:3rem;margin-top:0.6rem;margin-bottom:0.6rem}h3{font-size:2.4rem;margin-top:0.48rem;margin-bottom:0.48rem}h4{font-size:1.8rem;margin-top:0.36rem;margin-bottom:0.36rem}h5{font-size:1.4rem;margin-top:0.28rem;margin-bottom:0.28rem}h6{font-size:1.2rem;margin-top:0.24rem;margin-bottom:0.24rem}h1,h2,h3,h4,h5,h6{line-height:110%}p{font-size:1rem}pre{overflow:auto}a{text-decoration:none;color:black}a:visited{color:black}a:hover{color:red}@media (min-width: 0px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:100%}}@media (min-width: 600px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:75%}}@media (min-width: 1025px) and (orientation: landscape){.readability,hr,.apps-list,.apps-content{width:50%}}@media (min-width: 0px) and (orientation: portrait){.readability,hr,.apps-list,.apps-content{width:100%}}hr{border:0;margin-top:1rem;margin-bottom:1rem;height:1rem;background:black}table{border-collapse:collapse;table-layout:fixed}table,thead,tr,th,td,tfoot,fieldset,input,textarea{border:0.1rem solid black}thead,th{border-bottom-width:0.2rem}.apps-list,.apps-content{margin:0 auto}.apps-content{background-color:lightgray;text-align:left;overflow:auto}.apps-content>*{margin:1rem 2rem 1rem 2rem}.apps-content *{max-width:100%}.apps-header{color:black}.apps-header .apps-header-title{font-size:2.5rem}.apps-app-item{display:inline-block;width:8rem;vertical-align:top;margin-right:1.5rem;margin-bottom:1.5rem}.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:8rem;height:8rem}@media (min-width: 0px) and (orientation: landscape){.apps-menu-item{display:block}}@media (min-width: 600px) and (orientation: landscape){.apps-menu-item{display:inline-block;margin-left:1rem;margin-right:1rem}}@media (min-width: 0px) and (orientation: portrait){.apps-menu-item{display:block}}@media (min-width: 0px) and (orientation: landscape){.apps-submenu-item{display:block}}@media (min-width: 600px) and (orientation: landscape){.apps-submenu-item{display:inline-block;margin-left:0.5rem;margin-right:0.5rem}}@media (min-width: 0px) and (orientation: portrait){.apps-submenu-item{display:block}}
diff --git a/static/css/hugo-apps-theme.scss b/static/css/hugo-apps-theme.scss
index f5ef8cc..7cc67f6 100644
--- a/static/css/hugo-apps-theme.scss
+++ b/static/css/hugo-apps-theme.scss
@@ -252,3 +252,37 @@ thead, th {
 .apps-app-name {
 //  padding-top: 1rem;
 }
+
+.apps-menu {
+}
+
+.apps-menu-item {
+  @include screen(l, 1) {
+    display: block;
+  }
+  @include screen(l, 4) {
+    display: inline-block;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  @include screen(p, 1) {
+    display: block;
+  }
+}
+
+.apps-submenu {
+}
+
+.apps-submenu-item {
+  @include screen(l, 1) {
+    display: block;
+  }
+  @include screen(l, 4) {
+    display: inline-block;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  @include screen(p, 1) {
+    display: block;
+  }
+}