dark theme for now, light commented out until i add custom css option for boards

merge-requests/208/head
fatchan 5 years ago
parent bcf477b2d3
commit de1cf64f92
  1. 75
      gulp/res/css/style.css
  2. 2
      gulp/res/img/dice.svg
  3. 2
      views/custompages/faq.pug
  4. 28
      views/includes/postform.pug
  5. 4
      views/includes/stickynav.pug
  6. 2
      views/layout.pug
  7. 8
      views/pages/home.pug

@ -1,3 +1,4 @@
/*
:root { :root {
--background-top: #d6daf0; --background-top: #d6daf0;
--background-rest: #eef2ff; --background-rest: #eef2ff;
@ -22,8 +23,37 @@
--input-borders: #a9a9a9; --input-borders: #a9a9a9;
--input-color: #000; --input-color: #000;
--input-background: white; --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 { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -40,6 +70,10 @@ body {
margin: 0; margin: 0;
} }
main {
margin: 38px 0 0 0;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -69,6 +103,15 @@ pre {
overflow-wrap: break-word; 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 { .replies {
padding-top: 5px; padding-top: 5px;
font-size: smaller; font-size: smaller;
@ -213,14 +256,6 @@ p {
background: black!important; /*for detected coloring*/ background: black!important; /*for detected coloring*/
} }
.mode {
margin-top: 1px;
background-color: red;
color: white;
font-weight: bold;
text-align: center;
}
.banmessage { .banmessage {
color: red; color: red;
font-weight: bold; font-weight: bold;
@ -246,18 +281,25 @@ p {
background-image: url(/img/dice.svg); background-image: url(/img/dice.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
content: " "; content: " ";
} }
.dice { .dice {
color: red; color: var(--dice-color);
} }
.title, .required { .title, .required {
color: maroon;
font-weight: bold; font-weight: bold;
} }
.required {
color: maroon;
}
.title {
color: var(--title-color);
}
#bottom { #bottom {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -284,10 +326,6 @@ a .post-name:hover, a:hover {
align-items: flex-start; align-items: flex-start;
} }
.thread .anchor:first-child {
margin-top: -10px;
}
table { table {
background: var(--background-rest); background: var(--background-rest);
border: 1px solid var(--box-border-color); border: 1px solid var(--box-border-color);
@ -317,7 +355,6 @@ td, th {
right: 5px; right: 5px;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
padding: 5px;
} }
.post-container, .stickynav, .pages, .toggle-summary, .catalog-tile { .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile {
@ -510,8 +547,8 @@ textarea {
} }
.anchor { .anchor {
height: 10px; height: 50px;
margin-top: -5px; margin-top: -45px;
} }
.post-container.op { .post-container.op {

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -77,7 +77,7 @@ block content
p A tripcode is a password of sorts, which users can provide in the tripcode component of their name. This tripcode is used in conjunction with a server-known secret to generate the unique* tripcode portion of the name. Users can use the same tripcode, however with a long, secure, unique tripcode, it can be used as a form of identity between posts as it is unlikely that another user will find a different tripcode that generates the same output. It is important that you keep tripcodes secret if you use them for some form of identity. A compromised tripcode can be used for impersonation and cannot be revoked in any way. p A tripcode is a password of sorts, which users can provide in the tripcode component of their name. This tripcode is used in conjunction with a server-known secret to generate the unique* tripcode portion of the name. Users can use the same tripcode, however with a long, secure, unique tripcode, it can be used as a form of identity between posts as it is unlikely that another user will find a different tripcode that generates the same output. It is important that you keep tripcodes secret if you use them for some form of identity. A compromised tripcode can be used for impersonation and cannot be revoked in any way.
b Capcode b Capcode
p A capcode is a component of the name field only available to authenticated users. This includes admins, global staff, board owners and board moderators. The capcoded string will be prefixed with the users role on the board staff can make an authoritative post. p A capcode is a component of the name field only available to authenticated users. This includes admins, global staff, board owners and board moderators. The capcoded string will be prefixed with the users role so board staff can make an authoritative post.
.anchor#post-styling .anchor#post-styling
.table-container.flex-center .table-container.flex-center

@ -1,4 +1,7 @@
- const isThread = thread != null - const isThread = thread != null;
- const subjectRequired = (!isThread && board.settings.forceThreadSubject);
- const messageRequired = (!isThread && board.settings.forceThreadMessage) || (isThread && board.settings.forceReplyMessage);
- const fileRequired = (!isThread && board.settings.forceThreadFile) || (isThread && board.settings.forceReplyFile);
section.form-wrapper.flex-center section.form-wrapper.flex-center
form.form-post#postform(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST') form.form-post#postform(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST')
input(type='hidden' name='thread' value=isThread ? thread.postId : null) input(type='hidden' name='thread' value=isThread ? thread.postId : null)
@ -9,9 +12,9 @@ section.form-wrapper.flex-center
a.close.postform-style(href='#!') X a.close.postform-style(href='#!') X
section.row section.row
.label Subject .label Subject
if !isThread && board.settings.forceOPSubject if subjectRequired
.required * .required *
input(type='text', name='subject', autocomplete='off' maxlength='50' required=!isThread && board.settings.forceOPSubject) input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
section.row section.row
.label Email .label Email
input(type='text', name='email', autocomplete='off' maxlength='50') input(type='text', name='email', autocomplete='off' maxlength='50')
@ -22,23 +25,22 @@ section.form-wrapper.flex-center
input(type='checkbox', name='email', value='sage') input(type='checkbox', name='email', value='sage')
| Sage | Sage
a.close.postform-style(href='#!') X a.close.postform-style(href='#!') X
if !isThread section.row
section.row .label Subject
.label Subject if subjectRequired
if board.settings.forceOPSubject .required *
.required * input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
input(type='text', name='subject', autocomplete='off' maxlength='50' required=board.settings.forceOPSubject)
section.row section.row
.label Message .label Message
if !isThread && board.settings.forceOPMessage if messageRequired
.required * .required *
textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=!isThread && board.settings.forceOPMessage) textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=messageRequired)
if board.settings.maxFiles > 0 if board.settings.maxFiles > 0
section.row section.row
.label Files .label Files
if !isThread && board.settings.forceOPFile if fileRequired
.required * .required *
input(type='file', name='file' multiple required=!isThread && board.settings.forceOPFile) input(type='file', name='file' multiple required=fileRequired)
if board.settings.userPostSpoiler if board.settings.userPostSpoiler
label.postform-style.ph-5.ml-1 label.postform-style.ph-5.ml-1
input(type='checkbox', name='spoiler', value='true') input(type='checkbox', name='spoiler', value='true')

@ -1,4 +1,4 @@
nav.stickynav nav.stickynav
a(href='#bottom') [▼] a.nav-item(href='#bottom') [▼]
| |
a(href='#top') [▲] a.nav-item(href='#top') [▲]

@ -3,7 +3,7 @@ html
head head
include includes/head.pug include includes/head.pug
block head block head
body body#top
include includes/navbar.pug include includes/navbar.pug
main main
.container .container

@ -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. | This is an anonymous imageboard, a type of discussion board where users share images and text about various topics.
p p
| The primary difference to traditional forums is that anybody can make a post without the need to register an account or provide | 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 | any personal information. This lowers the barrier to entry and allows users to remain anonymous. This is especially important
| and what is said becomes more important than whoever says it. | when discussing topics that could have consequences if the posters identity was revealed, for example political persecution.
p 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-container.flex-center.mv-10.text-center
table table
tr tr

Loading…
Cancel
Save