nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Overhaul CSS vars

This commit is contained in:
Ben Visness 2024-06-27 17:34:09 -05:00
parent a602e02c9c
commit 06b270514c
44 changed files with 767 additions and 1114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/js/showcase.js
View File

@ -25,6 +25,7 @@ function doOnce(f) {
} }
} }
// TODO(redesign): Fix snippet editing, given that snippets are now presented very differently.
function makeShowcaseItem(timelineItem) { function makeShowcaseItem(timelineItem) {
const timestamp = showcaseTimestamp(timelineItem.date); const timestamp = showcaseTimestamp(timelineItem.date);
@ -45,7 +46,7 @@ function makeShowcaseItem(timelineItem) {
createModalContentFunc = () => { createModalContentFunc = () => {
const modalImage = document.createElement('img'); const modalImage = document.createElement('img');
modalImage.src = timelineItem.asset_url; modalImage.src = timelineItem.asset_url;
modalImage.classList.add('mw-100', 'mh-60vh'); modalImage.classList.add('mw-100', 'maxh-60vh');
return modalImage; return modalImage;
}; };
@ -76,7 +77,7 @@ function makeShowcaseItem(timelineItem) {
modalVideo.preload = 'metadata'; modalVideo.preload = 'metadata';
} }
modalVideo.controls = true; modalVideo.controls = true;
modalVideo.classList.add('mw-100', 'mh-60vh'); modalVideo.classList.add('mw-100', 'maxh-60vh');
return modalVideo; return modalVideo;
}; };

686
public/style.css
View File

File diff suppressed because it is too large Load Diff

20
public/style.old.css
View File

@ -11137,7 +11137,7 @@ article code {
} }
} }
.c--normal { .c-normal {
color: black; color: black;
color: var(--fg-font-color); color: var(--fg-font-color);
} }
@ -11250,39 +11250,39 @@ figure {
max-width: 80rem; max-width: 80rem;
} }
.mh-3 { .maxh-3 {
max-height: 4rem; max-height: 4rem;
} }
.mh-4 { .maxh-4 {
max-height: 8rem; max-height: 8rem;
} }
.mh-5 { .maxh-5 {
max-height: 16rem; max-height: 16rem;
} }
.mh-6 { .maxh-6 {
max-height: 32rem; max-height: 32rem;
} }
.mh-100 { .maxh-100 {
max-height: 100%; max-height: 100%;
} }
.mh-50vh { .maxh-50vh {
max-height: 50vh; max-height: 50vh;
} }
.mh-60vh { .maxh-60vh {
max-height: 60vh; max-height: 60vh;
} }
.mh-70vh { .maxh-70vh {
max-height: 70vh; max-height: 70vh;
} }
.mh-80vh { .maxh-80vh {
max-height: 80vh; max-height: 80vh;
} }

30
src/rawdata/scss/content.css
View File

@ -55,8 +55,8 @@
} }
hr { hr {
margin-left: var(--spacing-medium); margin-left: var(--spacing-3);
margin-right: var(--spacing-medium); margin-right: var(--spacing-3);
} }
div.code { div.code {
@ -80,13 +80,13 @@
} }
table { table {
margin-top: var(--spacing-small); margin-top: var(--spacing-2);
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-2);
} }
th, th,
td { td {
padding: var(--spacing-extra-small) var(--spacing-small); padding: var(--spacing-1) var(--spacing-2);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
@ -114,8 +114,8 @@
blockquote { blockquote {
border-color: var(--bg-3); border-color: var(--bg-3);
margin-left: var(--spacing-small); margin-left: var(--spacing-2);
padding-left: var(--spacing-small); padding-left: var(--spacing-2);
margin-right: 0; margin-right: 0;
border-left-style: solid; border-left-style: solid;
border-left-width: 1px; border-left-width: 1px;
@ -130,24 +130,24 @@
} }
figure { figure {
margin: var(--spacing-small) 0; margin: var(--spacing-2) 0;
padding: var(--spacing-small) var(--spacing-small) 0; padding: var(--spacing-2) var(--spacing-2) 0;
background-color: var(--dim-background); background-color: var(--dim-background);
border-radius: var(--border-radius-3); border-radius: var(--border-radius-3);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
margin-top: var(--spacing-medium); margin-top: var(--spacing-3);
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-3);
padding: var(--spacing-medium) var(--spacing-medium) 0; padding: var(--spacing-3) var(--spacing-3) 0;
} }
figcaption { figcaption {
margin: var(--spacing-extra-small) 0; margin: var(--spacing-1) 0;
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
margin: var(--spacing-small) 0; margin: var(--spacing-2) 0;
} }
} }
} }
@ -162,7 +162,7 @@
} }
.spoiler { .spoiler {
border-color: var(--spoiler-border); border-color: var(--c1);
border-width: 1px; border-width: 1px;
border-style: dashed; border-style: dashed;

640
src/rawdata/scss/core.css
View File

@ -1,18 +1,11 @@
/* Bare minimum styles */
* { * {
/* It's aggressive, but we like it aggressive */ /* It's aggressive, but we like it aggressive */
box-sizing: border-box; box-sizing: border-box;
border-color: var(--border-color); border-color: var(--border-color);
} }
br {
/* why, IE... */
border-style: none;
}
body { body {
background-color: var(--background-color); background-color: var(--c2);
color: var(--color); color: var(--color);
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
min-height: 100vh; min-height: 100vh;
@ -32,7 +25,7 @@ a,
} }
} }
.link--normal { .link-normal {
--link-color: var(--color); --link-color: var(--color);
} }
@ -56,23 +49,22 @@ h6 {
code, code,
pre, pre,
.mono { .mono {
/* TODO(redesign): We're not using Fira any more. */
font-family: "Fira Mono", monospace; font-family: "Fira Mono", monospace;
} }
br {
/* why, IE... */
border-style: none;
}
hr {
border: none;
border-bottom: 1px solid var(--border-color);
}
/* Utility */ /* Utility */
.bg--main {
background-color: var(--main-background-color);
}
.bg--card {
background-color: var(--card-background);
}
.bg--card-transparent {
background-color: var(--card-background-transparent);
}
.m--center { .m--center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -108,59 +100,7 @@ pre,
} }
} }
.b--theme-dark { .c-normal {
border-color: var(--theme-color-dark);
}
.b--theme-light {
border-color: var(--theme-color-light);
}
.bg1 {
background-color: var(--bg-1);
}
.bg2 {
background-color: var(--bg-2);
}
.bg3 {
background-color: var(--bg-3);
}
.bg4 {
background-color: var(--bg-4);
}
.bg5 {
background-color: var(--bg-5);
}
.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); color: var(--color);
} }
@ -173,6 +113,30 @@ pre,
} }
} }
.bg1 {
background-color: var(--c1);
}
.bg2 {
background-color: var(--c2);
}
.bg3 {
background-color: var(--c3);
}
.bg4 {
background-color: var(--c4);
}
.bg5 {
background-color: var(--c5);
}
.bg-transparent {
background-color: var(--c-transparent-background);
}
.f8 { .f8 {
font-size: 0.65rem; font-size: 0.65rem;
} }
@ -197,39 +161,39 @@ pre,
max-width: var(--site-width-narrow); max-width: var(--site-width-narrow);
} }
.mh-3 { .maxh-3 {
max-height: var(--height-3); max-height: var(--height-3);
} }
.mh-4 { .maxh-4 {
max-height: var(--height-4); max-height: var(--height-4);
} }
.mh-5 { .maxh-5 {
max-height: var(--height-5); max-height: var(--height-5);
} }
.mh-6 { .maxh-6 {
max-height: var(--height-6); max-height: var(--height-6);
} }
.mh-100 { .maxh-100 {
max-height: 100%; max-height: 100%;
} }
.mh-50vh { .maxh-50vh {
max-height: 50vh; max-height: 50vh;
} }
.mh-60vh { .maxh-60vh {
max-height: 60vh; max-height: 60vh;
} }
.mh-70vh { .maxh-70vh {
max-height: 70vh; max-height: 70vh;
} }
.mh-80vh { .maxh-80vh {
max-height: 80vh; max-height: 80vh;
} }
@ -261,80 +225,28 @@ pre,
min-height: var(--height-6); min-height: var(--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: var(--spacing-none);
}
.cg1 {
column-gap: var(--spacing-extra-small);
}
.cg2 {
column-gap: var(--spacing-small);
}
.cg3 {
column-gap: var(--spacing-medium);
}
.cg4 {
column-gap: var(--spacing-large);
}
.cg5 {
column-gap: var(--spacing-extra-large);
}
.g0 { .g0 {
gap: var(--spacing-none); gap: var(--spacing-0);
} }
.g1 { .g1 {
gap: var(--spacing-extra-small); gap: var(--spacing-1);
} }
.g2 { .g2 {
gap: var(--spacing-small); gap: var(--spacing-2);
} }
.g3 { .g3 {
gap: var(--spacing-medium); gap: var(--spacing-3);
} }
.g4 { .g4 {
gap: var(--spacing-large); gap: var(--spacing-4);
} }
.g5 { .g5 {
gap: var(--spacing-extra-large); gap: var(--spacing-5);
} }
.grid { .grid {
@ -357,6 +269,10 @@ pre,
display: none !important; display: none !important;
} }
:not([hidden])+.show-when-sibling-hidden {
display: none;
}
.fill-current { .fill-current {
fill: currentColor; fill: currentColor;
} }
@ -365,10 +281,6 @@ pre,
transform: rotate(180deg); transform: rotate(180deg);
} }
:not([hidden])+.show-when-sibling-hidden {
display: none;
}
.grab:hover { .grab:hover {
cursor: grab; cursor: grab;
@ -381,260 +293,11 @@ pre,
cursor: grabbing; cursor: grabbing;
} }
@media screen and (min-width: 35em) {
.w6-ns {
width: var(--width-6);
}
.w7-ns {
width: var(--width-7);
}
.w8-ns {
width: var(--width-8);
}
.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: var(--spacing-none);
}
.cg1-ns {
column-gap: var(--spacing-extra-small);
}
.cg2-ns {
column-gap: var(--spacing-small);
}
.cg3-ns {
column-gap: var(--spacing-medium);
}
.cg4-ns {
column-gap: var(--spacing-large);
}
.cg5-ns {
column-gap: var(--spacing-extra-large);
}
.grid-1-ns {
grid-template-columns: 1fr;
}
.grid-2-ns {
grid-template-columns: 1fr 1fr;
}
.bg1-ns {
background-color: var(--bg-1);
}
.bg2-ns {
background-color: var(--bg-2);
}
.bg3-ns {
background-color: var(--bg-3);
}
.bg4-ns {
background-color: var(--bg-4);
}
.bg5-ns {
background-color: var(--bg-5);
}
}
@media screen and (min-width: 35em) and (max-width: 60em) {
.w6-m {
width: var(--width-6);
}
.w7-m {
width: var(--width-7);
}
.w8-m {
width: var(--width-8);
}
.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: var(--spacing-extra-small);
}
.cg2-m {
column-gap: var(--spacing-small);
}
.cg3-m {
column-gap: var(--spacing-medium);
}
.cg4-m {
column-gap: var(--spacing-large);
}
.cg5-m {
column-gap: var(--spacing-extra-large);
}
.grid-1-m {
grid-template-columns: 1fr;
}
.grid-2-m {
grid-template-columns: 1fr 1fr;
}
.bg1-m {
background-color: var(--bg-1);
}
.bg2-m {
background-color: var(--bg-2);
}
.bg3-m {
background-color: var(--bg-3);
}
.bg4-m {
background-color: var(--bg-4);
}
.bg5-m {
background-color: var(--bg-5);
}
}
@media screen and (min-width: 60em) {
.w6-l {
width: var(--width-6);
}
.w7-l {
width: var(--width-7);
}
.w8-l {
width: var(--width-8);
}
.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: var(--spacing-extra-small);
}
.cg2-l {
column-gap: var(--spacing-small);
}
.cg3-l {
column-gap: var(--spacing-medium);
}
.cg4-l {
column-gap: var(--spacing-large);
}
.cg5-l {
column-gap: var(--spacing-extra-large);
}
.grid-1-l {
grid-template-columns: 1fr;
}
.grid-2-l {
grid-template-columns: 1fr 1fr;
}
.bg1-l {
background-color: var(--bg-1);
}
.bg2-l {
background-color: var(--bg-2);
}
.bg3-l {
background-color: var(--bg-3);
}
.bg4-l {
background-color: var(--bg-4);
}
.bg5-l {
background-color: var(--bg-5);
}
}
/* /*
TODO(redesign): It's really unfortunate that we rely on text stuff so much...it TODO(redesign): It's really unfortunate that we rely on text stuff so much...it
makes all our SVGs fuzzy. Evaluate the places we use this and see if we can use the makes all our SVGs fuzzy. Evaluate the places we use this and see if we can use the
lite variant instead. lite variant instead. (This will require us to carefully set width and height attributes
on our SVGs to ensure that they naturally render at the right size.)
*/ */
.svgicon { .svgicon {
svg { svg {
@ -690,11 +353,174 @@ lite variant instead.
} }
} }
/* Old stuff that should probably be moved? */ @media screen and (min-width: 35em) {
.bg1-ns {
background-color: var(--c1);
}
.bg2-ns {
background-color: var(--c2);
}
.bg3-ns {
background-color: var(--c3);
}
.bg4-ns {
background-color: var(--c4);
}
.bg5-ns {
background-color: var(--c5);
}
.w6-ns {
width: var(--width-6);
}
.w7-ns {
width: var(--width-7);
}
.w8-ns {
width: var(--width-8);
}
.grid-1-ns {
grid-template-columns: 1fr;
}
.grid-2-ns {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 35em) and (max-width: 60em) {
.bg1-m {
background-color: var(--c1);
}
.bg2-m {
background-color: var(--c2);
}
.bg3-m {
background-color: var(--c3);
}
.bg4-m {
background-color: var(--c4);
}
.bg5-m {
background-color: var(--c5);
}
.w6-m {
width: var(--width-6);
}
.w7-m {
width: var(--width-7);
}
.w8-m {
width: var(--width-8);
}
.grid-1-m {
grid-template-columns: 1fr;
}
.grid-2-m {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 60em) {
.bg1-l {
background-color: var(--c1);
}
.bg2-l {
background-color: var(--c2);
}
.bg3-l {
background-color: var(--c3);
}
.bg4-l {
background-color: var(--c4);
}
.bg5-l {
background-color: var(--c5);
}
.w6-l {
width: var(--width-6);
}
.w7-l {
width: var(--width-7);
}
.w8-l {
width: var(--width-8);
}
.grid-1-l {
grid-template-columns: 1fr;
}
.grid-2-l {
grid-template-columns: 1fr 1fr;
}
}
/* TODO(redesign): Compatibility styles; do not use in new designs. Remove when redesign is complete. */
.b--theme-dark {
border-color: var(--theme-color-dark);
}
.b--theme-light {
border-color: var(--theme-color-light);
}
.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);
}
.background-even:nth-of-type(even) {
background-color: var(--background-even-background);
--fade-color: var(--background-even-background);
}
.optionbar { .optionbar {
width: 100%; width: 100%;
padding-bottom: var(--spacing-small); padding-bottom: var(--spacing-2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -715,7 +541,7 @@ lite variant instead.
border-bottom-width: 0; border-bottom-width: 0;
border-top-width: 1px; border-top-width: 1px;
padding-bottom: 0; padding-bottom: 0;
padding-top: var(--spacing-small); padding-top: var(--spacing-2);
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
padding-top: 0; padding-top: 0;
@ -736,15 +562,15 @@ lite variant instead.
} }
.option { .option {
padding: var(--spacing-extra-small) var(--spacing-small); padding: var(--spacing-1) var(--spacing-2);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
padding-top: var(--spacing-small); padding-top: var(--spacing-2);
padding-bottom: var(--spacing-small); padding-bottom: var(--spacing-2);
} }
} }
} }
@ -755,13 +581,3 @@ lite variant instead.
margin: auto; margin: auto;
} }
} }
.tab {
background-color: var(--tab-background);
padding: var(--spacing-small);
}
.background-even:nth-of-type(even) {
background-color: var(--background-even-background);
--fade-color: var(--background-even-background);
}

10
src/rawdata/scss/editor.css
View File

@ -15,8 +15,8 @@
.edit-form-row { .edit-form-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: var(--spacing-medium); margin-top: var(--spacing-3);
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-3);
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
flex-direction: row; flex-direction: row;
@ -29,12 +29,12 @@
flex-shrink: 0; flex-shrink: 0;
text-align: left; text-align: left;
padding-right: 0; padding-right: 0;
padding-bottom: var(--spacing-extra-small); padding-bottom: var(--spacing-1);
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
width: var(--width-4); width: var(--width-4);
text-align: right; text-align: right;
padding-right: var(--spacing-small); padding-right: var(--spacing-2);
padding-bottom: 0; padding-bottom: 0;
} }
} }
@ -46,7 +46,7 @@
.pt-input-ns { .pt-input-ns {
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
padding-top: var(--spacing-extra-small); padding-top: var(--spacing-1);
} }
} }
} }

21
src/rawdata/scss/form.css
View File

@ -5,7 +5,7 @@
select { select {
color: var(--color); color: var(--color);
accent-color: var(--button-color-primary); accent-color: var(--button-color-primary);
background-color: var(--bg-3); background-color: var(--c3);
padding: 0.75rem; padding: 0.75rem;
outline: none; outline: none;
@ -28,8 +28,8 @@
} }
&:disabled { &:disabled {
background-color: var(--bg-5); background-color: var(--c5);
color: var(--border-color); color: var(--c4);
} }
} }
@ -40,19 +40,16 @@
button, button,
input[type=submit] { input[type=submit] {
color: var(--color); color: var(--color);
background-color: var(--bg-3); background-color: var(--c3);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
line-height: 1.5rem; line-height: 1.5rem;
border: none;
&.btn-primary { &.btn-primary {
background-color: var(--button-color-primary); background-color: var(--button-color-primary);
} }
&:not(.no-border) {
border: none;
}
&:not(.no-padding) { &:not(.no-padding) {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
} }
@ -65,7 +62,7 @@
.input-group { .input-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-extra-small); gap: var(--spacing-1);
line-height: 1.4; line-height: 1.4;
} }
@ -77,16 +74,16 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: var(--bg-2); background-color: var(--c2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
legend { legend {
background-color: var(--bg-1); background-color: var(--c1);
font-weight: bold; font-weight: bold;
float: left; float: left;
padding: var(--spacing-medium); padding: var(--spacing-3);
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);

10
src/rawdata/scss/header.css
View File

@ -114,7 +114,7 @@ header.old {
} }
header { header {
background-color: var(--bg-2); background-color: var(--c3);
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -129,7 +129,7 @@ header {
.menu-chevron { .menu-chevron {
/* ensure that it also has .svgicon */ /* ensure that it also has .svgicon */
display: inline-block; display: inline-block;
margin-left: var(--spacing-extra-small); margin-left: var(--spacing-1);
} }
.avatar { .avatar {
@ -142,7 +142,7 @@ header {
>a, >a,
>.root-item>a { >.root-item>a {
display: block; display: block;
padding: var(--spacing-medium); padding: var(--spacing-3);
} }
.submenu { .submenu {
@ -151,13 +151,13 @@ header {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
min-width: 8rem; min-width: 8rem;
background-color: var(--bg-2); background-color: var(--c3);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-top-width: 0; border-top-width: 0;
>a { >a {
padding: var(--spacing-small) var(--spacing-medium); padding: var(--spacing-2) var(--spacing-3);
display: block; display: block;
white-space: nowrap; white-space: nowrap;
z-index: 1; z-index: 1;

35
src/rawdata/scss/projects.css
View File

@ -51,31 +51,10 @@
} }
.project-card { .project-card {
color: var(--fg-font-color); background-color: var(--c3);
background-color: var(--card-background); color: var(--color);
&.project-card-black {
background-color: var(--card-background-transparent);
}
.slideshow & {
margin-top: 8px;
}
.image-container {
--image-size: 8rem;
width: var(--image-size);
min-height: var(--image-size);
.image {
position: absolute;
width: var(--image-size);
top: 0;
bottom: 0;
}
}
/* TODO(redesign): Audit use of badges. */
.badges:empty { .badges:empty {
display: none; display: none;
} }
@ -85,3 +64,11 @@
border-radius: 5px; border-radius: 5px;
} }
} }
.project-card-logo {
--image-size: 8rem;
width: var(--image-size);
height: var(--image-size);
object-fit: cover;
}

16
src/rawdata/scss/tachyons-vars.css
View File

@ -22,14 +22,14 @@
--measure: 30em; --measure: 30em;
--measure-narrow: 20em; --measure-narrow: 20em;
--measure-wide: 34em; --measure-wide: 34em;
--spacing-none: 0; --spacing-0: 0;
--spacing-extra-small: .25rem; --spacing-1: .25rem;
--spacing-small: .5rem; --spacing-2: .5rem;
--spacing-medium: 1rem; --spacing-3: 1rem;
--spacing-large: 2rem; --spacing-4: 2rem;
--spacing-extra-large: 4rem; --spacing-5: 4rem;
--spacing-extra-extra-large: 8rem; --spacing-6: 8rem;
--spacing-extra-extra-extra-large: 16rem; --spacing-7: 16rem;
--spacing-copy-separator: 1.5em; --spacing-copy-separator: 1.5em;
--height-1: 1rem; --height-1: 1rem;
--height-2: 2rem; --height-2: 2rem;

5
src/rawdata/scss/timeline.css
View File

@ -19,9 +19,8 @@
} }
.timeline-item { .timeline-item {
background-color: var(--card-background); background-color: var(--c3);
--fade-color: var(--card-background); --fade-color: var(--c3);
color: var(--main-color);
.timeline-media { .timeline-media {
background-color: var(--timeline-media-background); background-color: var(--timeline-media-background);

136
src/rawdata/scss/vars.css
View File

@ -8,13 +8,59 @@ $breakpoint-large: screen and (min-width: 60em)
@import "tachyons-vars.css"; @import "tachyons-vars.css";
/*
* COLOR GUIDE:
*
* Generally speaking, all text and backgrounds use the same palette of
* colors, which are various shades of gray. These are --c1 through --c5.
*
* --c1: Alternate page background color. Use when you need a different
* background color for variety.
* --c2: Primary page background color.
* --c3: Background color for content boxes. Works on both --c1 and --c2.
* --c4: Color of borders and lines.
* --c5: Color of disabled inputs.
*/
:root { :root {
--background-color: white; /* TODO(redesign): Probably not the right color for Soft Gray. Check with Jes. */
--color: black; --c1: #fafafa;
--link-color: #d12991; --c2: #f3f3f3;
--c3: #cbcbcb;
/* TODO(redesign): Probably way too dark. Check with Jes. */
--c4: #595959;
/* TODO(redesign): Need a --c5. */
--c-transparent-background: #fffffff3;
--red: #c61d24; --red: #c61d24;
/* Default theme colors in case the project.css is busted */ --color: #000;
--link-color: #d12991;
--timeline-media-background: #b4b4b466;
--border-color: var(--c4);
--border-color-focused: #4e55ff;
--border-color-error: #ff3a3a;
--button-color-primary: #ee84ff;
/* TODO(redesign): Audit these colors. */
--notice-hiatus-color: #aa7d30;
--notice-dead-color: #b42222;
--notice-lts-color: #43a52f;
--notice-success-color: #43a52f;
--notice-warn-color: #aa7d30;
--notice-failure-color: #b42222;
--site-width: 54rem;
--site-width-narrow: 40rem;
--avatar-size-small: 1.5rem;
--avatar-size-normal: 2.5rem;
/* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
--theme-color: #b1b1b1; --theme-color: #b1b1b1;
--theme-color-dim: #c0c0c0; --theme-color-dim: #c0c0c0;
--theme-color-dimmer: #dddddd; --theme-color-dimmer: #dddddd;
@ -26,49 +72,35 @@ $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: #ebebeb;
--card-background-hover: #f1f1f1;
--card-background-transparent: #ebebeb00;
--timeline-media-background: #b4b4b466;
--bg-1: #f8f8f8;
--bg-2: #e8e8e8;
--bg-3: #d8d8d8;
--border-color: #bfbfbf;
--border-color-focused: #4e55ff;
--border-color-error: #ff3a3a;
--button-color-primary: #ee84ff;
--forum-thread-read-color: #555; --forum-thread-read-color: #555;
--forum-thread-read-link-color: #888; --forum-thread-read-link-color: #888;
--notice-hiatus-color: #aa7d30;
--notice-dead-color: #b42222;
--notice-lts-color: #43a52f;
--notice-success-color: #43a52f;
--notice-warn-color: #aa7d30;
--notice-failure-color: #b42222;
--spoiler-border: #aaa;
--site-width: 54rem;
--site-width-narrow: 40rem;
--avatar-size-small: 1.5rem;
--avatar-size-normal: 2.5rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: #2f2f2f; --color: #fff;
--color: #eee;
--link-color: #ff5dc2; --link-color: #ff5dc2;
--color-error: #ff6666; --color-error: #ff6666;
--c1: #1f1f1f;
--c2: #2f2f2f;
--c3: #494949;
--c4: #595959;
--c5: #cbcbcb;
--c-transparent-background: #242424da;
--button-color-primary: #c900ea;
/* TODO(redesign): Audit these colors. */
--notice-hiatus-color: #876327;
--notice-dead-color: #7a2020;
--notice-lts-color: #2a681d;
--notice-success-color: #2a681d;
--notice-warn-color: #876327;
--notice-failure-color: #7a2020;
/* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
--theme-color: #666; --theme-color: #666;
--theme-color-dim: #444; --theme-color-dim: #444;
--theme-color-dimmer: #383838; --theme-color-dimmer: #383838;
@ -80,35 +112,7 @@ $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: #494949;
--card-background-hover: #333;
--card-background-transparent: #24242400;
--timeline-media-background: #24242466;
--bg-1: #1f1f1f;
--bg-2: #2f2f2f;
--bg-3: #494949;
--bg-4: #595959;
--bg-5: #cbcbcb;
--border-color: #595959;
--border-color-focused: #4e55ff;
--border-color-error: #ff3a3a;
--button-color-primary: #c900ea;
--forum-thread-read-color: #777; --forum-thread-read-color: #777;
--forum-thread-read-link-color: #999; --forum-thread-read-link-color: #999;
--notice-hiatus-color: #876327;
--notice-dead-color: #7a2020;
--notice-lts-color: #2a681d;
--notice-success-color: #2a681d;
--notice-warn-color: #876327;
--notice-failure-color: #7a2020;
--spoiler-border: #777;
} }
} }

2
src/templates/src/admin_approval_queue.html
View File

@ -11,7 +11,7 @@
{{ define "content" }} {{ define "content" }}
<div class="content-block"> <div class="content-block">
{{ range .UnapprovedUsers }} {{ range .UnapprovedUsers }}
<div class="flex flex-row bg--card mb3 pa2"> <div class="flex flex-row bg3 mb3 pa2">
<div class=" <div class="
sidebar flex-shrink-0 sidebar flex-shrink-0
flex flex-column items-stretch-l flex flex-column items-stretch-l

2
src/templates/src/blog_index.html
View File

@ -21,7 +21,7 @@
<a class="user" href="{{ .Author.ProfileUrl }}">{{ .Author.Name }}</a> &mdash; {{ timehtml (relativedate .Date) .Date }} <a class="user" href="{{ .Author.ProfileUrl }}">{{ .Author.Name }}</a> &mdash; {{ timehtml (relativedate .Date) .Date }}
</div> </div>
{{ if $.ShowContent }} {{ if $.ShowContent }}
<div class="overflow-hidden mh-5 mt2 relative"> <div class="overflow-hidden maxh-5 mt2 relative">
<div> <div>
{{ .Content }} {{ .Content }}
</div> </div>

6
src/templates/src/editor.html
View File

@ -53,14 +53,14 @@
{{ with .PostReplyingTo }} {{ with .PostReplyingTo }}
<h4 class="mt3">The post you're replying to:</h4> <h4 class="mt3">The post you're replying to:</h4>
<div class="mh-6 overflow-y-auto"> <div class="maxh-6 overflow-y-auto">
{{ template "forum_post_standalone.html" . }} {{ template "forum_post_standalone.html" . }}
</div> </div>
{{ end }} {{ end }}
{{ if .ShowEduOptions }} {{ if .ShowEduOptions }}
{{/* Hope you have a .Article field! */}} {{/* Hope you have a .Article field! */}}
<div class="bg3 br3 pa3 mt3"> <div class="bg2 br3 pa3 mt3">
<h4>Education Options</h4> <h4>Education Options</h4>
<div class="mb2"> <div class="mb2">
<label for="slug">Slug:</label> <label for="slug">Slug:</label>
@ -86,7 +86,7 @@
</div> </div>
{{ end }} {{ end }}
</form> </form>
<div id="preview-container" class="post post-preview mathjax flex-fair-ns overflow-auto mv3 mv0-ns ml3-ns pa3 br3 bg3 {{ .PreviewClass }}"> <div id="preview-container" class="post post-preview mathjax flex-fair-ns overflow-auto mv3 mv0-ns ml3-ns pa3 br3 bg2 {{ .PreviewClass }}">
<div id="preview" class="post-content"></div> <div id="preview" class="post-content"></div>
</div> </div>
<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}} <input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}

2
src/templates/src/education_article_delete.html
View File

@ -3,7 +3,7 @@
{{ define "content" }} {{ define "content" }}
<div class="mw7 m--center"> <div class="mw7 m--center">
<h3 class="mb3">Are you sure you want to delete this article?</h3> <h3 class="mb3">Are you sure you want to delete this article?</h3>
<div class="bg3 pa3 br3 tl post-content"> <div class="bg2 pa3 br3 tl post-content">
<h1>{{ .Article.Title }}</h1> <h1>{{ .Article.Title }}</h1>
{{ .Article.Content }} {{ .Article.Content }}
</div> </div>

14
src/templates/src/education_index.html
View File

@ -7,7 +7,7 @@
<p>Dive into one of these topics and start learning.</p> <p>Dive into one of these topics and start learning.</p>
<div class="flex flex-column flex-row-ns g3 mt3 mb4"> <div class="flex flex-column flex-row-ns g3 mt3 mb4">
<a href="#compilers" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column"> <a href="#compilers" class="edu-topic db flex-fair-ns bg2 br3 overflow-hidden c--inherit flex flex-column">
<img src="{{ static "education/compilers.jpg" }}"> <img src="{{ static "education/compilers.jpg" }}">
<div class="pa3"> <div class="pa3">
<h2>Compilers</h2> <h2>Compilers</h2>
@ -16,7 +16,7 @@
</div> </div>
</div> </div>
</a> </a>
<a href="#networking" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column"> <a href="#networking" class="edu-topic db flex-fair-ns bg2 br3 overflow-hidden c--inherit flex flex-column">
<img src="{{ static "education/networking.jpg" }}"> <img src="{{ static "education/networking.jpg" }}">
<div class="pa3"> <div class="pa3">
<h2>Networking</h2> <h2>Networking</h2>
@ -25,7 +25,7 @@
</div> </div>
</div> </div>
</a> </a>
<a href="#time" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column"> <a href="#time" class="edu-topic db flex-fair-ns bg2 br3 overflow-hidden c--inherit flex flex-column">
<img src="{{ static "education/time.jpg" }}"> <img src="{{ static "education/time.jpg" }}">
<div class="pa3"> <div class="pa3">
<h2>Time</h2> <h2>Time</h2>
@ -39,17 +39,17 @@
<h2>What makes us different?</h2> <h2>What makes us different?</h2>
<div class="flex flex-column flex-row-ns g3 mb4"> <div class="flex flex-column flex-row-ns g3 mb4">
<div class="flex-fair bg3 pa3 br2"> <div class="flex-fair bg2 pa3 br2">
<h3>Real material.</h3> <h3>Real material.</h3>
We equip you to go straight to the source. Our guides are structured around books and articles written by experts. We give you high-quality material to read, and the context to understand it. You do the rest. We equip you to go straight to the source. Our guides are structured around books and articles written by experts. We give you high-quality material to read, and the context to understand it. You do the rest.
</div> </div>
<div class="flex-fair bg3 pa3 br3"> <div class="flex-fair bg2 pa3 br3">
<h3>For any skill level.</h3> <h3>For any skill level.</h3>
Each guide runs the gamut from beginner to advanced. Whether you're new to a topic or have been practicing it for years, read through our guides and you'll find something new. Each guide runs the gamut from beginner to advanced. Whether you're new to a topic or have been practicing it for years, read through our guides and you'll find something new.
</div> </div>
<div class="flex-fair bg3 pa3 br3"> <div class="flex-fair bg2 pa3 br3">
<h3>Designed for programmers.</h3> <h3>Designed for programmers.</h3>
We're not here to teach you how to program. We're here to teach you a specific topic. We're not here to teach you how to program. We're here to teach you a specific topic.
@ -59,7 +59,7 @@
<h2>All Topics</h2> <h2>All Topics</h2>
{{ range .Courses }} {{ range .Courses }}
<div id="{{ .Slug }}" class="edu-course mv3 bg3 pa3 br3"> <div id="{{ .Slug }}" class="edu-course mv3 bg2 pa3 br3">
<h3>{{ .Name }}</h3> <h3>{{ .Name }}</h3>
<div class="overflow-hidden"> <div class="overflow-hidden">
<div class="edu-articles ml3 pl3"> <div class="edu-articles ml3 pl3">

2
src/templates/src/fishbowl_index.html
View File

@ -10,7 +10,7 @@
<div class="mt3 mw7"> <div class="mt3 mw7">
{{ range .Fishbowls }} {{ range .Fishbowls }}
<div class="br2 bg3 pa3 mb2"> <div class="br2 bg2 pa3 mb2">
{{ if .Valid }} {{ if .Valid }}
<a href="{{ .Url }}"><h3 class="f4 ma0">{{ .Fishbowl.Title }}</h3></a> <a href="{{ .Url }}"><h3 class="f4 ma0">{{ .Fishbowl.Title }}</h3></a>
{{ else }} {{ else }}

2
src/templates/src/include/footer-2024.html
View File

@ -1,5 +1,5 @@
<footer> <footer>
<div class="mv5 h3 fill-current link--normal"> <div class="mv5 h3 fill-current link-normal">
<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a> <a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
</div> </div>
</footer> </footer>

2
src/templates/src/include/forum_post_standalone.html
View File

@ -1,4 +1,4 @@
<div class="bg3 pa3 br3 tl"> <div class="bg2 pa3 br3 tl">
<div class="w-100 flex items-center"> <div class="w-100 flex items-center">
<div class="w-20 mw3 w3"> <div class="w-20 mw3 w3">
<!-- Mobile avatar --> <!-- Mobile avatar -->

2
src/templates/src/include/header-2024.html
View File

@ -1,4 +1,4 @@
<header id="site-header" class="flex flex-row items-center link--normal"> <header id="site-header" class="flex flex-row items-center link-normal">
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0"> <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
Handmade Handmade
</a> </a>

4
src/templates/src/include/header.html
View File

@ -63,7 +63,7 @@
<a class="pa2 ph3-l" aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#"> <a class="pa2 ph3-l" aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div> Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</a> </a>
<div class="submenu bw1 b--theme-dark bg--main" id="events-submenu"> <div class="submenu bw1 b--theme-dark bg3" id="events-submenu">
<a class="pa2 ph3-l" href="{{ .Header.JamsUrl }}">Jams</a> <a class="pa2 ph3-l" href="{{ .Header.JamsUrl }}">Jams</a>
<a class="pa2 ph3-l" href="{{ .Header.ConferencesUrl }}">Conferences</a> <a class="pa2 ph3-l" href="{{ .Header.ConferencesUrl }}">Conferences</a>
<a class="pa2 ph3-l" href="{{ .Header.FishbowlUrl }}">Fishbowls</a> <a class="pa2 ph3-l" href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
@ -79,7 +79,7 @@
<a class="pa2 ph3-l" aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#"> <a class="pa2 ph3-l" aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div> Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</a> </a>
<div class="submenu bw1 b--theme-dark bg--main" id="resource-submenu"> <div class="submenu bw1 b--theme-dark bg3" id="resource-submenu">
<a class="pa2 ph3-l" href="{{ .Header.EducationUrl }}">Education</a> <a class="pa2 ph3-l" href="{{ .Header.EducationUrl }}">Education</a>
</div> </div>
</div> </div>

18
src/templates/src/include/project_card.html
View File

@ -1,20 +1,16 @@
{{- /*gotype: git.handmade.network/hmn/hmn/src/templates.ProjectCardData*/ -}} <a class="bg3 c-normal flex g3 br2 overflow-hidden pa3" href="{{ .Url }}">
<a class="project-card pa3 flex g3 br2 overflow-hidden relative {{ .Classes }}" href="{{ .Project.Url }}" > {{ with .Logo }}
{{ with .Project.Logo }} <img class="project-card-logo" src="{{ . }}" alt="Project Logo">
<div class="image-container flex-shrink-0 aspect-ratio">
<div class="image bg-center cover aspect-ratio--1x1" style="background-image:url({{ . }})"></div>
</div>
{{ end }} {{ end }}
<div class="details flex-grow-1"> <div class="details flex-grow-1">
<h3 class="b mb2 f4">{{ .Project.Name }}</h3> <h3 class="b mb2 f4">{{ .Name }}</h3>
<div class="blurb">{{ .Project.Blurb }}</div> <div class="blurb">{{ .Blurb }}</div>
<hr> <hr>
<div>TODO: Authors</div> <div>TODO: Authors</div>
{{ if .Project.LifecycleString }} {{ if .LifecycleString }}
<div class="badges mt2"> <div class="badges mt2">
<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span> <span class="badge {{ .LifecycleBadgeClass }}">{{ .LifecycleString }}</span>
</div> </div>
{{ end }} {{ end }}
</div> </div>
</a> </a>

4
src/templates/src/include/role_card.html
View File

@ -1,7 +1,7 @@
<a href="{{ .Url }}"> <a href="{{ .Url }}">
<div class="role pa3 bg3 br3"> <div class="role pa3 bg2 br3">
<h2>{{ .Name }}</h2> <h2>{{ .Name }}</h2>
<div class="c--normal"> <div class="c-normal">
{{ .Description }} {{ .Description }}
</div> </div>
</div> </div>

1
src/templates/src/include/showcase_templates.html
View File

@ -44,5 +44,6 @@
<a data-tmpl="root" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2"> <a data-tmpl="root" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
<img data-tmpl="logo" class="db mr1 br1 h1-5" /> <img data-tmpl="logo" class="db mr1 br1 h1-5" />
<div data-tmpl="name"></div> <div data-tmpl="name"></div>
<div>TODO: don't use me :)</div>
</a> </a>
</template> </template>

2
src/templates/src/include/snippet_edit.html
View File

@ -55,7 +55,7 @@
<template id="snippet-edit-project"> <template id="snippet-edit-project">
<div data-tmpl="root" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2"> <div data-tmpl="root" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
<input data-tmpl="projectId" type="hidden" name="project_id" /> <input data-tmpl="projectId" type="hidden" name="project_id" />
<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/> <img data-tmpl="projectLogo" class="db mr1 br1"/>
<div data-tmpl="projectName"></div> <div data-tmpl="projectName"></div>
<a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a> <a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a>
</div> </div>

8
src/templates/src/include/timeline_item.html
View File

@ -18,7 +18,7 @@
<a href="{{ .Url }}">{{ .Title }}</a> <a href="{{ .Url }}">{{ .Title }}</a>
</div> </div>
{{ end }} {{ end }}
<div class="details link--normal"> <div class="details link-normal">
<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a> <a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
&mdash; {{ timehtml (absoluteshortdate .Date) .Date }} &mdash; {{ timehtml (absoluteshortdate .Date) .Date }}
</div> </div>
@ -29,7 +29,7 @@
<div class="dn rawdesc">{{ .RawDescription }}</div> <div class="dn rawdesc">{{ .RawDescription }}</div>
{{ end }} {{ end }}
{{ else }} {{ else }}
<div class="overflow-hidden flex-grow-1 flex flex-column g1 justify-center link--normal"> <div class="overflow-hidden flex-grow-1 flex flex-column g1 justify-center link-normal">
{{ if .Breadcrumbs }} {{ if .Breadcrumbs }}
<div>Use .ForumLayout if you want breadcrumbs :)</div> <div>Use .ForumLayout if you want breadcrumbs :)</div>
{{ end }} {{ end }}
@ -41,7 +41,7 @@
</div> </div>
{{ if eq (len .Projects) 1 }} {{ if eq (len .Projects) 1 }}
{{ $p := index .Projects 0 }} {{ $p := index .Projects 0 }}
<div class="overflow-hidden flex flex-column g1 justify-center link--normal tr"> <div class="overflow-hidden flex flex-column g1 justify-center link-normal tr">
<a class="user b" href="{{ $p.Url }}">{{ $p.Name }}</a> <a class="user b" href="{{ $p.Url }}">{{ $p.Name }}</a>
</div> </div>
{{ end }} {{ end }}
@ -80,7 +80,7 @@
{{ end }} {{ end }}
{{ if .Description }} {{ if .Description }}
<div class="mt3 overflow-hidden relative {{ if .TruncateDescription }}mh-5{{ end }}"> <div class="mt3 overflow-hidden relative {{ if .TruncateDescription }}maxh-5{{ end }}">
<div class="post-content">{{ trim .Description }}</div> <div class="post-content">{{ trim .Description }}</div>
{{ if .TruncateDescription }} {{ if .TruncateDescription }}
<div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div> <div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div>

2
src/templates/src/jam_2022_wrj_feed.html
View File

@ -38,7 +38,7 @@
<h3 class="mt0 mb3">Projects</h3> <h3 class="mt0 mb3">Projects</h3>
<div class="projects flex flex-column g3 back-to-normal"> <div class="projects flex flex-column g3 back-to-normal">
{{ range .JamProjects }} {{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
</div> </div>

2
src/templates/src/jam_2022_wrj_index.html
View File

@ -71,7 +71,7 @@
<h2>Submitted projects</h2> <h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal"> <div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }} {{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<div class="actions flex justify-center"> <div class="actions flex justify-center">

3
src/templates/src/jam_2023_vj_feed.html
View File

@ -32,8 +32,7 @@
<div class="w-40-ns flex-shrink-0"> <div class="w-40-ns flex-shrink-0">
<h3 class="mt0 mb3">Projects</h3> <h3 class="mt0 mb3">Projects</h3>
<div class="projects flex flex-column g3 back-to-normal"> <div class="projects flex flex-column g3 back-to-normal">
{{ range .JamProjects }} {{ template "project_card.html" projectcarddata {{ range .JamProjects }} {{ template "project_card.html" . }} {{ end }}
. "" }} {{ end }}
</div> </div>
</div> </div>
</div> </div>

2
src/templates/src/jam_2023_vj_index.html
View File

@ -97,7 +97,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
<div class="mw8 m--center ph3 ph4-l"> <div class="mw8 m--center ph3 ph4-l">
<h2>Submitted projects</h2> <h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal"> <div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }} {{ template "project_card.html" projectcarddata . "" }} {{ end }} {{ range .JamProjects }} {{ template "project_card.html" . }} {{ end }}
</div> </div>
<div class="actions flex justify-center"> <div class="actions flex justify-center">
<a <a

2
src/templates/src/jam_2023_vj_recap.html
View File

@ -57,7 +57,7 @@
<a class="db mt4" href="https://handmade.network/p/386/png-chunk-explorer/"> <a class="db mt4" href="https://handmade.network/p/386/png-chunk-explorer/">
<h3>PNG Chunk Explorer</h3> <h3>PNG Chunk Explorer</h3>
</a> </a>
<p><img class="br2 mh-6" src="{{ static "visjam2023/pngexplorer.png" }}"></p> <p><img class="br2 maxh-6" src="{{ static "visjam2023/pngexplorer.png" }}"></p>
<p>This is a great project that not only shows you the structure of a PNG file, but <em>teaches</em> you in the process. This project puts the familiar hex view alongside a nested description of the format's structure, explaining the purpose of each section and linking to the spec in the process.</p> <p>This is a great project that not only shows you the structure of a PNG file, but <em>teaches</em> you in the process. This project puts the familiar hex view alongside a nested description of the format's structure, explaining the purpose of each section and linking to the spec in the process.</p>
<p>It also parses each section and tailors the description to your specific image. The result is far richer than a simple hex viewer and far more more educational than a spec or an explainer article. I love the result and I would love to see this expanded in the future with even more features and to more formats!</p> <p>It also parses each section and tailors the description to your specific image. The result is far richer than a simple hex viewer and far more more educational than a spec or an explainer article. I love the result and I would love to see this expanded in the future with even more features and to more formats!</p>
<p>Since this is a web app, you can play with it <a href="https://evanhahn.gitlab.io/png-explorer/">right now</a>, and I recommend that you do.</p> <p>Since this is a web app, you can play with it <a href="https://evanhahn.gitlab.io/png-explorer/">right now</a>, and I recommend that you do.</p>

2
src/templates/src/jam_2023_wrj_feed.html
View File

@ -38,7 +38,7 @@
<h3 class="mt0 mb3">Projects</h3> <h3 class="mt0 mb3">Projects</h3>
<div class="projects flex flex-column g3 back-to-normal"> <div class="projects flex flex-column g3 back-to-normal">
{{ range .JamProjects }} {{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
</div> </div>

2
src/templates/src/jam_2023_wrj_index.html
View File

@ -90,7 +90,7 @@
<h2>Submitted projects</h2> <h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal"> <div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }} {{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<div class="actions flex justify-center"> <div class="actions flex justify-center">

4
src/templates/src/jams_index.html
View File

@ -10,7 +10,7 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="mw8 post-content ph3 pv3 center"> <div class="mw-site post-content ph3 pv3 center">
<h2>Jams</h2> <h2>Jams</h2>
<p>Since 2020, we have been running programming jams to encourage community members to explore new ideas and start projects. You can view all the past submissions and results here.</p> <p>Since 2020, we have been running programming jams to encourage community members to explore new ideas and start projects. You can view all the past submissions and results here.</p>
@ -41,7 +41,7 @@
<img src="{{ static "wheeljam2021/TwitterCard.png" }}"> <img src="{{ static "wheeljam2021/TwitterCard.png" }}">
</div> </div>
</a> </a>
<a href="{{ .LispJamUrl }}" class="br2 overflow-hidden relative aspect-ratio--2x1 bg--card"> <a href="{{ .LispJamUrl }}" class="br2 overflow-hidden relative aspect-ratio--2x1 bg3">
<div class="aspect-ratio--object flex flex-column flex justify-center items-center f3 c--dim"> <div class="aspect-ratio--object flex flex-column flex justify-center items-center f3 c--dim">
<h3>LISP Jam</h3> <h3>LISP Jam</h3>
</div> </div>

10
src/templates/src/landing.html
View File

@ -63,7 +63,7 @@
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
} }
</style> </style>
<div id="welcome" class="br3 pa3 pa4-ns bg--card f5"> <div id="welcome" class="br3 pa3 pa4-ns bg3 f5">
<div id="welcome-logo" class="h4 mb3 mb4-ns"> <div id="welcome-logo" class="h4 mb3 mb4-ns">
{{ svg "hmn_circuit" }} {{ svg "hmn_circuit" }}
</div> </div>
@ -87,7 +87,7 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="w5 flex flex-column g2 flex-shrink-0"> <div class="w5 flex flex-column g2 flex-shrink-0">
{{ if .User }} {{ if .User }}
<div class="sidebar-card bg--card link--normal"> <div class="sidebar-card bg3 link-normal">
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer"> <div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
<span class="f7">Your projects</span> <span class="f7">Your projects</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span> <span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
@ -106,7 +106,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="sidebar-card bg--card link--normal"> <div class="sidebar-card bg3 link-normal">
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer"> <div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
<span class="f7">Following</span> <span class="f7">Following</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span> <span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
@ -122,7 +122,7 @@
</div> </div>
</div> </div>
{{ else }} {{ else }}
<div class="bg--card link--normal"> <div class="bg3 link-normal">
<div class="pa3 flex flex-column g2"> <div class="pa3 flex flex-column g2">
<div class="b">Join the Handmade Network</div> <div class="b">Join the Handmade Network</div>
<div class="f6 post-content">Share your own Handmade projects with the community.</div> <div class="f6 post-content">Share your own Handmade projects with the community.</div>
@ -133,7 +133,7 @@
</a> </a>
</div> </div>
{{ end }} {{ end }}
<div class="f7 tc link--normal"> <div class="f7 tc link-normal">
<a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - TODO: HISTORY <a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - TODO: HISTORY
</div> </div>
</div> </div>

4
src/templates/src/layouts/base.html
View File

@ -75,11 +75,11 @@
</head> </head>
<body class="{{ join " " .BodyClasses }}"> <body class="{{ join " " .BodyClasses }}">
<div class="bg--main m--center mw-site ph3-m ph4-l"> <div class="m--center mw-site ph3-m ph4-l">
{{ template "header.html" . }}
<div class="notice notice-warn mt3 mb2 white ph3 pv2 br2-ns"> <div class="notice notice-warn mt3 mb2 white ph3 pv2 br2-ns">
We are currently in the process of converting the website to the new design. Some pages, like this one, are still broken. We appreciate your patience. We are currently in the process of converting the website to the new design. Some pages, like this one, are still broken. We appreciate your patience.
</div> </div>
{{ template "header.html" . }}
{{ template "notices.html" .Notices }} {{ template "notices.html" .Notices }}
{{ with .Breadcrumbs }} {{ with .Breadcrumbs }}
<div class="tc tl-ns ph2 ph0-ns mb2"> <div class="tc tl-ns ph2 ph0-ns mb2">

20
src/templates/src/project_edit.html
View File

@ -21,8 +21,8 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="bg1 flex bb"> <div class="flex bb">
<form id="project_form" class="hmn-form pa4 flex-fair" method="POST" enctype="multipart/form-data"> <form id="project_form" class="hmn-form bg1 pa4 flex-fair" method="POST" enctype="multipart/form-data">
{{ csrftoken .Session }} {{ csrftoken .Session }}
<h1 class="f3"> <h1 class="f3">
@ -116,24 +116,24 @@
<legend>Owners</legend> <legend>Owners</legend>
<div class="pa3"> <div class="pa3">
<div class="flex"> <div class="flex">
<input class="flex-grow-1 no-border bl bt bb br-0" id="owner_name" type="text" placeholder="Enter another owner's username" /> <input class="flex-grow-1 bl bt bb br-0" id="owner_name" type="text" placeholder="Enter another owner's username" />
<button class="flex no-padding no-border pa3 bt br bb bl-0 also-focus" id="owner_add"><span class="flex w1">{{ svg "add" }}</span></button> <button class="flex no-padding pa3 bt br bb bl-0 also-focus" id="owner_add"><span class="flex w1">{{ svg "add" }}</span></button>
</div> </div>
<div id="owners_error" class="f6"></div> <div id="owners_error" class="f6"></div>
<div id="owner_list" class="pt3 flex flex-wrap g3"> <div id="owner_list" class="pt3 flex flex-wrap g3">
<template id="owner_row"> <template id="owner_row">
<div class="owner_row flex flex-row items-center bg3 pa2" data-tmpl="root"> <div class="owner_row flex flex-row items-center bg2 pa2" data-tmpl="root">
<input type="hidden" name="owners" data-tmpl="input" /> <input type="hidden" name="owners" data-tmpl="input" />
<span data-tmpl="name"></span> <span data-tmpl="name"></span>
<a class="remove_owner svgicon f7 link--normal pl2" href="javascript:;">{{ svg "close" }}</a> <a class="remove_owner svgicon f7 link-normal pl2" href="javascript:;">{{ svg "close" }}</a>
</div> </div>
</template> </template>
{{ range .ProjectSettings.Owners }} {{ range .ProjectSettings.Owners }}
<div class="owner_row flex flex-row items-center bg3 pa2"> <div class="owner_row flex flex-row items-center bg2 pa2">
<input type="hidden" name="owners" value="{{ .Username }}" /> <input type="hidden" name="owners" value="{{ .Username }}" />
<span>{{ .Username }}</span> <span>{{ .Username }}</span>
{{ if (or $.User.IsStaff (ne .ID $.User.ID)) }} {{ if (or $.User.IsStaff (ne .ID $.User.ID)) }}
<a class="remove_owner svgicon f7 link--normal pl2" href="javascript:;">{{ svg "close" }}</a> <a class="remove_owner svgicon f7 link-normal pl2" href="javascript:;">{{ svg "close" }}</a>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
@ -170,7 +170,7 @@
<span class="link_handle svgicon pr3 pointer grab" onmousedown="startLinkDrag(event)">{{ svg "draggable" }}</span> <span class="link_handle svgicon pr3 pointer grab" onmousedown="startLinkDrag(event)">{{ svg "draggable" }}</span>
<input data-tmpl="nameInput" class="link_name mr3 w5" type="text" placeholder="Name" /> <input data-tmpl="nameInput" class="link_name mr3 w5" type="text" placeholder="Name" />
<input data-tmpl="urlInput" class="link_url flex-grow-1" type="url" placeholder="Link" /> <input data-tmpl="urlInput" class="link_url flex-grow-1" type="url" placeholder="Link" />
<a class="delete_link svgicon link--normal pl3 f3" href="javascript:;" onclick="deleteLink(event)">{{ svg "delete" }}</a> <a class="delete_link svgicon link-normal pl3 f3" href="javascript:;" onclick="deleteLink(event)">{{ svg "delete" }}</a>
</div> </div>
</template> </template>
<template id="link_row_dummy"> <template id="link_row_dummy">
@ -219,7 +219,7 @@
</div> </div>
</div> </div>
</form> </form>
<div class="flex-fair bl pa4 bg2"> <div class="flex-fair bl pa4">
<div id="desc-preview" class="w-100 post-content"></div> <div id="desc-preview" class="w-100 post-content"></div>
</div> </div>
</div> </div>

53
src/templates/src/project_homepage.html
View File

@ -8,19 +8,19 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="flex flex-row justify-center"> <div class="flex justify-center">
<div class="flex-grow-1 flex flex-column items-center mw-site pt4"> <div class="flex-grow-1 flex flex-column items-center mw-site pt4">
<div class="w-100 h5 bg-white-50 bg-center cover" style="background-image: url('{{ .Project.HeaderImage }}')"> <div class="w-100 h5 bg-white-50 bg-center cover" style="background-image: url('{{ .Project.HeaderImage }}')">
<div class="flex justify-end pa3 g3 link--normal b"> <div class="flex justify-end pa3 g3 link-normal b">
{{ with .NamedLinks }} {{ with .NamedLinks }}
<div class="bg--card-transparent flex"> <div class="bg-transparent flex">
{{ range . }} {{ range . }}
<a class="flex ph3 pv2 flex items-center" href="{{ .Url }}">{{ .Name }}<span class="svgicon f6 ml2">{{ svg "arrow-right-up" }}</span></a> <a class="flex ph3 pv2 flex items-center" href="{{ .Url }}">{{ .Name }}<span class="svgicon f6 ml2">{{ svg "arrow-right-up" }}</span></a>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
{{ with .UnnamedLinks }} {{ with .UnnamedLinks }}
<div class="bg--card-transparent flex items-center ph1"> <div class="bg-transparent flex items-center ph1">
{{ range . }} {{ range . }}
<a class="flex ph2" href="{{ .Url }}" title="{{ .ServiceName }}{{ with .Username }} ({{ . }}){{ end }}">{{ svg (strjoin "logos/" .Icon) }}</a> <a class="flex ph2" href="{{ .Url }}" title="{{ .ServiceName }}{{ with .Username }} ({{ . }}){{ end }}">{{ svg (strjoin "logos/" .Icon) }}</a>
{{ end }} {{ end }}
@ -28,19 +28,35 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div class="w-100 mw-site-narrow flex justify-center" style="margin-top: -3rem"> <div class="w-100 mw-site-narrow pa3 bg-transparent link-normal flex g3 overflow-hidden" style="margin-top: -4rem">
{{ template "project_card.html" projectcarddata .Project "flex-grow-1 project-card-black" }} {{ if .Project.Logo }}
<a href="{{ .Project.Url }}">
<img class="project-card-logo" src="{{ .Project.Logo }}" alt="Project Logo">
</a>
{{ end }}
<div class="details flex-grow-1">
<a href="{{ .Project.Url }}"><h3 class="b mb2 f4">{{ .Project.Name }}</h3></a>
<div class="blurb">{{ .Project.Blurb }}</div>
<hr>
<div>TODO: Authors</div>
{{ if .Project.LifecycleString }}
<div class="badges mt2">
<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span>
</div>
{{ end }}
</div>
</div> </div>
{{ if .Project.ParsedDescription }} {{ if .Project.ParsedDescription }}
<div id="longdesc" class="description w-100 mw-site-narrow pt4"> <div id="longdesc" class="description w-100 mw-site-narrow pt4">
<h3 class="f4">About {{ .Project.Name }}</h3> <h3 class="f4">About {{ .Project.Name }}</h3>
<hr class="mv3"> <hr class="mv3">
<div class="longdesc-content post-content mh-5 overflow-hidden"> <div class="longdesc-content post-content maxh-5 overflow-hidden">
{{ .Project.ParsedDescription }} {{ .Project.ParsedDescription }}
</div> </div>
<a class="longdesc-link pt3 db" href="#"> <a class="longdesc-link pt3 db" href="#">
<span class="longdesc-text">Read more</span> <span class="svgicon f7 dib">{{ svg "chevron-down-thick" }}</span> <span class="longdesc-text">Read more</span> <span class="svgicon f7 dib">{{ svg "chevron-down-thick" }}</span>
</a> </a>
{{/* TODO(redesign): Add a fade at the bottom of this. */}}
</div> </div>
{{ end }} {{ end }}
{{ if .FollowUrl }} {{ if .FollowUrl }}
@ -71,11 +87,13 @@
}); });
</script> </script>
{{ end }} {{ end }}
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }} </div>
<hr class="w-100 mv4"> </div>
<div class="w-100 flex g3"> {{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
<div class="bg1 mt4 bt bb pv4 flex justify-center">
<div class="w-100 mw-site flex g3">
<div class="flex flex-column g3"> <div class="flex flex-column g3">
<div class="bg--card pa3 w5"> <div class="bg3 pa3 w5">
Filters Filters
</div> </div>
</div> </div>
@ -95,17 +113,16 @@
</div> </div>
</div> </div>
</div> </div>
{{ end }}
</div>
</div> </div>
{{ end }}
<div class="flex flex-column flex-row-l"> <div class="flex flex-column flex-row-l">
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
{{ with .Screenshots }} {{ with .Screenshots }}
<div class="carousel-container mw-100 mb3"> <div class="carousel-container mw-100 mb3">
<div class="carousel aspect-ratio aspect-ratio--16x9 overflow-hidden bg3 br2-ns"> <div class="carousel aspect-ratio aspect-ratio--16x9 overflow-hidden bg2 br2-ns">
<div class="dn db-l"> <div class="dn db-l">
{{ range $index, $screenshot := . }} {{ range $index, $screenshot := . }}
<div class="carousel-item aspect-ratio--object bg3 {{ if eq $index 0 }}active{{ end }}"> <div class="carousel-item aspect-ratio--object bg2 {{ if eq $index 0 }}active{{ end }}">
<div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div> <div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div>
</div> </div>
{{ end }} {{ end }}
@ -199,14 +216,14 @@
const expandText = longdesc.querySelector(".longdesc-text"); const expandText = longdesc.querySelector(".longdesc-text");
const chevron = longdesc.querySelector(".svgicon"); const chevron = longdesc.querySelector(".svgicon");
const expanding = longdescContent.classList.contains("mh-5"); const expanding = longdescContent.classList.contains("maxh-5");
longdescContent.classList.toggle("mh-5", !expanding); longdescContent.classList.toggle("maxh-5", !expanding);
expandText.innerText = expanding ? "Read less" : "Read more"; expandText.innerText = expanding ? "Read less" : "Read more";
chevron.classList.toggle("rot-180", expanding); chevron.classList.toggle("rot-180", expanding);
}); });
function showOrHideLongdescLink() { function showOrHideLongdescLink() {
// The content has mh-5, which is max-height: 16rem // The content has maxh-5, which is max-height: 16rem
const hide = longdescContent.clientHeight < rem2px(16); const hide = longdescContent.clientHeight < rem2px(16);
longdescLink.classList.toggle("dn", hide); longdescLink.classList.toggle("dn", hide);
longdescLink.classList.toggle("db", !hide); longdescLink.classList.toggle("db", !hide);

24
src/templates/src/project_index.html
View File

@ -8,9 +8,9 @@
<div> <div>
{{ with .OfficialProjects }} {{ with .OfficialProjects }}
<div class="carousel-container project-carousel mw-100 mv2 mv3-ns m--center dn db-ns"> <div class="carousel-container project-carousel mw-100 mv2 mv3-ns m--center dn db-ns">
<div class="carousel pa3 h5 overflow-hidden bg3 br2-ns"> <div class="carousel pa3 h5 overflow-hidden bg2 br2-ns">
{{ range $index, $project := . }} {{ range $index, $project := . }}
<div class="carousel-item flex pv3 pl3 w-100 h-100 bg3 items-center {{ if eq $index 0 }}active{{ end }}"> <div class="carousel-item flex pv3 pl3 w-100 h-100 bg2 items-center {{ if eq $index 0 }}active{{ end }}">
<div class="flex-grow-1 pr3 relative flex flex-column h-100 justify-center"> <div class="flex-grow-1 pr3 relative flex flex-column h-100 justify-center">
<a href="{{ $project.Url }}"> <a href="{{ $project.Url }}">
<h3 class="f3">{{ $project.Name }}</h3> <h3 class="f3">{{ $project.Name }}</h3>
@ -33,47 +33,47 @@
{{ end }} {{ end }}
<div class="flex flex-column g3"> <div class="flex flex-column g3">
{{ if .CurrentJamProjects }} {{ if .CurrentJamProjects }}
<div class="ph3 pt3 bg3 br2 flex flex-column"> <div class="ph3 pt3 bg2 br2 flex flex-column">
<h2>{{ template "jam_name" .CurrentJamSlug }}</h2> <h2>{{ template "jam_name" .CurrentJamSlug }}</h2>
<p>These projects are submissions to the {{ template "jam_name" .CurrentJamSlug }}, which is happening <b>right now!</b> <a href="{{ .CurrentJamLink }}">Learn more »</a> <p>These projects are submissions to the {{ template "jam_name" .CurrentJamSlug }}, which is happening <b>right now!</b> <a href="{{ .CurrentJamLink }}">Learn more »</a>
<div class="grid grid-1 grid-2-ns g3"> <div class="grid grid-1 grid-2-ns g3">
{{ range .CurrentJamProjects }} {{ range .CurrentJamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<a href="{{ .CurrentJamProjectsLink }}" class="pa3 tc">See more »</a> <a href="{{ .CurrentJamProjectsLink }}" class="pa3 tc">See more »</a>
</div> </div>
{{ end }} {{ end }}
{{ if .OfficialProjects }} {{ if .OfficialProjects }}
<div class="ph3 pt3 bg3 br2 flex flex-column"> <div class="ph3 pt3 bg2 br2 flex flex-column">
<h2 class="f3 mb2">Official Projects</h2> <h2 class="f3 mb2">Official Projects</h2>
<div class="grid grid-1 grid-2-ns g3"> <div class="grid grid-1 grid-2-ns g3">
{{ range .OfficialProjects }} {{ range .OfficialProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<a href="{{ .OfficialProjectsLink }}" class="pa3 tc">See more »</a> <a href="{{ .OfficialProjectsLink }}" class="pa3 tc">See more »</a>
</div> </div>
{{ end }} {{ end }}
{{ if .PersonalProjects }} {{ if .PersonalProjects }}
<div class="ph3 pt3 bg3 br2 flex flex-column"> <div class="ph3 pt3 bg2 br2 flex flex-column">
<h2 class="f3 mb2">Personal Projects</h2> <h2 class="f3 mb2">Personal Projects</h2>
<div>Many community members have projects of their own. Want to join them? <a href="{{ .CreateProjectLink }}">Create your own.</a></div> <div>Many community members have projects of their own. Want to join them? <a href="{{ .CreateProjectLink }}">Create your own.</a></div>
<div class="mt3 grid grid-1 grid-2-ns g3"> <div class="mt3 grid grid-1 grid-2-ns g3">
{{ range .PersonalProjects }} {{ range .PersonalProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<a href="{{ .PersonalProjectsLink }}" class="pa3 tc">See more »</a> <a href="{{ .PersonalProjectsLink }}" class="pa3 tc">See more »</a>
</div> </div>
{{ end }} {{ end }}
{{ if .PreviousJamProjects }} {{ if .PreviousJamProjects }}
<div class="ph3 pt3 bg3 br2 flex flex-column"> <div class="ph3 pt3 bg2 br2 flex flex-column">
<h2>{{ template "jam_name" .PreviousJamSlug }}</h2> <h2>{{ template "jam_name" .PreviousJamSlug }}</h2>
<p>The following projects were submissions to our most recent jam. <a href="{{ .PreviousJamLink }}">Learn more »</a></p> <p>The following projects were submissions to our most recent jam. <a href="{{ .PreviousJamLink }}">Learn more »</a></p>
<div class="grid grid-1 grid-2-ns g3"> <div class="grid grid-1 grid-2-ns g3">
{{ range .PreviousJamProjects }} {{ range .PreviousJamProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>
<a href="{{ .PreviousJamProjectsLink }}" class="pa3 tc">See more »</a> <a href="{{ .PreviousJamProjectsLink }}" class="pa3 tc">See more »</a>
@ -100,7 +100,7 @@
<h2>{{ template "jam_name" .Category }}</h2> <h2>{{ template "jam_name" .Category }}</h2>
<p>The following projects were submissions to the {{ template "jam_name" .Category }}. <a href="{{ .PageJamLink }}">Learn more »</a></p> <p>The following projects were submissions to the {{ template "jam_name" .Category }}. <a href="{{ .PageJamLink }}">Learn more »</a></p>
{{ end }} {{ end }}
<div class="bg3-ns br2"> <div class="bg2-ns br2">
{{ if gt .Pagination.Total 1 }} {{ if gt .Pagination.Total 1 }}
<div class="optionbar pv2 ph3"> <div class="optionbar pv2 ph3">
<div class="options"></div> <div class="options"></div>
@ -112,7 +112,7 @@
<div class="pa3 grid grid-1 grid-2-ns g3"> <div class="pa3 grid grid-1 grid-2-ns g3">
{{ range .PageProjects }} {{ range .PageProjects }}
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
{{ end }} {{ end }}
</div> </div>

6
src/templates/src/user_profile.html
View File

@ -93,14 +93,14 @@
</div> </div>
{{ if .User }} {{ if .User }}
{{ if .User.IsStaff }} {{ if .User.IsStaff }}
<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column items-start bg--card pa2 br2 admin"> <div class="mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column items-start bg3 pa2 br2 admin">
<div class="flex flex-row w-100 items-center"> <div class="flex flex-row w-100 items-center">
<b class="flex-grow-1">Admin actions</b> <b class="flex-grow-1">Admin actions</b>
<div class="led yellow" style="height: 12px; margin: 3px;"></div> <div class="led yellow" style="height: 12px; margin: 3px;"></div>
<a href="javascript:;" class="unlock">Unlock</a> <a href="javascript:;" class="unlock">Unlock</a>
</div> </div>
<div class="relative w-100"> <div class="relative w-100">
<div class="bg--card cover absolute w-100 h-100 br2"></div> <div class="bg3 cover absolute w-100 h-100 br2"></div>
<form id="admin_set_options_form" method="POST" action="{{ .AdminSetOptionsUrl }}"> <form id="admin_set_options_form" method="POST" action="{{ .AdminSetOptionsUrl }}">
{{ csrftoken .Session }} {{ csrftoken .Session }}
<input type="hidden" name="user_id" value="{{ .ProfileUser.ID }}" /> <input type="hidden" name="user_id" value="{{ .ProfileUser.ID }}" />
@ -171,7 +171,7 @@
<h2>{{ if .OwnProfile }}My {{ end }}Projects</h2> <h2>{{ if .OwnProfile }}My {{ end }}Projects</h2>
{{ range .ProfileUserProjects }} {{ range .ProfileUserProjects }}
<div class="mv3"> <div class="mv3">
{{ template "project_card.html" projectcarddata . "" }} {{ template "project_card.html" . }}
</div> </div>
{{ end }} {{ end }}
{{ if .OwnProfile }} {{ if .OwnProfile }}

2
src/templates/src/user_settings.html
View File

@ -8,7 +8,7 @@
<div class="flex justify-center pa3"> <div class="flex justify-center pa3">
<div class="w-100 mw-site flex g3"> <div class="w-100 mw-site flex g3">
<div class="w5 flex flex-column g2 flex-shrink-0"> <div class="w5 flex flex-column g2 flex-shrink-0">
<div class="sidebar-card bg--card link--normal"> <div class="sidebar-card bg3 link-normal">
<div class="pv1 sidebar-card-content flex flex-column"> <div class="pv1 sidebar-card-content flex flex-column">
<a class="ph2 pv1" href="#profile">Profile</a> <a class="ph2 pv1" href="#profile">Profile</a>
<a class="ph2 pv1" href="#account">Account</a> <a class="ph2 pv1" href="#account">Account</a>

7
src/templates/templates.go
View File

@ -321,13 +321,6 @@ var HMNTemplateFuncs = template.FuncMap{
}, },
// NOTE(asaf): Template specific functions: // NOTE(asaf): Template specific functions:
"projectcarddata": func(project Project, classes string) ProjectCardData {
return ProjectCardData{
Project: &project,
Classes: classes,
}
},
"imageselectordata": func(name string, src *Asset, required bool) ImageSelectorData { "imageselectordata": func(name string, src *Asset, required bool) ImageSelectorData {
return ImageSelectorData{ return ImageSelectorData{
Name: name, Name: name,

7
todo-styles.md
View File

@ -56,4 +56,11 @@
- TikTok? - TikTok?
- Trello? - Trello?
- [ ] Handle empty avatar URLs correctly in various places (render as theme-dependent default) - [ ] Handle empty avatar URLs correctly in various places (render as theme-dependent default)
- [ ] Convert to new color vars
- [ ] Resolve TODO(redesign) comments - [ ] Resolve TODO(redesign) comments
stack!
timeline-media-background (see if an existing color works)
red (c-red)
projectcarddata