Overhaul CSS vars
This commit is contained in:
Ben Visness
parent
a602e02c9c
commit
06b270514c
|
|
@ -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
686
public/style.css
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<a class="user" href="{{ .Author.ProfileUrl }}">{{ .Author.Name }}</a> — {{ 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>
|
||||
|
|
|
|||
|
|
@ -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 */}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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:;">✖</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
— {{ 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue