From 5b676b981a693a9351aae483558acdeb01b6737a Mon Sep 17 00:00:00 2001 From: Koen Lageveen Date: Sat, 29 Jul 2017 18:12:30 +0200 Subject: [PATCH] make it kinda responsive --- index.css | 58 ++++++++++------ index.html | 189 +++++++++++++++++++++++++++-------------------------- index.js | 5 ++ 3 files changed, 139 insertions(+), 113 deletions(-) diff --git a/index.css b/index.css index 89cb9d1..fe062b9 100644 --- a/index.css +++ b/index.css @@ -19,7 +19,7 @@ body { h1 { text-align: center; font-weight: 700; - font-size: 1.414em; + font-size: 14px; margin: 0; padding: .25em 0 0 0; } @@ -37,13 +37,22 @@ a:active { .octicon { fill: currentcolor; } -article { +.article-wrapper { float: left; border-right: 1px solid #4a4a4a; height: 100%; + max-height: 100%; width: 28em; + overflow: hidden; + transition: width .2s ease-in-out; + position: relative; + z-index: 3; +} +article { + height: 100%; display: flex; flex-direction: column; + width: 28em; } section { flex: 1; @@ -127,29 +136,13 @@ footer { background: #e4e4e4; color: #777; } +footer h1 + p { + font-style: italic; +} footer a:hover, footer a:active { text-decoration: underline; } -#font-info p { - display: none; -} -#font-info a.button, -#font-info a.button:link, -#font-info a.button:visited { - position: relative; - background: #e4e4e4; - color: #777; - display: inline-block; - padding: 0 1ex; - border-radius: 3px; - font-size: 14px; - line-height: 22px; - margin-top: 2px; -} -#font-info a.button:active { - top: 1px; -} label { margin-right: .5ex; font-style: italic; @@ -193,6 +186,8 @@ textarea, form { height: 100%; min-height: 100%; + position: relative; + z-index: 1; } .nav-button { all: unset; @@ -225,3 +220,24 @@ label[for="select-theme"] { .CodeMirror-gutters { background: transparent; } + +.toggle { + display: none; + position: fixed; + z-index: 2; + top: 0; + left: 0; + height: 100%; + width: 40px; +} +@media screen and (max-width: 56em) { + .toggle { + display: block; + } + body.menu-visible .toggle { + left: 28em; + } + body:not(.menu-visible) .article-wrapper { + width: 10px; + } +} diff --git a/index.html b/index.html index 6f3306f..b962d22 100755 --- a/index.html +++ b/index.html @@ -89,101 +89,105 @@ -
-
-
- -
-
-
-

- - -

-

- - -

-

- - -

-
+
+
+
+
+ +
+
+
+

+ + +

+

+ + +

+

+ + +

+
-
-

- - - - -

-

- - -

-
+
+

+ + + + +

+

+ + +

+
- + -
+
+
+
diff --git a/index.js b/index.js index 1351131..283894c 100644 --- a/index.js +++ b/index.js @@ -38,6 +38,7 @@ function selectFont() { $("#select-font a[data-value='" + font + "']").addClass("active"); document.cookie = "font=" + font + ";max-age=172800"; + $("body").removeClass("menu-visible"); } window.onhashchange = selectFont; @@ -123,4 +124,8 @@ $(document).ready(function(){ $("#select-theme :selected").prev().prop("selected", true); selectTheme(); }); + + $(".toggle").click(function(){ + $("body").toggleClass("menu-visible"); + }) });