From bab0e42a0470b1f11d827227d366f6ee848d62eb Mon Sep 17 00:00:00 2001 From: tycrek Date: Fri, 15 Oct 2021 13:49:35 -0600 Subject: [PATCH] Converted view page to Tailwind --- tailwind.config.js | 28 +++++- tailwind.css | 24 +++++ views/css/ass.css | 36 ------- views/css/font.css | 5 - views/css/img.css | 5 - views/css/modest.css | 221 ------------------------------------------- views/css/view.css | 29 ------ views/head.pug | 2 +- views/view.pug | 33 +++---- 9 files changed, 65 insertions(+), 318 deletions(-) delete mode 100644 views/css/ass.css delete mode 100644 views/css/font.css delete mode 100644 views/css/img.css delete mode 100644 views/css/modest.css delete mode 100644 views/css/view.css diff --git a/tailwind.config.js b/tailwind.config.js index 7456f0e..27088ac 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,9 +11,33 @@ module.exports = { }, theme: { extend: { + fontFamily: { + main: ['"Josefin Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'] + }, + backgroundColor: { + 'body': '#212121', + }, colors: { - 'border': '#323232' + 'content-bg': '#151515', + 'primary': '#FD842D', + 'primary-dim': '#B64D02', + 'primary-dark': '#793301', + 'link-hover': '#FD710D', + 'link-active': '#DE5E02', + 'text-primary': '#BDBDBD', + }, + borderColor: { + 'primary-dim': '#B64D02' + }, + maxHeight: { + 'half-port': '50vh' + }, + borderRadius: { + '24': '24px' + }, + fontSize: { + 'footer': '0.9rem' } } } -}; \ No newline at end of file +}; diff --git a/tailwind.css b/tailwind.css index b5c61c9..038f758 100644 --- a/tailwind.css +++ b/tailwind.css @@ -1,3 +1,27 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.res-media { + @apply border-l-4 rounded max-h-half-port; +} + +.link { + @apply no-underline hover_no-underline active_no-underline visited_no-underline + + /* regular, visited */ + text-primary visited_text-primary + border-b-2 visited_border-b-2 + border-transparent visited_border-transparent + rounded-sm visited_rounded-sm + + /* hover */ + hover_text-link-hover + hover_border-primary-dim + + /* active */ + active_text-link-active + + /* transitions */ + ease-linear duration-150 transition-all; +} diff --git a/views/css/ass.css b/views/css/ass.css deleted file mode 100644 index 44ab2cd..0000000 --- a/views/css/ass.css +++ /dev/null @@ -1,36 +0,0 @@ -:root { - --color-primary: #fd842d; - --color-primary-dim: #B64D02; - --color-primary-dark: #793301; - - --color-link-hover: #FD710D; - --color-link-active: #DE5E02; -} - -/* Modest fixes */ -pre, code { background-color: #1A1A1A !important; } -h1, h2, h3 { border-bottom: 2px solid #323232 !important; } -pre { overflow-x: hidden !important; } - -/* Dark theme */ -body { - background-color: #212121 !important; - color: #BDBDBD !important; -} - -body, button { text-shadow: 1px 1px 1px black; } -code { color: #EEE !important; } -pre { border-radius: 16px; } - -/* Remove styles and colors from links */ -a, a:hover, a:active, a:visited { text-decoration: none; } -a, a:visited { - color: var(--color-primary) !important; - border-bottom: 2px solid; - border-bottom-color: transparent; - border-radius: 2px; - transition: color 150ms linear, border-bottom-color 150ms linear; -} -a:hover { color: var(--color-link-hover) !important; border-bottom-color: var(--color-primary-dim); } -a:active { color: var(--color-link-active) !important; } - diff --git a/views/css/font.css b/views/css/font.css deleted file mode 100644 index 1858dbf..0000000 --- a/views/css/font.css +++ /dev/null @@ -1,5 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap'); - -body, h1, h2, h3, h4, h5, h6, button { - font-family: 'Josefin Sans', sans-serif; -} diff --git a/views/css/img.css b/views/css/img.css deleted file mode 100644 index bb1a0f6..0000000 --- a/views/css/img.css +++ /dev/null @@ -1,5 +0,0 @@ -img, video, audio { - border-left-width: 4px; - border-left-style: solid; - border-radius: 4px; -} diff --git a/views/css/modest.css b/views/css/modest.css deleted file mode 100644 index 4f66fcd..0000000 --- a/views/css/modest.css +++ /dev/null @@ -1,221 +0,0 @@ -/* https://markdowncss.github.io/modest/ */ - -@media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } - } - - pre, - code { - font-family: Menlo, Monaco, "Courier New", monospace; - } - - pre { - padding: .5rem; - line-height: 1.25; - overflow-x: scroll; - } - - a, - a:visited { - color: #3498db; - } - - a:hover, - a:focus, - a:active { - color: #2980b9; - } - - .modest-no-decoration { - text-decoration: none; - } - - html { - font-size: 12px; - } - - @media screen and (min-width: 32rem) and (max-width: 48rem) { - html { - font-size: 15px; - } - } - - @media screen and (min-width: 48rem) { - html { - font-size: 16px; - } - } - - body { - line-height: 1.85; - } - - p, - .modest-p { - font-size: 1rem; - margin-bottom: 1.3rem; - } - - h1, - .modest-h1, - h2, - .modest-h2, - h3, - .modest-h3, - h4, - .modest-h4 { - margin: 1.414rem 0 .5rem; - font-weight: inherit; - line-height: 1.42; - } - - h1, - .modest-h1 { - margin-top: 0; - font-size: 3.998rem; - } - - h2, - .modest-h2 { - font-size: 2.827rem; - } - - h3, - .modest-h3 { - font-size: 1.999rem; - } - - h4, - .modest-h4 { - font-size: 1.414rem; - } - - h5, - .modest-h5 { - font-size: 1.121rem; - } - - h6, - .modest-h6 { - font-size: .88rem; - } - - small, - .modest-small { - font-size: .707em; - } - - /* https://github.com/mrmrs/fluidity */ - - img, - canvas, - iframe, - video, - svg, - select, - textarea { - max-width: 100%; - } - - @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700); - - @import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic); - - html { - font-size: 18px; - max-width: 100%; - } - - body { - color: #444; - font-family: 'Open Sans Condensed', sans-serif; - font-weight: 300; - margin: 0 auto; - max-width: 48rem; - line-height: 1.45; - padding: .25rem; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: Arimo, Helvetica, sans-serif; - } - - h1, - h2, - h3 { - border-bottom: 2px solid #fafafa; - margin-bottom: 1.15rem; - padding-bottom: .5rem; - text-align: center; - } - - blockquote { - border-left: 8px solid #fafafa; - padding: 1rem; - } - - pre, - code { - background-color: #fafafa; - } \ No newline at end of file diff --git a/views/css/view.css b/views/css/view.css deleted file mode 100644 index 5231cc6..0000000 --- a/views/css/view.css +++ /dev/null @@ -1,29 +0,0 @@ -#container { - display: flex; - - justify-content: center; - align-items: center; - text-align: center; - - width: 100%; - height: 100%; -} - -#content { - background-color: #151515; - border-radius: 24px; -} - -#footer { - font-size-adjust: 0.3; - margin-left: 16px; - margin-right: 16px; -} - -img, video, audio { - max-height: 50vh; -} - -figcaption strong { - font-weight: bold; -} diff --git a/views/head.pug b/views/head.pug index 34353ac..ac49362 100644 --- a/views/head.pug +++ b/views/head.pug @@ -1,7 +1,7 @@ meta(name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover') //- Markdown stylesheet & Highlight.js theme -style: include css/ass.css +link(rel='stylesheet', href='/css') style: include css/dracula.highlight.js.css //- jQuery; Highlight.js for codeblocks; Font Awesome diff --git a/views/view.pug b/views/view.pug index 4e1cf6f..8d4607a 100644 --- a/views/view.pug +++ b/views/view.pug @@ -2,14 +2,9 @@ html head title!=title include head - style: include css/font.css - style. - body, h1, h2, h3, h4, h5, h6 { font-size: larger; } - style: include css/view.css if color !== null - style: include css/img.css style. - img, video, audio { border-color: #{color}; } + .res-media { border-color: #{color}; } // Open Graph (https://ogp.me/) meta(property='og:type' content=ogtype) @@ -26,24 +21,24 @@ html * { display: none !important; } meta(http-equiv='refresh' content=`0; url='${resourceAttr.src}'`) - body - #container - #content - h4!=title - figure - if fileIs.video - video#media(controls loop muted playsinline preload='metadata')&attributes(resourceAttr) + body.font-main.text-text-primary.bg-body + .w-full.h-full.flex.justify-center.items-center.text-center + .bg-content-bg.rounded-24 + h4.mt-6.mb-4.text-3xl.font-main!=title + figure.block.mx-10.my-4 + if fileIs.video + video.res-media(controls loop muted playsinline preload='metadata')&attributes(resourceAttr) else if fileIs.image - img#media(decoding='async')&attributes(resourceAttr) + img.res-media(decoding='async')&attributes(resourceAttr) else if fileIs.audio - audio#media(controls loop preload='metadata')&attributes(resourceAttr) + audio.res-media(controls loop preload='metadata')&attributes(resourceAttr) else code!=mimetype figcaption br - span Uploaded by #[strong!=uploader] + span.text-2xl Uploaded by #[strong!=uploader] br - small #{timestamp} (#{size}) + span #{timestamp} (#{size}) br - small: a(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download - #footer: p Image hosted by #[a#footer-link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server + span: a.link(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download + .mx-4.mb-8.text-footer: p Image hosted by #[a.link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server