From 54f6aea10d9c9c5d51c0c3c1f5c0915c1e0bb595 Mon Sep 17 00:00:00 2001 From: Joe Biellik Date: Mon, 10 Aug 2020 20:45:56 +0100 Subject: [PATCH] Use stylesheets --- public/highlight.css | 48 +++++++++++++++++++++++ public/main.css | 91 ++++++++++++++++++++++++++++++++++++++++++++ views/highlight.pug | 44 +-------------------- views/index.pug | 80 +------------------------------------- 4 files changed, 141 insertions(+), 122 deletions(-) create mode 100644 public/highlight.css create mode 100644 public/main.css diff --git a/public/highlight.css b/public/highlight.css new file mode 100644 index 0000000..57416c5 --- /dev/null +++ b/public/highlight.css @@ -0,0 +1,48 @@ +html, body, .code-toolbar, pre, code { + height: 100%; +} + +pre[class*="language-"] { + margin: 0; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +pre[class*="language-"]::before, pre[class*="language-"]::after { + display: none; +} + +pre[class*="language-"] > code { + border-left: none; +} + +div.code-toolbar > .toolbar { + top: 1rem; + right: 2.5rem; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: none; + opacity: 1; +} + +div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { + padding: 0.5rem 1rem; + font-size: 1.25rem; + line-height: 1.5; + border-radius: 0.3rem; + color: #fff; + background-color: #007bff; + border-color: #007bff; + display: inline-block; + font-weight: 400; + transition: color 0.15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + border: 1px solid transparent; +} + +div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar span:focus, div.code-toolbar > .toolbar span:hover { + color: #fff; + background-color: #0069d9; + border-color: #0062cc; +} diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..9efcca5 --- /dev/null +++ b/public/main.css @@ -0,0 +1,91 @@ +html { + position: relative; + min-height: 100%; +} + +body { + font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +@media (min-width: 1800px) { + .container { + min-width: 1500px; + } +} +@media (min-width: 2400px) { + .container { + min-width: 1800px; + } +} +@media (min-width: 2800px) { + .container { + min-width: 80%; + } +} + +.display-3 { + font-size: 5.5rem; +} +@media (max-width: 575.98px) { + .display-3 { + font-size: 4rem; + } +} + +textarea { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + line-height: 1.5rem; + box-shadow: none; +} + +label { + width: 7.5rem; + font-size: 1.2rem; +} + +.border-gray { + border: 1px solid #ced4da; +} + +.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { + width: 18rem; +} +@media (max-width: 318px) { + .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { + width: 100%; + } +} + +#highlight { + max-width: 18rem; +} + +#expire { + max-width: 7.5rem; +} + +.bootstrap-touchspin { + max-width: 7.5rem; + float: left; + margin-right: 1rem; + margin-bottom: 1rem; +} + +#multiplier { + max-width: 9.5rem; +} + +button.btn-lg { + font-size: 1.5rem; +} +@media (min-width: 768px) { + button.btn-lg { + margin-top: -6rem; + } +} + +footer { + height: 2.5rem; + bottom: 0; + line-height: 2rem; +} diff --git a/views/highlight.pug b/views/highlight.pug index 958c2a2..a313043 100644 --- a/views/highlight.pug +++ b/views/highlight.pug @@ -4,49 +4,7 @@ block head link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css' integrity='sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=' crossorigin='anonymous') link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.css' integrity='sha256-P45OhhEWm49G8sadt2n5rDaWLa3xZbDOQhJliuaojH0=' crossorigin='anonymous') link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css' integrity='sha256-Afz2ZJtXw+OuaPX10lZHY7fN1+FuTE/KdCs+j7WZTGc=' crossorigin='anonymous') - - style. - html, body, .code-toolbar, pre, code { - height: 100%; - } - pre[class*="language-"] { - margin: 0; - } - pre[class*="language-"]::before, pre[class*="language-"]::after { - display: none; - } - pre[class*="language-"] > code { - border-left: none; - } - div.code-toolbar > .toolbar { - top: 1rem; - right: 2.5rem; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: none; - opacity: 1; - } - div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - padding: 0.5rem 1rem; - font-size: 1.25rem; - line-height: 1.5; - border-radius: 0.3rem; - color: #fff; - background-color: #007bff; - border-color: #007bff; - display: inline-block; - font-weight: 400; - transition: color 0.15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; - font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - border: 1px solid transparent; - } - div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar span:focus, div.code-toolbar > .toolbar span:hover { - color: #fff; - background-color: #0069d9; - border-color: #0062cc; - } + link(rel='stylesheet' href='/highlight.css') block content pre.line-numbers diff --git a/views/index.pug b/views/index.pug index 4ecbb8c..30bcc97 100644 --- a/views/index.pug +++ b/views/index.pug @@ -3,85 +3,7 @@ extends layout block head link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css' integrity='sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=' crossorigin='anonymous') link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.css' integrity='sha256-lo84g8NnZnmj6M802u7YMGf8mMuoQYV4xKEIb2DrRnk=' crossorigin='anonymous') - style. - html { - position: relative; - min-height: 100%; - } - body { - font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - } - @media (min-width: 1800px) { - .container { - min-width: 1500px; - } - } - @media (min-width: 2400px) { - .container { - min-width: 1800px; - } - } - @media (min-width: 2800px) { - .container { - min-width: 80%; - } - } - .display-3 { - font-size: 5.5rem; - } - @media (max-width: 575.98px) { - .display-3 { - font-size: 4rem; - } - } - textarea { - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - line-height: 1.5rem; - box-shadow: none; - } - label { - width: 7.5rem; - font-size: 1.2rem; - } - .border-gray { - border: 1px solid #ced4da; - } - .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { - width: 18rem; - } - @media (max-width: 318px) { - .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { - width: 100%; - } - } - #highlight { - max-width: 18rem; - } - #expire { - max-width: 7.5rem; - } - .bootstrap-touchspin { - max-width: 7.5rem; - float: left; - margin-right: 1rem; - margin-bottom: 1rem; - } - #multiplier { - max-width: 9.5rem; - } - button.btn-lg { - font-size: 1.5rem; - } - @media (min-width: 768px) { - button.btn-lg { - margin-top: -6rem; - } - } - footer { - height: 2.5rem; - bottom: 0; - line-height: 2rem; - } + link(rel='stylesheet' href='/main.css') block content a.position-absolute.dropdown-menu-right.d-none.d-sm-block(href='https://github.com/JoeBiellik/paste')