Seattle page
Adds in more content/sections for seattle page, enough that I'd consider it usable now.seattle2022
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.seattle-color {
|
||||
color: #FF3CC8;
|
||||
color: #FF3CC8 !important;
|
||||
}
|
||||
|
||||
.seattle-bg {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ banner:
|
|||
content: "We are the largest indie conferences for low-level programmers. This is your portal to meet with folks into graphics, game engines, kernels, compilers, and more!"
|
||||
image: "/images/hmc_spread.png"
|
||||
hide_banner_img: true
|
||||
triple_header:
|
||||
triple_section:
|
||||
enable: true
|
||||
img_left: "/images/hmb/boston-light-mode.svg"
|
||||
img_left_dark: "/images/hmb/boston-dark-mode.svg"
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ features:
|
|||
start_color: "#fff"
|
||||
start_dark: "/images/transition2.svg"
|
||||
start_dark_color: "#150e31"
|
||||
end: "/images/transition.svg"
|
||||
end_class: "mt-20 transform -scale-x-100"
|
||||
end: "/images/transition3.svg"
|
||||
end_class: "transform -scale-x-100"
|
||||
end_color: "#fff"
|
||||
end_style: "mask-size: cover;height:150px;"
|
||||
end_dark: "/images/transition3.svg"
|
||||
|
|
@ -66,48 +66,46 @@ features:
|
|||
imgs:
|
||||
- title: "Abner Coimbre"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-4"
|
||||
subtitle: "Host"
|
||||
img: "/images/people/abner_2022.png"
|
||||
modal_target: "abner"
|
||||
- title: "Billy Basso"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-4"
|
||||
subtitle: "Creator of [Animal Well](https://www.youtube.com/watch?v=ygL8eqX12MQ)"
|
||||
img: "/images/people/billy-basso.jpg"
|
||||
modal_target: "billy"
|
||||
- title: "Anniversary Special"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-4"
|
||||
subtitle: "The Next Ten Years"
|
||||
img: "/images/people/abner_bvisness-scaled.jpg"
|
||||
modal_target: "anniversary"
|
||||
- title: "Allen Webster"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-4"
|
||||
subtitle: "Founder of [Mr. 4th](https://mr4th.com/) Lab"
|
||||
img: "/images/people/allen_square.webp"
|
||||
modal_target: "allen"
|
||||
- title: "Devine Lu Linvega"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-4"
|
||||
subtitle: "Co-Founder of [Hundred Rabbits](https://100r.co)"
|
||||
img: "/images/people/devine_square.webp"
|
||||
modal_target: "devine"
|
||||
- title: "Kagi Search"
|
||||
title_class: "text-center text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg"
|
||||
subtitle_class: "text-center text-lg mb-2"
|
||||
subtitle: "Humanize the Web"
|
||||
img: "/images/people/kagi_square.webp"
|
||||
modal_target: "kagi"
|
||||
- title: "Job Booth"
|
||||
title_class: "text-center text-white text-2xl mt-2"
|
||||
subtitle_class: "text-center text-lg text-white"
|
||||
subtitle_class: "text-center text-lg text-white mb-4"
|
||||
subtitle: "Open Slots"
|
||||
img: "/images/people/resume.png"
|
||||
link: "/jobs"
|
||||
|
||||
|
||||
bg_color: "#0a0a0a"
|
||||
content: "**More On The Way**<br>Join the [newsletter](/news) or check out last year's speakers below."
|
||||
content_class: "text-white mt-12 px-12 pb-12 pt-12 bg-[rgba(0,0,0,0.5)] rounded-lg"
|
||||
|
|
@ -117,8 +115,9 @@ features:
|
|||
label: "Register"
|
||||
link: "/tickets"
|
||||
|
||||
- title: "Hundreds in person,<br> Thousands online"
|
||||
title_class: "text-white"
|
||||
- title: "Fully Hybrid"
|
||||
title_class: "text-white mb-4 drop-shadow-2xl"
|
||||
side: "center"
|
||||
transition:
|
||||
start: "/images/transition4.svg"
|
||||
start_class: "mb-5 -scale-y-100 -scale-x-100"
|
||||
|
|
@ -133,18 +132,53 @@ features:
|
|||
end_dark_color: "#150e31"
|
||||
bg_img:
|
||||
parallax: false
|
||||
img: "/images/adrien-olichon-gOdavfpH-3s-unsplash.jpg"
|
||||
image: "/images/nystrom.webp"
|
||||
image_link: "https://vimeo.com/780000746"
|
||||
img: "/images/line_waves.webp"
|
||||
card_grid:
|
||||
title: ""
|
||||
title_class: "text-center"
|
||||
section_class: "mb-12"
|
||||
card_class: "dark:bg-[#150e31] bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"
|
||||
card_title_class: "text-xl font-semibold mb-2 text-center"
|
||||
card_subtitle_class: "text-center dark:text-white text-black"
|
||||
card_bottom_text_class: "text-center pt-2"
|
||||
cards:
|
||||
- title: "No Vaults"
|
||||
title_class: ""
|
||||
subtitle_class: ""
|
||||
subtitle: "We don't lock recordings behind a paid vault."
|
||||
img: "/images/film.webp"
|
||||
modal_target: "vaults"
|
||||
- title: "Live Streaming"
|
||||
title_class: ""
|
||||
subtitle_class: ""
|
||||
subtitle: "Presentations streamed live in HD, with closed captioning when possible"
|
||||
img: "/images/cinema.webp"
|
||||
modal_target: "live"
|
||||
- title: "Private Chat Server"
|
||||
title_class: ""
|
||||
subtitle_class: ""
|
||||
subtitle: "Physical and online tracks communicate under the same server"
|
||||
img: "/images/revolt_mockup.webp"
|
||||
modal_target: "chat"
|
||||
image_class: "rounded-md shadow-lg"
|
||||
content: "Every year hundreds of low-level programmers convene physically while thousands more watch from the comfort of their couch."
|
||||
content_class: "p-4 px-6 rounded-md bg-[rgba(0,0,0,0.7)]"
|
||||
content: ""
|
||||
content_class: "p-4 px-6 rounded-md"
|
||||
section_class: "text-white"
|
||||
- title: "Watch Previous Years"
|
||||
title_class: "mb-4 drop-shadow-2xl text-center"
|
||||
side: "left"
|
||||
button:
|
||||
enable: true
|
||||
label: "Register"
|
||||
link: "/tickets"
|
||||
button_class: "bg-white text-black"
|
||||
label: "Media"
|
||||
link: "/media"
|
||||
icon: "fa fa-ticket pl-2"
|
||||
class: "btn text-white seattle-bg"
|
||||
image: "/images/hms_23_trailer.webp"
|
||||
image_link: "/media"
|
||||
image_class: "rounded-md shadow-lg"
|
||||
content: "See all of our previous years of talks, demos, and chats freely on our media page."
|
||||
content_class: "p-4 px-6 rounded-md text-black dark:text-white"
|
||||
section_class: "text-white mt-24 pb-24"
|
||||
modals:
|
||||
- active: true
|
||||
id: "abner"
|
||||
|
|
@ -195,4 +229,25 @@ modals:
|
|||
title_class: "text-white"
|
||||
content: "At [Kagi](https://kagi.com/welcome), we envision a **friendly version of the internet** where users can explore, learn, and interact with confidence and ease. Our mission is to **humanize the web**, making it more accessible, ethical, and centered around the needs of individuals. We are driven by our core purpose: to **inform and educate**, empowering users with knowledge and understanding as they navigate the online world."
|
||||
content_class: "text-white"
|
||||
- active: true
|
||||
id: "vaults"
|
||||
title: "No Vaults"
|
||||
img: ""
|
||||
title_class: "text-white text-center"
|
||||
content: "**Download conference recordings straight from Vimeo**<br><br>We polish and publish presentations to our [Media Page](/media).<br><br>You can freely watch or download Handmade Seattle recordings under a Creative Commons license. ([CC BY NC-ND](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en))"
|
||||
content_class: "text-white"
|
||||
- active: true
|
||||
id: "live"
|
||||
title: "Live Streaming"
|
||||
img: "/images/nystrom.webp"
|
||||
title_class: "text-white"
|
||||
content: "**High-quality experience for the online track**<br><br>Our technical producer, Phil Homan, works alongside Seattle Center A/V staff to stream all our presentations live.<br>**Stream is free, chat server is not.**<br><br>Handmade Seattle streams for free at [handmadecities.com](https://handmadecities.com/) and our [Twitch](https://twitch.tv/abnercoimbre) channel as backup. VODs are made available immediately.<br><br>All the actual chatter, however, occurs on the private chat server—you’ll want a ticket for that!"
|
||||
content_class: "text-white"
|
||||
- active: true
|
||||
id: "chat"
|
||||
title: "Private Chat Server"
|
||||
img: "/images/modals/hmc_revolt_screenshot.png"
|
||||
title_class: "text-white"
|
||||
content: "**Self-hosted to protect your data**<br>Attendees communicate at [chat.handmadecities.com](https://chat.handmadecities.com/) thanks to the open-source [Revolt](https://revolt.chat/) platform.<br><br>**Online attendees are first-class citizens**<br>During Q&A all audience questions are sourced from the chat server, whether you’re at the venue or watching the stream from a Japanese temple.<br><br>**Chat moderation done right**<br>During the event we have a moderator to keep the environment fun yet professional."
|
||||
content_class: "text-white"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -17,25 +17,9 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .triple_header }}
|
||||
{{ if .enable }}
|
||||
<div class="col-10">
|
||||
<div class="row flex items-end">
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_left }}">
|
||||
{{ partial "image" (dict "Src" .img_left "Alt" .alt_text_left "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_left_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_center }}">
|
||||
{{ partial "image" (dict "Src" .img_center "Alt" .alt_text_center "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_center_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_right }}">
|
||||
{{ partial "image" (dict "Src" .img_right "Alt" .alt_text_right "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_right_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .triple_section }}
|
||||
{{ partial "components/triple_section.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<div class="lg:col-7 md:col-9 mb-8 text-center">
|
||||
|
|
|
|||
|
|
@ -10,25 +10,8 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .triple_header }}
|
||||
{{ if .enable }}
|
||||
<div class="col-10">
|
||||
<div class="row flex items-end">
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_left }}">
|
||||
{{ partial "image" (dict "Src" .img_left "Alt" .alt_text_left "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_left_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_center }}">
|
||||
{{ partial "image" (dict "Src" .img_center "Alt" .alt_text_center "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_center_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_right }}">
|
||||
{{ partial "image" (dict "Src" .img_right "Alt" .alt_text_right "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_right_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .triple_section}}
|
||||
{{ partial "components/triple_section" . }}
|
||||
{{ end }}
|
||||
|
||||
<div class="lg:col-7 md:col-9 mb-8 text-center">
|
||||
|
|
|
|||
|
|
@ -10,33 +10,6 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .triple_header }}
|
||||
{{ if .enable }}
|
||||
<div class="col-10">
|
||||
<div class="row">
|
||||
<div class="col-4 all:col-12">
|
||||
<a href="{{ .link_left }}">
|
||||
{{ partial "image" (dict "Src" .img_left "Alt" .alt_text_left "Loading" "eager" "Class" "logo-light" ) }}
|
||||
{{ partial "image" (dict "Src" .img_left_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark" ) }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 all:col-12">
|
||||
<a href="{{ .link_center }}">
|
||||
{{ partial "image" (dict "Src" .img_center "Alt" .alt_text_center "Loading" "eager" "Class" "logo-light" ) }}
|
||||
{{ partial "image" (dict "Src" .img_center_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark" ) }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 all:col-12">
|
||||
<a href="{{ .link_right }}">
|
||||
{{ partial "image" (dict "Src" .img_right "Alt" .alt_text_right "Loading" "eager" "Class" "logo-light" ) }}
|
||||
{{ partial "image" (dict "Src" .img_right_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark" ) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="lg:col-7 md:col-9 mb-8 text-center">
|
||||
<h1 class="mb-8 mt-10 text-h3 lg:-texth1">
|
||||
{{ .title | markdownify }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
{{ with .card_grid }}
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{{ $card_class := .card_class }}
|
||||
{{ $card_title_class := .card_title_class }}
|
||||
{{ $card_subtitle_class := .card_subtitle_class }}
|
||||
{{ $card_bottom_text_class := .card_bottom_text_class }}
|
||||
{{ range $i, $option := .cards }}
|
||||
<div class="{{ $card_class }}"
|
||||
{{ if $option.modal_target }}
|
||||
data-modal-show="{{ $option.modal_target }}"
|
||||
{{ end }}>
|
||||
<img src="{{ $option.img }}" alt="$option.alt" class="w-full h-48 object-cover">
|
||||
<div class="p-6">
|
||||
<h3 class="{{ $card_title_class }} {{ $option.title_class }}">{{ $option.title }}</h3>
|
||||
<p class="{{ $card_subtitle_class }} {{ $option.subtitle_class }}">{{ $option.subtitle | markdownify }}</p>
|
||||
{{ if $option.bottom_text }}
|
||||
<p class="{{ $card_bottom_text_class}} {{ $option.bottom_text_class }}">{{ $option.bottom_text }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -73,6 +73,11 @@
|
|||
{{ if .img_grid }}
|
||||
{{ partial "components/img_grid.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .card_grid }}
|
||||
{{ partial "components/card_grid.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- img_grid -->
|
||||
|
||||
<p class="mb-8 text-lg about-content">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
{{ with .triple_section }}
|
||||
{{ if .enable }}
|
||||
<div class="col-10">
|
||||
<div class="row flex items-end">
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4"
|
||||
{{ if .link_left }} href="{{ .link_left }}" {{ end }}{{ if .modal_left }} data-modal-show="{{ .modal_left }}" {{ end }}>
|
||||
{{ partial "image" (dict "Src" .img_left "Alt" .alt_text_left "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_left_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
{{ if .left_text }}
|
||||
<p class="{{ .left_text_class }}">{{ .left_text | markdownify }}</p>
|
||||
{{ end }}
|
||||
{{ if .left_button }}
|
||||
<a class="btn {{ .left_button_class }}">{{ .left_button | markdownify }}</a>
|
||||
{{ end }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4"
|
||||
{{ if .link_center }} href="{{ .link_center }}" {{ end }}{{ if .modal_center }} data-modal-show="{{ .modal_center }}" {{ end }}>
|
||||
{{ partial "image" (dict "Src" .img_center "Alt" .alt_text_center "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_center_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
{{ if .center_text }}
|
||||
<p class="{{ .center_text_class }}">{{ .center_text | markdownify }}</p>
|
||||
{{ end }}
|
||||
{{ if .center_button }}
|
||||
<a class="btn {{ .center_button_class }}">{{ .center_button | markdownify }}</a>
|
||||
{{ end }}
|
||||
</a>
|
||||
<a class="col-12 py-4 flex justify-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4"
|
||||
{{ if .link_right }} href="{{ .link_right }}" {{ end }}{{ if .modal_right }} data-modal-show="{{ .modal_right }}" {{ end }}>
|
||||
{{ partial "image" (dict "Src" .img_right "Alt" .alt_text_right "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
|
||||
{{ partial "image" (dict "Src" .img_right_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
|
||||
{{ if .right_text }}
|
||||
<p class="{{ .right_text_class }}">{{ .right_text | markdownify }}</p>
|
||||
{{ end }}
|
||||
{{ if .right_button }}
|
||||
<a class="btn {{ .right_button_class }}">{{ .right_button | markdownify }}</a>
|
||||
{{ end }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 23 KiB |