Change styles and restyle with CSS variables
This commit is contained in:
Christian Bundy
parent
bacdc00372
commit
da61a18ccc
|
|
@ -1,3 +1,16 @@
|
|||
:root {
|
||||
--blue: hsl(240, 75%, 50%);
|
||||
--common-radius: 2px;
|
||||
--highlight-shadow: hsl(240, 66%, 92%);
|
||||
--highlight: hsl(240, 88%, 88%);
|
||||
--off-white: hsl(240, 12%, 92%);
|
||||
--discreet: hsl(240, 12%, 96%);
|
||||
--primary: hsl(240, 17%, 17%);
|
||||
--red: hsl(330, 75%, 50%);
|
||||
--secondary: hsl(240, 8%, 38%);
|
||||
--thin-stroke: 1px;
|
||||
--heavy-stroke: 6px;
|
||||
}
|
||||
html {
|
||||
display: flex;
|
||||
font-family: system-ui,
|
||||
|
|
@ -5,8 +18,8 @@ html {
|
|||
"Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 12pt;
|
||||
justify-content: center;
|
||||
font-size: 12pt;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -28,9 +41,13 @@ pre {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.message.private {
|
||||
background-color: var(--discreet);
|
||||
}
|
||||
|
||||
.message.thread-target {
|
||||
border-color: hsl(240, 66%, 75%);
|
||||
box-shadow: 0 0 0 .17rem hsl(240, 66%, 92%);
|
||||
box-shadow: 0 0 0 var(--heavy-stroke) var(--highlight-shadow);
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
.message img, .message video {
|
||||
|
|
@ -48,7 +65,7 @@ pre {
|
|||
}
|
||||
|
||||
.message code {
|
||||
color: hsl(330, 66%, 50%)
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.message pre code {
|
||||
|
|
@ -58,21 +75,20 @@ pre {
|
|||
@media screen {
|
||||
html {
|
||||
min-height: 100%;
|
||||
background: hsl(240, 100%, 99%);
|
||||
color: var(--primary);
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 40rem;
|
||||
margin: 1.5rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--common-radius);
|
||||
border: var(--thin-stroke) solid var(--off-white);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
|
@ -83,8 +99,8 @@ pre {
|
|||
.message > header > a > .avatar {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 2px;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: var(--common-radius);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.message > header > .text > .author {
|
||||
font-weight: bold;
|
||||
|
|
@ -125,12 +141,12 @@ pre {
|
|||
}
|
||||
|
||||
.message > footer > a, .message > footer > form > button {
|
||||
color: #888;
|
||||
color: var(--secondary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message > footer > form > button.liked {
|
||||
color: hsl(330, 66%, 50%)
|
||||
color: var(--red)
|
||||
}
|
||||
|
||||
.message > footer > form {
|
||||
|
|
@ -147,8 +163,8 @@ pre {
|
|||
|
||||
.message blockquote {
|
||||
margin-left: 0;
|
||||
border-left: 0.5rem solid #eee;
|
||||
padding-left: 1.5rem;
|
||||
border-left: var(--heavy-stroke) solid var(--off-white);
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
|
@ -157,14 +173,11 @@ nav {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
nav * {
|
||||
margin-right: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #666;
|
||||
color: var(--secondary);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -182,8 +195,8 @@ nav a {
|
|||
.profile > img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 2px;
|
||||
margin-right: 2rem;
|
||||
border-radius: var(--common-radius);
|
||||
}
|
||||
|
||||
.message code {
|
||||
|
|
@ -196,7 +209,7 @@ ul, ol {
|
|||
}
|
||||
|
||||
a {
|
||||
color: hsl(240, 66%, 50%);
|
||||
color: var(--blue)
|
||||
}
|
||||
|
||||
progress {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ module.exports = ({ msg }) => {
|
|||
},
|
||||
header(
|
||||
a({ href: url.author },
|
||||
img({ class: 'avatar', src: url.avatar })
|
||||
img({ class: 'avatar', src: url.avatar, alt: 'profile image' })
|
||||
),
|
||||
span({ class: 'text' },
|
||||
span({ class: 'author' },
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ const {
|
|||
head,
|
||||
html,
|
||||
link,
|
||||
meta,
|
||||
nav,
|
||||
main,
|
||||
title
|
||||
|
|
@ -11,13 +12,20 @@ const {
|
|||
|
||||
var doctypeString = '<!DOCTYPE html>'
|
||||
|
||||
const toAttributes = (obj) =>
|
||||
Object.entries(obj).map(entry =>
|
||||
`${entry[0]}=${entry[1]}`
|
||||
).join(', ')
|
||||
|
||||
module.exports = (...elements) => {
|
||||
const nodes =
|
||||
html({ lang: 'en' },
|
||||
head(
|
||||
title(`🏝️ Oasis`),
|
||||
link({ rel: 'stylesheet', href: '/assets/style.css' }),
|
||||
link({ rel: 'stylesheet', href: '/highlight/github.css' })
|
||||
link({ rel: 'stylesheet', href: '/highlight/github.css' }),
|
||||
meta({ name: 'description', content: 'friendly neighborhood scuttlebutt interface' }),
|
||||
meta({ name: 'viewport', content: toAttributes({ width: 'device-width', 'initial-scale': 1 }) })
|
||||
),
|
||||
body(
|
||||
nav(
|
||||
|
|
|
|||
Loading…
Reference in New Issue