Modified scss

2 files changed, 224 insertions, 2 deletions

diff --git a/static/css/hugo-apps-theme.css b/static/css/hugo-apps-theme.css
index 44fb900..2196a2d 100644
--- a/static/css/hugo-apps-theme.css
+++ b/static/css/hugo-apps-theme.css
@@ -1 +1,216 @@
-@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:auto;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;background-color:lightgray}.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}}
+@import url("https://fonts.googleapis.com/css?family=Rajdhani");
+html {
+  /*
+  @include screen(l, 1) {
+    background-color: black;
+    font-size: 10px;
+  }
+  @include screen(l, 2) {
+    background-color: red;
+    font-size: 15px;
+  }
+  @include screen(l, 3) {
+    background-color: orange;
+    font-size: 15px;
+  }
+  @include screen(l, 4) {
+    background-color: yellow;
+    font-size: 15px;
+  }
+  @include screen(l, 5) {
+    background-color: green;
+    font-size: 15px;
+  }
+  @include screen(l, 6) {
+    background-color: blue;
+    font-size: 15px;
+  }
+  @include screen(l, 7) {
+    background-color: indigo;
+    font-size: 20px;
+  }
+  @include screen(p, 1) {
+    background-color: black;
+    font-size: 10px;
+  }
+  @include screen(p, 2) {
+    background-color: red;
+    font-size: 15px;
+  }
+  @include screen(p, 3) {
+    background-color: orange;
+    font-size: 15px;
+  }
+  @include screen(p, 4) {
+    background-color: yellow;
+    font-size: 15px;
+  }
+  @include screen(p, 5) {
+    background-color: green;
+    font-size: 20px;
+  }
+  @include screen(p, 6) {
+    background-color: blue;
+    font-size: 20px;
+  }
+  @include screen(p, 7) {
+    background-color: indigo;
+    font-size: 20px;
+  }
+*/ }
+
+body {
+  background-color: silver;
+  font-family: 'Rajdhani', cursive;
+  line-height: 120%;
+  word-wrap: break-word;
+  overflow: auto;
+  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, .apps-header hr, .apps-list, .apps-content {
+    width: 100%; } }
+
+@media (min-width: 600px) and (orientation: landscape) {
+  .readability, .apps-header hr, .apps-list, .apps-content {
+    width: 75%; } }
+
+@media (min-width: 1025px) and (orientation: landscape) {
+  .readability, .apps-header hr, .apps-list, .apps-content {
+    width: 50%; } }
+
+@media (min-width: 0px) and (orientation: portrait) {
+  .readability, .apps-header hr, .apps-list, .apps-content {
+    width: 100%; } }
+
+hr {
+  border: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  height: 1rem;
+  background: black; }
+
+.apps-content hr {
+  height: 0.5rem; }
+
+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;
+  background-color: lightgray; }
+  .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 1c8c652..8c927ab 100644
--- a/static/css/hugo-apps-theme.scss
+++ b/static/css/hugo-apps-theme.scss
@@ -181,7 +181,6 @@ a {
 }
 
 hr {
-  @extend .readability;
   border: 0;
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -189,6 +188,14 @@ hr {
   background: black;
 }
 
+.apps-header hr {
+  @extend .readability;
+}
+
+.apps-content hr {
+  height: 0.5rem;
+}
+
 table {
   border-collapse: collapse;
   table-layout: fixed;