leftlogic · remy · May 25, 2022 · May 25, 2022 · May 25, 2022 · May 25, 2022
diff --git a/index.html b/index.html
@@ -6,64 +6,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ffconf 2020 - UK web and JavaScript conference</title>
 
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-        text-align: center;
-        font-size: 24px;
-        font-size: 3vw;
-        color: black;
-        line-height: 2;
-      }
-
-      svg {
-        width: 40vh;
-      }
-
-      html {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-      }
-
-      body {
-        margin: 0 auto;
-      }
-
-      a {
-        background: black;
-        color: white;
-        text-decoration: none;
-        padding: 2px 4px;
-      }
-
-      a:hover {
-        background: white;
-        border: 2px solid black;
-        color: black;
-      }
-    </style>
+    <link rel="preload" href="/fonts/basiersquare-regular-webfont.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/fonts/basiersquare-medium-webfont.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="./style.css">
   </head>
 
   <body>
-    <h1>
-      <svg alt="ffconf" title="ffconf" viewBox="0 0 496 495" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
-          <path
-            d="M218.3 491.5c33.6-8 78.6-31.8 139.7-73.5 38-26 48.1-34.1 72-57.1 43.4-42 62.3-82.8 65.7-142.6 3.3-61.8-18.2-116.1-59-149.2C384.7 26.9 279.9-.3 170.4 0c0 0-51.5.8-70.9 5.7-66.2 16.5-94.4 52.5-99 126-5 80.7 33.6 216.8 82.2 291 6.2 9.3 19.4 25.1 29.2 35.2 33.4 33.4 64.7 43.2 106.4 33.6z"
-            fill="#000" />
-          <path
-            d="M160.3 283.4V229H124v-33.7h36.3v-9.6c0-33.6 24.9-57.7 59.6-57.7 19.5 0 18.2 1.3 19.1 2.6 0 9.9-4.5 31.8-4.5 31.8h-13.3c-15.5 1.6-22 8.3-22 22.8v10.1h54.4v-13.7c0-28.2 27-52.3 57.3-52.3 11 0 20.5.5 21.3 1.3.8.8.2 8-1.3 16.3l-2.6 14.8h-11.2c-15.2 0-24.3 7.7-26.4 22.7l-1.6 11H334V229h-44V337.7h-36.4V229h-54.4l-.5 53.8-.8 53.6-18.7.8-18.9.8v-54.6z"
-            fill="#FFF" />
-        </g>
-      </svg>
-    </h1>
-    <h2>The return: Friday 11 November 2022</h2>
-    <p><a href="https://ffconf.org/news">Get the latest news here</a></p>
+    <header>
+      <h1>
+        <img title="ffconf" src="./logo-2022.png">
+      </h1>
+      <h2>ffconf2022</h2>
+      <h3>Returns Friday 11 November</h3>
+    </header>
+    <main>
+      <ul>
+        <li><a href="https://ffconf.org/cfp-apply">Apply to speak</a></li>
+        <li><a class="alt-link"
+            href="mailto:[email protected]?subject=Request%20for%20sponsor%20pack%20%5B2022%5D">Request
+            sponsor pack</a></li>
+        <li><a href="https://ffconf.org/news">Get the latest news</a></li>
+      </ul>
+    </main>
     <!-- nope, no tracking here today. -->
   </body>
 
-</html>
+</html>
diff --git a/logo-2022.png b/logo-2022.png
diff --git a/style.css b/style.css
@@ -0,0 +1,145 @@
+:root {
+  --c-blue: #17eced;
+  --c-pink: #e72ee2;
+  --c-primary: #222;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-size: 24px;
+  font-size: 3vw;
+  color: var(--c-primary);
+  font-size: 36px;
+}
+
+* {
+  font-size: 24px;
+}
+
+html {
+  min-height: 100vh;
+  border-left: 8px solid var(--c-blue);
+}
+
+body {
+  margin: 0 auto;
+  max-width: 780px;
+}
+
+a {
+  background: var(--c-blue);
+  color: var(--c-primary);
+  font-weight: 600;
+  /* text-decoration: none; */
+  padding: 18px 24px;
+}
+
+a:hover {
+  background: white;
+  border: 2px solid black;
+  color: black;
+}
+
+a.alt-link {
+  background: var(--c-pink);
+  margin-left: 20px;
+}
+
+h2 {
+  line-height: 1;
+  font-size: 40px;
+}
+
+h3 {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+header {
+  display: grid;
+  grid-template-columns: 0.6fr 1.4fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    'logo title'
+    'logo subtitle';
+  align-items: center;
+  padding-top: 80px;
+  padding-top: 40px;
+}
+
+header h1 {
+  grid-area: logo; /* text-align: right; */
+  margin-right: 20px;
+  /* align-self: end; */
+}
+
+header h1 img {
+  width: 215px;
+  height: 215px;
+}
+
+header h1 img {
+  width: 125px;
+  height: 125px;
+  display: block;
+  margin: 0 auto;
+}
+
+header h2 {
+  grid-area: title; /* align-self: end; */
+  padding-left: 4px;
+}
+
+header h3 {
+  grid-area: subtitle;
+  align-self: start;
+  background: var(--c-blue); /* padding-left: 20px; */
+  display: inline-block;
+  width: fit-content; /* padding-right: 20px; */
+  padding: 8px 8px;
+}
+
+main {
+  padding-top: 40px;
+  padding-left: 8px;
+}
+
+main ul li {
+  list-style: none;
+  line-height: 3;
+  margin: 20px 0;
+}
+
+@media screen and (min-width: 440px) {
+  header h2 {
+    font-size: 11vw;
+  }
+
+  header h3 {
+    font-size: 4.32vw;
+  }
+
+  header h1 img {
+    width: 20vw;
+    height: 20vw;
+    max-width: 220px;
+    max-height: 220px;
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  header h2 {
+    font-size: 120px;
+  }
+
+  header h3 {
+    font-size: 47px;
+  }
+}