complete redesig and add artcile

poxrud · Aug 26, 2023 · 80f0a8b · 80f0a8b
1 parent 22f32bf
commit 80f0a8b
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 84 deletions.
diff --git a/_includes/newsletter-subscribe.html b/_includes/newsletter-subscribe.html
@@ -1,65 +1,37 @@
-<div id="mc_embed_signup" class="space-y-10 lg:pl-16 xl:pl-24">
-  <form
-    class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
+<div id="mc_embed_signup" class="space-y-10 lg:pl-16 xl:pl-24 max-w-2xl">
+  <form class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
     action="//broadcastencoders.us7.list-manage.com/subscribe/post?u=87d0f7c65b57565cbc5050728&amp;id=8356552428"
-    method="post"
-    id="mc-embedded-subscribe-form"
-    name="mc-embedded-subscribe-form"
-    class="validate"
-    target="_blank"
-    novalidate
-  >
+    method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
+    novalidate>
     <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-        class="h-6 w-6 flex-none"
-      >
-        <path
-          d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
-          class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
-        ></path>
-        <path
-          d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
-          class="stroke-zinc-400 dark:stroke-zinc-500"
-        ></path>
+      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+        aria-hidden="true" class="h-6 w-6 flex-none">
+        <path d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
+          class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"></path>
+        <path d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6" class="stroke-zinc-400 dark:stroke-zinc-500"></path>
       </svg>
       <span class="ml-3">Stay up to date</span>
     </h2>
     <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
       Get notified when I publish something new, and unsubscribe at any time.
     </p>
     <div class="mt-6 flex">
-      <input
-        type="email"
-        value=""
-        name="EMAIL"
-        id="mce-EMAIL"
-        placeholder="Email address"
-        aria-label="Email address"
+      <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Email address" aria-label="Email address"
         required
-        class="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
-      />
+        class="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm" />
       <div style="position: absolute; left: -5000px">
-        <input
-          type="text"
-          name="b_87d0f7c65b57565cbc5050728_8356552428"
-          tabindex="-1"
-          value=""
-        />
+        <input type="text" name="b_87d0f7c65b57565cbc5050728_8356552428" tabindex="-1" value="" />
       </div>
-      <button
-        id="mc-embedded-subscribe"
-        value="Subscribe"
+      <button id="mc-embedded-subscribe" value="Subscribe"
         class="inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70 ml-4 flex-none"
-        type="submit"
-      >
+        type="submit">
         Join
       </button>
     </div>
+    {% if show_social %}
+    <div class="flex gap-2 py-3 justify-start px-4">
+      {% include icon-twitter.html %} {% include icon-github.html %}
+    </div>
+    {% endif %}
   </form>
-</div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -18,7 +18,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-  <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}"/>
+  <meta name="description"
+    content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
   <link rel="canonical" href="{{site.url}}{{page.url}}" />
   <meta name="google-site-verification" content="cXJcXt8PxPjf0yl9Y2B7AjDuc46fq6rD2MtIaDwWB8A" />
 
@@ -29,28 +30,29 @@
   {% include icons-svgs.html %}
 </head>
 
-<body class="min-h-screen flex justify-center py-10">
-  <div class="max-w-5xl w-full px-6">
-    <header class="text-center mb-8">
-        <h1 class="hero__headline text-6xl text-cool-orange">Web Development and the Cloud</h1>
-        <div class="hero__subheadline text-4xl -mt-6">blog</div>
-        <nav class="flex pointer-events-auto justify-center py-4">
-          <ul class="flex justify-center align-middle max-w-fit rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-            <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="/">Articles</a></li>
-            <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="/about">About</a></li>
-          </ul>
-        </nav>
-    </header>
-
-    {{ content }}
-
-    <footer class="text-center mt-8">
-        {% comment}
-        {% include footer.html %}
-        {% endcomment %}
-        <p class="text-gray-500">© 2023 Phil Oxrud. All rights reserved.</p>
-    </footer>
-  </div>
+<body class="p-4 lg:mx-auto flex flex-col min-h-screen max-w-5xl">
+  <header class="text-center mb-8">
+    <h1 class="hero__headline text-[min(10vw,60px)] leading-none text-cool-orange">Web Development and the Cloud</h1>
+    <div class="hero__subheadline text-4xl">blog</div>
+    <nav class="flex pointer-events-auto justify-center py-4">
+      <ul
+        class="flex justify-center align-middle max-w-fit rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+        <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"
+            href="/">Articles</a></li>
+        <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"
+            href="/about">About</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  {{ content }}
+
+  <footer class="mt-auto py-6 border-t border-zinc-100 text-center mt-8">
+    {% comment}
+    {% include footer.html %}
+    {% endcomment %}
+    <p class="text-gray-500">©2023 Phil Oxrud. All rights reserved.</p>
+  </footer>
 </body>
 
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -2,20 +2,20 @@
 layout: default
 ---
 
-<div class="main">
+<main>
   <section>
     <div class="flex gap-8">
       <img class="rounded-full object-fill h-16" src="/assets/philoxrud.jpg" class="avatar" />
       {{ site.description }}
     </div>
-    <div class="flex gap-2 py-3 justify-end">
+    <div class="flex gap-2 py-3 justify-end px-4">
       {% include icon-twitter.html %} {% include icon-github.html %}
     </div>
   </section>
 
   <div class="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
     <section>
-      <h2 class="text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      <h2 class="text-center lg:text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
         My Articles and Tutorials
       </h2>
       <ul>
@@ -33,4 +33,4 @@ <h2 class="text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:te
     </section>
     <section>{% include newsletter-subscribe.html %}</section>
   </div>
-</div>
+</main>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,13 +1,10 @@
 ---
 layout: default
 ---
-<article itemscope itemtype="http://schema.org/BlogPosting">
+<article class="border-b-2" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="border-b-2">
-    <h1 itemprop="name headline"
-      class="text-center text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200"">{{ page.title | escape }}</h1>
-    <p class=" text-center py-2">
-
+    <p class="text-center py-2">
       <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         <svg class="inline h-6 w-5 fill-blue">
           <use xlink:href="#calendar" />
@@ -19,17 +16,22 @@
       &#8226; <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="author"><span
           itemprop="name">{{ page.author }}</span></span>
       {% endif %}
-      </p>
+    </p>
   </header>
 
-  <div class="mx-auto py-8 prose md:prose-lg prose-headings:bold" itemprop="articleBody">
+  <div class="mx-auto py-8 prose md:prose-lg" itemprop="articleBody">
+    <h1 itemprop="name headline">{{ page.title | escape }}</h1>
     {{ content }}
   </div>
 </article>
 
+{% assign show_social = true %}
+<section class="py-4 mx-auto">{% include newsletter-subscribe.html %}</section>
+
 {% if page.comments %}
 <section>
-  <div id="disqus_thread"></div>
+  <div id=" disqus_thread">
+  </div>
   <script>
 
     var disqus_config = function () {

diff --git a/...07-22-creating-youtube-directive.markdown → .../2014-07-22-creating-youtube-directive.md b/...07-22-creating-youtube-directive.markdown → .../2014-07-22-creating-youtube-directive.md