Add task collection, layout, include and font

davepinch · May 31, 2022 · 8cc3450 · 8cc3450
1 parent 208fa84
commit 8cc3450
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 2 deletions.
diff --git a/_config.yml b/_config.yml
@@ -106,6 +106,9 @@ collections:
   recipes:
     output: true
     permalink: /:collection/:title/
+  tasks:
+    output: true
+    permalink: /:title/
   topics:
     output: true
     permalink: /:title/
@@ -203,6 +206,13 @@ defaults:
     values:
       layout: single
       author_profile: false
+  # _tasks
+  - scope:
+      path: "_tasks"
+      type: "tasks"
+    values:
+      layout: "task"
+      author_profile: false
   # _topics
   - scope:
       path: "_topics"

diff --git a/_includes/linked-card.html b/_includes/linked-card.html
@@ -24,6 +24,9 @@
         {% when "quote" %}
           {% assign quote=p.quote | default: p.title %}
           {% include quote.html quote=quote attribution=p.attribution %}
+        {% when "task" %}
+          {% assign task = p.task | default: p.title %}
+          {% include task.html task=task %}
       {% endcase %}
       </a>
     </article>

diff --git a/_includes/task.html b/_includes/task.html
@@ -0,0 +1,3 @@
+<article class="task">
+    <section class="text">{{ include.task }}</section>
+</article>
diff --git a/_layouts/poster.html b/_layouts/poster.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>{{ page.title }}</title>
-    <link rel="stylesheet" href="{{ '/assets/css/poster.css' | relative_url }}" />    
+    <link rel="stylesheet" href="{{ '/assets/css/poster.css' | relative_url }}" />
+    <link rel="stylesheet" media="screen" href="{{ '/assets/fonts/DanaLibraryHand/DanaLibraryHand.css' | relative_url }}" type="text/css"/>
   </head>
 
   <body>

diff --git a/_layouts/task.html b/_layouts/task.html
@@ -0,0 +1,14 @@
+---
+layout: poster
+---
+<section class="poster">
+    {% assign task = page.task | default: page.title %}
+    {% include task.html task=task %}
+</section>
+
+{{ content }}
+
+<p>
+    <a href="http://margoburns.com/fonts/DanaLibraryHand/">Dana Library Hand</a> font by Margo Burns.
+</p>
+
diff --git a/assets/css/poster.scss b/assets/css/poster.scss
@@ -82,6 +82,33 @@ body {
     display: none;
 }
 
+.card .task {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.card .task .text {
+    box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.3);
+    color: #333;
+    font-family: 'DanaLibraryHand-Regular', cursive;
+    font-size: 18px;
+    height: 160px;
+    padding: 20px;
+    width: 160px;
+}
+
+.card .task .text {
+    background: #eae672;
+    transform: rotate(3deg);
+    -webkit-transform: rotate(3deg);
+    -moz-transform: rotate(3deg);
+    -o-transform: rotate(3deg);
+    -ms-transform: rotate(3deg);
+}
+
 .linked-list {
     display: flex;
 }
@@ -164,4 +191,33 @@ body {
     padding-bottom: 32pt;
     padding-top: 32pt;
     text-align: center;
-} 
+} 
+
+/* Adapted from http://creative-punch.net/2014/02/create-css3-post-it-note/ */
+
+.poster .task {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.poster .task .text {
+    box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.3);
+    color: #333;
+    font-family: 'DanaLibraryHand-Regular', cursive;
+    font-size: 30px;
+    height: 300px;
+    padding: 20px;
+    width: 300px;
+}
+
+.poster .task .text {
+    background: #eae672;
+    transform: rotate(3deg);
+    -webkit-transform: rotate(3deg);
+    -moz-transform: rotate(3deg);
+    -o-transform: rotate(3deg);
+    -ms-transform: rotate(3deg);
+}
diff --git a/assets/fonts/DanaLibraryHand/DanaLibraryHand-Bold.otf b/assets/fonts/DanaLibraryHand/DanaLibraryHand-Bold.otf
diff --git a/assets/fonts/DanaLibraryHand/DanaLibraryHand-BoldItalic.otf b/assets/fonts/DanaLibraryHand/DanaLibraryHand-BoldItalic.otf
diff --git a/assets/fonts/DanaLibraryHand/DanaLibraryHand-Italic.otf b/assets/fonts/DanaLibraryHand/DanaLibraryHand-Italic.otf
diff --git a/assets/fonts/DanaLibraryHand/DanaLibraryHand-Regular.otf b/assets/fonts/DanaLibraryHand/DanaLibraryHand-Regular.otf
diff --git a/assets/fonts/DanaLibraryHand/DanaLibraryHand.css b/assets/fonts/DanaLibraryHand/DanaLibraryHand.css
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'DanaLibraryHand-Regular';
+    src: url('/assets/fonts/DanaLibraryHand/DanaLibraryHand-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}