From 9286e5701dbf4610c026ccc17f02934beec36d67 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Mon, 29 Apr 2024 18:41:00 -0500 Subject: [PATCH] Wahoo more WIP haha --- public/style.css | 277 +++++- src/rawdata/scss/_core.scss | 821 ------------------ src/rawdata/scss/_forum.scss | 360 -------- src/rawdata/scss/_landing.scss | 24 - src/rawdata/scss/_timeline.scss | 53 -- src/rawdata/scss/core.css | 112 ++- src/rawdata/scss/forum.css | 173 ++++ src/rawdata/scss/style.css | 5 +- src/rawdata/scss/style.scss | 6 +- src/rawdata/scss/timeline.css | 54 ++ src/rawdata/scss/vars.css | 12 + .../src/include/thread_list_item.html | 2 +- src/templates/src/project.css | 152 +--- src/website/projects.go | 21 +- todo-styles.md | 4 + 15 files changed, 598 insertions(+), 1478 deletions(-) delete mode 100644 src/rawdata/scss/_core.scss delete mode 100644 src/rawdata/scss/_forum.scss delete mode 100644 src/rawdata/scss/_landing.scss delete mode 100644 src/rawdata/scss/_timeline.scss create mode 100644 src/rawdata/scss/forum.css create mode 100644 src/rawdata/scss/timeline.css diff --git a/public/style.css b/public/style.css index 8abff1c..8c766d8 100644 --- a/public/style.css +++ b/public/style.css @@ -7166,6 +7166,10 @@ code { --theme-color-light: #666; --main-background-color: #f8f8f8; --main-background-color-transparent: rgba(#f8f8f8, 0); + --card-background: #e8e8e8; + --card-background-hover: #f0f0f0; + --forum-thread-read-color: #555; + --forum-thread-read-link-color: #888; } @media (prefers-color-scheme: dark) { :root { @@ -7180,6 +7184,10 @@ code { --theme-color-light: #666; --main-background-color: #202020; --main-background-color-transparent: rgba(#202020, 0); + --card-background: #282828; + --card-background-hover: #333; + --forum-thread-read-color: #777; + --forum-thread-read-link-color: #999; } } @@ -7245,6 +7253,60 @@ code, flex-shrink: 1; } } +.b--dim { + border-color: var(--dim-color); +} +.b--dimmer { + border-color: var(--dimmer-color); +} +.b--dimmest { + border-color: var(--dimmest-color); +} +.b--theme { + border-color: var(--theme-color); +} +.b--theme-dim { + border-color: var(--theme-color-dim); +} +.b--theme-dimmer { + border-color: var(--theme-color-dimmer); +} +.b--theme-dimmest { + border-color: var(--theme-color-dimmest); +} +.b--theme-dark { + border-color: var(--theme-color-dark); +} +.b--theme-light { + border-color: var(--theme-color-light); +} +.bg--dim { + background-color: var(--dim-background); +} +.bg--content { + background-color: var(--content-background); +} +.bg--card { + background-color: var(--card-background); +} +.bg-theme { + background-color: var(--theme-color); +} +.bg-theme-dim { + background-color: var(--theme-color-dim); +} +.bg-theme-dimmer { + background-color: var(--theme-color-dimmer); +} +.bg-theme-dimmest { + background-color: var(--theme-color-dimmest); +} +.bg-theme-dark { + background-color: var(--theme-color-dark); +} +.bg-theme-light { + background-color: var(--theme-color-light); +} .c--normal { color: var(--color); } @@ -7255,54 +7317,24 @@ code, .c--inherit:active { color: inherit; } -.b--theme { - border-color: var(--theme-color); -} .c--dim { color: var(--dim-color); } .c--theme-dim { color: var(--theme-color-dim); } -.b--dim { - border-color: var(--dim-color); -} -.b--theme-dim { - border-color: var(--theme-color-dim); -} .c--dimmer { color: var(--dimmer-color); } .c--theme-dimmer { color: var(--theme-color-dimmer); } -.b--dimmer { - border-color: var(--dimmer-color); -} -.b--theme-dimmer { - border-color: var(--theme-color-dimmer); -} .c--dimmest { color: var(--dimmest-color); } .c--theme-dimmest { color: var(--theme-color-dimmest); } -.b--dimmest { - border-color: var(--dimmest-color); -} -.b--theme-dimmest { - border-color: var(--theme-color-dimmest); -} -.bg--dim { - background-color: var(--dim-background); -} -.bg--content { - background-color: var(--content-background); -} -.bg--card { - background-color: var(--card-background); -} .f8 { font-size: 0.65rem; } @@ -7662,6 +7694,191 @@ code, --fade-color: var(--background-even-background); } +/* src/rawdata/scss/forum.css */ +.thread-list-item .latestpost { + width: 16.5rem; +} +.excerpt-fade { + background-image: + linear-gradient( + to top, + var(--fade-color), + rgba(0, 0, 0, 0)); + pointer-events: none; +} +.read { + color: var(--forum-thread-read-color); +} +.read td { + color: var(--forum-thread-read-color); +} +.read a { + color: var(--forum-thread-read-link-color); +} +.read .title { + font-weight: 500; +} +.goto { + font-size: 200%; + width: 30px; +} +.goto a { + display: block; + padding: 0px 10px; + box-sizing: border-box; + position: relative; + line-height: 100%; + background-color: transparent; +} +.badge { + display: inline-block; + border-radius: 1000em; + padding: 0 0.8em; + font-size: 0.9em; + line-height: 1.8em; + font-weight: bold; +} +.badge.staff { + background-color: #17b2c6; + color: white; +} +.badge.staff::before { + content: "Staff"; +} +.postid a { + margin-top: -4rem; + padding-top: 4rem; + outline: none; +} +.codeblocktable { + font-family: monospace; + font-size: 14px; + overflow: auto; + line-height: 1.5em; +} +.codeblocktable tbody { + width: 100%; +} +.codeblocktable .linenos { + color: var(--theme-dim); + font-weight: 500; + padding: 5px; + background: rgba(0, 0, 0, 0.15); +} +.codeblocktable .code { + padding-right: 20px; + padding-left: 10px; + max-width: 80em; +} +.post .action.button { + padding: 0px 10px; + margin-top: 0px; + margin-right: 4px; + background-color: transparent; + font-size: 130%; + border-radius: 0px; + border-width: 0px; + border-bottom-width: 2px; + transition: border-bottom-width 0.1s; +} +.post .action.button:hover { + border-bottom-width: 4px; +} +.blog .post .meta { + position: relative; +} +.blog .post.op .meta { + margin-bottom: 10px; +} +.blog .post .badges { + width: 40px; + font-size: 0.7em; + text-align: center; +} +.blog .sidebar .post > .author { + padding: 15px; + text-align: center; +} +.blog .sidebar .recent-posts { + text-align: center; + padding: 15px; +} +.blog .sidebar .recent-posts h2 { + display: inline; +} +.blog .sidebar .archive ul { + list-style-type: none; + text-align: left; +} +.blog .post-list .post:nth-child(even) { + background-color: transparent; +} +.bbtable { + width: 100%; + border: 1px solid; +} +.bbtable td, +.bbtable th { + border: 1px solid; + padding: 4px; +} +.bbtable th { + background: rgba(0, 0, 0, 0.15); + font-weight: bold; + border-bottom-width: 2px; +} +.bbtable tbody tr:nth-child(even) { + background: rgba(0, 0, 0, 0.05); +} + +/* src/rawdata/scss/timeline.css */ +.avatar-icon { + object-fit: cover; + border-radius: 100%; + overflow: hidden; + object-fit: cover; + background-color: var(--dimmest-color); + width: 2.5rem; + height: 2.5rem; + border: 2px solid; + border-color: var(--theme-color); + flex-shrink: 0; +} +.avatar-icon.big { + width: 3rem; + height: 3rem; +} +@media screen and (min-width: 35em) { + .avatar-icon.big { + width: 3.875rem; + height: 3.875rem; + } +} +.timeline-item { + background-color: var(--card-background); + --fade-color: var(--card-background); + color: var(--main-color); +} +.timeline-item .timeline-content-box.timeline-item-bg { + background-color: var(--timeline-content-background); +} +.timeline-item .timeline-content-box > * { + display: block; + max-width: 100%; + max-height: 80vh; +} +.timeline-modal .container { + max-height: 100vh; + max-width: 100%; +} +@media screen and (min-width: 35em) { + .timeline-modal .container { + width: auto; + max-width: calc(100% - 2rem); + max-height: calc(100vh - 2rem); + } +} + /* src/rawdata/scss/style.css */ /*! TACHYONS v4.12.0 | http://tachyons.io */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ diff --git a/src/rawdata/scss/_core.scss b/src/rawdata/scss/_core.scss deleted file mode 100644 index 067cce1..0000000 --- a/src/rawdata/scss/_core.scss +++ /dev/null @@ -1,821 +0,0 @@ -// Global variables -$input-padding: 0.3rem; - -.noselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE/Edge */ - user-select: none; /* non-prefixed version, currently */ -} - -* { - box-sizing: border-box; -} - -br { - border-style: none; // why, IE... -} - -body { - @include usevar(background-color, main-background-color); - @include usevar(color, main-color); - - font-family: "Fira Sans", sans-serif; - background-size: cover; - min-height: 100vh; - box-sizing: border-box; - font-size: px2rem(14px); - line-height: 1.5; - font-weight: 400; -} - -a, .link { - @include usevar(color, link-color); - @include usevar(border-bottom-color, link-border-color); - - border-bottom: none; - text-decoration: none; - - &:hover { - /* text-decoration:underline; */ - } - - &.external::after { - font-family: "icons"; - content:" 1"; - vertical-align:middle; - } -} - -ol { - list-style-type: decimal; -} - -ul { - list-style-type: circle; - padding: 0; - margin: 0; -} - -.list-none { - list-style-type: none; -} - -li { - padding: 0; - margin: 0; - padding-left: 5px; - margin-left: 15px; -} - -h1, h2, h3, h4, h5 { - font-weight: 500; - margin: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: 1.25em; -} - -strong { - font-weight: 600; -} - -em { - font-style: italic; -} - -p { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.p-spaced p { - $spacing: 0.6em; - - &:not(:first-child) { - margin-top: $spacing; - } - - &:not(:last-child) { - margin-bottom: $spacing; - } -} - -table { - border-collapse: collapse; - table-layout: fixed; -} - -th, td { - @include usevar(color, fg-font-color); -} - -td { - vertical-align:baseline; -} - -hr { - @include usevar(border-top-color, hr-color); - @extend .mv3; - - border-width: 1px 0 0; - border-top-style: solid; -} - -$monospace-fonts: "Fira Mono", monospace; - -.mono { - font-family: $monospace-fonts; -} - -article code { - font-family: $monospace-fonts; -} - -.big { font-size:120%; } - -.title { - font-weight: bold; -} - -.clear { - width: 0; -} - -.full { - width: 100%; -} - -.hidden { - display: none; -} - -.empty { - padding-left: 20px; -} - -.column h2 { - text-align: center; - margin-bottom: 20px; -} - -.margin-center { - margin-left: auto; - margin-right: auto; -} - -.flex-shrink-0 { - flex-shrink: 0; -} - -.flex-grow-1 { - flex-grow: 1; -} - -.flex-fair { - flex-basis: 1px; - flex-grow: 1; - flex-shrink: 1; -} - -@media #{$breakpoint-not-small} { - .flex-fair-ns { - flex-basis: 1px; - flex-grow: 1; - flex-shrink: 1; - } -} - -@media #{$breakpoint-large} { - .flex-fair-l { - flex-basis: 1px; - flex-grow: 1; - flex-shrink: 1; - } -} - -.c--normal { - @include usevar('color', 'fg-font-color'); -} - -.c--inherit { - color: inherit; - - &:hover, &:active { - color: inherit; - } -} - -.b--theme { - @include usevar(border-color, theme-color); -} - -.c--dim { - @include usevar(color, dim-color); -} - -.c--theme-dim { - @include usevar(color, theme-color-dim); -} - -.b--dim { - @include usevar(border-color, dim-color); -} - -.b--theme-dim { - @include usevar(border-color, theme-color-dim); -} - -.c--dimmer { - @include usevar(color, dimmer-color); -} - -.c--theme-dimmer { - @include usevar(color, theme-color-dimmer); -} - -.b--dimmer { - @include usevar(border-color, dimmer-color); -} - -.b--theme-dimmer { - @include usevar(border-color, theme-color-dimmer); -} - -.c--dimmest { - @include usevar(color, dimmest-color); -} - -.c--theme-dimmest { - @include usevar(color, theme-color-dimmest); -} - -.b--dimmest { - @include usevar(border-color, dimmest-color); -} - -.b--theme-dimmest { - @include usevar(border-color, theme-color-dimmest); -} - -.bg--dim { - @include usevar(background-color, dim-background); -} - -.bg--content { - @include usevar(background-color, content-background); -} - -.bg--card { - @include usevar(background-color, card-background); -} - -.f8 { - font-size: 0.65rem; -} - -.mw-site { - max-width: 80rem; -} - -.mh-3 { - max-height: $height-3; -} - -.mh-4 { - max-height: $height-4; -} - -.mh-5 { - max-height: $height-5; -} - -.mh-6 { - max-height: $height-6; -} - -.mh-100 { - max-height: 100%; -} - -.mh-50vh { - max-height: 50vh; -} - -.mh-60vh { - max-height: 60vh; -} - -.mh-70vh { - max-height: 70vh; -} - -.mh-80vh { - max-height: 80vh; -} - -.minw-100 { - min-width: 100%; -} - -.minh-1 { - min-height: $height-1; -} - -.minh-2 { - min-height: $height-2; -} - -.minh-3 { - min-height: $height-3; -} - -.minh-4 { - min-height: $height-4; -} - -.minh-5 { - min-height: $height-5; -} - -.minh-6 { - min-height: $height-6; -} - -.h1-5 { - height: 1.5rem; -} - -.fira { - font-family: "Fira Sans", sans-serif; -} - -.bi-avoid { break-inside: avoid; } -.cc-auto { column-count: auto; } -.cc1 { column-count: 1; } -.cc2 { column-count: 2; } -.cc3 { column-count: 3; } -.cg0 { column-gap: $spacing-none; } -.cg1 { column-gap: $spacing-extra-small; } -.cg2 { column-gap: $spacing-small; } -.cg3 { column-gap: $spacing-medium; } -.cg4 { column-gap: $spacing-large; } -.cg5 { column-gap: $spacing-extra-large; } - -.g0 { gap: $spacing-none; } -.g1 { gap: $spacing-extra-small; } -.g2 { gap: $spacing-small; } -.g3 { gap: $spacing-medium; } -.g4 { gap: $spacing-large; } -.g5 { gap: $spacing-extra-large; } - -.grid { - display: grid; -} - -.grid-1 { - grid-template-columns: 1fr; -} - -.grid-2 { - grid-template-columns: 1fr 1fr; -} - -.aspect-ratio--2x1 { - padding-bottom: 50%; -} - -.hide-if-empty:empty { - display: none !important; -} - -@media #{$breakpoint-not-small} { - .bi-avoid-ns { break-inside: avoid; } - .cc-auto-ns { column-count: auto; } - .cc1-ns { column-count: 1; } - .cc2-ns { column-count: 2; } - .cc3-ns { column-count: 3; } - .cg0-ns { column-gap: $spacing-none; } - .cg1-ns { column-gap: $spacing-extra-small; } - .cg2-ns { column-gap: $spacing-small; } - .cg3-ns { column-gap: $spacing-medium; } - .cg4-ns { column-gap: $spacing-large; } - .cg5-ns { column-gap: $spacing-extra-large; } - .grid-1-ns { grid-template-columns: 1fr; } - .grid-2-ns { grid-template-columns: 1fr 1fr; } - - .bg--dim-ns { - @include usevar(background-color, dim-background); - } -} - -@media #{$breakpoint-medium} { - .bi-avoid-m { break-inside: avoid; } - .cc-auto-m { column-count: auto; } - .cc1-m { column-count: 1; } - .cc2-m { column-count: 2; } - .cc3-m { column-count: 3; } - .cg1-m { column-gap: $spacing-extra-small; } - .cg2-m { column-gap: $spacing-small; } - .cg3-m { column-gap: $spacing-medium; } - .cg4-m { column-gap: $spacing-large; } - .cg5-m { column-gap: $spacing-extra-large; } - .grid-1-m { grid-template-columns: 1fr; } - .grid-2-m { grid-template-columns: 1fr 1fr; } - - .bg--dim-m { - @include usevar(background-color, dim-background); - } -} - -@media #{$breakpoint-large} { - .bi-avoid-l { break-inside: avoid; } - .cc-auto-l { column-count: auto; } - .cc1-l { column-count: 1; } - .cc2-l { column-count: 2; } - .cc3-l { column-count: 3; } - .cg1-l { column-gap: $spacing-extra-small; } - .cg2-l { column-gap: $spacing-small; } - .cg3-l { column-gap: $spacing-medium; } - .cg4-l { column-gap: $spacing-large; } - .cg5-l { column-gap: $spacing-extra-large; } - .grid-1-l { grid-template-columns: 1fr; } - .grid-2-l { grid-template-columns: 1fr 1fr; } - - .bg--dim-l { - @include usevar(background-color, dim-background); - } -} - -.not-first:first-child { - display: none; -} - -.not-first-of-type:first-of-type { - display: none; -} - -.not-last:last-child { - display: none; -} - -.not-last-of-type:last-of-type { - display: none; -} - -.svgicon { - svg { - fill: currentColor; - stroke: currentColor; - width: 1em; - height: 1em; - } - - &:not(.svgicon-nofix) svg { - transform: translate(0px,0.1em); - } -} - -// Tachyons' `center` is unfortunately overloaded by a .center -// class we have in our own CSS. -.center-layout { - margin-right: auto; - margin-left: auto; -} - -footer { - .list li:not(:last-child)::after { - @extend .c--dimmer; - - @media #{$breakpoint-not-small} { - & { - content: ' / '; - } - } - } -} - -.content { - @include usevar(background-color, content-background); - - margin: auto; - - p { - -moz-text-size-adjust:auto; - -webkit-text-size-adjust:auto; - text-size-adjust:auto; - - margin: 0.6rem 0; - } - - .description { - line-height: 1.42em; - text-align: left; - margin: auto; - - p { - margin-bottom: $spacing-small; - text-align: left; - } - } - - > .top-bar { - text-align: left; - } -} - -.content-block { - // TODO: What the heck are these styles - /* Background color given by theme */ - background-repeat:repeat-x; - border-radius:2px; - text-align:left; - width:100%; - /* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */ - position:relative; - box-sizing:border-box; - - &.top-bar { - background-image:none; - } - - &.language-desc { - padding: 10px; - - h3 { - margin-left: 10px; - } - } - - .no-bg { - background-image:none; - background-color:transparent; - box-shadow:none; - } -} - -.sidebar { - .content-block { - &.single { - padding:0px; /* for project list, TODO */ - margin-top:20px; - } - - &.top-bar { - /* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */ - width:80%; - display:block; - margin:10px auto; - } - } - - br.sidebar-filler { - line-height:20px; - } - - .projectlist { - background-color:transparent; - } -} - -.content-block .bottom-padding, .sidebar .bottom-padding { - margin-top: $spacing-medium; -} - -.breadcrumb { - &:hover { - text-decoration:underline; - } - - &.current { - text-overflow: clip ellipsis; - } -} - -.breadcrumb-before:nth-of-type(n+2)::before { - content: '≫'; -} - -.optionbar { - @extend .b--dimmest; - - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: center; - align-items: center; - border-style: dashed; - border-width: 0px; - border-bottom-width: 1px; - padding-bottom: $spacing-small; - - @media #{$breakpoint-not-small} { - flex-direction: row; - text-align: left; - padding-bottom: 0; - } - - &.bottom { - border-bottom-width: 0px; - border-top-width: 1px; - padding-bottom: 0; - padding-top: $spacing-small; - - @media #{$breakpoint-not-small} { - padding-top: 0; - } - } - - &.center { - text-align: center; // TODO: find this and kill it - } - - .options { - display: flex; - flex-direction: column; - - @media #{$breakpoint-not-small} { - flex-direction: row; - } - - & { - #{$buttons} { - @include lite-button; - @extend .ph2; - @extend .pv1; - @extend .pv2-ns; - } - } - } - - .group { - display: inline-block; - height: 100%; - margin: auto; - } -} - -.tab { - @include usevar(background-color, tab-background); - @extend .pa2; -} - -.tab-bar { - @include usevar(border-color, tab-border-color); - @extend .flex, .flex-row; - - width: 100%; - - .tab-button { - @include usevar(background-color, tab-button-background); - @include usevar(border-color, tab-border-color); - @extend .ph3, .pv2; - - cursor: pointer; // TODO: Should this be a link? - - &:hover { - @include usevar(background-color, tab-button-background-hover); - } - - &.current { - @include usevar(background-color, tab-button-background-current); - font-weight: 500; - } - } -} - -.pagination { - .page.current { - cursor: default; - font-weight: 600; - - &:hover { - text-decoration: none; - } - } - - .button { - @extend .pv0, .ph2; - } -} - -.user-link { - position:relative; -} - -// TODO(ben): It appears that this code is inactive because the JS that would -// create the popups is commented out. -.user-popup { - opacity:0; - max-height:0px; - width:340px; - - text-align:center; - - transition:max-height 0.2s, opacity 0.1s; - box-shadow:0px 2px 5px rgba(0,0,0,0.3); - - overflow:hidden; - position:absolute; - bottom:0px; - - &.expanded { - visibility:visible; - max-height:250px; - opacity:1; - } - - table { - /* Background color given by theme */ - width:100%; - position:relative; - border-radius:3px; - z-index:10; - } - - td { - vertical-align:top; - padding:15px 9px; - } - - #avatar { - width:100px; - height:100px; - background-size:contain; - background-position:center center; - background-repeat:no-repeat; - border-radius:3px; - margin:0px auto; - } - - .username { - font-weight:bold; - } - - .bottom { - /* Border color given by theme */ - border-top: 1px solid transparent; - padding: 15px; - - .bio { - vertical-align:top; - width:90%; - } - } -} - -.site-search { - &[type=text].lite { - // wow CSS selector priority sucks - - // First transition copied from input .lite - transition: border-bottom-color 60ms ease-in-out, width 300ms ease; - } -} - -#search_button_homepage { - margin:0px; - height:100%; - height:calc(100% - 2px); - border-radius:0px; - display:inline-block; - display:none; -} - -.background-even:nth-of-type(even) { - // this is the default, and should be overridden by dynamic colors. - @include usevar(background-color, background-even-background); - @include usevar(--fade-color, background-even-background); -} - -.sr-only { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - word-wrap: normal !important; - transition: 0.2s all; -} - -.sr-focusable { - @extend .sr-only; - - &:focus { - padding: 15px 10px; - height: auto; - width: auto; - background: var(--content-background); - clip: initial; - clip-path: initial; - z-index: 99999; - } -} diff --git a/src/rawdata/scss/_forum.scss b/src/rawdata/scss/_forum.scss deleted file mode 100644 index 0de6165..0000000 --- a/src/rawdata/scss/_forum.scss +++ /dev/null @@ -1,360 +0,0 @@ -.display-options { - height:100%; - padding:0px 20px 0px 20px; - - > * { - display:inline-block; - vertical-align:middle; - } -} - -.forum h3 { - margin:0px 80px 0px 20px; - font-weight:bold; -} - -.forum-narrow .forum-narrow-hide { - display: none; -} - -.post-bg-alternate:nth-of-type(odd) { - @include usevar('background-color', 'forum-even-background'); -} - -.thread-list-item .latestpost { - width: 16.5rem; -} - -.thread { - @include usevar('color', 'fg-font-color'); - - @extend .ma0; - - .profile & { - padding-left:15px; - } - - .title { - font-weight: bold; - - transition: border-bottom-color 0.1s; - border-bottom-color: transparent; - - &:hover { - border-bottom-color: initial; - } - } - - .forum & .info th { - width: 50px; - } -} - -.avatar-icon { - width: 40px; - height: 40px; - flex-shrink: 0; - object-fit: cover; - border-radius: 100%; - overflow: hidden; - object-fit: cover; - @include usevar(background-color, dimmest-color); -} - -:root { - @include usevar(--fade-color, 'content-background'); -} - -.excerpt-fade { - background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0)); - pointer-events: none; -} - -.read { - @include usevar('color', 'forum-thread-read-color'); - - td { - @include usevar('color', 'forum-thread-read-color'); - } - - a { - @include usevar('color', 'forum-thread-read-link-color'); - } - - .title { - font-weight: 500; - } -} - -.goto { - font-size: 200%; - width: 30px; - - a { - display: block; - padding: 0px 10px; - box-sizing: border-box; - position: relative; - line-height: 100%; - background-color: transparent; - } -} - -.badge { - display: inline-block; - border-radius: 1000em; - padding: 0 0.8em; - font-size: 0.9em; - line-height: 1.8em; - font-weight: bold; - - &.staff { - background-color: #17b2c6; - color: white; - - &::before { - content: 'Staff'; - } - } -} - -.postid a { - margin-top: -4rem; - padding-top: 4rem; - outline: none; -} - -.codeblocktable { - font-family: $monospace-fonts; - font-size:14px; - overflow:auto; - line-height:1.5em; - - tbody { - width:100%; - } - - .linenos { - @include usevar(color, 'code-line-number-color'); - - font-weight:500; - padding: 5px; - background: rgba(0, 0, 0, 0.15); - } - - .code { - /* Background color given by theme */ - padding-right:20px; - padding-left:10px; - max-width:80em; - } -} - -.post { - .action.button { - padding:0px 10px; - margin-top:0px; - margin-right:4px; - background-color:transparent; - font-size:130%; - border-radius:0px; - border-width:0px; - border-bottom-width:2px; - transition:border-bottom-width 0.1s; - - &:hover { - border-bottom-width:4px; - } - } -} - -.blog { - .post { - .meta { - position:relative; - } - - &.op .meta { - margin-bottom:10px; - } - - .badges { - width: 40px; - font-size: 0.7em; - text-align: center; - } - } - - .sidebar { - .post > .author { - padding:15px; - text-align:center; - } - - .recent-posts { - text-align:center; - padding:15px; - - h2 { - display:inline; - } - } - - .archive ul { - list-style-type:none; - text-align:left; - } - } - - .post-list { - .post { - &:nth-child(even) { - background-color: transparent; - } - } - } -} - -.featured-post .meta .avatar-icon { - left:-60px; - bottom:-5px; -} - -.content-block.blog { - p.title { - font-weight:bold; - - a { - border-bottom-width:0px; - - &:hover { - border-bottom-width:1px; - } - } - } -} - -a.mark_as_read { - float: right; -} - -.mark_as_read_toplevel_forum { - margin-left: auto; - margin-right: auto; - width: 100%; - text-align: center; - - a { - text-decoration: underline; - } -} - -div.mark_as_read_toplevel_blog { - margin-left: auto; - margin-right: auto; - width: 100%; - text-align: center; - - a { - text-decoration: none; - } -} - -.mark_as_read_toplevel_blog -div.mark_as_read_site { - margin-left: auto; - margin-right: auto; - width: 100%; - text-align: center; - - a { - text-decoration: none; - } -} - -.mark_as_read_site -li.post-entry { - margin-left:0px; - margin-bottom: 3px; -} - -.diff { - width:100%; - max-height:100vh; - overflow-y:scroll; - margin-top:20px; - - > .post-source { - @include usevar(color, 'fg-font-color'); - @include usevar(background-color, 'forum-diff-source-background'); - @include usevar(border-color, 'forum-diff-source-border-color'); - - border-width: 1px; - border-radius: 2px; - font-family: $monospace-fonts; - width:49%; - box-sizing:border-box; - padding: 4px; - display:inline-block; - vertical-align: top; - } - - .diff-replace, - .diff-delete, - .diff-insert, - { - border-width: 1px; - border-radius: 2px; - padding: 1px; - } - - .diff-replace { - @include usevar(background-color, 'forum-diff-replace-background'); - @include usevar(border-color, 'forum-diff-replace-border-color'); - } - - .diff-delete { - @include usevar(background-color, 'forum-diff-delete-background'); - @include usevar(border-color, 'forum-diff-delete-border-color'); - } - - .diff-insert { - @include usevar(background-color, 'forum-diff-insert-background'); - @include usevar(border-color, 'forum-diff-insert-border-color'); - } -} - -.index { - list-style-type:none; - -webkit-column-count: 3; - -moz-column-count: 3; - column-count: 3; - margin-top:20px; - - .index-category { - margin-bottom:20px; - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid-column; - } -} - -.bbtable { - width: 100%; - border: 1px solid; - - td, th { - border: 1px solid; - padding: 4px; - } - - th { - background: rgba(0, 0, 0, 0.15); - font-weight: bold; - border-bottom-width: 2px; - } - - tbody tr:nth-child(even) { - background: rgba(0, 0, 0, 0.05); - } -} diff --git a/src/rawdata/scss/_landing.scss b/src/rawdata/scss/_landing.scss deleted file mode 100644 index 84ad89e..0000000 --- a/src/rawdata/scss/_landing.scss +++ /dev/null @@ -1,24 +0,0 @@ -.landing-layout { - display: grid; - gap: $spacing-medium; - - > * { - overflow: hidden; - } -} - -@media #{$breakpoint-large} { - .landing-layout { - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - - > * { - grid-column: 1 / 2; - - &.landing-right { - grid-column: 2 / 3; - grid-row: 1 / 20; // increase this number if somehow you ever add that much garbage to the home page :) - } - } - } -} diff --git a/src/rawdata/scss/_timeline.scss b/src/rawdata/scss/_timeline.scss deleted file mode 100644 index 9b86c5a..0000000 --- a/src/rawdata/scss/_timeline.scss +++ /dev/null @@ -1,53 +0,0 @@ -.timeline-item { - @include usevar(background-color, card-background); - @include usevar(--fade-color, card-background); - @include usevar(color, main-color); - - .avatar-icon { - border: 2px solid; - @include usevar(border-color, theme-color); - - &.big { - width: 3rem; - height: 3rem; - - @media #{$breakpoint-not-small} { - width: px2rem(62px); - height: px2rem(62px); - } - } - } - - .timeline-content-box { - &.timeline-item-bg { - @include usevar(background-color, timeline-content-background); - } - - > * { - display: block; - max-width: 100%; - max-height: 80vh; - } - - &.embed { - @extend .aspect-ratio, .aspect-ratio--16x9; - - > iframe { - @extend .aspect-ratio--object; - } - } - } -} - -.timeline-modal { - .container { - max-height: 100vh; - max-width: 100%; - - @media #{$breakpoint-not-small} { - width: auto; - max-width: calc(100% - 2rem); - max-height: calc(100vh - 2rem); - } - } -} diff --git a/src/rawdata/scss/core.css b/src/rawdata/scss/core.css index 213c315..2be2ed0 100644 --- a/src/rawdata/scss/core.css +++ b/src/rawdata/scss/core.css @@ -77,6 +77,78 @@ code, } } +.b--dim { + border-color: var(--dim-color); +} + +.b--dimmer { + border-color: var(--dimmer-color); +} + +.b--dimmest { + border-color: var(--dimmest-color); +} + +.b--theme { + border-color: var(--theme-color); +} + +.b--theme-dim { + border-color: var(--theme-color-dim); +} + +.b--theme-dimmer { + border-color: var(--theme-color-dimmer); +} + +.b--theme-dimmest { + border-color: var(--theme-color-dimmest); +} + +.b--theme-dark { + border-color: var(--theme-color-dark); +} + +.b--theme-light { + border-color: var(--theme-color-light); +} + +.bg--dim { + background-color: var(--dim-background); +} + +.bg--content { + background-color: var(--content-background); +} + +.bg--card { + background-color: var(--card-background); +} + +.bg-theme { + background-color: var(--theme-color); +} + +.bg-theme-dim { + background-color: var(--theme-color-dim); +} + +.bg-theme-dimmer { + background-color: var(--theme-color-dimmer); +} + +.bg-theme-dimmest { + background-color: var(--theme-color-dimmest); +} + +.bg-theme-dark { + background-color: var(--theme-color-dark); +} + +.bg-theme-light { + background-color: var(--theme-color-light); +} + .c--normal { color: var(--color); } @@ -90,10 +162,6 @@ code, } } -.b--theme { - border-color: var(--theme-color); -} - .c--dim { color: var(--dim-color); } @@ -102,14 +170,6 @@ code, color: var(--theme-color-dim); } -.b--dim { - border-color: var(--dim-color); -} - -.b--theme-dim { - border-color: var(--theme-color-dim); -} - .c--dimmer { color: var(--dimmer-color); } @@ -118,14 +178,6 @@ code, color: var(--theme-color-dimmer); } -.b--dimmer { - border-color: var(--dimmer-color); -} - -.b--theme-dimmer { - border-color: var(--theme-color-dimmer); -} - .c--dimmest { color: var(--dimmest-color); } @@ -134,26 +186,6 @@ code, color: var(--theme-color-dimmest); } -.b--dimmest { - border-color: var(--dimmest-color); -} - -.b--theme-dimmest { - border-color: var(--theme-color-dimmest); -} - -.bg--dim { - background-color: var(--dim-background); -} - -.bg--content { - background-color: var(--content-background); -} - -.bg--card { - background-color: var(--card-background); -} - .f8 { font-size: 0.65rem; } diff --git a/src/rawdata/scss/forum.css b/src/rawdata/scss/forum.css new file mode 100644 index 0000000..966dbfd --- /dev/null +++ b/src/rawdata/scss/forum.css @@ -0,0 +1,173 @@ +.thread-list-item .latestpost { + width: 16.5rem; +} + +.excerpt-fade { + background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0)); + pointer-events: none; +} + +.read { + color: var(--forum-thread-read-color); + + td { + color: var(--forum-thread-read-color); + } + + a { + color: var(--forum-thread-read-link-color); + } + + .title { + font-weight: 500; + } +} + +.goto { + font-size: 200%; + width: 30px; + + a { + display: block; + padding: 0px 10px; + box-sizing: border-box; + position: relative; + line-height: 100%; + background-color: transparent; + } +} + +.badge { + display: inline-block; + border-radius: 1000em; + padding: 0 0.8em; + font-size: 0.9em; + line-height: 1.8em; + font-weight: bold; + + &.staff { + background-color: #17b2c6; + color: white; + + &::before { + content: 'Staff'; + } + } +} + +.postid a { + margin-top: -4rem; + padding-top: 4rem; + outline: none; +} + +.codeblocktable { + font-family: monospace; + font-size: 14px; + overflow: auto; + line-height: 1.5em; + + tbody { + width: 100%; + } + + .linenos { + color: var(--theme-dim); + font-weight: 500; + padding: 5px; + background: rgba(0, 0, 0, 0.15); + } + + .code { + /* Background color given by theme */ + padding-right: 20px; + padding-left: 10px; + max-width: 80em; + } +} + +.post { + .action.button { + padding: 0px 10px; + margin-top: 0px; + margin-right: 4px; + background-color: transparent; + font-size: 130%; + border-radius: 0px; + border-width: 0px; + border-bottom-width: 2px; + transition: border-bottom-width 0.1s; + + &:hover { + border-bottom-width: 4px; + } + } +} + +.blog { + .post { + .meta { + position: relative; + } + + &.op .meta { + margin-bottom: 10px; + } + + .badges { + width: 40px; + font-size: 0.7em; + text-align: center; + } + } + + .sidebar { + .post>.author { + padding: 15px; + text-align: center; + } + + .recent-posts { + text-align: center; + padding: 15px; + + h2 { + display: inline; + } + } + + .archive ul { + list-style-type: none; + text-align: left; + } + } + + .post-list { + .post { + &:nth-child(even) { + background-color: transparent; + } + } + } +} + +.bbtable { + width: 100%; + border: 1px solid; + + td, + th { + border: 1px solid; + padding: 4px; + } + + th { + background: rgba(0, 0, 0, 0.15); + font-weight: bold; + border-bottom-width: 2px; + } + + tbody tr:nth-child(even) { + background: rgba(0, 0, 0, 0.05); + } +} \ No newline at end of file diff --git a/src/rawdata/scss/style.css b/src/rawdata/scss/style.css index e88b151..ad6db4a 100644 --- a/src/rawdata/scss/style.css +++ b/src/rawdata/scss/style.css @@ -1,4 +1,7 @@ @import "tachyons.min.css"; @import "vars.css"; -@import "core.css"; \ No newline at end of file +@import "core.css"; + +@import "forum.css"; +@import "timeline.css"; \ No newline at end of file diff --git a/src/rawdata/scss/style.scss b/src/rawdata/scss/style.scss index 6470c91..6cbefd7 100644 --- a/src/rawdata/scss/style.scss +++ b/src/rawdata/scss/style.scss @@ -14,17 +14,17 @@ @import 'episodes'; @import 'education'; @import 'forms'; -@import 'forum'; +// @import 'forum'; @import 'header'; @import 'icons'; @import 'irc'; -@import 'landing'; +// @import 'landing'; @import 'library'; @import 'profile'; @import 'projects'; @import 'showcase'; @import 'streams'; -@import 'timeline'; +// @import 'timeline'; @import 'carousel'; @import 'notices'; @import 'progress_bar'; diff --git a/src/rawdata/scss/timeline.css b/src/rawdata/scss/timeline.css new file mode 100644 index 0000000..d6fae36 --- /dev/null +++ b/src/rawdata/scss/timeline.css @@ -0,0 +1,54 @@ +.avatar-icon { + object-fit: cover; + border-radius: 100%; + overflow: hidden; + object-fit: cover; + background-color: var(--dimmest-color); + + width: 2.5rem; + height: 2.5rem; + border: 2px solid; + border-color: var(--theme-color); + flex-shrink: 0; + + &.big { + width: 3rem; + height: 3rem; + + @media screen and (min-width: 35em) { + width: 3.875rem; + height: 3.875rem; + } + } +} + +.timeline-item { + background-color: var(--card-background); + --fade-color: var(--card-background); + color: var(--main-color); + + .timeline-content-box { + &.timeline-item-bg { + background-color: var(--timeline-content-background); + } + + >* { + display: block; + max-width: 100%; + max-height: 80vh; + } + } +} + +.timeline-modal { + .container { + max-height: 100vh; + max-width: 100%; + + @media screen and (min-width: 35em) { + width: auto; + max-width: calc(100% - 2rem); + max-height: calc(100vh - 2rem); + } + } +} \ No newline at end of file diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index a07e18f..e813465 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -24,6 +24,12 @@ $breakpoint-large: screen and (min-width: 60em) --main-background-color: #f8f8f8; --main-background-color-transparent: rgba(#f8f8f8, 0); + + --card-background: #e8e8e8; + --card-background-hover: #f0f0f0; + + --forum-thread-read-color: #555; + --forum-thread-read-link-color: #888; } @media (prefers-color-scheme: dark) { @@ -42,5 +48,11 @@ $breakpoint-large: screen and (min-width: 60em) --main-background-color: #202020; --main-background-color-transparent: rgba(#202020, 0); + + --card-background: #282828; + --card-background-hover: #333; + + --forum-thread-read-color: #777; + --forum-thread-read-link-color: #999; } } \ No newline at end of file diff --git a/src/templates/src/include/thread_list_item.html b/src/templates/src/include/thread_list_item.html index 15b3f56..6d27005 100644 --- a/src/templates/src/include/thread_list_item.html +++ b/src/templates/src/include/thread_list_item.html @@ -4,7 +4,7 @@ This template is intended to display a single thread in the context of a forum, It should be called with ThreadListItem. */}} -
+
{{ .Title }}
diff --git a/src/templates/src/project.css b/src/templates/src/project.css index 11c07b4..03dc6fb 100644 --- a/src/templates/src/project.css +++ b/src/templates/src/project.css @@ -1,141 +1,39 @@ {{ $c := hex2color .Color }} -{{/* Theme "dim" colors tend more toward the background value (lighter or darker) */}} -{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }} -{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }} -{{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }} - -{{/* Theme "dark" and "light" colors are always darker or lighter in value, regardless of theme. */}} -{{ $themeDark := eq .Theme "dark" | ternary (lightness 0.30 $c) (lightness 0.35 $c) | color2css }} -{{ $themeLight := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.55 $c) | color2css }} - -{{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }} -{{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }} - :root { --theme-color: {{ $c | color2css }}; - --theme-color-dim: {{ $themeDim }}; - --theme-color-dimmer: {{ $themeDimmer }}; - --theme-color-dimmest: {{ $themeDimmest }}; - --theme-color-dark: {{ $themeDark }}; - --theme-color-light: {{ $themeLight }}; + --theme-color-dim: {{ lightness 0.75 $c | color2css }}; + --theme-color-dimmer: {{ lightness 0.8 $c | color2css }}; + --theme-color-dimmest: {{ lightness 0.85 $c | color2css }}; - --link-color: {{ $linkColor }}; - --link-hover-color: {{ $linkHoverColor }}; + --theme-color-dark: {{ lightness 0.35 $c | color2css }}; + --theme-color-light: {{ lightness 0.55 $c | color2css }}; - --input-lite-border: {{ $linkColor }}; + --link-color: {{ lightness 0.35 $c | color2css }}; + --link-hover-color: {{ lightness 0.45 $c | color2css }}; + + --background-even-background: {{ lightness 0.95 $c | color2css }}; + + --input-lite-border: var(--link-color); } -.accent { - background-color: {{ $themeDim }}; - background-color: var(--theme-dim); -} -.user-bar { - border-bottom-color: {{ $themeDim }}; - border-bottom-color: var(--theme-dim); -} -header .content-title .subtitle { - border-top-color: {{ $themeDim }}; - border-top-color: var(--theme-dim); +@media (prefers-color-scheme: dark) { + :root { + --theme-color-dim: {{ lightness 0.35 $c | color2css }}; + --theme-color-dimmer: {{ lightness 0.3 $c | color2css }}; + --theme-color-dimmest: {{ lightness 0.2 $c | color2css }}; + + --theme-color-dark: {{ lightness 0.30 $c | color2css }}; + --theme-color-light: {{ lightness 0.55 $c | color2css }}; + + --link-color: {{ lightness 0.55 $c | color2css }}; + --link-hover-color: {{ lightness 0.65 $c | color2css }}; + + --background-even-background: {{ lightness 0.15 $c | color2css }}; + } } -a, .thread:before, button, .button, input[type=button] { - color: {{ $linkColor }}; - color: var(--link-color); -} - -.submit, input[type=submit] { - color: white; -} - -a.submit:hover, .submit:hover, input[type=submit]:hover { - color: white; -} - -a:hover, button:hover, .button:hover, input[type=button]:hover { - color: {{ $linkHoverColor }}; - color: var(--link-hover-color); -} .unread .avatar-icon { - border: 2px solid {{ $linkColor }}; border: 2px solid var(--link-color); } - -.post-list-bg-odd:nth-of-type(odd) { - background-color: {{ .PostBgColor }}; -} - -.bg-theme { - background-color: {{ $c | color2css }}; - background-color: var(--theme-color); -} - -.bg-theme-dim { - background-color: {{ $themeDim }}; - background-color: var(--theme-color-dim); -} - -.bg-theme-dimmer { - background-color: {{ $themeDimmer }}; - background-color: var(--theme-color-dimmer); -} - -.bg-theme-dimmest { - background-color: {{ $themeDimmest }}; - background-color: var(--theme-color-dimmest); -} - -.bg-theme-dark { - background-color: {{ $themeDark }}; - background-color: var(--theme-color-dark); -} - -.bg-theme-light { - background-color: {{ $themeLight }}; - background-color: var(--theme-color-light); -} - -.b--theme { - border-color: {{ $c | color2css }}; - border-color: var(--theme-color); -} - -.b--theme-dim { - border-color: {{ $themeDim }}; - border-color: var(--theme-color-dim); -} - -.b--theme-dimmer { - border-color: {{ $themeDimmer }}; - border-color: var(--theme-color-dimmer); -} - -.b--theme-dimmest { - border-color: {{ $themeDimmest }}; - border-color: var(--theme-color-dimmest); -} - -.b--theme-dark { - border-color: {{ $themeDark }}; - border-color: var(--theme-color-dark); -} - -.b--theme-light { - border-color: {{ $themeLight }}; - border-color: var(--theme-color-light); -} - -:root { - --background-even-background: {{ .PostBgColor }}; -} - -/* Assets */ - -.half.light { - background-image:url("{{ statictheme "light" "accent_top_a.svg" }}"); -} - -.half.dark { - background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}"); -} diff --git a/src/website/projects.go b/src/website/projects.go index c95b8a8..e9fbb53 100644 --- a/src/website/projects.go +++ b/src/website/projects.go @@ -25,7 +25,6 @@ import ( "git.handmade.network/hmn/hmn/src/utils" "github.com/google/uuid" "github.com/jackc/pgx/v5" - "github.com/teacat/noire" ) const maxPersonalProjects = 10 @@ -39,26 +38,12 @@ func ProjectCSS(c *RequestContext) ResponseData { baseData := getBaseData(c, "", nil) - bgColor := noire.NewHex(color) - h, s, l := bgColor.HSL() - if baseData.Theme == "dark" { - l = 15 - } else { - l = 95 - } - if s > 20 { - s = 20 - } - bgColor = noire.NewHSL(h, s, l) - templateData := struct { templates.BaseData - Color string - PostBgColor string + Color string }{ - BaseData: baseData, - Color: color, - PostBgColor: bgColor.HTML(), + BaseData: baseData, + Color: color, } var res ResponseData diff --git a/todo-styles.md b/todo-styles.md index 8349034..1e44754 100644 --- a/todo-styles.md +++ b/todo-styles.md @@ -35,3 +35,7 @@ esbuild src\rawdata\scss\style.css --bundle --outdir=public --target=chrome109,f - [ ] Find that thing and kill it? - [ ] Probably remove uses of .tab - [ ] everything in _content.scss, ugh +- [ ] Reduce saturation of --background-even-background +- [ ] Update blog styles to not use `post` and other garbage + - [ ] Remove from forum.css +- [ ] Remove all uses of .content-block \ No newline at end of file