Scaffold new project home pages
This commit is contained in:
Ben Visness
parent
78884cb641
commit
40e5e39acb
|
|
@ -7183,10 +7183,12 @@ code {
|
|||
--notice-warn-color: #aa7d30;
|
||||
--notice-failure-color: #b42222;
|
||||
--spoiler-border: #aaa;
|
||||
--site-width: 80rem;
|
||||
--site-width-narrow: 60rem;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #202020;
|
||||
--background-color: #2f2f2f;
|
||||
--color: #eee;
|
||||
--link-color: #cc3b95;
|
||||
--dim-color: #bbb;
|
||||
|
|
@ -7202,6 +7204,7 @@ code {
|
|||
--main-background-color-transparent: rgba(#202020, 0);
|
||||
--card-background: #494949;
|
||||
--card-background-hover: #333;
|
||||
--card-background-transparent: #242424D8;
|
||||
--dim-background: #252525;
|
||||
--dim-background-transparent: rgba(#252525, 0);
|
||||
--forum-thread-read-color: #777;
|
||||
|
|
@ -7226,7 +7229,7 @@ br {
|
|||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -7242,6 +7245,9 @@ a.external::after,
|
|||
content: " 1";
|
||||
vertical-align: middle;
|
||||
}
|
||||
.link--normal {
|
||||
--link-color: var(--color);
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: 500;
|
||||
|
|
@ -7380,7 +7386,10 @@ pre,
|
|||
font-size: 0.65rem;
|
||||
}
|
||||
.mw-site {
|
||||
max-width: 80rem;
|
||||
max-width: var(--site-width);
|
||||
}
|
||||
.mw-site-narrow {
|
||||
max-width: var(--site-width-narrow);
|
||||
}
|
||||
.mh-3 {
|
||||
max-height: var(--height-3);
|
||||
|
|
@ -7502,6 +7511,9 @@ pre,
|
|||
.hide-if-empty:empty {
|
||||
display: none !important;
|
||||
}
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
@media screen and (min-width: 35em) {
|
||||
.bi-avoid-ns {
|
||||
break-inside: avoid;
|
||||
|
|
@ -8429,18 +8441,13 @@ span.icon-rss::before {
|
|||
.project-card {
|
||||
color: var(--fg-font-color);
|
||||
background-color: var(--card-background);
|
||||
border-color: var(--project-card-border-color);
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
}
|
||||
.project-card.project-card-black {
|
||||
background-color: var(--card-background-transparent);
|
||||
}
|
||||
.slideshow .project-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.project-card:hover {
|
||||
background-color: var(--card-background-hover);
|
||||
}
|
||||
.project-card:hover > .title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.project-card .image-container {
|
||||
--image-size: 8rem;
|
||||
width: var(--image-size);
|
||||
|
|
@ -8452,9 +8459,6 @@ span.icon-rss::before {
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.project-card .details {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.project-card .badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ br {
|
|||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -31,6 +31,10 @@ a,
|
|||
}
|
||||
}
|
||||
|
||||
.link--normal {
|
||||
--link-color: var(--color);
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 500;
|
||||
|
|
@ -209,7 +213,11 @@ pre,
|
|||
}
|
||||
|
||||
.mw-site {
|
||||
max-width: 80rem;
|
||||
max-width: var(--site-width);
|
||||
}
|
||||
|
||||
.mw-site-narrow {
|
||||
max-width: var(--site-width-narrow);
|
||||
}
|
||||
|
||||
.mh-3 {
|
||||
|
|
@ -372,6 +380,10 @@ pre,
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
.bi-avoid-ns {
|
||||
break-inside: avoid;
|
||||
|
|
|
|||
|
|
@ -53,22 +53,15 @@
|
|||
.project-card {
|
||||
color: var(--fg-font-color);
|
||||
background-color: var(--card-background);
|
||||
border-color: var(--project-card-border-color);
|
||||
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
&.project-card-black {
|
||||
background-color: var(--card-background-transparent);
|
||||
}
|
||||
|
||||
.slideshow & {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--card-background-hover);
|
||||
|
||||
&>.title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
--image-size: 8rem;
|
||||
|
||||
|
|
@ -83,11 +76,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
/* Background color given by theme */
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,14 @@ $breakpoint-large: screen and (min-width: 60em)
|
|||
--notice-failure-color: #b42222;
|
||||
|
||||
--spoiler-border: #aaa;
|
||||
|
||||
--site-width: 80rem;
|
||||
--site-width-narrow: 60rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #202020;
|
||||
--background-color: #2f2f2f;
|
||||
--color: #eee;
|
||||
--link-color: #cc3b95;
|
||||
|
||||
|
|
@ -73,6 +76,7 @@ $breakpoint-large: screen and (min-width: 60em)
|
|||
/* --card-background: #282828; */
|
||||
--card-background: #494949;
|
||||
--card-background-hover: #333;
|
||||
--card-background-transparent: #242424D8;
|
||||
|
||||
--dim-background: #252525;
|
||||
--dim-background-transparent: rgba(#252525, 0);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<footer>
|
||||
<div class="mv5 h3 fill-current link--white">
|
||||
<div class="mv5 h3 fill-current link--normal">
|
||||
<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<header id="site-header" class="flex flex-row items-center link--white">
|
||||
<header id="site-header" class="flex flex-row items-center link--normal">
|
||||
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
|
||||
Handmade
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,15 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
<div class="details pa3 flex-grow-1">
|
||||
<h3 class="mb2 f4">{{ .Project.Name }}</h3>
|
||||
<h3 class="b mb2 f4">{{ .Project.Name }}</h3>
|
||||
<div class="blurb">{{ .Project.Blurb }}</div>
|
||||
<div class="badges mt2">
|
||||
{{ if .Project.LifecycleString }}
|
||||
<hr>
|
||||
<div>TODO: Authors</div>
|
||||
{{ if .Project.LifecycleString }}
|
||||
<div class="badges mt2">
|
||||
<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,202 +34,6 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
|
||||
--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
|
||||
--white: #fff;
|
||||
--bg-button: rgba(255, 255, 255, 0);
|
||||
--bg-button-hover: rgba(255, 255, 255, 0.1);
|
||||
--charcoal: #2F2F2F;
|
||||
--gray: #CBCBCB;
|
||||
--rich-gray: #494949;
|
||||
|
||||
--spacing-0: 0;
|
||||
--spacing-1: .25rem;
|
||||
--spacing-2: .5rem;
|
||||
--spacing-3: 1rem;
|
||||
--spacing-4: 2rem;
|
||||
--spacing-5: 4rem;
|
||||
--spacing-6: 8rem;
|
||||
--spacing-7: 16rem;
|
||||
--border-radius-2: 0.25rem;
|
||||
|
||||
--link-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", "Fira Sans", sans-serif;
|
||||
font-size: 1rem; /* remove this override when base stylesheet is less dumb */
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.w2-5 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.link--white {
|
||||
--link-color: var(--white);
|
||||
}
|
||||
|
||||
.post-content p {
|
||||
/* stupid override, should be done by .post-content instead of .content */
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.bg--theme-gradient-dark {
|
||||
background: var(--theme-gradient-dark);
|
||||
}
|
||||
|
||||
.bg--theme-gradient-light {
|
||||
background: var(--theme-gradient-light);
|
||||
}
|
||||
|
||||
.bg--charcoal {
|
||||
background: var(--charcoal);
|
||||
}
|
||||
|
||||
.bg--rich-gray {
|
||||
background: var(--rich-gray);
|
||||
}
|
||||
|
||||
.bg--gray {
|
||||
background: var(--gray);
|
||||
}
|
||||
|
||||
.b--charcoal {
|
||||
border-color: var(--charcoal);
|
||||
}
|
||||
|
||||
.b--rich-gray {
|
||||
border-color: var(--rich-gray);
|
||||
}
|
||||
|
||||
.c--theme-gradient-dark {
|
||||
background: var(--theme-gradient-dark);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
a, .c--theme-gradient-light {
|
||||
background: var(--theme-gradient-light);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.c--theme-gradient-light {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.c--gray {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.btn--jam {
|
||||
border: 1px solid var(--white);
|
||||
border-radius: var(--border-radius-2);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
|
||||
background-color: var(--bg-button);
|
||||
}
|
||||
|
||||
.btn--jam.small {
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
}
|
||||
|
||||
.btn--jam:hover {
|
||||
background-color: var(--bg-button-hover);
|
||||
}
|
||||
|
||||
.button-simple {
|
||||
background: var(--bg-button);
|
||||
border: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.button-simple:hover {
|
||||
background: var(--bg-button-hover);
|
||||
}
|
||||
|
||||
.c-white {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.svg-mask {
|
||||
mask: var(--mask-url);
|
||||
-webkit-mask: var(--mask-url);
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.wide-screen {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.iframe-fill iframe {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.jam-logo {
|
||||
max-width: 18rem;
|
||||
}
|
||||
|
||||
.jam-logo-small {
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
.jam-title {
|
||||
/* align with the width of the logo */
|
||||
font-size: 2.76rem;
|
||||
font-weight: 700;
|
||||
/* align with the text's actual bounding box */
|
||||
line-height: 1.18;
|
||||
margin-top: -0.18em;
|
||||
margin-left: -0.03em;
|
||||
margin-right: -0.03em;
|
||||
}
|
||||
|
||||
.jam-title.small {
|
||||
font-size: 2.25rem;
|
||||
/* align with the text's actual bounding box */
|
||||
line-height: 1.18;
|
||||
margin-top: -0.18em;
|
||||
margin-left: -0.03em;
|
||||
margin-right: -0.03em;
|
||||
}
|
||||
|
||||
/* not small */
|
||||
@media screen and (min-width: 35em) {
|
||||
.jam-logo {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.jam-title {
|
||||
font-size: 3.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* not small */
|
||||
@media screen and (min-width: 35em) {
|
||||
.flex-basis-40-ns {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{{ template "extrahead" . }}
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,40 +8,38 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="flex flex-column flex-row-l">
|
||||
<div class="
|
||||
sidebar flex-shrink-0 self-start-l
|
||||
flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
|
||||
mw5-l mh3 ml0-ns mb3 overflow-hidden
|
||||
">
|
||||
<div class="w-100 w5-ns flex-shrink-0 flex justify-center br3 overflow-hidden">
|
||||
{{ if .Project.Logo }}
|
||||
<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
|
||||
{{ else }}
|
||||
<div class="bg--dim w-100 aspect-ratio--1x1 relative">
|
||||
<div class="aspect-ratio--object flex justify-center items-center f3 b c--dimmest tc">{{ .Project.Name }}</div>
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="flex-grow-1 flex flex-column items-center mw-site">
|
||||
<div class="w-100 h5 bg-white-50"></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>
|
||||
{{ if .Project.ParsedDescription }}
|
||||
<div class="description w-100 mw-site-narrow pt4 post-content">
|
||||
<h3>About {{ .Project.Name }}</h3>
|
||||
<!-- TODO: Make this collapsible -->
|
||||
{{ .Project.ParsedDescription }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
|
||||
<div class="w-100 pt4">
|
||||
<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">
|
||||
{{ range .RecentActivity }}
|
||||
{{ template "timeline_item.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
|
||||
<div class="mb3">
|
||||
{{ range $i, $owner := .Owners }}
|
||||
<div class="flex mb3 items-center">
|
||||
<img class="avatar mr2" src="{{ $owner.AvatarUrl }}" />
|
||||
<a class="rel" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="w-100 w-auto-ns w-100-l">
|
||||
{{ range .ProjectLinks }}
|
||||
<div class="pair flex">
|
||||
<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
|
||||
<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column flex-row-l">
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
{{ with .Screenshots }}
|
||||
<div class="carousel-container mw-100 mb3">
|
||||
|
|
@ -68,29 +66,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="description ph3 ph0-ns post-content">
|
||||
{{ if .Project.ParsedDescription }}
|
||||
{{ .Project.ParsedDescription }}
|
||||
{{ else }}
|
||||
{{ .Project.Blurb }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
|
||||
<div class="content-block timeline-container ph3 ph0-ns mv4">
|
||||
<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">
|
||||
{{ range .RecentActivity }}
|
||||
{{ template "timeline_item.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ if .User }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue