From 2dccac7be760e4e98f8c9ecf8612e267b40e9896 Mon Sep 17 00:00:00 2001 From: Colin Date: Tue, 6 Oct 2020 23:17:53 -0400 Subject: [PATCH] make haste-server responsive, new layout --- static/application.css | 180 +++++++++++++++++++---------------------- static/index.html | 61 ++++++++++---- 2 files changed, 128 insertions(+), 113 deletions(-) diff --git a/static/application.css b/static/application.css index 8bd3131..7e2711d 100644 --- a/static/application.css +++ b/static/application.css @@ -1,7 +1,8 @@ body { - background: #002B36; - padding: 20px 50px; - margin: 0px; + background: #263238; + padding: 0 0 80px; + margin: 0; + font-family: sans-serif; } /* textarea */ @@ -21,10 +22,14 @@ textarea { margin-bottom: 0; } +.logo a:hover svg path { + fill: #fff; +} + /* the line numbers */ #linenos { - color: #7d7d7d; + color: #7d7d7d; z-index: -1000; position: absolute; top: 20px; @@ -45,7 +50,11 @@ textarea { border: 0px; outline: none; font-size: 13px; - overflow: inherit; + overflow: inherit; +} + +#box.hljs { + background: transparent; } #box code { @@ -57,119 +66,98 @@ textarea { #key { position: fixed; - top: 0px; + bottom: 0px; + left: 0; right: 0px; z-index: +1000; /* watch out */ } -#box1 { - padding: 5px; - text-align: center; - background: #00222b; +button { + font-size: 14px; + color: #929EA4; + background: transparent; + outline: none; + border: none; + padding: 4px 10px; + cursor: not-allowed; } -#box2 { - background: #08323c; - font-size: 0px; - padding: 0px 5px; -} - -#box1 a.logo, #box1 a.logo:visited { - display: inline-block; - background: url(logo.png); - width: 126px; - height: 42px; -} - -#box1 a.logo:hover { - background-position: 0 bottom; -} - -#box2 .function { - background: url(function-icons.png); - width: 32px; - height: 37px; - display: inline-block; - position: relative; -} - -#box2 .link embed { - vertical-align: bottom; /* fix for zeroClipboard style */ -} - -#box2 .function.enabled:hover { - cursor: hand; +button.enabled { + color: #FFF; cursor: pointer; } -#pointer { +.button-wrap .label { + display: none; + position: absolute; + top: -36px; + left: 50%; + margin-left: -46px; + text-align: center; + background: #15191b; + color: #fff; + padding: 8px; + border-radius: 3px; + font-size: 12px; + width: 76px; +} + +.button-wrap .label.label--small { + margin-left: -30px; + width: 44px; +} + +.button-wrap:hover .label { display: block; - height: 5px; - width: 10px; - background: url(hover-dropdown-tip.png); - bottom: 0px; - position: absolute; - margin: auto; - left: 0px; - right: 0px; } -#box3, #messages li { - background: #173e48; - font-family: Helvetica, sans-serif; - font-size: 12px; - line-height: 14px; - padding: 10px 15px; - user-select: none; +.menu { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: #263238; } -#box3 .label, #messages li { - color: #fff; - font-weight: bold; +.menu-actions { + display: flex; } -#box3 .shortcut { - color: #c4dce3; - font-weight: normal; -} - -#box2 .function.save { background-position: -5px top; } -#box2 .function.enabled.save { background-position: -5px center; } -#box2 .function.enabled.save:hover { background-position: -5px bottom; } - -#box2 .function.new { background-position: -42px top; } -#box2 .function.enabled.new { background-position: -42px center; } -#box2 .function.enabled.new:hover { background-position: -42px bottom; } - -#box2 .function.duplicate { background-position: -79px top; } -#box2 .function.enabled.duplicate { background-position: -79px center; } -#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; } - -#box2 .function.raw { background-position: -116px top; } -#box2 .function.enabled.raw { background-position: -116px center; } -#box2 .function.enabled.raw:hover { background-position: -116px bottom; } - -#box2 .function.twitter { background-position: -153px top; } -#box2 .function.enabled.twitter { background-position: -153px center; } -#box2 .function.enabled.twitter:hover { background-position: -153px bottom; } -#box2 .button-picture{ border-width: 0; font-size: inherit; } - #messages { - position:fixed; - top:0px; - right:138px; - margin:0; - padding:0; - width:400px; + position: fixed; + top: 0px; + right: 138px; + margin: 0; + padding: 0; + width: 400px; } #messages li { - background:rgba(23,62,72,0.8); - margin:0 auto; - list-style:none; + background: rgba(23,62,72,0.8); + margin: 0 auto; + list-style: none; } #messages li.error { - background:rgba(102,8,0,0.8); + background: rgba(102,8,0,0.8); } +@media only screen and (max-width: 600px) { + .logo, .label { + display: none !important; + } + .menu { + padding: 24px 12px !important; + } + .menu-actions { + width: 100%; + } + .menu-actions button { + padding-left: 0; + padding-right: 0; + } + .menu-actions .button-wrap { + flex: auto; + text-align: center; + } +} \ No newline at end of file diff --git a/static/index.html b/static/index.html index 34adb3d..55b3e91 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,7 @@ hastebin + @@ -41,27 +42,53 @@ -
- -
- +