Update Design branch

assets/css/style.css

@@ -82,33 +82,6 @@ body {
 		--headerHeight: 78px;
 	}
 }
-
-h1 {
-	margin-top: 0;
-	font-size: 4.209em;
-}
-
-h2 {
-	font-size: 3.157em;
-}
-
-h3 {
-	font-size: 2.369em;
-}
-
-h4 {
-	font-size: 1.777em;
-}
-
-h5 {
-	font-size: 1.333em;
-}
-
-small,
-.text_small {
-	font-size: 0.75em;
-}
-
 @variants hover {
 	.text-gradient {
 		/* standard gradient background */

config.yaml

@@ -0,0 +1 @@
+title: The New Dynamic

content/en/article/sonnet-media.md

@@ -0,0 +1,13 @@
+---
+title: Welcome to The New Dynamic
+description: This is the year we threw out the rule book
+date: 2019-12-31T14:37:32.812Z
+---
+
+We started Sonnet Media in 2001 fresh from our enthusiasm with blogging and the rise of a better web. Sonnet Media's name—besides reflecting our enthusiasm for arts & culture—recognized the idea of "Code is Poetry" of a sort, or more specifically that both code and poetry have structure yet both are more beautiful when one breaks the rules a bit. 
+
+Fast forward to 2013. This is the year we threw out the rule book. We fundamentally changed the way we build websites. See our post on [Bulletproof Technology](/article/bulletproof-technology/) for more on the details, but in short, we started building sites that are fun for us to build and radically improve the performance, security and cost of our sites. 
+
+We were early adopting these methodologies, but by 2019 it was clear. We had to change our name to reflect how incredibly better this was than the old legacy way (that most of the web still uses). 
+
+So welcome to this new dynamic. Welcome to The New Dynamic. Same people, same pride and thoughtfulness in everything we build. New name.

hugo_stats.json

@@ -8,7 +8,6 @@
       "br",
       "button",
       "code",
-      "defs",
       "del",
       "desc",
       "div",
@@ -39,7 +38,6 @@
       "script",
       "small",
       "span",
-      "stop",
       "strong",
       "style",
       "svg",
@@ -61,7 +59,6 @@
       "active",
       "altheading",
       "appearance-none",
-      "bg-barossa-500",
       "bg-black",
       "bg-blue-500",
       "bg-blue-900",
@@ -126,6 +123,7 @@
       "border-gray-200",
       "border-gray-300",
       "border-gray-700",
+      "border-gray-800",
       "border-grey",
       "border-r",
       "border-t",
@@ -193,7 +191,6 @@
       "hover:bg-gradient",
       "hover:bg-gradient-horizontal",
       "hover:bg-gray-100",
-      "hover:bg-gray-400",
       "hover:bg-indigo-400",
       "hover:bg-indigo-500",
       "hover:bg-primary-400",
@@ -203,6 +200,7 @@
       "hover:text-gray-900",
       "hover:text-primary-color",
       "hover:text-tertiary-400",
+      "hover:text-text-gray-300",
       "hover:text-theme-gradient",
       "hover:text-white",
       "hover:underline",
@@ -253,6 +251,7 @@
       "mb-4",
       "mb-6",
       "mb-8",
+      "md:bg-transparent",
       "md:flex",
       "md:flex-shrink-0",
       "md:grid",
@@ -279,7 +278,6 @@
       "ml-auto",
       "mobile-nav",
       "mr-0",
-      "mr-2",
       "mr-3",
       "mr-4",
       "mt-1",
@@ -290,11 +288,11 @@
       "mt-5",
       "mt-8",
       "mx-auto",
+      "my-12",
       "my-16",
       "my-2",
       "my-20",
       "my-4",
-      "my-6",
       "my-8",
       "nav",
       "navbar-nav",
@@ -381,6 +379,8 @@
       "sm:pl-3",
       "sm:pt-3",
       "sm:px-6",
+      "sm:py-2",
+      "sm:py-4",
       "sm:static",
       "sm:text-3xl",
       "sm:text-4xl",
@@ -400,6 +400,7 @@
       "text-gray-400",
       "text-gray-500",
       "text-gray-600",
+      "text-gray-700",
       "text-gray-800",
       "text-gray-900",
       "text-grey-darker",
@@ -446,7 +447,6 @@
       "xl:grid",
       "xl:grid-cols-3",
       "xl:mt-0",
-      "xl:w-8",
       "z-0",
       "z-10",
       "z-30",

layouts/article/list.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
   <div class="container">
     {{ partial "page-header.html" . }}
-    <div class="mb-16">
+    {{/* 
+        TODO: wire up categories
+      <div class="mb-16">
       <div class="inline-flex">
         <button class="px-4 py-2 mr-2 text-lg text-gray-800 bg-gray-300 rounded hover:bg-gray-400">
           For Developers
@@ -10,10 +12,10 @@
           For Site Owners
         </button>
       </div>
-    </div>
+    </div> */}}
 
     {{ range .Pages }}
-      <div class="mb-16">
+      <div class="mt-16 mb-16">
         {{ partial "article-header.html" . }}
       </div>
     {{ end }}

layouts/article/single.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
 <article>  
-  <div id="pageheading" class="w-full py-8 bg-tertiary-500">
+  <div id="pageheading" class="w-full py-8 bg-primary-500">
     <div class="container max-w-6xl pb-8 mt-12 text-gray-100 duration-200 ease-in transtion hover:text-tertiary-400">
       {{ partial "article-header.html" . }}
     </div>  
   </div>
   {{/* The sticky class below must follow directly after the pageheadding div above for its interaction to work "js/intersection-observer.js" */}}
-  <div class="sticky top-0 w-full text-white transition duration-200 ease-in border-t opacity-0 headings bg-tertiary-500">
+  <div class="sticky top-0 w-full text-white transition duration-200 ease-in border-t opacity-0 headings bg-primary-500">
     <div class="container max-w-3xl p-4">
       {{ .Section | title }} {{ with .Params.categories}}{{ index . 0 }}{{ end}}
       {{ with .Title }} :<span class="inline-block ml-4 altheading">{{ . }}</span>{{ end }}

layouts/partials/article-header.html

@@ -1,6 +1,6 @@
 <div class="grid-cols-2 gap-8 sm:grid">
 	<div class="pattern-dots-md">
-		<div class="flex flex-col justify-center h-64 mb-2 font-serif text-2xl font-light leading-tight text-white transform -translate-x-2 -translate-y-5 rounded lg:-translate-x-5 bg-barossa-500">
+		<div class="flex flex-col justify-center h-64 mb-2 font-serif text-2xl font-light leading-tight text-black transform -translate-x-2 -translate-y-5 bg-gray-100 rounded lg:-translate-x-5">
 			<div class="py-8 pl-12 pr-8 text-3xl">
 				<span class="inline-block pr-1 -ml-6 font-serif text-5xl">“</span>{{ .Description | default .Summary | truncate 100 }}
 			</div>

layouts/partials/header.html

@@ -2,33 +2,33 @@
 <header class="z-50 flex items-center w-full lg:py-4">
   <div class="flex flex-wrap items-center justify-between w-full max-w-screen-xl mx-auto lg:flex-no-wrap">
 
-    <a href="{{ site.Home.RelPermalink }}" class="flex items-center py-4 pl-4 lg:order-1">
-      <div class="w-6 xl:w-8">{{ partial "svg/logo-compressed.svg" . }}</div>
-      <div class="ml-3 text-2xl text-black">
+    <a href="{{ site.Home.RelPermalink }}" class="flex items-center py-8 pl-4 sm:py-4 lg:order-1">
+      <div class="w-12">{{ partial "svg/logo-solid.svg" . }}</div>
+      <div class="ml-3 text-xl text-black">
         The New Dynamic
       </div>
     </a>
 
     {{ partial "lang-switch" . }}
 
     {{ $menu_items := partialCached "func/GetMainMenuItems" . "func/GetMainMenuItems" }}
-    <nav x-data="{ nav_slide: false }" class="relative z-10 flex flex-wrap items-center flex-shrink-0 w-full text-lg lowercase bg-gray-200 sm:static sm:flex-no-wrap lg:order-2 lg:w-auto lg:bg-transparent md:text-base">
+    <nav x-data="{ nav_slide: false }" class="relative z-10 flex flex-wrap items-center flex-shrink-0 w-full py-2 text-lg text-gray-700 lowercase bg-gray-200 sm:bg-transparent sm:static sm:flex-no-wrap lg:order-2 lg:w-auto lg:bg-transparent md:text-base">
       <div class="flex items-center justify-between flex-shrink-0 w-full sm:hidden sm:w-auto sm:flex-shrink">
         {{/* Only Menu Items set as critical are displayed here */}}
         {{ range where $menu_items "critical" "eq" true }}
-          <a class="block px-4 py-2 hover:text-theme-gradient" href="{{ .URL }}">{{ .Name }}</a>
+          <a class="block px-4 py-2 hover:text-text-gray-300" href="{{ .URL }}">{{ .Name }}</a>
         {{ end }}
         <div @click="nav_slide = !nav_slide" class="flex items-center px-4 py-2 ml-auto mr-0 sm:hidden"> 
           <span class="inline-block pb-1" x-text="nav_slide ? 'close' : 'more'"></span> <span class="ml-4">{{ partial "svg/chevron-down.svg" $ }}</span>
         </div>
       </div>
       {{/* Here we iterate on the full main menu */}}
-      <div x-bind:class="{ 'active': nav_slide }" class="flex flex-wrap items-center flex-shrink-0 block w-full bg-gray-200 border-t border-b border-gray-200 mobile-nav sm:bg-transparent sm:border-0 sm:w-auto sm:flex sm:flex-shrink">
+      <div x-bind:class="{ 'active': nav_slide }" class="flex flex-wrap items-center flex-shrink-0 block w-full text-gray-700 bg-gray-300 border-t border-b border-gray-800 md:bg-transparent mobile-nav sm:bg-transparent sm:border-0 sm:w-auto sm:flex sm:flex-shrink">
         {{ range $menu_items }}
           {{/* Making sure the critical call ones displayed above on mobile, are hidden in this section on mobile. */}}
-          <a class="{{ if .critical }}hidden sm:block{{ else }}block{{ end }} px-4 py-6 hover:text-theme-gradient" href="{{ .URL }}">{{ .Name }}</a>
+          <a class="{{ if .critical }}hidden sm:block{{ else }}block{{ end }} px-4 py-6 sm:py-2 hover:text-theme-gradient" href="{{ .URL }}">{{ .Name }}</a>
         {{ end }}
-        <div class="w-full px-4 pb-4 my-6 sm:hidden">
+        <div class="w-full px-4 pb-4 my-12 sm:hidden">
           <div class="relative mt-1 rounded-md shadow-sm">
             {{ partial "search/form-input.html" . }} 
           </div>

netlify.toml

@@ -2,6 +2,10 @@
 publish = "public"
 command = "hugo --minify -e netlify"
 
+[dev]
+  framework = "hugo" # or "#static" to force a static server
+  command = "npm run start"
+
 [context]
 
 [context.production]

package.json

@@ -11,7 +11,7 @@
 		"hugo": "HUGO_ENV=development bin/hugo* server -D --gc --navigateToChanged --noHTTPCache",
 		"hugo-cms": "HUGO_ENV=development bin/hugo* server -D --gc --noHTTPCache",
 		"hugo-prod": "HUGO_ENV=production bin/hugo* --gc --minify",
-		"netlify-dev": "netlify dev -l -c 'npm run hugo'",
+		"netlify-dev": "netlify dev -l",
 		"webpack": "webpack --mode=development --progress --colors --watch",
 		"webpack-prod": "webpack --mode=production",
 		"clean": "rm -rf public/ static/dist resources",