feat: single event layout

kcmagicpixel · May 13, 2023 · 8252849 · 8252849
1 parent 9d7ff85
commit 8252849
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 43 deletions.
diff --git a/.github/workflows/hugo.yml b/.github/workflows/hugo.yml
@@ -46,8 +46,6 @@ jobs:
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v3
-#       - name: Install Node.js dependencies
-#         run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules

diff --git a/assets/styles/theme/elements.scss b/assets/styles/theme/elements.scss
@@ -56,6 +56,9 @@ article {
   }
 }
 
-.banner {
+img.banner {
   max-height: 350px;
+  width: 100%;
+  overflow: hidden;
+  object-fit: cover;
 }
diff --git a/assets/styles/theme/events.scss b/assets/styles/theme/events.scss
@@ -85,31 +85,100 @@ main ul.events {
   }
 }
 
-main.event-single {
-  .banner, .info-title {
+main#event-single {
+  .banner {
     border-bottom: solid 1px $color-tertiary;
   }
 
-  .info-title {
-    display: flex;
+  #event-content {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: auto auto auto auto;
+
+    @media screen and (min-width: 1025px) {
+      grid-template-rows: auto auto;
+    }  
+
+    #event-title-area {
+      display: flex;
+      grid-row: 1 / 1;
+      grid-column: 1 / 11;
+      border-bottom: solid 1px $color-tertiary;
+      min-height: 6rem;
+
+      @media screen and (min-width: 1025px) {
+        grid-column: 1 / 7;
+      }  
+
+      .block-date {
+        border-left: solid 1px $color-tertiary;
+        margin-left: 1rem;
+      }
+
+      #event-title {
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+      }
+
+    }
 
-    .block-date {
-      border-left: solid 1px $color-tertiary;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      margin-left: 1rem;
+    #event-quick-info {
+      grid-row: 2 / 2;
+      grid-column: 1 / 11;
+      display: grid;
+      // grid-template-rows: 1fr auto auto;
+
+      @media screen and (min-width: 1025px) {
+        grid-row: 1 / 1;
+        grid-column: 7 / 11;
+        padding-left: 0;
+      }
     }
 
-    .title {
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      padding: 1rem;
+    #event-description {
+      grid-column: 1 / 11;
+      border-bottom: solid 1px $color-tertiary;
+      margin-left: 1px;
+
+      @media screen and (min-width: 1025px) {
+        grid-column: 1 / 7;
+      }
     }
 
-    .link {
-      border: solid 1px $color-tertiary;
-      border-bottom: none;
+    #event-details {
+      grid-column: 1 / 11;
+
+       @media screen and (min-width: 1025px) {
+        grid-column: 7 / 11;
+      } 
+
+    }
+
+    ul.info-list {
+      margin: 0;
+      padding: 0;
+      padding-left: 1rem;
+      list-style: none;
+      border-bottom: solid 1px $color-tertiary;
+
+      @media screen and (min-width: 1025px) {
+        padding-left: 0;
+      }
+
+      li {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0.5rem;
+        border-bottom: solid 1px $color-tertiary;
+        border-left: solid 1px $color-tertiary;
+
+        &:last-of-type {
+          border-bottom: none;
+        }
+      }
     }
   }
 }
diff --git a/content/events/2023-05-15-magic-pixel-weekly.md b/content/events/2023-05-15-magic-pixel-weekly.md
@@ -9,4 +9,4 @@ start_date: 2023-05-18T19:00:00-0500
 end_date: 2023-05-19T00:00:00-0500
 ---
 
-Description of event 1
+Description of event 1
diff --git a/content/events/2023-05-22-magic-pixel-weekly.md b/content/events/2023-05-22-magic-pixel-weekly.md
@@ -1,10 +1,12 @@
 ---
 title: Magic Pixel Weekly 2
 ref_org: /organizations/magic-pixel.md
+ref_icon: https://images.start.gg/images/tournament/549640/image-0575d4021ce125beefcfaf7b0998087b.png?ehk=%2F0dtM6T0PFQogR%2Fzwp2T8Fx5oRHlMWJ5q%2BdfHwn4068%3D&ehkOptimized=FhJt9E2lHRd5rfW1cgn9NrWZHgaqxrsIojx8WOIGlXI%3D
+ref_banner: https://images.start.gg/images/tournament/549640/image-f8cedeef17b8a77b39d19d470dd7a936.png?ehk=HyMONy3HK3j7N9oT2FxE7LJeQYx5a4c1783CE8i3CwM%3D&ehkOptimized=ZvqVgskgkvGmskZanCK55gMJCSG91rZhuonlgdI1xXs%3D
 url_startgg: https://start.gg/tournament
 address: 1234 Local St, Kansas City, MO 64111
 start_date: 2023-05-22T19:00:00-0500 
 end_date: 2023-05-23T00:00:00-0500
 ---
 
-Description of event 2
+Description of event 2
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -10,9 +10,9 @@
     </title>
     <link rel="stylesheet" href="/styles/reset.css">
     {{ $globalStyle := resources.Get "styles/global.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
-    <link rel="stylesheet" href="{{ $globalStyle.RelPermalink }}">
+    <link rel="stylesheet" href="{{ $globalStyle.Permalink }}">
     {{ with .OutputFormats.Get "rss" -}}
-      {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
+      {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
   </head>
   <body>

diff --git a/layouts/events/single.html b/layouts/events/single.html
@@ -1,20 +1,26 @@
 {{ define "main" }}
-  <main aria-role="main" class="event-single">
-    {{ with resources.Get .Params.ref_banner }}
-    <div class="banner">
-      <img src="{{ .RelPermalink }}" alt="{{ .Title }} banner" />
-    </div>
+  <main aria-role="main" id="event-single">
+    {{ with .Params.ref_banner }}
+      {{ with resources.Get . | default (resources.GetRemote .) }}
+      <img class="banner" src="{{ .Permalink }}" alt="{{ $.Page.Title }} banner" />
+      {{ end }}
     {{ end }}
-    <div class="info-title">
-      {{ partial "block-date.html" .Params.start_date }}
-      <div class="title"><h1>{{ .Title }}</h1></div>
-      <div class="link">{{.Content}}</div>
-      <div class="link">{{.Content}}</div>
-      <div class="link">{{.Content}}</div>
-      <div class="link">{{.Content}}</div>
+    <div id="event-content">
+      <div id="event-title-area">
+        {{ partial "block-date.html" .Params.start_date }}
+        <div id="event-title"><h1>{{ .Title }}</h1></div>
+      </div>
+      <ul id="event-quick-info" class="info-list">
+        <li>quick-info</li>
+        {{/*  <li>quick-info</li>  */}}
+        <li>quick-info</li>
+      </ul>
+      <article id="event-description">
+        {{ .Content }}
+      </article>
+      <ul id="event-details" class="info-list">
+        <li>details</li>
+      </div>
     </div>
-    <article>
-      {{ .Content }}
-    </article>
   </main>
 {{ end }}
diff --git a/layouts/partials/events-li.html b/layouts/partials/events-li.html
@@ -8,9 +8,11 @@
       {{ with (.Params.url_startgg) }}<a href="{{ . }}" class="start-gg"><img src="/images/start-gg-icon.svg" alt="start.gg icon" width="16px" /></a>{{ end }}
     </footer>
   </div>
-  {{ with resources.Get .Params.ref_icon }}
-  <div class="icon">
-    <img src="{{ .RelPermalink }}" alt="{{ .Title }} icon" />
-  </div>
+  {{ with .Params.ref_icon }}
+    {{ with resources.Get . | default (resources.GetRemote .) }}
+    <div class="icon">
+      <img src="{{ .Permalink }}" alt="{{ $.Page.Title }} icon" />
+    </div>
+    {{ end }}
   {{ end }}
 </li>