Wahoo more WIP haha
This commit is contained in:
Ben Visness
parent
3181805dd4
commit
9286e5701d
277
public/style.css
277
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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 :)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
@import "tachyons.min.css";
|
||||
|
||||
@import "vars.css";
|
||||
@import "core.css";
|
||||
@import "core.css";
|
||||
|
||||
@import "forum.css";
|
||||
@import "timeline.css";
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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.
|
||||
*/}}
|
||||
|
||||
<div class="thread-list-item flex items-center ph3 pv2 {{ if .Unread }}unread{{ else }}read{{ end }} post-list-bg-odd {{ .Classes }}">
|
||||
<div class="thread-list-item flex items-center ph3 pv2 {{ if .Unread }}unread{{ else }}read{{ end }} background-even {{ .Classes }}">
|
||||
<img class="avatar-icon mr2" src="{{ .FirstUser.AvatarUrl }}">
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div class="title nowrap truncate"><a href="{{ .Url }}">{{ .Title }}</a></div>
|
||||
|
|
|
|||
|
|
@ -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" }}");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue