ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

readability enhancements: text size/color/line height

Browse Source
This commit is contained in:
keyan 2022-02-09 13:15:38 -06:00
parent ac19d89ba8
commit ef739d97fc
15 changed files with 112 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/accordian-item.js
View File

@ -3,7 +3,7 @@ import ArrowRight from '../svgs/arrow-right-s-fill.svg'
import ArrowDown from '../svgs/arrow-down-s-fill.svg' import ArrowDown from '../svgs/arrow-down-s-fill.svg'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
export default function AccordianItem ({ header, body, headerColor = 'grey', show }) { export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) {
const [open, setOpen] = useState(show) const [open, setOpen] = useState(show)
useEffect(() => { useEffect(() => {

3
components/comment.module.css
View File

@ -33,7 +33,7 @@
.collapser { .collapser {
cursor: pointer; cursor: pointer;
fill: grey; fill: var(--theme-grey);
width: 45px; width: 45px;
margin-left: auto; margin-left: auto;
user-select: none; user-select: none;
@ -78,6 +78,7 @@
.hunk { .hunk {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0.15rem;
} }
.comment:not(:last-of-type) { .comment:not(:last-of-type) {

48
components/footer.js
View File

@ -20,7 +20,7 @@ const COLORS = {
body: '#f5f5f5', body: '#f5f5f5',
color: '#212529', color: '#212529',
navbarVariant: 'light', navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.5)', navLink: 'rgba(0, 0, 0, 0.55)',
navLinkFocus: 'rgba(0, 0, 0, 0.7)', navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)', navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da', borderColor: '#ced4da',
@ -30,13 +30,17 @@ const COLORS = {
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)', dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)', commentBg: 'rgba(0, 0, 0, 0.03)',
clickToContextColor: 'rgba(0, 0, 0, 0.05)', clickToContextColor: 'rgba(0, 0, 0, 0.05)',
brandColor: 'rgba(0, 0, 0, 0.9)' brandColor: 'rgba(0, 0, 0, 0.9)',
grey: '#707070',
link: '#007cbe',
linkHover: '#004a72',
linkVisited: '#7acaf5'
}, },
dark: { dark: {
body: '#000000', body: '#000000',
inputBg: '#000000', inputBg: '#000000',
inputDisabledBg: '#000000', inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.5)', navLink: 'rgba(255, 255, 255, 0.55)',
navLinkFocus: 'rgba(255, 255, 255, 0.75)', navLinkFocus: 'rgba(255, 255, 255, 0.75)',
navLinkActive: 'rgba(255, 255, 255, 0.9)', navLinkActive: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.5)', borderColor: 'rgba(255, 255, 255, 0.5)',
@ -45,7 +49,11 @@ const COLORS = {
commentBg: 'rgba(255, 255, 255, 0.04)', commentBg: 'rgba(255, 255, 255, 0.04)',
clickToContextColor: 'rgba(255, 255, 255, 0.08)', clickToContextColor: 'rgba(255, 255, 255, 0.08)',
color: '#f8f9fa', color: '#f8f9fa',
brandColor: 'var(--primary)' brandColor: 'var(--primary)',
grey: '#969696',
link: '#2e99d1',
linkHover: '#007cbe',
linkVisited: '#066ba3'
} }
} }
@ -60,16 +68,16 @@ const handleThemeChange = (dark) => {
const ChatPopover = ( const ChatPopover = (
<Popover> <Popover>
<Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}> <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
<a <a
href='https://tribes.sphinx.chat/t/stackerzchat' className='text-reset d-inline-flex' href='https://tribes.sphinx.chat/t/stackerzchat' className='text-dark d-inline-flex'
target='_blank' rel='noreferrer' target='_blank' rel='noreferrer'
> >
sphinx sphinx
</a> </a>
<span className='mx-2'> \ </span> <span className='mx-2 text-dark'> \ </span>
<a <a
href='https://t.me/stackernews' className='text-reset d-inline-flex' href='https://t.me/stackernews' className='text-dark d-inline-flex'
target='_blank' rel='noreferrer' target='_blank' rel='noreferrer'
> >
telegram telegram
@ -102,39 +110,39 @@ export default function Footer ({ noLinks }) {
<footer> <footer>
<Container className='mb-3 mt-4'> <Container className='mb-3 mt-4'>
{!noLinks && {!noLinks &&
<div className='mb-2' style={{ fontWeight: 500, opacity: 0.5 }}> <div className='mb-2' style={{ fontWeight: 500 }}>
{mounted && {mounted &&
<div className='mb-2'> <div className='mb-2'>
{darkMode.value {darkMode.value
? <Sun onClick={() => darkMode.toggle()} className='theme' /> ? <Sun onClick={() => darkMode.toggle()} className='fill-grey theme' />
: <Moon onClick={() => darkMode.toggle()} className='theme' />} : <Moon onClick={() => darkMode.toggle()} className='fill-grey theme' />}
</div>} </div>}
<Link href='/faq' passHref> <Link href='/faq' passHref>
<a className='text-reset d-inline-flex'> <a className='nav-link p-0 d-inline-flex'>
faq faq
</a> </a>
</Link> </Link>
<span className='mx-2'> \ </span> <span className='mx-2 text-muted'> \ </span>
<Link href='/story' passHref> <Link href='/story' passHref>
<a className='text-reset d-inline-flex'> <a className='nav-link p-0 d-inline-flex'>
story story
</a> </a>
</Link> </Link>
<span className='mx-2'> \ </span> <span className='mx-2 text-muted'> \ </span>
<a <a
href='https://plausible.io/stacker.news' className='text-reset d-inline-flex' href='https://plausible.io/stacker.news' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer' target='_blank' rel='noreferrer'
> >
analytics analytics
</a> </a>
<span className='mx-2'> \ </span> <span className='mx-2 text-muted'> \ </span>
<OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose> <OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose>
<div className='text-reset d-inline-flex' style={{ cursor: 'pointer' }}> <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
chat chat
</div> </div>
</OverlayTrigger> </OverlayTrigger>
<span className='mx-2'> \ </span> <span className='mx-2 text-muted'> \ </span>
<a href='/rss' className='text-reset d-inline-flex' target='_blank'> <a href='/rss' className='nav-link p-0 d-inline-flex' target='_blank'>
rss rss
</a> </a>
</div>} </div>}

2
components/header.js
View File

@ -162,7 +162,7 @@ export default function Header () {
<Nav.Item className='d-md-flex d-none'> <Nav.Item className='d-md-flex d-none'>
<Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link> <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
</Nav.Item> </Nav.Item>
<Nav.Item className='text-monospace' style={{ opacity: '.5' }}> <Nav.Item className='text-monospace nav-link'>
<Price /> <Price />
</Nav.Item> </Nav.Item>
<Corner /> <Corner />

6
components/item-full.js
View File

@ -37,7 +37,11 @@ function ItemEmbed ({ item }) {
const darkMode = useDarkMode() const darkMode = useDarkMode()
const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/) const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
if (twitter?.groups?.id) { if (twitter?.groups?.id) {
return <TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} /> return (
<div className='mt-1'>
<TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
</div>
)
} }
const youtube = item.url?.match(/(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)(?<id>[_0-9a-z-]+)/i) const youtube = item.url?.match(/(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)(?<id>[_0-9a-z-]+)/i)

2
components/item.js
View File

@ -24,7 +24,7 @@ export default function Item ({ item, rank, children }) {
useEffect(() => { useEffect(() => {
setWrap( setWrap(
parseInt(window.getComputedStyle(titleRef.current).lineHeight) < Math.ceil(parseFloat(window.getComputedStyle(titleRef.current).lineHeight)) <
titleRef.current.clientHeight) titleRef.current.clientHeight)
}, []) }, [])

19
components/item.module.css
View File

@ -28,19 +28,19 @@
} }
a.link:visited { a.link:visited {
color: #7acaf5; color: var(--theme-linkVisited) !important;
} }
.other { .other {
font-size: 70%; font-size: 80%;
color: grey; color: var(--theme-grey);
margin-bottom: .15rem;
} }
.item { .item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
min-width: 0; min-width: 0;
margin-bottom: .2rem;
} }
.item .cover { .item .cover {
@ -51,7 +51,7 @@ a.link:visited {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
margin-bottom: .3rem; margin-bottom: .3rem;
line-height: 1rem; line-height: 1.06rem;
} }
.main { .main {
@ -60,7 +60,6 @@ a.link:visited {
} }
.children { .children {
margin-top: .25rem;
margin-left: 28px; margin-left: 28px;
} }
@ -68,7 +67,7 @@ a.link:visited {
font-weight: 600; font-weight: 600;
margin-top: 4px; margin-top: 4px;
display: flex; display: flex;
color: grey; color: var(--theme-grey);
font-size: 90%; font-size: 90%;
} }
@ -78,7 +77,7 @@ a.link:visited {
} }
.skeleton .title { .skeleton .title {
background-color: grey; background-color: var(--theme-grey);
width: 500px; width: 500px;
border-radius: .4rem; border-radius: .4rem;
height: 17px; height: 17px;
@ -87,7 +86,7 @@ a.link:visited {
.skeleton .link { .skeleton .link {
height: 14px; height: 14px;
background-color: grey; background-color: var(--theme-grey);
width: 800px; width: 800px;
border-radius: .3rem; border-radius: .3rem;
margin: 2px 0px; margin: 2px 0px;
@ -98,7 +97,7 @@ a.link:visited {
width: 42px; width: 42px;
height: 70%; height: 70%;
border-radius: .27rem; border-radius: .27rem;
background-color: grey; background-color: var(--theme-grey);
margin-right: .5rem; margin-right: .5rem;
} }

2
components/more-footer.js
View File

@ -28,7 +28,7 @@ export default function MoreFooter ({ cursor, fetchMore, Skeleton, noMoreText })
) )
} else { } else {
Footer = () => ( Footer = () => (
<div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.6' }}>{noMoreText || 'GENISIS'}</div> <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>{noMoreText || 'GENISIS'}</div>
) )
} }

7
components/reply.module.css
View File

@ -6,16 +6,17 @@
.replyButtons { .replyButtons {
font-size: 70%; font-size: 70%;
color: grey; color: var(--theme-grey);
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding-bottom: .5rem; padding-bottom: .5rem;
line-height: 1rem; line-height: 1rem;
vertical-align: middle;
} }
.skeleton .input { .skeleton .input {
background-color: grey; background-color: var(--theme-grey);
width: 100%; width: 100%;
border-radius: .4rem; border-radius: .4rem;
height: 115px; height: 115px;
@ -23,7 +24,7 @@
} }
.skeleton .button { .skeleton .button {
background-color: grey; background-color: var(--theme-grey);
border-radius: .4rem; border-radius: .4rem;
margin-top: .25rem; margin-top: .25rem;
width: 71px; width: 71px;

4
components/search.js
View File

@ -13,9 +13,9 @@ export default function Search () {
const [atBottom, setAtBottom] = useState() const [atBottom, setAtBottom] = useState()
useEffect(() => { useEffect(() => {
setAtBottom((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) setAtBottom(Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight)
window.onscroll = function (ev) { window.onscroll = function (ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { if (Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
setAtBottom(true) setAtBottom(true)
} else { } else {
setAtBottom(false) setAtBottom(false)

23
components/text.module.css
View File

@ -1,8 +1,14 @@
.text { .text {
font-size: 90%; font-size: 94%;
font-family: inherit; font-family: inherit;
word-break: break-word; word-break: break-word;
line-height: 1rem; line-height: 140%;
}
@media screen and (min-width: 767px) {
.text {
line-height: 130%;
}
} }
.text p { .text p {
@ -15,8 +21,16 @@
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.text pre > div {
margin: 0 !important;
}
.text > *:last-child { .text > *:last-child {
margin-bottom: 0; margin-bottom: 0 !important;
}
.text blockquote > *:last-child {
margin-bottom: 0 !important;
} }
.text img { .text img {
@ -29,6 +43,7 @@
} }
.text blockquote { .text blockquote {
border-left: 2px solid #212529; border-left: 2px solid var(--theme-grey);
padding-left: 1rem; padding-left: 1rem;
margin: 0 0 0.5rem 0.5rem !important;
} }

16
public/darkmode.js
View File

@ -5,7 +5,7 @@ const COLORS = {
body: '#f5f5f5', body: '#f5f5f5',
color: '#212529', color: '#212529',
navbarVariant: 'light', navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.5)', navLink: 'rgba(0, 0, 0, 0.55)',
navLinkFocus: 'rgba(0, 0, 0, 0.7)', navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)', navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da', borderColor: '#ced4da',
@ -15,13 +15,17 @@ const COLORS = {
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)', dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)', commentBg: 'rgba(0, 0, 0, 0.03)',
clickToContextColor: 'rgba(0, 0, 0, 0.05)', clickToContextColor: 'rgba(0, 0, 0, 0.05)',
brandColor: 'rgba(0, 0, 0, 0.9)' brandColor: 'rgba(0, 0, 0, 0.9)',
grey: '#707070',
link: '#007cbe',
linkHover: '#004a72',
linkVisited: '#7acaf5'
}, },
dark: { dark: {
body: '#000000', body: '#000000',
inputBg: '#000000', inputBg: '#000000',
inputDisabledBg: '#000000', inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.5)', navLink: 'rgba(255, 255, 255, 0.55)',
navLinkFocus: 'rgba(255, 255, 255, 0.75)', navLinkFocus: 'rgba(255, 255, 255, 0.75)',
navLinkActive: 'rgba(255, 255, 255, 0.9)', navLinkActive: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.5)', borderColor: 'rgba(255, 255, 255, 0.5)',
@ -30,7 +34,11 @@ const COLORS = {
commentBg: 'rgba(255, 255, 255, 0.04)', commentBg: 'rgba(255, 255, 255, 0.04)',
clickToContextColor: 'rgba(255, 255, 255, 0.08)', clickToContextColor: 'rgba(255, 255, 255, 0.08)',
color: '#f8f9fa', color: '#f8f9fa',
brandColor: 'var(--primary)' brandColor: 'var(--primary)',
grey: '#969696',
link: '#2e99d1',
linkHover: '#007cbe',
linkVisited: '#066ba3'
} }
} }

37
styles/globals.scss
View File

@ -6,7 +6,7 @@ $theme-colors: (
"success" : #5c8001, "success" : #5c8001,
"twitter" : #1da1f2, "twitter" : #1da1f2,
"boost" : #8c25f4, "boost" : #8c25f4,
"grey" : #e9ecef "grey" : #e9ecef,
); );
$body-bg: #f5f5f5; $body-bg: #f5f5f5;
@ -51,7 +51,6 @@ $nav-tabs-link-hover-border-color: transparent;
$nav-tabs-link-active-border-color: #ced4da #ced4da $nav-tabs-link-active-bg; $nav-tabs-link-active-border-color: #ced4da #ced4da $nav-tabs-link-active-bg;
$tooltip-bg: #5c8001; $tooltip-bg: #5c8001;
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@font-face { @font-face {
@ -65,6 +64,10 @@ $tooltip-bg: #5c8001;
} }
} }
.text-muted {
color: var(--theme-grey) !important;
}
mark { mark {
background-color: var(--primary); background-color: var(--primary);
padding: 0 0.2rem; padding: 0 0.2rem;
@ -109,6 +112,14 @@ body {
height: 100%; height: 100%;
} }
a {
color: var(--theme-link);
}
a:hover {
color: var(--theme-linkHover);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: inherit; color: inherit;
background-color: var(--theme-inputBg); background-color: var(--theme-inputBg);
@ -157,11 +168,11 @@ body {
border-color: var(--theme-borderColor); border-color: var(--theme-borderColor);
} }
.navbar-nav .nav-link:not(.text-success) { .nav-link:not(.text-success) {
color: var(--theme-navLink) !important; color: var(--theme-navLink) !important;
} }
.navbar-nav .nav-link:not(.text-success):hover, .navbar-nav .nav-link:not(.text-success):focus { .nav-link:not(.text-success):hover, .nav-link:not(.text-success):focus {
color: var(--theme-navLinkFocus) !important; color: var(--theme-navLinkFocus) !important;
} }
@ -173,25 +184,25 @@ body {
color: var(--theme-navLinkFocus) !important; color: var(--theme-navLinkFocus) !important;
} }
.navbar-nav .dropdown-menu { .dropdown-menu {
background-color: var(--theme-inputBg); background-color: var(--theme-inputBg);
border: 1px solid var(--theme-borderColor); border: 1px solid var(--theme-borderColor);
} }
.navbar-nav .dropdown-item { .dropdown-item {
color: var(--theme-dropdownItemColor); color: var(--theme-dropdownItemColor);
} }
.navbar-nav .dropdown-item:hover { .dropdown-item:hover {
color: var(--theme-dropdownItemColorHover); color: var(--theme-dropdownItemColorHover);
} }
.navbar-nav .dropdown-item.active { .dropdown-item.active {
color: var(--theme-brandColor); color: var(--theme-brandColor);
text-shadow: 0 0 10px var(--primary); text-shadow: 0 0 10px var(--primary);
} }
.navbar-nav .dropdown-divider { .dropdown-divider {
border-top: 1px solid var(--theme-borderColor); border-top: 1px solid var(--theme-borderColor);
} }
@ -230,7 +241,7 @@ footer {
} }
.text-muted svg { .text-muted svg {
fill: #6c757d; fill: var(--theme-grey);
} }
.pointer { .pointer {
@ -343,7 +354,7 @@ textarea.form-control {
} }
.fill-grey { .fill-grey {
fill: grey; fill: var(--theme-grey);
} }
.fill-white { .fill-white {
@ -373,7 +384,7 @@ textarea.form-control {
.clouds { .clouds {
background-image: url('/clouds.jpeg') !important; background-image: url('/clouds.jpeg') !important;
background-color: grey; background-color:var(--theme-grey);
background-repeat: repeat; background-repeat: repeat;
background-origin: content-box; background-origin: content-box;
background-size: cover; background-size: cover;
@ -396,7 +407,7 @@ textarea.form-control {
.static { .static {
background: url('/giphy.gif'); background: url('/giphy.gif');
background-color: grey; background-color:var(--theme-grey);
background-repeat: repeat; background-repeat: repeat;
background-origin: content-box; background-origin: content-box;
background-size: cover; background-size: cover;

2
styles/index.module.css
View File

@ -1,5 +1,5 @@
.box { .box {
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: grey; background-color:var(--theme-grey);
} }

4
styles/invites.module.css
View File

@ -11,7 +11,7 @@
.other { .other {
font-weight: 500; font-weight: 500;
font-size: 70%; font-size: 70%;
color: grey; color: var(--theme-grey);
} }
.revoke { .revoke {
@ -20,7 +20,7 @@
.invite { .invite {
margin-bottom: .5rem; margin-bottom: .5rem;
} }Í
.invite:last-child { .invite:last-child {
margin-bottom: 0; margin-bottom: 0;