aboutsummaryrefslogtreecommitdiffstats
path: root/theme/default/rsrc/css/import/_responsive.scss
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2021-06-12 00:56:45 +0200
committerThomas Lange <code@nerdmind.de>2021-06-12 00:56:45 +0200
commit4c3fc4ab3f012afc48be15193595c6b945496288 (patch)
treefea14ef91b1ca51cfcc4979ffc1b110c32f67e37 /theme/default/rsrc/css/import/_responsive.scss
parent95c0ccd0958321056fb2d815c513c0b71c46f973 (diff)
downloadblog-4c3fc4ab3f012afc48be15193595c6b945496288.tar.gz
blog-4c3fc4ab3f012afc48be15193595c6b945496288.tar.xz
blog-4c3fc4ab3f012afc48be15193595c6b945496288.zip
Use SCSS for stylesheets
Diffstat (limited to 'theme/default/rsrc/css/import/_responsive.scss')
-rw-r--r--theme/default/rsrc/css/import/_responsive.scss77
1 files changed, 77 insertions, 0 deletions
diff --git a/theme/default/rsrc/css/import/_responsive.scss b/theme/default/rsrc/css/import/_responsive.scss
new file mode 100644
index 0000000..d248bf4
--- /dev/null
+++ b/theme/default/rsrc/css/import/_responsive.scss
@@ -0,0 +1,77 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #1
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 50em) {
+ html {
+ font-size: 1.125rem; /*18px*/
+ background-image: none !important;
+ }
+
+ body {
+ line-height: 1.2rem;
+ }
+
+ #container {
+ margin: 0;
+ border-right: none;
+ border-left: none;
+ }
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #2
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 37.5em) {
+ main, #main-header > div {
+ padding: 1rem;
+ }
+
+ #main-navi {
+ padding: 0.25rem 1rem;
+ }
+
+ #main-navi a {
+ border: 0.05rem solid transparent;
+ }
+
+ #main-navi a:hover, #main-navi a:focus {
+ border: 0.05rem solid #BBB;
+ }
+
+ #main-navi > ul {
+ display: none;
+ float: none;
+ }
+
+ #main-navi > ul > li a {
+ display: block;
+ text-align: left;
+ padding: 0 0.25rem;
+ }
+
+ #main-navi {
+ overflow: hidden;
+ }
+
+ #toogle-nav-label {
+ display: block;
+ }
+
+ #toogle-nav:checked + ul {
+ display: block;
+ }
+
+ #main-navi li:last-child {
+ float: none;
+ }
+
+ .item > header {
+ text-align: center;
+ }
+
+ .item > header > h2,
+ .item > header > .info {
+ float: none;
+ display: block;
+ }
+}