diff --git a/front/index.html b/front/index.html index d4ce79c..5f1347d 100644 --- a/front/index.html +++ b/front/index.html @@ -2,58 +2,59 @@ - - - - - - - New paste - - + + + + + + + New paste + + -
+
1
-
-
- - - - - -
-
+ placeholder="Type your paste here"> + +
+ + + + + +
+ +
-

Recent plaks

- - +

Recent plaks

+ +
-
+
\ No newline at end of file diff --git a/front/style.css b/front/style.css new file mode 100644 index 0000000..b316714 --- /dev/null +++ b/front/style.css @@ -0,0 +1,202 @@ +section#recent-plaks { + bottom: 1rem; + display: flex; + flex-flow: column wrap; + gap: 9px; + position: absolute; + right: 1rem; + transition: 0.15s ease-in-out; + user-select: none; +} +section#recent-plaks .title { + align-items: center; + gap: 18px; + transition: 0.15s ease-in-out; +} +section#recent-plaks .title:hover { + border-color: #555; +} +section#recent-plaks .recent-plak { + align-items: center; + border: 3px solid #363636; + font-weight: 500; + justify-content: space-between; + outline: none; + padding: 8px 18px; + text-decoration: none; + transition: 0.15s ease-in-out; + width: 12rem; +} +section#recent-plaks .recent-plak:focus-visible { + border: 2px solid #bbb; +} +section#recent-plaks .recent-plak svg { + border-radius: 15px; + cursor: pointer; + height: 22px; + padding: 5px; + stroke: #e5e5e7; + stroke-width: 2.25; + width: 22px; + transition: 0.1s ease-in-out; +} +section#recent-plaks .recent-plak svg:hover { + background-color: #363636; +} +section#recent-plaks a { + color: inherit; + text-decoration: none; +} + +h3 { + font-size: 1.5rem; + margin: 0; + transition: 0.15s ease-in-out; + width: fit-content; +} + +::selection { + background-color: #d30f45; + color: #e5e5e7; +} + +::-webkit-scrollbar { + width: 9px; +} + +::-webkit-scrollbar-track { + background-color: #0f0f0f; +} + +::-webkit-scrollbar-thumb { + background-color: #444; + border-radius: 9px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #e5e5e7; +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400 700; + font-display: swap; + src: url(inter.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(jetbrainsmono.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +body { + background-color: #0f0f0f; + color: #e5e5e7; + font: 400 16px/2 "Inter", "system-ui", sans-serif; + margin: 0; + overflow-x: hidden; +} + +.fr { + display: flex; + flex-flow: row wrap; +} + +#line-numbers, +#content { + font: 400 14px/1.6 "JetBrains Mono", monospace; +} + +#line-numbers { + color: #888; + padding: 16px 1px; + text-align: center; + white-space: pre; + width: 30px; +} + +#content { + color: #e5e5e7; + height: 100%; + min-height: 90vh; + padding: 16px 16px 0 16px; + width: calc(100vw - 65px); +} + +.menu { + gap: 18px; + position: fixed; + right: 16px; + top: 16px; +} +.menu svg { + cursor: pointer; + height: 24px; + fill: none; + margin-bottom: -6px; + stroke: #e5e5e7; + stroke-width: 2; + width: 24px; +} + +button, +input, +select { + background-color: #0f0f0f; + border: 2px solid #363636; + color: #e5e5e7; + font: 500 14px/2 "Inter", "system-ui", sans-serif; + max-width: 145px; + outline: none; + padding: 3px 10px; + transition: border 0.15s ease; + width: min-content; +} +button::placeholder, +input::placeholder, +select::placeholder { + color: #888; +} +button:hover, +input:hover, +select:hover { + border-color: #777; +} +button:focus-visible, +input:focus-visible, +select:focus-visible { + border: 2px solid #bbb; +} + +select { + padding: 8px 10px; + width: fit-content; +} + +select:focus { + background-color: #0f0f0f; + transition: none; +} + +option { + background-color: #0f0f0f; + color: #e5e5e7; +} +option:focus { + background-color: #d30f45; + color: #0f0f0f; +} + +textarea { + background-color: inherit; + border: none; + margin: 0; + outline: none; + resize: none; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/front/style.scss b/front/style.scss index 623ff8d..3826ef7 100644 --- a/front/style.scss +++ b/front/style.scss @@ -4,7 +4,24 @@ @use 'recents'; @use 'misc'; -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono&display=swap'); +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400 700; + font-display: swap; + src: url(inter.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(jetbrainsmono.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + body { background-color: $background; @@ -93,7 +110,7 @@ select:focus { background-color: $background; transition: none; } -² + option { background-color: $background; color: $text; diff --git a/static/index.html b/static/index.html index cda5724..82763a0 100644 --- a/static/index.html +++ b/static/index.html @@ -2,60 +2,57 @@ - - - - - - - New plak • Plakken - - + + + + + + + New paste + + -
+
1
+ +
+ + + + + +
-
- - - - - -

Recent plaks

- - - + + +
diff --git a/static/inter.woff2 b/static/inter.woff2 new file mode 100644 index 0000000..4025543 Binary files /dev/null and b/static/inter.woff2 differ diff --git a/static/jetbrainsmono.woff2 b/static/jetbrainsmono.woff2 new file mode 100644 index 0000000..c3f046f Binary files /dev/null and b/static/jetbrainsmono.woff2 differ diff --git a/static/style.css b/static/style.css index a2908b6..7706b3c 100644 --- a/static/style.css +++ b/static/style.css @@ -1,5 +1,3 @@ -@charset "UTF-8"; -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono&display=swap"); section#recent-plaks { bottom: 1rem; display: flex; @@ -79,6 +77,22 @@ h3 { background-color: #e5e5e7; } +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400 700; + font-display: swap; + src: url(inter.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(jetbrainsmono.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} body { background-color: #0f0f0f; color: #e5e5e7; @@ -168,11 +182,11 @@ select:focus { transition: none; } -² option { +option { background-color: #0f0f0f; color: #e5e5e7; } -² option:focus { +option:focus { background-color: #d30f45; color: #0f0f0f; }