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

Visibility jam mobile tweaks

This commit is contained in:
Ben Visness 2024-07-05 12:42:09 -05:00
parent 1af2f57240
commit ab545c1caf
2 changed files with 66 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/templates/src/include/jam_2024_vj_bannerbig.html
View File

@ -5,7 +5,7 @@
<a class="db" href="{{ .JamUrl }}"> <a class="db" href="{{ .JamUrl }}">
<h1 class="jam-title mb2">Visibility Jam</h1> <h1 class="jam-title mb2">Visibility Jam</h1>
</a> </a>
<div class="fw5 f3 mb1"> <div class="fw5 f4 f3-ns mb1">
July 19-21, 2024. July 19-21, 2024.
{{ if gt .DaysUntilEnd 0 }} {{ if gt .DaysUntilEnd 0 }}
{{ if eq .DaysUntilStart 0 }} {{ if eq .DaysUntilStart 0 }}
@ -26,12 +26,22 @@
</div> </div>
</div> </div>
<style> <style>
.jam-logo {
width: 20rem;
}
.jam-title {
font-size: 3.06rem;
font-weight: 700;
}
@media screen and (min-width: 35em) {
.jam-logo { .jam-logo {
width: 26.2rem; width: 26.2rem;
} }
.jam-title { .jam-title {
font-size: 4rem; font-size: 4rem;
font-weight: 700; }
} }
</style> </style>

102
src/templates/src/jam_2024_vj_index.html
View File

@ -91,8 +91,8 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="link-bold"> <div class="link-bold link-gradient">
<div class="flex justify-center link-gradient"> <div class="flex justify-center">
<div class="mw-site-narrow"> <div class="mw-site-narrow">
<div class="ph3 pv4"> <div class="ph3 pv4">
<h2 class="dib f3 pb3 c--jam-gradient">What does "visibility" mean?</h2> <h2 class="dib f3 pb3 c--jam-gradient">What does "visibility" mean?</h2>
@ -103,7 +103,57 @@
<p>So for this jam, make it visible. Maybe it's a data structure in your program. Maybe it's some obscure metrics from your operating system. Maybe it's your sleep schedule. Whatever you choose, you have a weekend to make it happen.</p> <p>So for this jam, make it visible. Maybe it's a data structure in your program. Maybe it's some obscure metrics from your operating system. Maybe it's your sleep schedule. Whatever you choose, you have a weekend to make it happen.</p>
</div> </div>
</div> </div>
<hr> </div>
</div>
<div class="bg1 pt4">
<div class="mw-site-narrow m-center ph3">
<h2 class="dib pb3 f3 c--jam-gradient">Inspiration</h2>
<div class="post-content">
<p>The following projects are amazing examples of visibility. Some were even standout submission's from last year's jam!</p>
<p>For more inspiration, check out the #wishlist channel on <a href="https://discord.gg/hmn">Discord</a>.</p>
</div>
</div>
<div class="jam-inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll">
<div class="pic">
<video
preload="metadata" controls
src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/ec99f8e9-4fd4-4d96-a49e-a09287a06e77/rede_demo.mp4"
poster="{{ static "visjam2023/rede.jpg" }}"
></video>
<div class="caption"><a href="https://handmade.network/p/369/rede/">REDE</a> shows you the internal structure of a regex engine as you execute it.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2024/escapeartist.png" }}">
<div class="caption"><a href="https://handmade.network/p/379/escape-artist/">Escape Artist</a> shows all the invisible ASCII escape codes in terminal output.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/graphviz.jpeg" }}">
<div class="caption"><a href="https://graphviz.org/">Graphviz</a> can be used to make debug visuals for almost any data structure.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/wireshark.jpg" }}">
<div class="caption"><a href="https://www.wireshark.org/">Wireshark</a> exposes all activity on your network devices.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/spall.png" }}">
<div class="caption"><a href="https://spall.handmade.network/">Spall</a> allows you to explore your program's execution at terrifying speeds.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/v8.png" }}">
<div class="caption">Bugs can be very obvious when you render out the data. (Example: a random number generator.)</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/vmmap.png" }}">
<div class="caption"><a href="https://learn.microsoft.com/en-us/sysinternals/downloads/vmmap">vmmap</a> allows you to see exactly how your address space is allocated.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2024/npmgraph.png" }}">
<div class="caption"><a href="https://npmgraph.js.org/">npmgraph</a> shows you the full dependency graph of a JavaScript package, including its size on disk.</div>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="mw-site-narrow">
<div class="ph3 pv4"> <div class="ph3 pv4">
<h2 class="dib f3 pb3 c--jam-gradient">How to participate</h2> <h2 class="dib f3 pb3 c--jam-gradient">How to participate</h2>
<div class="flex flex-column g2"> <div class="flex flex-column g2">
@ -148,51 +198,5 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg1 pt4 link-gradient">
<div class="mw-site-narrow m-center ph3">
<h2 class="dib pb3 f3 c--jam-gradient">Inspiration</h2>
<div class="post-content">
<p>The following projects are amazing examples of visibility. For more inspiration, check out the #wishlist channel on <a href="https://discord.gg/hmn">Discord</a>.</p>
</div>
</div>
<div class="jam-inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll">
<div class="pic">
<video
preload="metadata" controls
src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/ec99f8e9-4fd4-4d96-a49e-a09287a06e77/rede_demo.mp4"
poster="{{ static "visjam2023/rede.jpg" }}"
></video>
<div class="caption"><a href="https://handmade.network/p/369/rede/">REDE</a> shows you the internal structure of a regex engine as you execute it.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2024/escapeartist.png" }}">
<div class="caption"><a href="https://handmade.network/p/379/escape-artist/">Escape Artist</a> shows all the invisible ASCII escape codes in terminal output.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/graphviz.jpeg" }}">
<div class="caption"><a href="https://graphviz.org/">Graphviz</a> can be used to make debug visuals for almost any data structure.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/wireshark.jpg" }}">
<div class="caption"><a href="https://www.wireshark.org/">Wireshark</a> exposes all activity on your network devices.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/spall.png" }}">
<div class="caption"><a href="https://spall.handmade.network/">Spall</a> allows you to explore your program's execution at terrifying speeds.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/v8.png" }}">
<div class="caption">Bugs can be very obvious when you render out the data. (Example: a random number generator.)</div>
</div>
<div class="pic">
<img src="{{ static "visjam2023/vmmap.png" }}">
<div class="caption"><a href="https://learn.microsoft.com/en-us/sysinternals/downloads/vmmap">vmmap</a> allows you to see exactly how your address space is allocated.</div>
</div>
<div class="pic">
<img src="{{ static "visjam2024/npmgraph.png" }}">
<div class="caption"><a href="https://npmgraph.js.org/">npmgraph</a> shows you the full dependency graph of a JavaScript package, including its size on disk.</div>
</div>
</div>
</div>
</div> </div>
{{ end }} {{ end }}