This commit is contained in:
Ben Visness 2024-02-06 19:52:41 -06:00
parent f6691cee24
commit 7215e83650
41 changed files with 7344 additions and 678 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +0,0 @@
* {
box-sizing: border-box;
}
br {
/* why, IE... */
border-style: none;
}
body {
background-color: var(--main-background-color);
color: var(--main-color);
font-family: "Fira Sans", sans-serif;
min-height: 100vh;
box-sizing: border-box;
}
a,
.link {
color: var(--link-color);
border-bottom: none;
text-decoration: none;
&.external::after {
font-family: "icons";
content: " 1";
vertical-align: middle;
}
}
code,
.mono {
font-family: "Fira Mono", monospace;
}

View File

@ -1,4 +1,44 @@
.margin-center {
/* Bare minimum styles */
* {
/* It's aggressive, but we like it aggressive */
box-sizing: border-box;
}
br {
/* why, IE... */
border-style: none;
}
body {
background-color: var(--main-background-color);
color: var(--main-color);
font-family: "Fira Sans", sans-serif;
min-height: 100vh;
box-sizing: border-box;
}
a,
.link {
color: var(--link-color);
border-bottom: none;
text-decoration: none;
&.external::after {
font-family: "icons";
content: " 1";
vertical-align: middle;
}
}
code,
.mono {
font-family: "Fira Mono", monospace;
}
/* Utility */
.m--center {
margin-left: auto;
margin-right: auto;
}
@ -473,324 +513,7 @@
}
}
/*
Tachyons' `center` is unfortunately overloaded by a .center
class we have in our own CSS.
*/
.center-layout {
margin-right: auto;
margin-left: auto;
}
footer {
.list li:not(:last-child)::after {
@extend .c--dimmer;
@media #{var(--breakpoint-not-small)} {
& {
content: ' / ';
}
}
}
}
.content {
background-color: var(--content-background);
margin: auto;
p {
-moz-text-size-adjust: auto;
-webkit-text-size-adjust: auto;
text-size-adjust: auto;
margin: 0.6rem 0;
}
.description {
line-height: 1.42em;
text-align: left;
margin: auto;
p {
margin-bottom: var(--spacing-small);
text-align: left;
}
}
>.top-bar {
text-align: left;
}
}
.content-block {
// TODO: What the heck are these styles
/* Background color given by theme */
background-repeat: repeat-x;
border-radius: 2px;
text-align: left;
width: 100%;
/* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */
position: relative;
box-sizing: border-box;
&.top-bar {
background-image: none;
}
&.language-desc {
padding: 10px;
h3 {
margin-left: 10px;
}
}
.no-bg {
background-image: none;
background-color: transparent;
box-shadow: none;
}
}
.sidebar {
.content-block {
&.single {
padding: 0px;
/* for project list, TODO */
margin-top: 20px;
}
&.top-bar {
/* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */
width: 80%;
display: block;
margin: 10px auto;
}
}
br.sidebar-filler {
line-height: 20px;
}
.projectlist {
background-color: transparent;
}
}
.content-block .bottom-padding,
.sidebar .bottom-padding {
margin-top: var(--spacing-medium);
}
.breadcrumb {
&:hover {
text-decoration: underline;
}
&.current {
text-overflow: clip ellipsis;
}
}
.breadcrumb-before:nth-of-type(n+2)::before {
content: '≫';
}
.optionbar {
@extend .b--dimmest;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
align-items: center;
border-style: dashed;
border-width: 0px;
border-bottom-width: 1px;
padding-bottom: var(--spacing-small);
@media #{var(--breakpoint-not-small)} {
flex-direction: row;
text-align: left;
padding-bottom: 0;
}
&.bottom {
border-bottom-width: 0px;
border-top-width: 1px;
padding-bottom: 0;
padding-top: var(--spacing-small);
@media #{var(--breakpoint-not-small)} {
padding-top: 0;
}
}
&.center {
text-align: center; // TODO: find this and kill it
}
.options {
display: flex;
flex-direction: column;
@media #{var(--breakpoint-not-small)} {
flex-direction: row;
}
& {
#{var(--buttons)} {
@include lite-button;
@extend .ph2;
@extend .pv1;
@extend .pv2-ns;
}
}
}
.group {
display: inline-block;
height: 100%;
margin: auto;
}
}
.tab {
background-color: var(--tab-background);
@extend .pa2;
}
.tab-bar {
border-color: var(--tab-border-color);
@extend .flex, .flex-row;
width: 100%;
.tab-button {
background-color: var(--tab-button-background);
border-color: var(--tab-border-color);
@extend .ph3, .pv2;
cursor: pointer; // TODO: Should this be a link?
&:hover {
background-color: var(--tab-button-background-hover);
}
&.current {
background-color: var(--tab-button-background-current);
font-weight: 500;
}
}
}
.pagination {
.page.current {
cursor: default;
font-weight: 600;
&:hover {
text-decoration: none;
}
}
.button {
@extend .pv0, .ph2;
}
}
.user-link {
position: relative;
}
// TODO(ben): It appears that this code is inactive because the JS that would
// create the popups is commented out.
.user-popup {
opacity: 0;
max-height: 0px;
width: 340px;
text-align: center;
transition: max-height 0.2s, opacity 0.1s;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: absolute;
bottom: 0px;
&.expanded {
visibility: visible;
max-height: 250px;
opacity: 1;
}
table {
/* Background color given by theme */
width: 100%;
position: relative;
border-radius: 3px;
z-index: 10;
}
td {
vertical-align: top;
padding: 15px 9px;
}
#avatar {
width: 100px;
height: 100px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
margin: 0px auto;
}
.username {
font-weight: bold;
}
.bottom {
/* Border color given by theme */
border-top: 1px solid transparent;
padding: 15px;
.bio {
vertical-align: top;
width: 90%;
}
}
}
.site-search {
&[type=text].lite {
// wow CSS selector priority sucks
// First transition copied from input .lite
transition: border-bottom-color 60ms ease-in-out, width 300ms ease;
}
}
#search_button_homepage {
margin: 0px;
height: 100%;
height: calc(100% - 2px);
border-radius: 0px;
display: inline-block;
display: none;
}
.background-even:nth-of-type(even) {
// this is the default, and should be overridden by dynamic colors.
background-color: var(--background-even-background);
--fade-color: var(--background-even-background);
}
.sr-only {
.sr {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
@ -804,16 +527,102 @@ footer {
transition: 0.2s all;
}
.sr-focusable {
@extend .sr-only;
.sr-focusable:focus {
padding: 15px 10px;
height: auto;
width: auto;
background: var(--content-background);
clip: initial;
clip-path: initial;
z-index: 99999;
}
&:focus {
padding: 15px 10px;
height: auto;
width: auto;
background: var(--content-background);
clip: initial;
clip-path: initial;
z-index: 99999;
.breadcrumb {
&:hover {
text-decoration: underline;
}
&.current {
text-overflow: clip ellipsis;
}
}
/* Old stuff that should probably be moved? */
.breadcrumb-before:nth-of-type(n+2)::before {
content: '≫';
}
.optionbar {
width: 100%;
padding-bottom: var(--spacing-small);
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
align-items: center;
border-style: dashed;
border-width: 0 0 1px;
border-color: var(--dimmest-color);
@media screen and (min-width: 35em) {
flex-direction: row;
text-align: left;
padding-bottom: 0;
}
&.bottom {
border-bottom-width: 0;
border-top-width: 1px;
padding-bottom: 0;
padding-top: var(--spacing-small);
@media screen and (min-width: 35em) {
padding-top: 0;
}
}
&.center {
/* TODO: find this and kill it */
text-align: center;
}
.options {
display: flex;
flex-direction: column;
@media screen and (min-width: 35em) {
flex-direction: row;
}
.option {
padding: var(--spacing-extra-small) var(--spacing-small);
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);
}
}
}
.group {
display: inline-block;
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);
}

View File

@ -1,4 +1,4 @@
@import "vars.css";
@import "base.css";
@import "tachyons.min.css";
@import "vars.css";
@import "core.css";

View File

@ -2,7 +2,7 @@
{{ define "content" }}
<div class="post-content">
<div class="mw7 ph3 ph0-ns margin-center">
<div class="mw7 ph3 ph0-ns m--center">
<h3>
We're trying to put programming back on the right track.
</h3>

View File

@ -4,7 +4,7 @@
<div class="optionbar">
<div class="options">
{{ if .CanCreatePost }}
<a class="button" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
<a class="option" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
{{ end }}
</div>
<div class="options">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 margin-center tl post ph3 ph0-ns">
<div class="mw7 m--center tl post ph3 ph0-ns">
<h1>{{ .Thread.Title }}</h1>
{{ with .MainPost }}
<div class="flex justify-between items-center mt2 mb3">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 margin-center">
<div class="mw7 m--center">
<h3 class="mb3">Are you sure you want to delete this post?</h3>
{{ template "forum_post_standalone.html" .Post }}
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="center-layout mw7 mv3 ph3 ph0-ns post-content">
<div class="m--center mw7 mv3 ph3 ph0-ns post-content">
<h1>Handmade Guide to Community Interaction</h1>
<h2>Our Philosophy</h2>
<p>The Handmade community strives to create an environment conducive to innovation, education, and constructive discussion. To that end, we expect members of the community to respect the following set of principles to maintain civil discourse and create an inclusive environment.</p>

View File

@ -2,7 +2,7 @@
{{ define "content" }}
{{ $bannerclass := "overflow-hidden br2 mt2 h4 h5-ns cover bg-center" }}
<div class="center-layout mw7 ph3 ph0-ns post-content flex flex-column g3">
<div class="m--center mw7 ph3 ph0-ns post-content flex flex-column g3">
<div class="fronke">
<a href="https://handmadehero.org/conference">
<h2>HandmadeCon</h2>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 margin-center">
<div class="mw7 m--center">
<h3 class="mb3">Are you sure you want to delete this article?</h3>
<div class="bg--dim pa3 br3 tl post-content">
<h1>{{ .Article.Title }}</h1>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="mw7 margin-center">
<div class="mw7 m--center">
<h3 class="mb3">Are you sure you want to delete this post?</h3>
{{ template "forum_post_standalone.html" .Post }}
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="post-content mw7 ph3 ph0-ns margin-center">
<div class="post-content mw7 ph3 ph0-ns m--center">
<h1>Handmade Software Foundation</h1>
<!-- <div> -->
</div>

View File

@ -6,29 +6,30 @@
{{ $footerClasses := "ma0 pa0 dib-ns" }}
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.HomepageUrl }}">Main Page</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.ManifestoUrl }}">Manifesto</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.AboutUrl }}">About</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.RolesUrl }}">Roles</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.ProjectIndexUrl }}">Projects</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.CommunicationGuidelinesUrl }}">Communication Guidelines</a>
<span class="c--dimmer dn di-ns"> / </span>
</li>
<li class="{{ $footerClasses }}">
<a href="{{ .Footer.ContactUrl }}">Contact</a>
</li>
</ul>
<form onsubmit="this.querySelector('input[name=q]').value = this.querySelector('#searchstring').value + ' site:handmade.network';" class="ma0 mt3 bg--card pa1 br2 dib" method="GET" action="{{ .Footer.SearchActionUrl }}" target="_blank">
<input type="hidden" name="q" />
<input class="site-search bn lite pa2 fira" type="text" id="searchstring" value="" placeholder="Search with DuckDuckGo" size="18" />
<input id="search_button_homepage" type="submit" value="Go"/>
</form>
</footer>

View File

@ -1,5 +1,5 @@
<header id="site-header" class="mb3 bb bw1 b--theme-dark">
<a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
<a href="#content-start" class="sr sr-focusable" id="content-jump">Jump to Content</a>
<div class="user-options flex justify-center justify-end-ns relative">
{{ if .User }}
{{ if .User.IsStaff }}

View File

@ -2,29 +2,29 @@
{{ if gt .Total 1 }}
<div class="pagination flex">
{{ if gt .Current 1 }}
<a class="button" href="{{ .PreviousUrl }}">Prev</a>
<a class="option" href="{{ .PreviousUrl }}">Prev</a>
{{ end }}
{{ if gt .Current 1 }}
{{ if gt .Current 2 }}
<a class="page button" href="{{ .FirstUrl }}">1</a>
<a class="page option" href="{{ .FirstUrl }}">1</a>
{{ end }}
{{ if gt .Current 3 }}
<a class="page button">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
<a class="page option">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
{{ end }}
<a class="page button" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
<a class="page option" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
{{ end }}
<a class="page button current">{{ .Current }}</a>
<a class="page option b">{{ .Current }}</a>
{{ if lt .Current .Total }}
<a class="page button" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
<a class="page option" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
{{ if lt .Current (sub .Total 2) }}
<a class="page button">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
<a class="page option">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
{{ end }}
{{ if lt .Current (sub .Total 1) }}
<a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
<a class="page option" href="{{ .LastUrl }}">{{ .Total }}</a>
{{ end }}
{{ end }}
{{ if lt .Current .Total }}
<a class="button" href="{{ .NextUrl }}">Next</a>
<a class="option" href="{{ .NextUrl }}">Next</a>
{{ end }}
</div>
{{ end }}

View File

@ -237,7 +237,7 @@
<body>
<div class="left white">
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
@ -254,7 +254,7 @@
</div>
</div>
<div class="section mw8 margin-center ph3 ph4-l mv4">
<div class="section mw8 m--center ph3 ph4-l mv4">
<p>
The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where you create a replacement for a program that frustrates you.
</p>
@ -267,16 +267,16 @@
</div>
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Showcase</h2>
<p>
These screenshots and videos were shared in #jam-showcase on our <a href="https://discord.gg/hmn" target="_blank">Discord</a>. Join us!
</p>
<div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
</div>
</div>
<div class="section flex-fair mw8 margin-center ph3 ph4-l mv4">
<div class="section flex-fair mw8 m--center ph3 ph4-l mv4">
<h2>Why reinvent the wheel?</h2>
<p>
How can you reinvent something that's never been invented?
@ -293,7 +293,7 @@
</div>
<div class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Details</h2>
<p>
The jam takes place from Monday, September 27 through Sunday, October 3. Here's how you can participate:
@ -344,7 +344,7 @@
</div>
</div>
<div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l mv4">
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l mv4">
<div class="section flex-fair mb4 mb0-ns">
<h2>Make it by hand.</h2>
<p>
@ -368,7 +368,7 @@
</div>
</div>
<div class="mw8 margin-center ph3-m ph4-l">
<div class="mw8 m--center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -21,7 +21,7 @@
</div>
<div class="section bg-black-20 pt4 pb3 pb4-ns">
<div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -50,7 +50,7 @@
</div>
</div>
<div class="section mw8 margin-center ph3 ph4-l mv4">
<div class="section mw8 m--center ph3 ph4-l mv4">
<p>
The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where we turn a fresh eye to "solved problems".
</p>
@ -67,7 +67,7 @@
{{ if eq .DaysUntilEnd 0 }}
<div class="section bg-black-20 pv4 overflow-hidden">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }}
@ -81,7 +81,7 @@
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -93,7 +93,7 @@
These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
</div>
@ -205,7 +205,7 @@
</script>
{{ else }}
<div class="section bg-black-20 pv4 overflow-hidden">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Last year's entries</h2>
<p>
We had many incredible entries last year. Here are a few of our favorites:
@ -263,7 +263,7 @@
{{ end }}
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Monday, August 15 through Sunday, August 21. Here's how you can participate:
@ -307,7 +307,7 @@
</div>
<div class="bg-black-20 pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed, but we encourage you to use only use what you really need. If you want some lightweight templates to get you started, check out our <a href="https://github.com/HandmadeNetwork/jam_templates" target="_blank">app templates</a>.</li>
@ -338,7 +338,7 @@
</div>
<div class="pt4">
<div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
<div class="section flex-fair mb4 mb0-ns">
<h2>Make it by hand.</h2>
<p>

View File

@ -17,7 +17,7 @@
</div>
<div class="section pt4 pb3 pb4-ns">
<div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -72,7 +72,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
</div>
<div class="section mw8 margin-center ph3 ph4-l mv4">
<div class="section mw8 m--center ph3 ph4-l mv4">
<p>
Too many things in computing are <b>invisible</b>.
</p>
@ -86,7 +86,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
<div class="section pv4">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Read the recap</h2>
<p>Now that the jam is over, see which projects stood out. <a class="b" href="{{ .RecapUrl }}">Full post ➜</a></p>
</div>
@ -94,7 +94,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
{{ if eq .DaysUntilEnd 0 }}
<div class="section pv4 overflow-hidden">
<div class="mw8 margin-center ph3 ph4-l">
<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 }}
@ -110,7 +110,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -129,7 +129,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
@ -249,7 +249,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
{{ end }}
<div id="inspiration" class="pt4">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Inspiration</h2>
</div>
<div class="inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll">
@ -331,7 +331,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</style>
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Friday, April 14 through Sunday, April 16. Here's
@ -384,7 +384,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
</div>
<div class="pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed.</li>

View File

@ -19,7 +19,7 @@
</div>
<div class="section pt4 pb3 pb4-ns">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2 class="mb2">Jam recap</h2>
<div class="mb4 flex items-center">
<div class="avatar-icon contain bg-center" style="background-image:url('{{ .Ben.AvatarUrl }}');"></div>

View File

@ -21,7 +21,7 @@
</div>
<div class="section bg-black-20 pt4 pb3 pb4-ns">
<div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
<div class="flex-grow-1 overflow-hidden">
{{ if eq .DaysUntilEnd 0 }}
<h3 class="mt0 mb3">Project updates</h3>

View File

@ -23,7 +23,7 @@
</style>
{{ if .TwitchEmbedUrl }}
<div class="section mw8 margin-center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
<div class="section mw8 m--center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
<iframe src="{{ .TwitchEmbedUrl }}" allowfullscreen width="100%" height="100%"></iframe>
</div>
{{ end }}
@ -60,7 +60,7 @@
</div>
</div>
<div class="section mw8 margin-center ph3 ph4-l mv4">
<div class="section mw8 m--center ph3 ph4-l mv4">
<p>
The <b>Wheel Reinvention Jam</b> is a one-week jam where we build software from&nbsp;scratch.
</p>
@ -77,7 +77,7 @@
{{ if eq .DaysUntilEnd 0 }}
<div class="section bg-black-20-alternate pv4">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Recap show</h2>
<p>Watch the livestream celebrating this year's submissions:</p>
<div class="aspect-ratio aspect-ratio--16x9">
@ -86,7 +86,7 @@
</div>
</div>
<div class="section bg-black-20-alternate pv4 overflow-hidden">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Submitted projects</h2>
<div class="mt3 projects g3 back-to-normal">
{{ range .JamProjects }}
@ -100,7 +100,7 @@
</div>
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
<div id="showcase-outer-container" class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
{{ if gt .DaysUntilEnd 0 }}
<h2>Recent updates</h2>
<p>
@ -112,7 +112,7 @@
These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
</p>
{{ end }}
<div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
<div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
<div class="actions flex justify-center">
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
</div>
@ -224,7 +224,7 @@
</script>
{{ else }}
<div class="section bg-black-20-alternate pv4 overflow-hidden">
<div class="mw8 margin-center ph3 ph4-l">
<div class="mw8 m--center ph3 ph4-l">
<h2>Last year's entries</h2>
<p>
We had 28 incredible entries <a href="https://handmade.network/jam/2022">last year</a>. Here are a few of our favorites:
@ -306,7 +306,7 @@
{{ end }}
<div class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
<div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
<div class="section flex-fair mb4 mb0-ns">
<h2>Why reinvent the wheel?</h2>
<p>
@ -340,7 +340,7 @@
</div>
<div class="bg-black-20-alternate pt4 pb3 pb4-ns">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>How to participate</h2>
<p>
The jam takes place from Monday, September 25 through Sunday, October 1. Here's how you can participate:
@ -384,7 +384,7 @@
</div>
<div class="bg-black-20-alternate pv4">
<div class="section mw8 margin-center ph3 ph4-l">
<div class="section mw8 m--center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed. Popular tech choices in the community are <a href="https://www.raylib.com/">Raylib</a>, <a href="https://www.libsdl.org/">SDL</a>, <a href="https://github.com/ocornut/imgui">Dear ImGui</a>, and <a href="https://github.com/rxi/microui">microui</a>. Or if you're feeling ambitious, you can even use our new app platform, <a href="https://orca-app.dev/">Orca</a>!</li>

View File

@ -2,6 +2,32 @@
{{ define "extrahead" }}
<script src="{{ static "js/templates.js" }}"></script>
<style>
.landing-layout {
display: grid;
gap: var(--spacing-medium);
}
.landing-layout > * {
overflow: hidden;
}
@media screen and (min-width: 60em) {
.landing-layout {
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
}
.landing-layout > * {
grid-column: 1 / 2;
}
.landing-layout > .landing-right {
grid-column: 2 / 3;
grid-row: 1 / 20; /* increase this number if somehow you ever add that much garbage to the home page :) */
}
}
</style>
{{ end }}
{{ define "content" }}
@ -349,7 +375,7 @@
<div id="welcome-logo" class="h4 mb3 mb4-ns">
{{ svg "hmn_circuit" }}
</div>
<div id="welcome-content" class="center-layout" style="max-width: 51rem">
<div id="welcome-content" class="m--center" style="max-width: 51rem">
<p class="b">We are working to correct the course of the software industry.</p>
<p>We are a community of low-level programmers with high-level goals. Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we dig deep into our systems and learn how to do things from scratch. We're not satisfied by the latest popular language or the framework of the month. Instead we care about how computers <b>actually&nbsp;work.</b></p>
<p>Software quality is declining, and modern development practices are making it worse. We need to change course. <b>Help us get the software industry back on track.</b></p>

View File

@ -20,7 +20,7 @@
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}" />
<link rel="stylesheet" type="text/css" href="{{ static "style.build.css" }}" />
{{/* TODO: These are the base64 encodings of bglight.png and bgdark.png. Rather than manually putting the encoding here, it would be nice to automatically calculate it when the server starts up and pass it in. */}}
{{ $bglight := "iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAEGGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjcyIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNzIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iNzIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjcyIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni4wIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni4wIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjcuMSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+NRFFrAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG/S0JRFMc/amGUYZBDQ4NENVmUgdTSoJQF1WAG/Vr05Y9A7fGeEdIatAoFUUu/hvoLag2ag6AogmgLmotaSl7n+QQl8l7OOZ/7vfcc7j0X7NGMktUbBiCby2uRcNA7v7Dodb7iwCXmwRNTdHV6djxK3fH1gM2Md31mrfrn/h0tKwldAVuT8KiiannhCeGpjbxq8q6wR0nHVoTPhX2aXFD43tTjFr+ZnLL4x2QtGgmBvU3Ym6rheA0raS0rLC+nO5tZVyr3MV/iSuTmZiV2iXWiEyFMEC+TjBEiwCAj4gP04adfVtTJHyjnz7AmuYp4lQIaq6RIk8cn6rpUT0hMip6QmaFg9v9vX/XkkN+q7gpC44thfPSAcwdKRcP4PjaM0gk4nuEqV81fO4LhT9GLVa37ENxbcHFd1eJ7cLkNHU9qTIuVJYeYPZmE9zNoXYD2W2hesnpW2ef0EaKb8lU3sH8AvXLevfwLEU5nv19tQRgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJOSURBVHic7ZtRksMgCIaTPOcI3v9MPYBHyHv2obOZTlIVFeSHyltnm38QCehXdo0xnkulHcex7Pue/OxJZ20JUE7Um86W+wKHM1w6IYRVw59sBqHtagihO+Nr/Xlk0GeE930nRTzlBIfOZ+bEGE9KJnH68wjQ/eHWxXHp3IPSGqRWf64A5R6uWRyXTi4oNUHq9ecKUOlh6uK4dEpBoQap159H0UM7m9wLc2uhbvVn1qCCJXdjtvi3JQ+K1AiXdpOqU/oONXNKOrX+dO2K1q6O1Nl6DnD34tnrzP9nJJ3NYmcZqfP1oJizUnBqDnC5RdUcTCV1tm9/TBklOJRMoiyK4s8InfX1ep3zNUvrzBpU0Olu095bfRdRpATHOpk0RRQ1ri3wRFGbTMLf5rWpACxRRCGTsEQRhUzCE0VtMjlrUMHMEEUtMtlNFLkJnrROLZnsuiagZQcUUUQngapEEa1DQRFFKySQS6eKKFoigVw6zUTRwuuhRhTRFwVFFJFbNIdO8qCoNROIppPNIO+8mWKPDNKeCUTTeQRIex4HTecKEMpMIJrOFSCUmUA0nUcR/qVfTSk6swYVLJkds8W/LXlQ1JoJ7NXhnpl0RRQlst4NUZSamXRxm5fsvOaJovTMpGmiOGJm0g1RlHrNZg0q+OOOKHK3evH/eh5JJiVmJofMKFq+tojNKHohk2LzQV6oAPuMojcyyT6j6I1Mis0oeiGTswYVTHxG0XKLX5YBM4pWyaRLoiih44YoSum4uM1L6pgnitI6poniCB03RFFK5w8yFS9yPecAUAAAAABJRU5ErkJggg==" }}

View File

@ -347,7 +347,7 @@
<body>
<div class="left white">
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
@ -355,7 +355,7 @@
{{ block "content" . }}{{ end }}
</div>
<div class="mw8 margin-center ph3-m ph4-l">
<div class="mw8 m--center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -37,7 +37,7 @@
<body>
<div class="left white">
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
@ -45,7 +45,7 @@
{{ block "content" . }}{{ end }}
</div>
<div class="mw8 margin-center ph3-m ph4-l">
<div class="mw8 m--center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="post-content mw7 ph3 ph0-ns margin-center">
<div class="post-content mw7 ph3 ph0-ns m--center">
<h1>{{ .Role.Name }}</h1>
{{ block "role content" . }}{{ end }}

View File

@ -198,12 +198,12 @@
<body>
<div class="left white">
<div class="mt4-ns mw7 margin-center ph3-ns">
<div class="mt4-ns mw7 m--center ph3-ns">
{{ template "header.html" . }}
</div>
<div class="jam-sections">
<div class="center-layout content mw7 ph3 flex flex-column g3">
<div class="m--center content mw7 ph3 flex flex-column g3">
{{ with .Breadcrumbs }}
<div class="mt2 tc tl-ns ph2 ph0-ns">
{{ range $i, $e := . -}}
@ -217,7 +217,7 @@
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 margin-center ph3-ns">
<div class="mw8 m--center ph3-ns">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -340,13 +340,13 @@
<body>
<div class="left white">
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 margin-center ph3-m ph4-l">
<div class="mw8 m--center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -343,13 +343,13 @@
<body>
<div class="left white">
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
<div class="mt4-ns mw8 m--center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
{{ block "content" . }}{{ end }}
<div class="mw8 margin-center ph3-m ph4-l">
<div class="mw8 m--center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>

View File

@ -1,7 +1,7 @@
{{ template "base.html" . }}
{{ define "content" }}
<div class="center-layout mw7 mv3 ph3 ph0-ns post-content">
<div class="m--center mw7 mv3 ph3 ph0-ns post-content">
<h2>Computers are amazing.</h2>
<p>Computing has changed our lives for the better. Computers allow us to learn, connect with each other, and express ourselves in amazing new ways. And every year our devices get more powerful, less expensive, and more accessible - computers today can do things we hardly dreamed of twenty years ago.</p>

View File

@ -28,7 +28,7 @@
{{ range $i, $owner := .Owners }}
<div class="flex mb3 items-center">
<img class="avatar-icon mr2" src="{{ $owner.AvatarUrl }}" />
<a class="user-link" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
<a class="rel" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
</div>
{{ end }}
</div>

View File

@ -7,7 +7,7 @@
{{ define "all_projects" }}
<div>
{{ with .OfficialProjects }}
<div class="carousel-container project-carousel mw-100 mv2 mv3-ns margin-center dn db-ns">
<div class="carousel-container project-carousel mw-100 mv2 mv3-ns m--center dn db-ns">
<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
{{ range $index, $project := . }}
<div class="carousel-item flex pv3 pl3 w-100 h-100 bg--dim items-center {{ if eq $index 0 }}active{{ end }}">

View File

@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="{{ static "style.build.css" }}" />
</head>
<body>
<body class="ma3">
<h1>Base style test</h1>
<p>
@ -72,4 +72,36 @@ int main() {
printf("Hello, world!\n");
}
</pre></code></p>
<h1>post-content test</h1>
<p>The <code>post-content</code> class yields styles that look nice for textual content.</p>
<div class="post-content pa3 ba b--theme-dim">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ol>
<li>List items without paragraphs.</li>
<li>
<p>List items with paragraphs.</p>
<p>These should also look reasonable.</p>
</li>
<li>And back to no paragraphs.</li>
</ol>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>List items without paragraphs.</li>
<li>
<p>List items with paragraphs.</p>
<p>These should also look reasonable.</p>
</li>
<li>And back to no paragraphs.</li>
</ul>
</div>
</body>

View File

@ -2,7 +2,7 @@
{{ define "content" }}
<div class="center-layout content mw7 ph3 flex flex-column g3">
<div class="m--center content mw7 ph3 flex flex-column g3">
<div>
<div class="mv5 flex justify-center">
<img

View File

@ -5,7 +5,7 @@
{{ end }}
{{ define "content" }}
<div class="center-layout content mw7 ph3 flex flex-column g3">
<div class="m--center content mw7 ph3 flex flex-column g3">
<div>
<div class="mv4 mv5-ns flex justify-center">
<div class="frame mw6">

View File

@ -8,8 +8,8 @@
{{ end }}
{{ define "content" }}
<div class="center-layout content mw7 ph3 flex flex-column g3">
<div class="frame mv3 mv4-ns mw6 margin-center">
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="frame mv3 mv4-ns mw6 m--center">
{{ template "frame title" "Submit A Video" }}
<form class="post-content" action="" method="POST">
{{ csrftoken .Session }}

View File

@ -8,7 +8,7 @@
{{ end }}
{{ define "content" }}
<div class="center-layout content mw7 ph3 flex flex-column g3">
<div class="m--center content mw7 ph3 flex flex-column g3">
<div class="mv5 flex justify-center">
<div class="frame mw6">
{{ template "frame title" "Submission Complete" }}

View File

@ -12,6 +12,18 @@ Styling TODO
- [ ] hidden
- [x] empty (?!)
- [x] column
- [ ] content
- [ ] description
- [ ] Re-evaluate form styles
- [ ] theme-color-light is used only for buttons
- [ ] center-layout vs. margin-center
- [x] center-layout vs. margin-center
- [ ] Make sure old projects look ok (background images are gone)
- [ ] Audit or delete whenisit
- optionbar fixes
- [ ] Remove "external" styles (width, padding, etc.)
- [ ] Fix options (no more "buttons")
- [ ] Convert all buttons to links
- [ ] Generally audit visuals
- [ ] Find that thing and kill it?
- [ ] Probably remove uses of .tab
- [ ] everything in _content.scss, ugh