diff options
| -rw-r--r-- | layouts/_default/baseof.html | 7 | ||||
| -rw-r--r-- | static/css/hugo-apps-theme.css | 28 | ||||
| -rw-r--r-- | static/css/hugo-apps-theme.scss | 45 |
3 files changed, 69 insertions, 11 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 770a701..eb7788f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,20 +5,25 @@ <html> <head> <link rel="stylesheet" href="/css/hugo-apps-theme.css"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <header class="apps-header"> <div style="margin-bottom:1rem"> <a href="../" style="float: left">Back</a> <a href="{{ .Site.BaseURL }}" class="apps-header-title"> + <h1> {{ .Site.Title }} + </h1> </a> </div> {{ with .Site.Menus.main }} {{ range $i, $e := sort . }} - <a href="{{ $e.URL }}" style="margin:0;{{ if $i }}padding-left: 1rem; border-left: 0.2rem solid black{{ end }}"> + <h2 style="display: inline-block;margin:0;{{ if $i }}padding-left: 1rem; border-left: 0.2rem solid black{{ end }}"> + <a href="{{ $e.URL }}"> {{- $e.Name -}} </a> + </h2> {{ end }} {{ end }} <hr/> diff --git a/static/css/hugo-apps-theme.css b/static/css/hugo-apps-theme.css index 69a4743..ad6652c 100644 --- a/static/css/hugo-apps-theme.css +++ b/static/css/hugo-apps-theme.css @@ -21,13 +21,29 @@ @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: 801px) and (orientation: portrait) { html { background-color: green; font-size: 15px; } } @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; overflow: scroll; } +body { background-color: silver; font-family: 'Press Start 2P', cursive; line-height: 120%; text-align: center; word-wrap: break-word; overflow: scroll; } + +h1 { font-size: 2rem; } + +h2 { font-size: 1.5rem; } + +h3 { font-size: 1.17rem; } + +h4 { font-size: 1.12rem; } + +h5 { font-size: 0.83rem; } + +h6 { font-size: 0.75rem; } + +h1, h2, h3, h4, h5, h6 { line-height: 110%; } + +p { font-size: 1rem; } a { text-decoration: none; color: black; } @@ -35,11 +51,13 @@ a:visited { color: black; } a:hover { color: red; } -@media (min-width: 0px) { .readability, hr, .apps-list, .apps-content { width: 100%; } } +@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: 600px) { .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: 1025px) { .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; } diff --git a/static/css/hugo-apps-theme.scss b/static/css/hugo-apps-theme.scss index 7876494..01fb371 100644 --- a/static/css/hugo-apps-theme.scss +++ b/static/css/hugo-apps-theme.scss @@ -79,7 +79,7 @@ html { } @include screen(p, 5) { background-color: green; - font-size: 30px; + font-size: 15px; } @include screen(p, 6) { background-color: blue; @@ -94,12 +94,44 @@ html { body { background-color: silver; font-family: 'Press Start 2P', cursive; - line-height: 2rem; + line-height: 120%; text-align: center; word-wrap: break-word; overflow: scroll; } +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; +} + +h3 { + font-size: 1.17rem; +} + +h4 { + font-size: 1.12rem; +} + +h5 { + font-size: 0.83rem; +} + +h6 { + font-size: 0.75rem; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 110%; +} + +p { + font-size: 1rem; +} + a { text-decoration: none; color: black; @@ -112,15 +144,18 @@ a { } .readability { - @include screen(lp, 1) { + @include screen(l, 1) { width: 100%; } - @include screen(lp, 4) { + @include screen(l, 4) { width: 75%; } - @include screen(lp, 6) { + @include screen(l, 6) { width: 50%; } + @include screen(p, 1) { + width: 100%; + } } hr { |