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

readability enhancements: text size/color/line height

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 { 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)
useEffect(() => {

3
components/comment.module.css
View File

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

48
components/footer.js
View File

@ -20,7 +20,7 @@ const COLORS = {
body: '#f5f5f5',
color: '#212529',
navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.5)',
navLink: 'rgba(0, 0, 0, 0.55)',
navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da',
@ -30,13 +30,17 @@ const COLORS = {
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)',
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: {
body: '#000000',
inputBg: '#000000',
inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.5)',
navLink: 'rgba(255, 255, 255, 0.55)',
navLinkFocus: 'rgba(255, 255, 255, 0.75)',
navLinkActive: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.5)',
@ -45,7 +49,11 @@ const COLORS = {
commentBg: 'rgba(255, 255, 255, 0.04)',
clickToContextColor: 'rgba(255, 255, 255, 0.08)',
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 = (
<Popover>
<Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}>
<Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
<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'
>
sphinx
</a>
<span className='mx-2'> \ </span>
<span className='mx-2 text-dark'> \ </span>
<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'
>
telegram
@ -102,39 +110,39 @@ export default function Footer ({ noLinks }) {
<footer>
<Container className='mb-3 mt-4'>
{!noLinks &&
<div className='mb-2' style={{ fontWeight: 500, opacity: 0.5 }}>
<div className='mb-2' style={{ fontWeight: 500 }}>
{mounted &&
<div className='mb-2'>
{darkMode.value
? <Sun onClick={() => darkMode.toggle()} className='theme' />
: <Moon onClick={() => darkMode.toggle()} className='theme' />}
? <Sun onClick={() => darkMode.toggle()} className='fill-grey theme' />
: <Moon onClick={() => darkMode.toggle()} className='fill-grey theme' />}
</div>}
<Link href='/faq' passHref>
<a className='text-reset d-inline-flex'>
<a className='nav-link p-0 d-inline-flex'>
faq
</a>
</Link>
<span className='mx-2'> \ </span>
<span className='mx-2 text-muted'> \ </span>
<Link href='/story' passHref>
<a className='text-reset d-inline-flex'>
<a className='nav-link p-0 d-inline-flex'>
story
</a>
</Link>
<span className='mx-2'> \ </span>
<span className='mx-2 text-muted'> \ </span>
<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'
>
analytics
</a>
<span className='mx-2'> \ </span>
<span className='mx-2 text-muted'> \ </span>
<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
</div>
</OverlayTrigger>
<span className='mx-2'> \ </span>
<a href='/rss' className='text-reset d-inline-flex' target='_blank'>
<span className='mx-2 text-muted'> \ </span>
<a href='/rss' className='nav-link p-0 d-inline-flex' target='_blank'>
rss
</a>
</div>}

2
components/header.js
View File

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

6
components/item-full.js
View File

@ -37,7 +37,11 @@ function ItemEmbed ({ item }) {
const darkMode = useDarkMode()
const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
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)

2
components/item.js
View File

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

19
components/item.module.css
View File

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

2
components/more-footer.js
View File

@ -28,7 +28,7 @@ export default function MoreFooter ({ cursor, fetchMore, Skeleton, noMoreText })
)
} else {
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 {
font-size: 70%;
color: grey;
color: var(--theme-grey);
font-weight: bold;
display: inline-block;
cursor: pointer;
padding-bottom: .5rem;
line-height: 1rem;
vertical-align: middle;
}
.skeleton .input {
background-color: grey;
background-color: var(--theme-grey);
width: 100%;
border-radius: .4rem;
height: 115px;
@ -23,7 +24,7 @@
}
.skeleton .button {
background-color: grey;
background-color: var(--theme-grey);
border-radius: .4rem;
margin-top: .25rem;
width: 71px;

4
components/search.js
View File

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

23
components/text.module.css
View File

@ -1,10 +1,16 @@
.text {
font-size: 90%;
font-size: 94%;
font-family: inherit;
word-break: break-word;
line-height: 1rem;
line-height: 140%;
}
@media screen and (min-width: 767px) {
.text {
line-height: 130%;
}
}
.text p {
margin-bottom: .5rem;
white-space: pre-wrap;
@ -15,8 +21,16 @@
margin-bottom: .5rem;
}
.text pre > div {
margin: 0 !important;
}
.text > *:last-child {
margin-bottom: 0;
margin-bottom: 0 !important;
}
.text blockquote > *:last-child {
margin-bottom: 0 !important;
}
.text img {
@ -29,6 +43,7 @@
}
.text blockquote {
border-left: 2px solid #212529;
border-left: 2px solid var(--theme-grey);
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',
color: '#212529',
navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.5)',
navLink: 'rgba(0, 0, 0, 0.55)',
navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da',
@ -15,13 +15,17 @@ const COLORS = {
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)',
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: {
body: '#000000',
inputBg: '#000000',
inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.5)',
navLink: 'rgba(255, 255, 255, 0.55)',
navLinkFocus: 'rgba(255, 255, 255, 0.75)',
navLinkActive: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.5)',
@ -30,7 +34,11 @@ const COLORS = {
commentBg: 'rgba(255, 255, 255, 0.04)',
clickToContextColor: 'rgba(255, 255, 255, 0.08)',
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,
"twitter" : #1da1f2,
"boost" : #8c25f4,
"grey" : #e9ecef
"grey" : #e9ecef,
);
$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;
$tooltip-bg: #5c8001;
@import "~bootstrap/scss/bootstrap";
@font-face {
@ -65,6 +64,10 @@ $tooltip-bg: #5c8001;
}
}
.text-muted {
color: var(--theme-grey) !important;
}
mark {
background-color: var(--primary);
padding: 0 0.2rem;
@ -109,6 +112,14 @@ body {
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 {
color: inherit;
background-color: var(--theme-inputBg);
@ -157,11 +168,11 @@ body {
border-color: var(--theme-borderColor);
}
.navbar-nav .nav-link:not(.text-success) {
.nav-link:not(.text-success) {
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;
}
@ -173,25 +184,25 @@ body {
color: var(--theme-navLinkFocus) !important;
}
.navbar-nav .dropdown-menu {
.dropdown-menu {
background-color: var(--theme-inputBg);
border: 1px solid var(--theme-borderColor);
}
.navbar-nav .dropdown-item {
.dropdown-item {
color: var(--theme-dropdownItemColor);
}
.navbar-nav .dropdown-item:hover {
.dropdown-item:hover {
color: var(--theme-dropdownItemColorHover);
}
.navbar-nav .dropdown-item.active {
.dropdown-item.active {
color: var(--theme-brandColor);
text-shadow: 0 0 10px var(--primary);
}
.navbar-nav .dropdown-divider {
.dropdown-divider {
border-top: 1px solid var(--theme-borderColor);
}
@ -230,7 +241,7 @@ footer {
}
.text-muted svg {
fill: #6c757d;
fill: var(--theme-grey);
}
.pointer {
@ -343,7 +354,7 @@ textarea.form-control {
}
.fill-grey {
fill: grey;
fill: var(--theme-grey);
}
.fill-white {
@ -373,7 +384,7 @@ textarea.form-control {
.clouds {
background-image: url('/clouds.jpeg') !important;
background-color: grey;
background-color:var(--theme-grey);
background-repeat: repeat;
background-origin: content-box;
background-size: cover;
@ -396,7 +407,7 @@ textarea.form-control {
.static {
background: url('/giphy.gif');
background-color: grey;
background-color:var(--theme-grey);
background-repeat: repeat;
background-origin: content-box;
background-size: cover;

2
styles/index.module.css
View File

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

4
styles/invites.module.css
View File

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