Starts some theming work. More cleanup of Venue.

THEME.md

@@ -0,0 +1,14 @@
+# Theme Customization
+
+`THEME-X` is an identifier that has been used to denote where a customization has been made.
+
+## Making changes
+
+1. Modify key variables in `:root` in `main.css`.
+2. Look for `THEME-X` comments throughout the codebase and make appropriat changes.
+
+
+## Design guidelines
+
+1. Sizing, padding, spacing, typography, and general "shape" should stay the same.
+2. Colors, fonts, photo treatment, and artistic treatments should be the focus of the theme.

eleventy.config.js

@@ -3,28 +3,28 @@ const path = require('path');
 const Image = require('@11ty/eleventy-img');
 const markdownIt = require("markdown-it");
 
-module.exports = (eleventyConfig) => {
+module.exports = (config) => {
   /*
     Setup collections
     https://www.11ty.dev/docs/collections/
   */
-  eleventyConfig.addCollection("posts", function(collectionApi) {
+  config.addCollection("posts", function(collectionApi) {
     return collectionApi.getFilteredByGlob("src/content/posts/*.md");
   });
 
-  eleventyConfig.addCollection("places", function(collectionApi) {
+  config.addCollection("places", function(collectionApi) {
     return collectionApi.getFilteredByGlob("src/content/places/*.md");
   });
 
-  eleventyConfig.addCollection("presenters", function(collectionApi) {
+  config.addCollection("presenters", function(collectionApi) {
     return collectionApi.getFilteredByGlob("src/content/presenters/*.md");
   });
 
-  eleventyConfig.addCollection("organizers", function(collectionApi) {
+  config.addCollection("organizers", function(collectionApi) {
     return collectionApi.getFilteredByGlob("src/content/organizers/*.md").filter(item => !item.data.hidden);
   });
 
-  eleventyConfig.addCollection("sponsorsByLevel", function(collectionApi) {
+  config.addCollection("sponsorsByLevel", function(collectionApi) {
     const sponsors = collectionApi.getFilteredByGlob("src/content/sponsors/*.md");
 
     const visibleSponsors = sponsors.filter(sponsor => !sponsor.data.hidden);
@@ -44,27 +44,27 @@ module.exports = (eleventyConfig) => {
     Setup passthrough file copy
     https://www.11ty.dev/docs/copy/
   */
-  eleventyConfig.addPassthroughCopy("src/assets/img/**/*");
-  eleventyConfig.addPassthroughCopy("src/assets/favicons/");
-  eleventyConfig.addPassthroughCopy({
+  config.addPassthroughCopy("src/assets/img/**/*");
+  config.addPassthroughCopy("src/assets/favicons/");
+  config.addPassthroughCopy({
     "src/content/sponsors/*.{png,jpg,jpeg,svg}": "sponsors/",
     "src/content/places/*.{png,jpg,jpeg,webp}": "venue/",
   });
-  eleventyConfig.addPassthroughCopy("CNAME");
+  config.addPassthroughCopy("CNAME");
 
   /*
     Setup watch targets
     https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
   */
-  eleventyConfig.addWatchTarget("src/assets/js/");
+  config.addWatchTarget("src/assets/js/");
 
   /*
     Shortcodes
   */
-  eleventyConfig.addLiquidShortcode("year", () => `${new Date().getFullYear()}`);
+  config.addLiquidShortcode("year", () => `${new Date().getFullYear()}`);
 
   // TODO: Accept widths or support different widths
-  eleventyConfig.addLiquidShortcode("image", async function(
+  config.addLiquidShortcode("image", async function(
     src,
     outputDir,
     urlPath,
@@ -98,7 +98,7 @@ module.exports = (eleventyConfig) => {
   /*
     Filters
   */
-  eleventyConfig.addFilter("markdown", function(content = "") {
+  config.addFilter("markdown", function(content = "") {
     let markdown = markdownIt({
       html: true,
       breaks: true,
@@ -111,7 +111,7 @@ module.exports = (eleventyConfig) => {
   /*
     Misc configuration
   */
-  eleventyConfig.setFrontMatterParsingOptions({
+  config.setFrontMatterParsingOptions({
     excerpt: true,
     excerpt_separator: "<!-- excerpt -->"
   });

src/_layouts/default.html

@@ -30,13 +30,18 @@
   <link href="/assets/favicons/apple-touch-icon.png" rel="apple-touch-icon-precomposed">
 
   <title>{{ title }}</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
   <link rel="stylesheet" href="/assets/css/main.css">
 </head>
 
 <body{% if templateClass %} class="{{ templateClass }}"{% endif %}>
   <header class="py-4">
     <nav class="container px-4 mx-auto">
-      <ul class="flex flex-col gap-2 lg:flex-row lg:gap-8 lg:items-center">
+      <ul class="flex flex-col gap-2 lg:flex-row lg:gap-8 lg:items-center lg:text-xl">
         <li aria-hidden="true" class="lg:mr-auto">
           <a
             href="/"

src/assets/css/components/_badge.css

@@ -0,0 +1,12 @@
+.badge {
+  @apply inline-block px-4 py-2 font-medium rounded-lg text-sm;
+  @apply bg-gray-100;
+
+  /* THEME-X: Text color */
+  color: var(--theme-text-color);
+}
+
+/* THEME-X: Color configuration */
+.badge-blue {
+  @apply text-blue-900 bg-blue-50;
+}

src/assets/css/components/_buttons.css

@@ -1,11 +1,10 @@
 .button {
-  @apply inline-flex items-center justify-center;
-  @apply px-4 py-2;
-  @apply font-medium rounded-md;
-  @apply text-white bg-gray-900 border border-transparent;
-}
+  @apply inline-flex items-center justify-center px-4 py-2 rounded-md;
+  @apply border-2;
+  @apply font-medium text-base;
+
+  border-color: var(--theme-text-color);
 
-.button.secondary {
-  @apply text-gray-900 bg-transparent;
-  @apply border-gray-900;
+  /* THEME-X: borders have unique rounding */
+  /*@apply border-r-4 border-b-4;*/
 }

src/assets/css/main.css

@@ -1,13 +1,27 @@
 @import "tailwindcss/base";
 
 @import "tailwindcss/components";
+@import "components/_badge.css";
 @import "components/_buttons.css";
 
 @import "tailwindcss/utilities";
 
+@layer base {
+  :root {
+    /* Typography */
+    --theme-font: sans-serif;
+    --theme-text-color: #000;
 
+    /* Colors */
+
+
+
+    /* THEME-X */
+    /*
+      --theme-font: "Poppins", sans-serif;
+    */
+  }
 
-@layer base {
   /*
     h-screen and flex-col on the body allow the footer
     to be fixed to the bottom of the viewport.
@@ -20,7 +34,13 @@
   body {
     @apply flex flex-col;
     @apply antialiased;
-    @apply text-gray-900;
+
+    font-family: var(--theme-font);
+    color: var(--theme-text-color);
+  }
+
+  figcaption {
+    @apply text-sm text-center mt-3;
   }
 
   .link {
@@ -47,7 +67,9 @@
 }
 
 @layer components {
-
+  .prose a {
+    @apply link;
+  }
 }
 
 @layer utilities {
@@ -61,7 +83,3 @@
     content: '';
   }
 }
-
-.prose a {
-  @apply link;
-}

src/sponsors.html

@@ -47,7 +47,7 @@ <h3 class="text-2xl lg:text-4xl font-heading">
                 </div>
               {% endif %}
               {% if sponsor.data.hiring_url %}
-                <a href="{{ sponsor.data.hiring_url.target }}" class="inline-block px-4 py-2 text-lg font-medium text-blue-900 rounded-lg bg-blue-50">
+                <a href="{{ sponsor.data.hiring_url.target }}" class="badge badge-blue">
                   <span class="text-xl">🌟</span> {{ sponsor.data.name }} is hiring!</a>
               {% endif %}
             </div>