add clickable card

ethangardner · Jan 10, 2023 · de82648 · de82648
1 parent 7bfe8dd
commit de82648
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 5 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -6,14 +6,15 @@
   <title>{{ title or metadata.title }}</title>
   <meta name="description" content="{{ description or metadata.description }}">
   <link rel="stylesheet" href="{{ '/css/global.css' | url | bust }}">
+  <script defer src="{{ '/js/main.js' | url | bust }}"></script>
   <link rel="icon" href="{{ '/img/favicon.ico' | url }}" />
 </head>
 <body {% if templateClass %} class="{{ templateClass }}"{% endif %}>
 <a href="#site" class="button--skip-link">Skip to Content</a>
 <header class="siteheader pd">
   <div class="container">
-    <a href="{{ '/' | url }}">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 585.414 150" class="siteheader__logo" width="150" height="38">
+    <a href="{{ '/' | url }}" class="siteheader-logo">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 585.414 150" class="logo-svg" width="150" height="38">
         <title>Taunton</title>
         <path
           d="M539.655 70.988c0 .744.374.744.374.744.745 0 1.116-.373 1.487-.744 7.44-6.696 11.16-8.556 17.858-8.556 10.79 0 17.11 5.952 17.11 16.37V106.7c0 7.439.371 8.186 5.21 8.93 2.976.37 3.72.741 3.72 1.86 0 1.116-.37 1.486-2.23 1.486h-1.49c-6.325-.37-8.558-.37-11.16-.37-2.604 0-4.839 0-11.16.37h-1.49c-1.86 0-2.23-.37-2.23-1.486 0-1.119.742-1.49 3.72-1.86 4.835-.744 5.21-1.491 5.21-8.93V84.38c0-10.416-3.35-14.882-11.534-14.882-8.186 0-13.02 4.466-13.02 11.164V106.7c0 7.439.373 8.186 5.205 8.93 2.979.37 3.72.741 3.72 1.86 0 1.116-.37 1.486-1.86 1.486h-1.86c-5.95-.37-8.551-.37-10.786-.37-2.604 0-4.835 0-10.786.37h-1.86c-1.488 0-2.234-.37-2.234-1.486 0-1.119 1.116-1.49 3.72-1.86 5.206-.744 5.206-1.491 5.206-8.93V83.266c0-7.07-.37-8.558-3.346-8.93h-1.86c-1.115 0-1.86-.743-1.86-1.487 0-.745.745-1.117 1.486-1.861 5.21-1.86 10.049-4.836 12.65-7.812 1.489-1.488 1.86-2.232 2.604-2.232.745 0 1.486.744 1.486 2.232v7.812zm-68.819 17.858c0 15.25 7.814 28.27 16.74 28.27 9.3 0 17.114-11.53 17.114-25.667 0-14.88-8.187-26.413-17.857-26.413-9.304 0-15.997 9.672-15.997 23.81zm-13.02 2.23c0-15.994 13.394-28.644 29.76-28.644 16.74 0 29.389 11.904 29.389 27.529 0 17.11-12.65 29.759-29.015 29.759-16.74 0-30.133-12.649-30.133-28.644zm-13.767 21.95c2.234 0 4.468-.747 7.814-2.976.747-.374 1.12-.374 1.486-.374.375 0 .747.374.747 1.115 0 .745-.372 1.488-1.86 2.98-5.206 4.087-9.672 5.949-14.88 5.949-7.813 0-13.02-5.208-13.02-13.02V71.36c0-1.862-.373-2.231-2.232-2.231h-.742l-1.493.37h-.367c-1.493 0-2.231-.37-2.231-1.487 0-.744.738-1.86 1.859-2.233l3.347-1.86c2.972-1.115 7.439-5.206 9.673-8.927l1.114-1.861c.747-.743 1.485-1.487 2.232-1.487.746 0 1.487 1.115 1.487 1.86v8.184c0 2.605.374 2.976 2.979 2.976h9.667c1.86 0 2.607.372 2.607 2.232 0 1.86-.747 2.233-2.233 2.233h-10.787c-2.232 0-2.232.37-2.232 2.975v29.761c0 8.185 2.232 11.16 7.065 11.16zM370.77 70.987c0 .744.366.744.739.744.374 0 .746-.373 1.487-.744 7.073-6.696 10.793-8.556 17.86-8.556 10.412 0 16.739 5.952 16.739 16.37V106.7c0 7.439.374 8.186 5.207 8.93 2.98.37 3.72.741 3.72 1.86 0 1.116-.374 1.486-2.234 1.486h-1.486c-5.954-.37-8.553-.37-11.16-.37-2.6 0-4.832 0-10.786.37h-1.86c-1.487 0-2.234-.37-2.234-1.486 0-1.119 1.114-1.49 3.72-1.86 4.84-.744 5.206-1.491 5.206-8.93V84.38c0-10.416-3.346-14.882-11.532-14.882-7.807 0-13.02 4.466-13.02 11.164V106.7c0 7.439.373 8.186 5.213 8.93 2.973.37 3.72.741 3.72 1.86 0 1.116-.374 1.486-1.86 1.486h-1.86c-5.955-.37-8.56-.37-10.793-.37-2.227 0-4.833 0-10.787.37h-1.86c-1.486 0-1.86-.37-1.86-1.486 0-1.119.746-1.49 3.347-1.86 5.213-.744 5.58-1.491 5.58-8.93V83.266c0-7.07-.74-8.558-3.72-8.93h-1.86c-1.114 0-1.488-.743-1.488-1.487 0-.745.374-1.117 1.488-1.861 4.84-1.86 9.672-4.836 12.279-7.812 1.488-1.488 1.86-2.232 2.601-2.232 1.118 0 1.494.744 1.494 2.232v7.812zm-54.688 42.037c7.813 0 11.907-3.35 11.907-8.93V76.569c0-7.44-.374-8.184-5.213-8.556-2.974-.744-3.718-1.116-3.718-2.233 0-1.115.372-1.486 1.858-1.486h1.86c1.119 0 1.86 0 2.606.371 4.092 0 7.44.372 10.047.372h2.973c1.86 0 2.233 0 2.233 3.349v39.06c0 5.206.374 5.58 5.208 5.58 1.113.37 1.859.746 1.859 1.487 0 .744-.374 1.118-1.86 1.488l-13.766 4.09c-1.114 0-2.227.376-2.602.376-1.118 0-1.486-.746-1.486-2.235v-4.836c0-1.116-.374-1.485-1.12-1.485-.372 0-1.114.37-1.86 1.115-5.95 4.091-12.274 6.695-17.11 6.695-10.416 0-16.369-6.695-16.369-18.229V76.568c0-7.44-.372-8.184-5.21-8.556-2.974-.745-3.719-1.116-3.719-2.233 0-1.115.374-1.486 2.234-1.486h1.486c1.49 0 2.234.371 2.978.371h2.232l4.835.372 5.953-.372c1.487 0 2.232.372 2.232 1.86l-.372 2.605v32.736c0 7.067 4.092 11.16 11.904 11.16zm-55.802-22.32c-1.115 0-3.72 1.115-6.695 2.603-5.58 2.977-7.44 5.58-7.44 10.418 0 5.206 1.86 8.184 5.58 8.184 5.953 0 10.045-4.839 10.045-12.65v-7.069c0-1.115-.372-1.486-1.49-1.486zm-4.463-25.297c-4.837 0-8.557 3.348-10.787 10.044-1.115 3.35-5.21 5.952-9.3 5.952-1.49 0-2.606-.742-2.606-2.232 0-4.464 5.954-11.16 12.276-14.136 4.095-1.86 8.93-2.604 13.765-2.604 9.3 0 14.135 2.604 14.135 8.927v33.852c0 5.207.745 7.068 3.72 7.068 1.118 0 2.235-.369 3.35-1.114.745-.747 1.115-.747 1.115-1.115h1.115c.374 0 1.118.368 1.118 1.115 0 1.114-1.118 2.606-2.977 4.09-3.72 2.976-6.696 4.096-9.3 4.096-3.72 0-6.323-1.86-8.556-6.326-1.115-1.86-1.488-2.234-1.86-2.234 0 0-.37 0-.745.374l-1.86 1.486c-5.58 4.094-11.53 7.069-15.623 7.069-5.58 0-9.3-4.09-9.3-10.044 0-3.72 1.486-7.44 3.72-9.67 3.346-3.72 6.323-5.21 15.998-9.675 2.975-1.115 4.835-2.23 5.58-2.23 2.602-1.49 2.975-1.861 2.975-4.465v-8.184c0-7.068-1.86-10.044-5.953-10.044zm-36.458 49.848c3.35.374 4.464.744 4.464 2.234 0 1.115-.744 1.486-2.604 1.486h-2.23c-.746 0-1.86 0-2.976-.37h-18.23c-1.485.37-2.604.37-3.345.37h-2.235c-1.485 0-2.23-.37-2.23-1.486 0-1.49.745-1.86 4.09-2.234 5.21-.37 6.327-1.86 6.327-8.556V49.411c0-2.603-.747-3.347-2.977-3.347h-.743-4.467c-7.44.372-13.02 4.092-17.11 11.904-1.115 1.86-1.49 2.604-2.606 2.604-.744 0-1.488-.744-1.488-1.86 0-.373 0-1.116.374-1.86l4.834-17.113c.372-1.86.746-2.232 1.86-2.232.746 0 1.116.372 1.491 1.489.37 2.975 1.86 3.72 5.205 3.72H224.2c10.042 0 13.019-.745 14.136-4.092.369-1.117.743-1.488 1.486-1.488 1.49 0 1.86.743 1.86 3.348v1.487l-.743 14.881c-.374 2.976-.743 4.092-2.234 4.092-.743 0-1.486-.745-1.86-2.976-1.486-9.3-4.834-11.904-14.88-11.904h-5.95c-.744 0-1.491.371-2.234.743-.37.744-.741 1.489-.741 3.72V106.7c0 6.696 1.114 8.186 6.32 8.556zM120.802 41.2c0 10.8-6.8 19.6-17.6 25.4 20.6-5 34.8-14.6 34.8-25.2 0-10.2-14.601-20.4-36-25 11.2 5.6 18.8 14.4 18.8 24.8zm-37.2 27.6c19.6-2.8 34.2-14.2 34.2-27.4 0-12.6-14.6-24.4-34.2-27.4v54.8zM30.6 41.4c0 13.2 14.8 24.6 34.2 27.4V14c-19.4 3-34.2 14.8-34.2 27.4zm-20.2 0c0 10.6 14.2 20.2 35 25.2C34.6 60.8 27.6 52 27.6 41.2c0-10.4 7.8-19.2 19-24.8-21.4 4.6-36.2 14.8-36.2 25zM39 142.802c0-2.2 0-3.002.2-3.002 19.6-.198 25.6-9.599 25.6-16.8V72.6C33 70.6 7.4 58.2 7.4 41c0-.6-.198-1.6-.198-2.2.198-28.6 0-31.8 0-31.8h134.202s-.202 3.2-.202 31.8V41c0 17.2-25.399 29.6-57.6 31.6l.2 50.4c0 7.201 6 16.602 25.6 16.8.2 0 .2.802.2 3.002h-70.6zM145.403 3.4H3.8v143.202h141.602V3.4zM0 0h148.403v150H0V0"/>

diff --git a/src/css/base/global.css b/src/css/base/global.css
@@ -58,7 +58,11 @@ h6 {
 }
 
 a {
-  color: var(--link);
+  color: var(--link-rest);
+}
+
+a:hover {
+  color: var(--link-hover);
 }
 
 img {

diff --git a/src/css/base/variables.css b/src/css/base/variables.css
@@ -3,5 +3,6 @@
   --font-serif: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
   --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
   --bg: #ffffff;
-  --link: #2d2dff;
+  --link-rest: #2d2dff;
+  --link-hover: #1c1cb5;
 }
diff --git a/src/css/components/postlist.css b/src/css/components/postlist.css
@@ -8,5 +8,18 @@
   border: 1px solid var(--gray-2);
   border-radius: var(--size-1);
   box-shadow: 0 0 var(--size-2) var(--gray-4);
+  cursor: pointer;
   padding: var(--size-4);
 }
+
+.postlist-item:focus-within, .postlist-item:hover {
+  border-color: var(--link-rest);
+}
+
+.postlist-link {
+  text-decoration: none;
+}
+
+.postlist-link {
+  text-decoration: none;
+}
diff --git a/src/css/layout/header.css b/src/css/layout/header.css
@@ -1,4 +1,8 @@
-.siteheader__logo {
+.siteheader-logo {
+  display: inline-block;
+}
+
+.logo-svg {
   fill: var(--black-1);
   width: 150px;
 }

diff --git a/src/js/clickable-card/clickable-card.ts b/src/js/clickable-card/clickable-card.ts
@@ -0,0 +1,12 @@
+export default () => {
+  document.addEventListener('click', (e: MouseEvent) => {
+    const { target } = e;
+    console.log(target);
+    if((target as HTMLElement).closest('.postlist-item') && !(target as HTMLElement).matches('a')) {
+      const link: HTMLElement = (target as HTMLElement).closest('.postlist-item').querySelector('.postlist-link');
+      if(link) {
+        link.click();
+      }
+    }
+  })
+}
diff --git a/src/js/main.ts b/src/js/main.ts
@@ -1 +1,3 @@
+import clickableCard from "./clickable-card/clickable-card";
 
+clickableCard();
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		import clickableCard from "./clickable-card/clickable-card";

		clickableCard();