3wordchant
/
oasis
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change theme to have sections with color contrast 

I think I was overusing borders and it gave the UI a wireframey skeleton
feel that wasn't very fleshed out. The dependence on thin borders also
caused trouble when using themes with low color contrast, since you'd
have thin lines that were *also* low-contrast. Bad!

Instead, I'm using a "card UI" style with varying colors, which I think
looks better (???) and seems to be more compatible with more themes.
Happy to roll this back if others don't dig it.
This commit is contained in:
Christian Bundy 2019-12-14 13:29:04 -08:00
parent 072b8160bb
commit 5ce9cca2d1
No known key found for this signature in database
GPG Key ID: EB541AAEF4366237
4 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/assets/style.css
View File

@ -43,7 +43,11 @@
}
* {
scrollbar-color: var(--fg-status) var(--bg-status);
scrollbar-color: var(--fg-status) var(--bg);
}
::selection {
background-color: var(--bg-selection);
}
html {
@ -69,7 +73,7 @@ html {
}
main {
margin-top: var(--small);
margin: 0;
}
/* https://www.desmos.com/calculator/3elcf5cwhn */
@ -100,10 +104,11 @@ a {
button {
cursor: pointer;
background: var(--bg-status);
color: var(--fg);
background: var(--blue);
color: var(--bg);
border: 0;
padding: var(--smaller) var(--small);
border-radius: var(--common-radius);
}
select,
@ -120,47 +125,12 @@ input {
pre {
overflow-x: auto;
background-color: var(--bg);
padding: var(--small);
padding: var(--smaller);
font-size: 92%;
border-radius: var(--common-radius);
border: var(--thin) solid var(--bg-status);
}
.message.private {
background-color: var(--bg-status);
border-color: var(--bg-selection);
}
.message.thread-target {
border-color: var(--blue);
margin-bottom: var(--thin);
box-shadow: 0 0 var(--medium) var(--blue);
/* relative position to avoid having box-shadow overlapped */
position: relative;
}
.message img,
.message video {
max-width: 100%;
max-height: 100vh;
border: var(--thin) solid var(--bg-status);
border-radius: var(--common-radius);
}
.message audio {
width: 100%;
}
.message > :first-child {
margin-top: 0;
padding-top: 0;
}
.content > :last-child {
margin-bottom: 0;
}
.message code {
max-width: 100%;
overflow-wrap: break-word;
@ -182,20 +152,90 @@ pre {
border-radius: initial;
}
.message blockquote {
margin-left: 0;
border-left: var(--thick) solid var(--bg-status);
padding-left: var(--small);
}
.profile > img,
.profile > h1 {
display: inline-block;
}
.profile > img {
width: 4rem;
height: 4rem;
margin-right: var(--small);
border-radius: var(--common-radius);
}
.message.private {
background-color: var(--bg-selection);
}
.message.private ::selection {
background-color: var(--bg-status);
}
.message.private blockquote {
border-color: var(--fg-alt);
}
.message img,
.message video {
max-width: 100%;
max-height: 100vh;
border: var(--thin) solid var(--bg-status);
border-radius: var(--common-radius);
}
.message.private img,
.message.private video {
border-color: var(--bg-selection);
}
.message.private code {
background-color: var(--bg-selection);
border-color: var(--fg-alt);
}
.message.thread-target {
border: var(--thin) solid var(--blue);
box-shadow: 0 0 var(--medium) var(--blue);
}
.message audio {
width: 100%;
}
.message > :first-child {
margin-top: 0;
padding-top: 0;
}
.content > :last-child {
margin-bottom: 0;
}
@media screen {
html {
min-height: 100%;
color: var(--fg);
background-color: var(--bg);
background-color: var(--bg-status);
}
body {
width: 100%;
max-width: var(--measure);
margin: var(--small);
margin: 0;
}
}
nav {
margin: var(--small) 0;
}
nav > ul > li > a {
color: var(--fg);
text-decoration: none;
@ -206,19 +246,15 @@ nav > ul > li > a.current {
text-decoration: underline;
}
.message {
padding: var(--rhythm);
section {
padding: var(--small);
border-radius: var(--common-radius);
margin-top: var(--medium);
border: var(--thin) solid var(--bg-status);
margin: var(--thick) 0;
box-shadow: 0 var(--thin) var(--thin) rgba(0, 0, 0, 0.33);
word-wrap: break-word;
background: var(--bg);
}
.message.reply {
margin-top: calc(0px - var(--thin));
}
.message > header.metadata {
height: var(--rhythm);
display: flex;
@ -286,8 +322,9 @@ nav > ul > li > a.current {
color: var(--red);
}
form {
margin: var(--rhythm) 0;
label {
display: block;
margin-bottom: var(--smaller);
}
.message > footer > form {
@ -303,12 +340,6 @@ form {
padding: 0;
}
.message blockquote {
margin-left: 0;
border-left: var(--thick) solid var(--bg-status);
padding-left: var(--small);
}
nav > ul {
display: flex;
justify-content: space-between;
@ -326,18 +357,6 @@ nav > ul > li {
margin-bottom: var(--rhythm);
}
.profile > img,
.profile > h1 {
display: inline-block;
}
.profile > img {
width: 4rem;
height: 4rem;
margin-right: var(--small);
border-radius: var(--common-radius);
}
progress {
display: block;
width: 100%;
@ -358,7 +377,7 @@ textarea {
padding: var(--small);
resize: vertical;
width: 100%;
margin-bottom: var(--rhythm);
margin-bottom: var(--small);
height: 6rem;
transition: 0.0625s all ease;
border: var(--thin) solid var(--bg-status);
@ -399,6 +418,8 @@ summary {
table {
width: 100%;
display: block;
overflow-x: auto;
}
td,
@ -416,7 +437,3 @@ input[type="search"] {
width: 100%;
margin-bottom: var(--small);
}
::selection {
background-color: var(--bg-selection);
}

2
src/pages/inbox.js
View File

@ -1,6 +1,6 @@
module.exports = () => ''
const listView = require('./views/public')
const listView = require('./views/list')
const post = require('./models/post')
module.exports = async function publicPage () {

14
src/pages/views/public.js
View File

@ -3,6 +3,8 @@
const {
button,
form,
label,
section,
textarea
} = require('hyperaxe')
const template = require('./components/template')
@ -13,11 +15,13 @@ module.exports = ({ messages, prefix = null }) => {
return template(
prefix,
form({ action: publishForm, method: 'post' },
textarea({ required: true, name: 'text' }),
button({
type: 'submit'
}, 'submit')),
section(
form({ action: publishForm, method: 'post' },
label({ for: 'text' }, 'Publish a public message (cannot be edited or deleted)'),
textarea({ required: true, name: 'text' }),
button({ type: 'submit' }, 'submit')
)
),
messages.map((msg) => post({ msg }))
)
}

21
src/pages/views/search.js
View File

@ -2,13 +2,22 @@
const template = require('./components/template')
const post = require('./components/post')
const { form, input, button } = require('hyperaxe')
const {
form,
input,
button,
label,
section
} = require('hyperaxe')
module.exports = ({ messages, query }) => template(
form({ action: '/search', method: 'get' },
input({ required: true, type: 'search', name: 'query', value: query }),
button({
type: 'submit'
}, 'submit')),
section(
form({ action: '/search', method: 'get' },
label({ for: 'query' }, 'Search for messages that contain some word(s)'),
input({ required: true, type: 'search', name: 'query', value: query }),
button({
type: 'submit'
}, 'submit'))
),
messages.map((msg) => post({ msg }))
)