Event layout, README updates, agenda CSS component, utility CSS updates.

ceph · Feb 16, 2021 · dcbc0b2 · adamduncan · Jun 23, 2021 · Pete-Robelou
1 parent 83ef653
commit dcbc0b2
Show file tree

Hide file tree

Showing 22 changed files with 781 additions and 513 deletions.
diff --git a/README.md b/README.md
@@ -61,3 +61,98 @@ More information is available in the [Debugging](https://www.11ty.dev/docs/debug
 ## Deployment
 
 [TBC]
+
+## Authoring pages
+
+### Page data
+
+At the beginning of all pages, there's a block of data wrapped with ---. This is called frontmatter and it will follow a specific schema relative to the page you are on.
+
+The frontmatter data is written in [YAML format](https://yaml.org/) using `key: value` pairs.
+
+### Markdown and HTML
+
+Pages can contain a mix of Markdown and HTML. This means we can intersperse basic content formatting with more bespoke HTML elements in the same file.
+
+```
+# Page title
+
+A paragraph of text, Markdown style.
+
+- Markdown list items
+- Lists are great
+
+<article class="bespoke">
+  <h2>Stick to HTML</h2>
+</article>
+```
+
+The **caveat** here is to ensure that there is always a clear break between Markdown and HTML elements. Mixing and matching the two in a single content block will not work.
+
+```
+<!-- This won't work -->
+<article>
+  ## Trying for a Markdown heading (and failing)
+</article>
+
+<!-- This will -->
+<article>
+
+## All good here
+
+</article>
+```
+
+To learn more about what's possible in Markdown, see [Markdown Guide](https://www.markdownguide.org).
+
+### Adding links
+
+Linking to pages throughout the site works in the same way as linking to pages in standard HTML sites.
+
+We'll most likely be using Markdown's link syntax to link to pages. The links we choose can be relative or absolute.
+
+Let's use a _blog-posts_ page (`/blog/yyyy/blog-post`) as an example. If we want to link to another blog post page it can be done in two ways:
+
+```md
+[Relative link to blog post](../blog-post/)
+
+[Root relative link to blog post](/blog/yyyy/blog-post/)
+```
+
+If we need to link to another section/page within the site we can use either method shown above. The `../` prefix can be used to traverse further up the site tree:
+
+```md
+[Relative link to my parent](../)
+[Relative link to my grandparent](../../)
+[Relative link to a sibling of mine](../sibling-page/)
+```
+
+Note: these don't need filename `.md`/`.html` extensions.
+
+Only use absolute URLs for links out of the site:
+
+```md
+[Absolute link to Ceph.io](https://ceph.io/)
+```
+
+### Dynamic values
+
+We can interpolate these dynamic values throughout the Markdown. For example, we can save ourselves repeating the page's `title` property for our page title heading by using the `{{ }}` syntax:
+
+```md
+---
+title: Don't repeat yourself
+---
+
+# Don't repeat yourself
+```
+
+becomes:
+
+```md
+---
+title: Don't repeat yourself
+---
+
+# {{ title }}
+```
diff --git a/src/_includes/layouts/event.njk b/src/_includes/layouts/event.njk
@@ -11,10 +11,20 @@ layout: base
 
   <div class="grid lg:grid--cols-auto-72 to-lg:grid--gap-0 lg:grid--gap-16 xl:grid--gap-20">
     <div>
+      {% if links and not end | futureDate %}
+        <div class="flex flex--gap-6 mb-8 lg:mb-10">
+          {% if links.videos %}
+            <a class="button" href="{{ links.videos }}" rel="noreferrer noopener" target="_blank">Watch the videos</a>
+          {% endif %}
+          {% if links.slides %}
+            <a class="button" href="{{ links.slides }}" rel="noreferrer noopener" target="_blank">View presentation slides</a>
+          {% endif %}
+        </div>
+      {% endif %}
       {% if image %}
         <div class="to-lg:w-full-breakout">
-          <div class="aspect-ratio aspect-ratio--16x9 mb-8 lg:mb-10 xl:mb-12">
-            <img alt="" class="absolute top-0" loading="lazy" src="{{ image }}" />
+          <div class="aspect-ratio aspect-ratio--16x9 aspect-ratio--contain bg-grey-500 mb-8 lg:mb-10 xl:mb-12">
+            <img alt="" class="absolute h-full top-0" loading="lazy" src="{{ image }}" />
           </div>
         </div>
       {% endif %}
@@ -23,41 +33,45 @@ layout: base
       </div>
     </div>
     <aside>
-
-
-      <h2 class="h5">{{ 'event_details' | i18n }}</h2>
-
-      <p class="mb-4 standout">
-        <time class="block "datetime="{{ date }}">{{ date | formatDateRange(end, locale) }}</time>
-        {{ location }}
-      </p>
-      <p class="p">{{ venue }}</p>
-      <a class="a" href="{{ map }}" rel="noreferrer noopener" target="_blank">View map</a>
-      <hr class="hr">
-
-      <a class="button w-full" href="{{ register }}" rel="noreferrer noopener" target="_blank">Register</a>
-      <hr class="hr">
-
-      {# <h2 class="h5">{{ 'event_sponsors' | i18n }}</h2> #}
-      {% for item in sponsors %}
-        <h2 class="h5">{{ item.label }}</h2>
-        <ul class="grid grid--cols-2 list-none p-0">
-          {% for item in item.list %}
-            <li>
-              <a href="{{ item.website }}" target="_blank" rel="noreferrer noopener">
-                <img src="{{ item.logo }}" alt="{{ item.name }}" style="width: 50px;"/>
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endfor %}
-      <hr class="hr">
-
-
+      <hr class="hr lg:hidden my-16">
+      <div class="grid md-to-lg:grid--cols-2 to-md:grid--gap-14 lg:grid--gap-0 to-lg:mb-14">
+        <div>
+          <h2 class="h5">{{ 'event_details' | i18n }}</h2>
+          <p class="mb-4 mt-0 standout">
+            <time class="block "datetime="{{ date }}">{{ date | formatDateRange(end, locale) }}</time>
+            {{ location }}
+          </p>
+          <p class="p">{{ venue }}</p>
+          <a class="a" href="{{ map }}" rel="noreferrer noopener" target="_blank">View map</a>
+          <hr class="hidden lg:block hr">
+        </div>
+        {% if end | futureDate %}
+          <div>
+            <a class="button w-full" href="{{ register }}" rel="noreferrer noopener" target="_blank">Register</a>
+            <hr class="hidden lg:block hr">
+          </div>
+        {% endif %}
+      </div>
+      <div class="grid md-to-lg:grid--cols-2 grid--gap-0 md-to-lg:grid--gap-7 to-lg:mb-14">
+        {% for item in sponsors %}
+          <div>
+            <h2 class="h5">{{ item.label }}</h2>
+            <ul class="grid grid--cols-2 grid--gap-7 list-none mb-4 mt-0 p-0 w-3-4">
+              {% for item in item.list %}
+                <li>
+                  <a href="{{ item.website }}" target="_blank" rel="noreferrer noopener">
+                    <img src="{{ item.logo }}" alt="{{ item.name }}" />
+                    <span class="visually-hidden">{{ item.name }}</span>
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        {% endfor %}
+      </div>
+      <hr class="hidden lg:block hr">
       <h2 class="h5">{{ 'share_this_article' | i18n }}</h2>
       {% include "components/social-shares.njk" %}
-
-
     </aside>
   </div>
 </section>
diff --git a/src/css/component.agenda.css b/src/css/component.agenda.css
@@ -0,0 +1,20 @@
+/* ---------- COMPONENT agenda ---------- */
+
+.agenda {
+  font-size: var(--font-size-sm);
+  line-height: var(--size-5);
+  width: var(--size-full);
+}
+
+.agenda__intermission {
+  color: hsla(var(--color-gunmetal-hsl), 0.4);
+}
+
+.agenda td {
+  border-bottom: var(--size-px) solid var(--color-grey-500);
+  padding: var(--size-4) 0;
+}
+
+.agenda td:first-child {
+  width: var(--size-20);
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -26,6 +26,7 @@
 @import "object.wrapper.css";
 
 /* components */
+@import "component.agenda.css";
 @import "component.button.css";
 @import "component.hr.css";
 @import "component.link-cover.css";

diff --git a/src/css/object.grid.css b/src/css/object.grid.css
@@ -32,6 +32,10 @@
   --grid-gap: var(--size-0);
 }
 
+.grid--gap-7 {
+  --grid-gap: var(--size-7);
+}
+
 /* columns */
 .grid--cols-none {
   grid-template-columns: var(--size-none);
@@ -123,6 +127,10 @@
 }
 
 @media (--mq-md-to-lg) {
+  .md-to-lg\:grid--gap-7 {
+    --grid-gap: var(--size-7);
+  }
+
   .md-to-lg\:grid--cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

diff --git a/src/css/utilities.colors.css b/src/css/utilities.colors.css
@@ -1,6 +1,6 @@
 /* ---------- UTILITIES colors ---------- */
 
-/* ----------  background negative ---------- */
+/* negative */
 .bg-black {
   background-color: var(--color-black);
 }
@@ -9,45 +9,40 @@
   background-color: var(--color-white);
 }
 
-/* ----------  background navy ---------- */
-.bg-navy {
-  background-color: var(--color-navy);
+.border-black {
+  border-color: var(--color-black);
 }
 
-/* ----------  background grey ---------- */
-.bg-grey-300 {
-  background-color: var(--color-grey-300);
+.border-white {
+  border-color: var(--color-white);
 }
 
-.bg-grey-500 {
-  background-color: var(--color-grey-500);
+.color-black {
+  color: var(--color-black);
 }
 
-/* ----------  background gunmetal ---------- */
-.bg-gunmetal {
-  background-color: var(--color-gunmetal);
+.color-white {
+  color: var(--color-white);
 }
 
-/* ----------  background red ---------- */
-.bg-red-500 {
-  background-color: var(--color-red-500);
+/* navy */
+.bg-navy {
+  background-color: var(--color-navy);
 }
 
-/* ----------  background royal ---------- */
-.bg-royal {
-  background-color: var(--color-royal);
+.color-navy {
+  color: var(--color-navy);
 }
 
-/* ---------- border negative ---------- */
-.border-black {
-  border-color: var(--color-black);
+/* grey */
+.bg-grey-300 {
+  background-color: var(--color-grey-300);
 }
 
-.border-white {
-  border-color: var(--color-white);
+.bg-grey-500 {
+  background-color: var(--color-grey-500);
 }
 
-/* ---------- border grey ---------- */
 .border-grey-300 {
   border-color: var(--color-grey-300);
 }
@@ -56,30 +51,37 @@
   border-color: var(--color-grey-500);
 }
 
-/* ---------- text negative ---------- */
-.color-black {
-  color: var(--color-black);
+.color-grey-300 {
+  color: var(--color-grey-300);
 }
 
-.color-white {
-  color: var(--color-white);
+.color-grey-500 {
+  color: var(--color-grey-500);
+}
+
+/* gunmetal */
+.bg-gunmetal {
+  background-color: var(--color-gunmetal);
 }
 
 /* red */
-.color-red-500 {
-  color: var(--color-red-500);
+.bg-red-500 {
+  background-color: var(--color-red-500);
 }
 
-/* ---------- text navy ---------- */
-.color-navy {
-  color: var(--color-navy);
+.color-red-400 {
+  color: var(--color-red-400);
 }
 
-/* ---------- text grey ---------- */
-.color-grey-300 {
-  color: var(--color-grey-300);
+.color-red-500 {
+  color: var(--color-red-500);
 }
 
-.color-grey-500 {
-  color: var(--color-grey-500);
+/* royal */
+.bg-royal {
+  background-color: var(--color-royal);
+}
+
+.color-royal {
+  color: var(--color-royal);
 }
diff --git a/src/css/utilities.size.css b/src/css/utilities.size.css
@@ -14,6 +14,10 @@
   width: var(--size-36);
 }
 
+.w-3-4 {
+  width: var(--size-3-4);
+}
+
 .w-full {
   width: var(--size-full);
 }