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) {
const timestamp = showcaseTimestamp(timelineItem.date);
@ -45,7 +46,7 @@ function makeShowcaseItem(timelineItem) {
createModalContentFunc = () => {
const modalImage = document.createElement('img');
modalImage.src = timelineItem.asset_url;
modalImage.classList.add('mw-100', 'mh-60vh');
modalImage.classList.add('mw-100', 'maxh-60vh');
return modalImage;
};
@ -76,7 +77,7 @@ function makeShowcaseItem(timelineItem) {
modalVideo.preload = 'metadata';
}
modalVideo.controls = true;
modalVideo.classList.add('mw-100', 'mh-60vh');
modalVideo.classList.add('mw-100', 'maxh-60vh');
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: var(--fg-font-color);
}
@ -11250,39 +11250,39 @@ figure {
max-width: 80rem;
}
.mh-3 {
.maxh-3 {
max-height: 4rem;
}
.mh-4 {
.maxh-4 {
max-height: 8rem;
}
.mh-5 {
.maxh-5 {
max-height: 16rem;
}
.mh-6 {
.maxh-6 {
max-height: 32rem;
}
.mh-100 {
.maxh-100 {
max-height: 100%;
}
.mh-50vh {
.maxh-50vh {
max-height: 50vh;
}
.mh-60vh {
.maxh-60vh {
max-height: 60vh;
}
.mh-70vh {
.maxh-70vh {
max-height: 70vh;
}
.mh-80vh {
.maxh-80vh {
max-height: 80vh;
}

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

@ -55,8 +55,8 @@
}
hr {
margin-left: var(--spacing-medium);
margin-right: var(--spacing-medium);
margin-left: var(--spacing-3);
margin-right: var(--spacing-3);
}
div.code {
@ -80,13 +80,13 @@
}
table {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
margin-top: var(--spacing-2);
margin-bottom: var(--spacing-2);
}
th,
td {
padding: var(--spacing-extra-small) var(--spacing-small);
padding: var(--spacing-1) var(--spacing-2);
border: 1px solid var(--border-color);
}
@ -114,8 +114,8 @@
blockquote {
border-color: var(--bg-3);
margin-left: var(--spacing-small);
padding-left: var(--spacing-small);
margin-left: var(--spacing-2);
padding-left: var(--spacing-2);
margin-right: 0;
border-left-style: solid;
border-left-width: 1px;
@ -130,24 +130,24 @@
}
figure {
margin: var(--spacing-small) 0;
padding: var(--spacing-small) var(--spacing-small) 0;
margin: var(--spacing-2) 0;
padding: var(--spacing-2) var(--spacing-2) 0;
background-color: var(--dim-background);
border-radius: var(--border-radius-3);
display: flex;
flex-direction: column;
@media screen and (min-width: 35em) {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
padding: var(--spacing-medium) var(--spacing-medium) 0;
margin-top: var(--spacing-3);
margin-bottom: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-3) 0;
}
figcaption {
margin: var(--spacing-extra-small) 0;
margin: var(--spacing-1) 0;
@media screen and (min-width: 35em) {
margin: var(--spacing-small) 0;
margin: var(--spacing-2) 0;
}
}
}
@ -162,7 +162,7 @@
}
.spoiler {
border-color: var(--spoiler-border);
border-color: var(--c1);
border-width: 1px;
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 */
box-sizing: border-box;
border-color: var(--border-color);
}
br {
/* why, IE... */
border-style: none;
}
body {
background-color: var(--background-color);
background-color: var(--c2);
color: var(--color);
font-family: "Inter", sans-serif;
min-height: 100vh;
@ -32,7 +25,7 @@ a,
}
}
.link--normal {
.link-normal {
--link-color: var(--color);
}
@ -56,23 +49,22 @@ h6 {
code,
pre,
.mono {
/* TODO(redesign): We're not using Fira any more. */
font-family: "Fira Mono", monospace;
}
br {
/* why, IE... */
border-style: none;
}
hr {
border: none;
border-bottom: 1px solid var(--border-color);
}
/* 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 {
margin-left: auto;
margin-right: auto;
@ -108,59 +100,7 @@ pre,
}
}
.b--theme-dark {
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 {
.c-normal {
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 {
font-size: 0.65rem;
}
@ -197,39 +161,39 @@ pre,
max-width: var(--site-width-narrow);
}
.mh-3 {
.maxh-3 {
max-height: var(--height-3);
}
.mh-4 {
.maxh-4 {
max-height: var(--height-4);
}
.mh-5 {
.maxh-5 {
max-height: var(--height-5);
}
.mh-6 {
.maxh-6 {
max-height: var(--height-6);
}
.mh-100 {
.maxh-100 {
max-height: 100%;
}
.mh-50vh {
.maxh-50vh {
max-height: 50vh;
}
.mh-60vh {
.maxh-60vh {
max-height: 60vh;
}
.mh-70vh {
.maxh-70vh {
max-height: 70vh;
}
.mh-80vh {
.maxh-80vh {
max-height: 80vh;
}
@ -261,80 +225,28 @@ pre,
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 {
gap: var(--spacing-none);
gap: var(--spacing-0);
}
.g1 {
gap: var(--spacing-extra-small);
gap: var(--spacing-1);
}
.g2 {
gap: var(--spacing-small);
gap: var(--spacing-2);
}
.g3 {
gap: var(--spacing-medium);
gap: var(--spacing-3);
}
.g4 {
gap: var(--spacing-large);
gap: var(--spacing-4);
}
.g5 {
gap: var(--spacing-extra-large);
gap: var(--spacing-5);
}
.grid {
@ -357,6 +269,10 @@ pre,
display: none !important;
}
:not([hidden])+.show-when-sibling-hidden {
display: none;
}
.fill-current {
fill: currentColor;
}
@ -365,10 +281,6 @@ pre,
transform: rotate(180deg);
}
:not([hidden])+.show-when-sibling-hidden {
display: none;
}
.grab:hover {
cursor: grab;
@ -381,260 +293,11 @@ pre,
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
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 {
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 {
width: 100%;
padding-bottom: var(--spacing-small);
padding-bottom: var(--spacing-2);
display: flex;
flex-direction: column;
@ -715,7 +541,7 @@ lite variant instead.
border-bottom-width: 0;
border-top-width: 1px;
padding-bottom: 0;
padding-top: var(--spacing-small);
padding-top: var(--spacing-2);
@media screen and (min-width: 35em) {
padding-top: 0;
@ -736,15 +562,15 @@ lite variant instead.
}
.option {
padding: var(--spacing-extra-small) var(--spacing-small);
padding: var(--spacing-1) var(--spacing-2);
display: inline-flex;
align-items: center;
justify-content: center;
@media screen and (min-width: 35em) {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
}
}
@ -754,14 +580,4 @@ lite variant instead.
height: 100%;
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);
}

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

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

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

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

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

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

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

@ -51,31 +51,10 @@
}
.project-card {
color: var(--fg-font-color);
background-color: var(--card-background);
&.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;
}
}
background-color: var(--c3);
color: var(--color);
/* TODO(redesign): Audit use of badges. */
.badges:empty {
display: none;
}
@ -84,4 +63,12 @@
color: white;
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-narrow: 20em;
--measure-wide: 34em;
--spacing-none: 0;
--spacing-extra-small: .25rem;
--spacing-small: .5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;
--spacing-0: 0;
--spacing-1: .25rem;
--spacing-2: .5rem;
--spacing-3: 1rem;
--spacing-4: 2rem;
--spacing-5: 4rem;
--spacing-6: 8rem;
--spacing-7: 16rem;
--spacing-copy-separator: 1.5em;
--height-1: 1rem;
--height-2: 2rem;

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

@ -19,9 +19,8 @@
}
.timeline-item {
background-color: var(--card-background);
--fade-color: var(--card-background);
color: var(--main-color);
background-color: var(--c3);
--fade-color: var(--c3);
.timeline-media {
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";
/*
* 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 {
--background-color: white;
--color: black;
--link-color: #d12991;
/* TODO(redesign): Probably not the right color for Soft Gray. Check with Jes. */
--c1: #fafafa;
--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;
/* 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-dim: #c0c0c0;
--theme-color-dimmer: #dddddd;
@ -26,49 +72,35 @@ $breakpoint-large: screen and (min-width: 60em)
--main-background-color: #f8f8f8;
--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-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) {
:root {
--background-color: #2f2f2f;
--color: #eee;
--color: #fff;
--link-color: #ff5dc2;
--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-dim: #444;
--theme-color-dimmer: #383838;
@ -80,35 +112,7 @@ $breakpoint-large: screen and (min-width: 60em)
--main-background-color: #202020;
--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-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" }}
<div class="content-block">
{{ range .UnapprovedUsers }}
<div class="flex flex-row bg--card mb3 pa2">
<div class="flex flex-row bg3 mb3 pa2">
<div class="
sidebar flex-shrink-0
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 }}
</div>
{{ if $.ShowContent }}
<div class="overflow-hidden mh-5 mt2 relative">
<div class="overflow-hidden maxh-5 mt2 relative">
<div>
{{ .Content }}
</div>

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

@ -53,14 +53,14 @@
{{ with .PostReplyingTo }}
<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" . }}
</div>
{{ end }}
{{ if .ShowEduOptions }}
{{/* Hope you have a .Article field! */}}
<div class="bg3 br3 pa3 mt3">
<div class="bg2 br3 pa3 mt3">
<h4>Education Options</h4>
<div class="mb2">
<label for="slug">Slug:</label>
@ -86,7 +86,7 @@
</div>
{{ end }}
</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>
<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" }}
<div class="mw7 m--center">
<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>
{{ .Article.Content }}
</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>
<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" }}">
<div class="pa3">
<h2>Compilers</h2>
@ -16,7 +16,7 @@
</div>
</div>
</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" }}">
<div class="pa3">
<h2>Networking</h2>
@ -25,7 +25,7 @@
</div>
</div>
</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" }}">
<div class="pa3">
<h2>Time</h2>
@ -39,17 +39,17 @@
<h2>What makes us different?</h2>
<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>
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 class="flex-fair bg3 pa3 br3">
<div class="flex-fair bg2 pa3 br3">
<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.
</div>
<div class="flex-fair bg3 pa3 br3">
<div class="flex-fair bg2 pa3 br3">
<h3>Designed for programmers.</h3>
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>
{{ 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>
<div class="overflow-hidden">
<div class="edu-articles ml3 pl3">

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

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

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

@ -1,5 +1,5 @@
<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>
</div>
</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-20 mw3 w3">
<!-- 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">
Handmade
</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="#">
Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</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.ConferencesUrl }}">Conferences</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="#">
Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</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>
</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="project-card pa3 flex g3 br2 overflow-hidden relative {{ .Classes }}" href="{{ .Project.Url }}" >
{{ with .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>
<a class="bg3 c-normal flex g3 br2 overflow-hidden pa3" href="{{ .Url }}">
{{ with .Logo }}
<img class="project-card-logo" src="{{ . }}" alt="Project Logo">
{{ end }}
<div class="details flex-grow-1">
<h3 class="b mb2 f4">{{ .Project.Name }}</h3>
<div class="blurb">{{ .Project.Blurb }}</div>
<h3 class="b mb2 f4">{{ .Name }}</h3>
<div class="blurb">{{ .Blurb }}</div>
<hr>
<div>TODO: Authors</div>
{{ if .Project.LifecycleString }}
{{ if .LifecycleString }}
<div class="badges mt2">
<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span>
<span class="badge {{ .LifecycleBadgeClass }}">{{ .LifecycleString }}</span>
</div>
{{ end }}
</div>
</a>

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

@ -1,7 +1,7 @@
<a href="{{ .Url }}">
<div class="role pa3 bg3 br3">
<div class="role pa3 bg2 br3">
<h2>{{ .Name }}</h2>
<div class="c--normal">
<div class="c-normal">
{{ .Description }}
</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">
<img data-tmpl="logo" class="db mr1 br1 h1-5" />
<div data-tmpl="name"></div>
<div>TODO: don't use me :)</div>
</a>
</template>

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

@ -55,7 +55,7 @@
<template id="snippet-edit-project">
<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" />
<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/>
<img data-tmpl="projectLogo" class="db mr1 br1"/>
<div data-tmpl="projectName"></div>
<a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a>
</div>

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

@ -18,7 +18,7 @@
<a href="{{ .Url }}">{{ .Title }}</a>
</div>
{{ end }}
<div class="details link--normal">
<div class="details link-normal">
<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
&mdash; {{ timehtml (absoluteshortdate .Date) .Date }}
</div>
@ -29,7 +29,7 @@
<div class="dn rawdesc">{{ .RawDescription }}</div>
{{ end }}
{{ 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 }}
<div>Use .ForumLayout if you want breadcrumbs :)</div>
{{ end }}
@ -41,7 +41,7 @@
</div>
{{ if eq (len .Projects) 1 }}
{{ $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>
</div>
{{ end }}
@ -80,7 +80,7 @@
{{ end }}
{{ 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>
{{ if .TruncateDescription }}
<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>
<div class="projects flex flex-column g3 back-to-normal">
{{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
</div>

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

@ -71,7 +71,7 @@
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
<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">
<h3 class="mt0 mb3">Projects</h3>
<div class="projects flex flex-column g3 back-to-normal">
{{ range .JamProjects }} {{ template "project_card.html" projectcarddata
. "" }} {{ end }}
{{ range .JamProjects }} {{ template "project_card.html" . }} {{ end }}
</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">
<h2>Submitted projects</h2>
<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 class="actions flex justify-center">
<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/">
<h3>PNG Chunk Explorer</h3>
</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>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>

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

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

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

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

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

@ -10,7 +10,7 @@
{{ end }}
{{ define "content" }}
<div class="mw8 post-content ph3 pv3 center">
<div class="mw-site post-content ph3 pv3 center">
<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>
@ -41,7 +41,7 @@
<img src="{{ static "wheeljam2021/TwitterCard.png" }}">
</div>
</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">
<h3>LISP Jam</h3>
</div>

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

@ -63,7 +63,7 @@
background-color: rgba(255, 255, 255, 0.15);
}
</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">
{{ svg "hmn_circuit" }}
</div>
@ -87,7 +87,7 @@
<!-- Sidebar -->
<div class="w5 flex flex-column g2 flex-shrink-0">
{{ 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">
<span class="f7">Your projects</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
@ -106,7 +106,7 @@
</a>
</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">
<span class="f7">Following</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
@ -122,7 +122,7 @@
</div>
</div>
{{ else }}
<div class="bg--card link--normal">
<div class="bg3 link-normal">
<div class="pa3 flex flex-column g2">
<div class="b">Join the Handmade Network</div>
<div class="f6 post-content">Share your own Handmade projects with the community.</div>
@ -133,7 +133,7 @@
</a>
</div>
{{ 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
</div>
</div>

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

@ -75,11 +75,11 @@
</head>
<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">
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>
{{ template "header.html" . }}
{{ template "notices.html" .Notices }}
{{ with .Breadcrumbs }}
<div class="tc tl-ns ph2 ph0-ns mb2">

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

@ -21,8 +21,8 @@
{{ end }}
{{ define "content" }}
<div class="bg1 flex bb">
<form id="project_form" class="hmn-form pa4 flex-fair" method="POST" enctype="multipart/form-data">
<div class="flex bb">
<form id="project_form" class="hmn-form bg1 pa4 flex-fair" method="POST" enctype="multipart/form-data">
{{ csrftoken .Session }}
<h1 class="f3">
@ -116,24 +116,24 @@
<legend>Owners</legend>
<div class="pa3">
<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" />
<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>
<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 pa3 bt br bb bl-0 also-focus" id="owner_add"><span class="flex w1">{{ svg "add" }}</span></button>
</div>
<div id="owners_error" class="f6"></div>
<div id="owner_list" class="pt3 flex flex-wrap g3">
<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" />
<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>
</template>
{{ 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 }}" />
<span>{{ .Username }}</span>
{{ 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 }}
</div>
{{ end }}
@ -170,7 +170,7 @@
<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="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>
</template>
<template id="link_row_dummy">
@ -219,7 +219,7 @@
</div>
</div>
</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>
</div>

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

@ -8,19 +8,19 @@
{{ end }}
{{ 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="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 }}
<div class="bg--card-transparent flex">
<div class="bg-transparent flex">
{{ range . }}
<a class="flex ph3 pv2 flex items-center" href="{{ .Url }}">{{ .Name }}<span class="svgicon f6 ml2">{{ svg "arrow-right-up" }}</span></a>
{{ end }}
</div>
{{ end }}
{{ with .UnnamedLinks }}
<div class="bg--card-transparent flex items-center ph1">
<div class="bg-transparent flex items-center ph1">
{{ range . }}
<a class="flex ph2" href="{{ .Url }}" title="{{ .ServiceName }}{{ with .Username }} ({{ . }}){{ end }}">{{ svg (strjoin "logos/" .Icon) }}</a>
{{ end }}
@ -28,19 +28,35 @@
{{ end }}
</div>
</div>
<div class="w-100 mw-site-narrow flex justify-center" style="margin-top: -3rem">
{{ template "project_card.html" projectcarddata .Project "flex-grow-1 project-card-black" }}
<div class="w-100 mw-site-narrow pa3 bg-transparent link-normal flex g3 overflow-hidden" style="margin-top: -4rem">
{{ 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>
{{ if .Project.ParsedDescription }}
<div id="longdesc" class="description w-100 mw-site-narrow pt4">
<h3 class="f4">About {{ .Project.Name }}</h3>
<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 }}
</div>
<a class="longdesc-link pt3 db" href="#">
<span class="longdesc-text">Read more</span> <span class="svgicon f7 dib">{{ svg "chevron-down-thick" }}</span>
</a>
{{/* TODO(redesign): Add a fade at the bottom of this. */}}
</div>
{{ end }}
{{ if .FollowUrl }}
@ -71,41 +87,42 @@
});
</script>
{{ end }}
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
<hr class="w-100 mv4">
<div class="w-100 flex g3">
<div class="flex flex-column g3">
<div class="bg--card pa3 w5">
Filters
</div>
</div>
<div class="flex-grow-1">
<div class="flex flex-row items-center mb2">
<h2 id="recent">Recent Activity</h2>
<div class="flex-grow-1"></div>
{{ if .Header.Project.CanEdit }}
<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
{{ end }}
</div>
<div class="timeline flex flex-column g3">
{{ range .RecentActivity }}
{{ template "timeline_item.html" . }}
{{ end }}
TODO: READ MORE LINK
</div>
</div>
</div>
{{ end }}
</div>
</div>
{{ 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="bg3 pa3 w5">
Filters
</div>
</div>
<div class="flex-grow-1">
<div class="flex flex-row items-center mb2">
<h2 id="recent">Recent Activity</h2>
<div class="flex-grow-1"></div>
{{ if .Header.Project.CanEdit }}
<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
{{ end }}
</div>
<div class="timeline flex flex-column g3">
{{ range .RecentActivity }}
{{ template "timeline_item.html" . }}
{{ end }}
TODO: READ MORE LINK
</div>
</div>
</div>
</div>
{{ end }}
<div class="flex flex-column flex-row-l">
<div class="flex-grow-1 overflow-hidden">
{{ with .Screenshots }}
<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">
{{ 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>
{{ end }}
@ -199,14 +216,14 @@
const expandText = longdesc.querySelector(".longdesc-text");
const chevron = longdesc.querySelector(".svgicon");
const expanding = longdescContent.classList.contains("mh-5");
longdescContent.classList.toggle("mh-5", !expanding);
const expanding = longdescContent.classList.contains("maxh-5");
longdescContent.classList.toggle("maxh-5", !expanding);
expandText.innerText = expanding ? "Read less" : "Read more";
chevron.classList.toggle("rot-180", expanding);
});
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);
longdescLink.classList.toggle("dn", hide);
longdescLink.classList.toggle("db", !hide);

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

@ -8,9 +8,9 @@
<div>
{{ with .OfficialProjects }}
<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 := . }}
<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">
<a href="{{ $project.Url }}">
<h3 class="f3">{{ $project.Name }}</h3>
@ -33,47 +33,47 @@
{{ end }}
<div class="flex flex-column g3">
{{ 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>
<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">
{{ range .CurrentJamProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
<a href="{{ .CurrentJamProjectsLink }}" class="pa3 tc">See more »</a>
</div>
{{ end }}
{{ 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>
<div class="grid grid-1 grid-2-ns g3">
{{ range .OfficialProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
<a href="{{ .OfficialProjectsLink }}" class="pa3 tc">See more »</a>
</div>
{{ end }}
{{ 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>
<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">
{{ range .PersonalProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
<a href="{{ .PersonalProjectsLink }}" class="pa3 tc">See more »</a>
</div>
{{ end }}
{{ 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>
<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">
{{ range .PreviousJamProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>
<a href="{{ .PreviousJamProjectsLink }}" class="pa3 tc">See more »</a>
@ -100,7 +100,7 @@
<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>
{{ end }}
<div class="bg3-ns br2">
<div class="bg2-ns br2">
{{ if gt .Pagination.Total 1 }}
<div class="optionbar pv2 ph3">
<div class="options"></div>
@ -112,7 +112,7 @@
<div class="pa3 grid grid-1 grid-2-ns g3">
{{ range .PageProjects }}
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
{{ end }}
</div>

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

@ -93,14 +93,14 @@
</div>
{{ if .User }}
{{ 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">
<b class="flex-grow-1">Admin actions</b>
<div class="led yellow" style="height: 12px; margin: 3px;"></div>
<a href="javascript:;" class="unlock">Unlock</a>
</div>
<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 }}">
{{ csrftoken .Session }}
<input type="hidden" name="user_id" value="{{ .ProfileUser.ID }}" />
@ -171,7 +171,7 @@
<h2>{{ if .OwnProfile }}My {{ end }}Projects</h2>
{{ range .ProfileUserProjects }}
<div class="mv3">
{{ template "project_card.html" projectcarddata . "" }}
{{ template "project_card.html" . }}
</div>
{{ end }}
{{ if .OwnProfile }}

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

@ -8,7 +8,7 @@
<div class="flex justify-center pa3">
<div class="w-100 mw-site flex g3">
<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">
<a class="ph2 pv1" href="#profile">Profile</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:
"projectcarddata": func(project Project, classes string) ProjectCardData {
return ProjectCardData{
Project: &project,
Classes: classes,
}
},
"imageselectordata": func(name string, src *Asset, required bool) ImageSelectorData {
return ImageSelectorData{
Name: name,

9
todo-styles.md
View File

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