Visibility jam mobile tweaks
This commit is contained in:
Ben Visness
parent
1af2f57240
commit
ab545c1caf
|
|
@ -5,7 +5,7 @@
|
|||
<a class="db" href="{{ .JamUrl }}">
|
||||
<h1 class="jam-title mb2">Visibility Jam</h1>
|
||||
</a>
|
||||
<div class="fw5 f3 mb1">
|
||||
<div class="fw5 f4 f3-ns mb1">
|
||||
July 19-21, 2024.
|
||||
{{ if gt .DaysUntilEnd 0 }}
|
||||
{{ if eq .DaysUntilStart 0 }}
|
||||
|
|
@ -27,11 +27,21 @@
|
|||
</div>
|
||||
<style>
|
||||
.jam-logo {
|
||||
width: 26.2rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.jam-title {
|
||||
font-size: 4rem;
|
||||
font-size: 3.06rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
.jam-logo {
|
||||
width: 26.2rem;
|
||||
}
|
||||
|
||||
.jam-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,8 +91,8 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="link-bold">
|
||||
<div class="flex justify-center link-gradient">
|
||||
<div class="link-bold link-gradient">
|
||||
<div class="flex justify-center">
|
||||
<div class="mw-site-narrow">
|
||||
<div class="ph3 pv4">
|
||||
<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>
|
||||
</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">
|
||||
<h2 class="dib f3 pb3 c--jam-gradient">How to participate</h2>
|
||||
<div class="flex flex-column g2">
|
||||
|
|
@ -148,51 +198,5 @@
|
|||
</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>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue