dirk
/
honk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

let's abort the scss like experiment. css custom properties will carry us.

This commit is contained in:
Ted Unangst 2019-11-01 01:57:32 -04:00
parent 0c105d5682
commit 1743371507
2 changed files with 73 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
views/style.css
View File

@ -1,12 +1,14 @@
$bg-page: #305; html {
$bg-dark: #002; --bg-page: #305;
$fg: #dde; --bg-dark: #002;
$fg-subtle: #aab; --fg: #dde;
$fg-limited: #a79; --fg-subtle: #aab;
--fg-limited: #a79;
}
body { body {
background: $bg-page; background: var(--bg-page);
color: $fg; color: var(--fg);
font-size: 1em; font-size: 1em;
word-wrap: break-word; word-wrap: break-word;
font-family: sans-serif, "Noto Color Emoji"; font-family: sans-serif, "Noto Color Emoji";
@ -18,7 +20,7 @@ pre, code {
blockquote { blockquote {
margin-left: 0em; margin-left: 0em;
padding-left: 0.5em; padding-left: 0.5em;
border-left: 1px solid $fg-subtle; border-left: 1px solid var(--fg-subtle);
} }
table { table {
display: block; display: block;
@ -26,7 +28,7 @@ table {
overflow-x: auto; overflow-x: auto;
} }
a { a {
color: $fg; color: var(--fg);
} }
form, input, textarea { form, input, textarea {
font-family: monospace, "Noto Color Emoji"; font-family: monospace, "Noto Color Emoji";
@ -36,8 +38,8 @@ p {
margin-bottom: 1em; margin-bottom: 1em;
} }
input { input {
background: $bg-page; background: var(--bg-page);
color: $fg; color: var(--fg);
font-size: 1.0em; font-size: 1.0em;
line-height: 1.2em; line-height: 1.2em;
padding: 0.4em; padding: 0.4em;
@ -56,7 +58,7 @@ body > header p {
padding: 1em; padding: 1em;
} }
header > details { header > details {
background: $bg-page; background: var(--bg-page);
padding: 1em 1em 1em 1em; padding: 1em 1em 1em 1em;
position: fixed; position: fixed;
top: 0; top: 0;
@ -68,8 +70,8 @@ header > details {
} }
header > details[open] { header > details[open] {
padding: 1em 1em 0em 1em; padding: 1em 1em 0em 1em;
background: $bg-dark; background: var(--bg-dark);
border: 1px solid $fg; border: 1px solid var(--fg);
margin-bottom: 1em; margin-bottom: 1em;
opacity: 1.0; opacity: 1.0;
} }
@ -90,8 +92,8 @@ main {
font-size: 1.5em; font-size: 1.5em;
} }
.info { .info {
background: $bg-dark; background: var(--bg-dark);
border: 1px solid $fg; border: 1px solid var(--fg);
margin-bottom: 1em; margin-bottom: 1em;
padding: 0em 1em 0em 1em; padding: 0em 1em 0em 1em;
} }
@ -105,9 +107,9 @@ label {
label.button, button, select { label.button, button, select {
font-size: 16px; font-size: 16px;
font-family: monospace; font-family: monospace;
color: $fg; color: var(--fg);
background: $bg-page; background: var(--bg-page);
border: 1px solid $fg; border: 1px solid var(--fg);
padding: 0.5em; padding: 0.5em;
white-space: nowrap; white-space: nowrap;
} }
@ -127,8 +129,8 @@ form {
textarea { textarea {
padding: 0.5em; padding: 0.5em;
font-size: 1em; font-size: 1em;
background: $bg-page; background: var(--bg-page);
color: $fg; color: var(--fg);
width: 600px; width: 600px;
height: 8em; height: 8em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -146,35 +148,36 @@ input[type="checkbox"]:checked + span:after {
content: "yes"; content: "yes";
} }
input[type="checkbox"]:focus + span:after { input[type="checkbox"]:focus + span:after {
outline: 1px solid $fg; outline: 1px solid var(--fg);
} }
input[type=file] { input[type=file] {
display: none; display: none;
} }
.glow { .glow {
box-shadow: 0px 0px 16px $fg; box-shadow: 0px 0px 16px var(--fg);
} }
.honk { .honk {
margin: auto; margin: auto;
background: $bg-dark; background: var(--bg-dark);
border: 1px solid $fg; border: 1px solid var(--fg);
border-radius: 1em; border-radius: 1em;
margin-bottom: 1em; margin-bottom: 1em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
padding-top: 0; padding-top: 0;
overflow: hidden; overflow: hidden;
}
#honkform { .honk #honkform {
padding: 1em; padding: 1em;
border: 1px solid $fg; border: 1px solid var(--fg);
} }
a { .honk a {
color: $fg; color: var(--fg);
} }
header { .honk header {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -182,64 +185,61 @@ input[type=file] {
line-height: 1.1; line-height: 1.1;
margin-top: 1em; margin-top: 1em;
height: 64px; height: 64px;
.clip a { }
color: $fg-subtle;
.honk header .clip a {
color: var(--fg-subtle);
} }
img { .honk header img {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
p { .honk header p {
margin-top: 0px; margin-top: 0px;
} }
} .honk .actions button {
.actions button {
margin-left: 4em; margin-left: 4em;
margin-top: 2em; margin-top: 2em;
} }
.noise { .honk .noise {
line-height: 1.4; line-height: 1.4;
code { }
.kw { font-weight: bold; }
.bi { font-weight: bold; }
.st { color: $fg-subtle; }
.nm { color: #ba88ff; }
.op { color: #ba88ff; }
.tp { font-weight: bold; }
.cm { color: $fg-subtle; font-style: italic; }
.al { color: #aaffbb; }
.dl { color: #ffaabb; }
} .honk .noise code .kw { font-weight: bold; }
} .honk .noise code .bi { font-weight: bold; }
details.actions summary { .honk .noise code .st { color: var(--fg-subtle); }
color: $fg-subtle; .honk .noise code .nm { color: #ba88ff; }
} .honk .noise code .op { color: #ba88ff; }
.honk .noise code .tp { font-weight: bold; }
.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
.honk .noise code .al { color: #aaffbb; }
.honk .noise code .dl { color: #ffaabb; }
.honk details.actions summary {
color: var(--fg-subtle);
} }
.subtle { .subtle .noise {
.noise { color: var(--fg-subtle);
color: $fg-subtle;
font-size: 0.8em; font-size: 0.8em;
} }
.noise a { .subtle .noise a {
color: $fg-subtle; color: var(--fg-subtle);
}
} }
.limited { .limited {
border: 1px solid $fg-limited; border: 1px solid var(--fg-limited);
color: $fg-limited; color: var(--fg-limited);
.noise {
color: $fg-limited;
}
.noise a {
color: $fg-limited;
}
details.actions summary {
color: $fg-limited;
}
} }
.limited .noise {
color: var(--fg-limited);
}
.limited .noise a {
color: var(--fg-limited);
}
.limited details.actions summary {
color: var(--fg-limited);
}
details.noise[open] summary { details.noise[open] summary {
display: none; display: none;
} }
@ -251,7 +251,7 @@ h3, h4 {
} }
img:not(.emu) { img:not(.emu) {
background: $bg-page; background: var(--bg-page);
} }
img, video { img, video {
max-width: 100%; max-width: 100%;

19
web.go
View File

@ -34,7 +34,6 @@ import (
"github.com/gorilla/mux" "github.com/gorilla/mux"
"humungus.tedunangst.com/r/webs/cache" "humungus.tedunangst.com/r/webs/cache"
"humungus.tedunangst.com/r/webs/css"
"humungus.tedunangst.com/r/webs/httpsig" "humungus.tedunangst.com/r/webs/httpsig"
"humungus.tedunangst.com/r/webs/image" "humungus.tedunangst.com/r/webs/image"
"humungus.tedunangst.com/r/webs/junk" "humungus.tedunangst.com/r/webs/junk"
@ -1783,20 +1782,6 @@ func avatate(w http.ResponseWriter, r *http.Request) {
w.Write(a) w.Write(a)
} }
func servecss(w http.ResponseWriter, r *http.Request) {
fd, err := os.Open("views" + r.URL.Path)
if err != nil {
http.NotFound(w, r)
return
}
defer fd.Close()
w.Header().Set("Cache-Control", "max-age=7776000")
w.Header().Set("Content-Type", "text/css; charset=utf-8")
err = css.Filter(fd, w)
if err != nil {
log.Printf("error filtering css: %s", err)
}
}
func serveasset(w http.ResponseWriter, r *http.Request) { func serveasset(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Cache-Control", "max-age=7776000") w.Header().Set("Cache-Control", "max-age=7776000")
http.ServeFile(w, r, "views"+r.URL.Path) http.ServeFile(w, r, "views"+r.URL.Path)
@ -1987,8 +1972,8 @@ func serve() {
getters.HandleFunc("/server", serveractor) getters.HandleFunc("/server", serveractor)
posters.HandleFunc("/server/inbox", serverinbox) posters.HandleFunc("/server/inbox", serverinbox)
getters.HandleFunc("/style.css", servecss) getters.HandleFunc("/style.css", serveasset)
getters.HandleFunc("/local.css", servecss) getters.HandleFunc("/local.css", serveasset)
getters.HandleFunc("/honkpage.js", serveasset) getters.HandleFunc("/honkpage.js", serveasset)
getters.HandleFunc("/about", servehtml) getters.HandleFunc("/about", servehtml)
getters.HandleFunc("/login", servehtml) getters.HandleFunc("/login", servehtml)