Wahoo more WIP haha
This commit is contained in:
parent
3181805dd4
commit
9286e5701d
277
public/style.css
277
public/style.css
|
@ -7166,6 +7166,10 @@ code {
|
||||||
--theme-color-light: #666;
|
--theme-color-light: #666;
|
||||||
--main-background-color: #f8f8f8;
|
--main-background-color: #f8f8f8;
|
||||||
--main-background-color-transparent: rgba(#f8f8f8, 0);
|
--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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
|
@ -7180,6 +7184,10 @@ code {
|
||||||
--theme-color-light: #666;
|
--theme-color-light: #666;
|
||||||
--main-background-color: #202020;
|
--main-background-color: #202020;
|
||||||
--main-background-color-transparent: rgba(#202020, 0);
|
--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;
|
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 {
|
.c--normal {
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
}
|
}
|
||||||
|
@ -7255,54 +7317,24 @@ code,
|
||||||
.c--inherit:active {
|
.c--inherit:active {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
.b--theme {
|
|
||||||
border-color: var(--theme-color);
|
|
||||||
}
|
|
||||||
.c--dim {
|
.c--dim {
|
||||||
color: var(--dim-color);
|
color: var(--dim-color);
|
||||||
}
|
}
|
||||||
.c--theme-dim {
|
.c--theme-dim {
|
||||||
color: var(--theme-color-dim);
|
color: var(--theme-color-dim);
|
||||||
}
|
}
|
||||||
.b--dim {
|
|
||||||
border-color: var(--dim-color);
|
|
||||||
}
|
|
||||||
.b--theme-dim {
|
|
||||||
border-color: var(--theme-color-dim);
|
|
||||||
}
|
|
||||||
.c--dimmer {
|
.c--dimmer {
|
||||||
color: var(--dimmer-color);
|
color: var(--dimmer-color);
|
||||||
}
|
}
|
||||||
.c--theme-dimmer {
|
.c--theme-dimmer {
|
||||||
color: var(--theme-color-dimmer);
|
color: var(--theme-color-dimmer);
|
||||||
}
|
}
|
||||||
.b--dimmer {
|
|
||||||
border-color: var(--dimmer-color);
|
|
||||||
}
|
|
||||||
.b--theme-dimmer {
|
|
||||||
border-color: var(--theme-color-dimmer);
|
|
||||||
}
|
|
||||||
.c--dimmest {
|
.c--dimmest {
|
||||||
color: var(--dimmest-color);
|
color: var(--dimmest-color);
|
||||||
}
|
}
|
||||||
.c--theme-dimmest {
|
.c--theme-dimmest {
|
||||||
color: var(--theme-color-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 {
|
.f8 {
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
}
|
}
|
||||||
|
@ -7662,6 +7694,191 @@ code,
|
||||||
--fade-color: var(--background-even-background);
|
--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 */
|
/* src/rawdata/scss/style.css */
|
||||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
/*! 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 {
|
.c--normal {
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
}
|
}
|
||||||
|
@ -90,10 +162,6 @@ code,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.b--theme {
|
|
||||||
border-color: var(--theme-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c--dim {
|
.c--dim {
|
||||||
color: var(--dim-color);
|
color: var(--dim-color);
|
||||||
}
|
}
|
||||||
|
@ -102,14 +170,6 @@ code,
|
||||||
color: var(--theme-color-dim);
|
color: var(--theme-color-dim);
|
||||||
}
|
}
|
||||||
|
|
||||||
.b--dim {
|
|
||||||
border-color: var(--dim-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.b--theme-dim {
|
|
||||||
border-color: var(--theme-color-dim);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c--dimmer {
|
.c--dimmer {
|
||||||
color: var(--dimmer-color);
|
color: var(--dimmer-color);
|
||||||
}
|
}
|
||||||
|
@ -118,14 +178,6 @@ code,
|
||||||
color: var(--theme-color-dimmer);
|
color: var(--theme-color-dimmer);
|
||||||
}
|
}
|
||||||
|
|
||||||
.b--dimmer {
|
|
||||||
border-color: var(--dimmer-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.b--theme-dimmer {
|
|
||||||
border-color: var(--theme-color-dimmer);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c--dimmest {
|
.c--dimmest {
|
||||||
color: var(--dimmest-color);
|
color: var(--dimmest-color);
|
||||||
}
|
}
|
||||||
|
@ -134,26 +186,6 @@ code,
|
||||||
color: var(--theme-color-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 {
|
.f8 {
|
||||||
font-size: 0.65rem;
|
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 "tachyons.min.css";
|
||||||
|
|
||||||
@import "vars.css";
|
@import "vars.css";
|
||||||
@import "core.css";
|
@import "core.css";
|
||||||
|
|
||||||
|
@import "forum.css";
|
||||||
|
@import "timeline.css";
|
|
@ -14,17 +14,17 @@
|
||||||
@import 'episodes';
|
@import 'episodes';
|
||||||
@import 'education';
|
@import 'education';
|
||||||
@import 'forms';
|
@import 'forms';
|
||||||
@import 'forum';
|
// @import 'forum';
|
||||||
@import 'header';
|
@import 'header';
|
||||||
@import 'icons';
|
@import 'icons';
|
||||||
@import 'irc';
|
@import 'irc';
|
||||||
@import 'landing';
|
// @import 'landing';
|
||||||
@import 'library';
|
@import 'library';
|
||||||
@import 'profile';
|
@import 'profile';
|
||||||
@import 'projects';
|
@import 'projects';
|
||||||
@import 'showcase';
|
@import 'showcase';
|
||||||
@import 'streams';
|
@import 'streams';
|
||||||
@import 'timeline';
|
// @import 'timeline';
|
||||||
@import 'carousel';
|
@import 'carousel';
|
||||||
@import 'notices';
|
@import 'notices';
|
||||||
@import 'progress_bar';
|
@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: #f8f8f8;
|
||||||
--main-background-color-transparent: rgba(#f8f8f8, 0);
|
--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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
@ -42,5 +48,11 @@ $breakpoint-large: screen and (min-width: 60em)
|
||||||
|
|
||||||
--main-background-color: #202020;
|
--main-background-color: #202020;
|
||||||
--main-background-color-transparent: rgba(#202020, 0);
|
--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.
|
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 }}">
|
<img class="avatar-icon mr2" src="{{ .FirstUser.AvatarUrl }}">
|
||||||
<div class="flex-grow-1 overflow-hidden">
|
<div class="flex-grow-1 overflow-hidden">
|
||||||
<div class="title nowrap truncate"><a href="{{ .Url }}">{{ .Title }}</a></div>
|
<div class="title nowrap truncate"><a href="{{ .Url }}">{{ .Title }}</a></div>
|
||||||
|
|
|
@ -1,141 +1,39 @@
|
||||||
{{ $c := hex2color .Color }}
|
{{ $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 {
|
:root {
|
||||||
--theme-color: {{ $c | color2css }};
|
--theme-color: {{ $c | color2css }};
|
||||||
--theme-color-dim: {{ $themeDim }};
|
|
||||||
--theme-color-dimmer: {{ $themeDimmer }};
|
|
||||||
--theme-color-dimmest: {{ $themeDimmest }};
|
|
||||||
|
|
||||||
--theme-color-dark: {{ $themeDark }};
|
--theme-color-dim: {{ lightness 0.75 $c | color2css }};
|
||||||
--theme-color-light: {{ $themeLight }};
|
--theme-color-dimmer: {{ lightness 0.8 $c | color2css }};
|
||||||
|
--theme-color-dimmest: {{ lightness 0.85 $c | color2css }};
|
||||||
|
|
||||||
--link-color: {{ $linkColor }};
|
--theme-color-dark: {{ lightness 0.35 $c | color2css }};
|
||||||
--link-hover-color: {{ $linkHoverColor }};
|
--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 {
|
@media (prefers-color-scheme: dark) {
|
||||||
background-color: {{ $themeDim }};
|
:root {
|
||||||
background-color: var(--theme-dim);
|
--theme-color-dim: {{ lightness 0.35 $c | color2css }};
|
||||||
}
|
--theme-color-dimmer: {{ lightness 0.3 $c | color2css }};
|
||||||
.user-bar {
|
--theme-color-dimmest: {{ lightness 0.2 $c | color2css }};
|
||||||
border-bottom-color: {{ $themeDim }};
|
|
||||||
border-bottom-color: var(--theme-dim);
|
--theme-color-dark: {{ lightness 0.30 $c | color2css }};
|
||||||
}
|
--theme-color-light: {{ lightness 0.55 $c | color2css }};
|
||||||
header .content-title .subtitle {
|
|
||||||
border-top-color: {{ $themeDim }};
|
--link-color: {{ lightness 0.55 $c | color2css }};
|
||||||
border-top-color: var(--theme-dim);
|
--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 {
|
.unread .avatar-icon {
|
||||||
border: 2px solid {{ $linkColor }};
|
|
||||||
border: 2px solid var(--link-color);
|
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"
|
"git.handmade.network/hmn/hmn/src/utils"
|
||||||
"github.com/google/uuid"
|
"github.com/google/uuid"
|
||||||
"github.com/jackc/pgx/v5"
|
"github.com/jackc/pgx/v5"
|
||||||
"github.com/teacat/noire"
|
|
||||||
)
|
)
|
||||||
|
|
||||||
const maxPersonalProjects = 10
|
const maxPersonalProjects = 10
|
||||||
|
@ -39,26 +38,12 @@ func ProjectCSS(c *RequestContext) ResponseData {
|
||||||
|
|
||||||
baseData := getBaseData(c, "", nil)
|
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 {
|
templateData := struct {
|
||||||
templates.BaseData
|
templates.BaseData
|
||||||
Color string
|
Color string
|
||||||
PostBgColor string
|
|
||||||
}{
|
}{
|
||||||
BaseData: baseData,
|
BaseData: baseData,
|
||||||
Color: color,
|
Color: color,
|
||||||
PostBgColor: bgColor.HTML(),
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var res ResponseData
|
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?
|
- [ ] Find that thing and kill it?
|
||||||
- [ ] Probably remove uses of .tab
|
- [ ] Probably remove uses of .tab
|
||||||
- [ ] everything in _content.scss, ugh
|
- [ ] 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