From de1cf64f92d011c6646c3f2c3c02d5d4eb31e2bd Mon Sep 17 00:00:00 2001 From: fatchan Date: Sun, 11 Aug 2019 09:44:18 +0000 Subject: [PATCH] dark theme for now, light commented out until i add custom css option for boards --- gulp/res/css/style.css | 75 +++++++++++++++++++++++++++--------- gulp/res/img/dice.svg | 2 +- views/custompages/faq.pug | 2 +- views/includes/postform.pug | 28 +++++++------- views/includes/stickynav.pug | 4 +- views/layout.pug | 2 +- views/pages/home.pug | 8 ++-- 7 files changed, 81 insertions(+), 40 deletions(-) diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index bc8b869c..a1cb06fe 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -1,3 +1,4 @@ +/* :root { --background-top: #d6daf0; --background-rest: #eef2ff; @@ -22,8 +23,37 @@ --input-borders: #a9a9a9; --input-color: #000; --input-background: white; + --dice-color: darkorange; + --title-color: #d70000; +} +*/ +:root { +--background-top: #1d1f21; +--background-rest: #1d1f21; +--post-color: #282a2e; +--post-outline-color: #282a2e; +--label-color: #282a2e; +--box-border-color: #111; +--transparent-darken: #00000010; +--highlighted-post-color: #1d1d21; +--highlighted-post-outline-color: #111; +--report-color: #fca; +--report-outline-color: #c97; +--board-title: #c5c8c6; +--hr: #282a2e; +--font-color: #c5c8c6; +--name-color: #c5c8c6; +--capcode-color: #f00; +--subject-color: #b294bb; +--link-color: #5f89ac; +--post-link-color: #5f89ac; +--link-hover: #81a2be; +--input-borders: #111; +--input-color: #c5c8c6; +--input-background: #282a2e; +--dice-color: darkorange; +--title-color: #d70000; } - html { scroll-behavior: smooth; } @@ -40,6 +70,10 @@ body { margin: 0; } +main { + margin: 38px 0 0 0; +} + .row { display: flex; flex-direction: row; @@ -69,6 +103,15 @@ pre { overflow-wrap: break-word; } +.navbar { + background: var(--post-color); + border-bottom: 1px solid var(--box-border-color); + position: fixed; + width: 100%; + z-index: 1; + top: 0; +} + .replies { padding-top: 5px; font-size: smaller; @@ -213,14 +256,6 @@ p { background: black!important; /*for detected coloring*/ } -.mode { - margin-top: 1px; - background-color: red; - color: white; - font-weight: bold; - text-align: center; -} - .banmessage { color: red; font-weight: bold; @@ -246,18 +281,25 @@ p { background-image: url(/img/dice.svg); background-repeat: no-repeat; background-size: contain; - content: " "; + content: " "; } .dice { - color: red; + color: var(--dice-color); } .title, .required { - color: maroon; font-weight: bold; } +.required { + color: maroon; +} + +.title { + color: var(--title-color); +} + #bottom { margin-bottom: 10px; } @@ -284,10 +326,6 @@ a .post-name:hover, a:hover { align-items: flex-start; } -.thread .anchor:first-child { - margin-top: -10px; -} - table { background: var(--background-rest); border: 1px solid var(--box-border-color); @@ -317,7 +355,6 @@ td, th { right: 5px; position: fixed; z-index: 1; - padding: 5px; } .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile { @@ -510,8 +547,8 @@ textarea { } .anchor { - height: 10px; - margin-top: -5px; + height: 50px; + margin-top: -45px; } .post-container.op { diff --git a/gulp/res/img/dice.svg b/gulp/res/img/dice.svg index 380e2e9a..202fb88b 100644 --- a/gulp/res/img/dice.svg +++ b/gulp/res/img/dice.svg @@ -47,7 +47,7 @@ > 0 section.row .label Files - if !isThread && board.settings.forceOPFile + if fileRequired .required * - input(type='file', name='file' multiple required=!isThread && board.settings.forceOPFile) + input(type='file', name='file' multiple required=fileRequired) if board.settings.userPostSpoiler label.postform-style.ph-5.ml-1 input(type='checkbox', name='spoiler', value='true') diff --git a/views/includes/stickynav.pug b/views/includes/stickynav.pug index 6ed93a2b..6a6d05a1 100644 --- a/views/includes/stickynav.pug +++ b/views/includes/stickynav.pug @@ -1,4 +1,4 @@ nav.stickynav - a(href='#bottom') [▼] + a.nav-item(href='#bottom') [▼] | - a(href='#top') [▲] + a.nav-item(href='#top') [▲] diff --git a/views/layout.pug b/views/layout.pug index 4e81e451..a67bb1d7 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -3,7 +3,7 @@ html head include includes/head.pug block head - body + body#top include includes/navbar.pug main .container diff --git a/views/pages/home.pug b/views/pages/home.pug index ccf226d5..03ad7d7f 100644 --- a/views/pages/home.pug +++ b/views/pages/home.pug @@ -15,10 +15,12 @@ block content | This is an anonymous imageboard, a type of discussion board where users share images and text about various topics. p | The primary difference to traditional forums is that anybody can make a post without the need to register an account or provide - | any personal information. This has numerous advantages. The bar for entry is lowered, users can remain anonymous - | and what is said becomes more important than whoever says it. + | any personal information. This lowers the barrier to entry and allows users to remain anonymous. This is especially important + | when discussing topics that could have consequences if the posters identity was revealed, for example political persecution. p - | Choose a board below and join the discussion! + | Choose a board below to join the discussion, or + a(href='/create.html') create your own + | . .table-container.flex-center.mv-10.text-center table tr