Fix CSS loading issue

Author: lucperkins

.editorconfig

@@ -9,4 +9,4 @@ indent_style = tab
 
 [*.{html,js,json,md,sass,yaml}]
 indent_style = space
-indent_size = 2
+indent_size = 2

Makefile

@@ -19,4 +19,4 @@ preview-build:
 		--minify
 
 open:
-	open https://cncf-hugo-starter.netlify.com
+	open https://opencontainers.netlify.app

assets/css/dev/postcss.config.js

@@ -1,11 +1,11 @@
 const themeDir = __dirname + '/../../../';
 
-module.exports = {    
-    plugins: [        
-        require('postcss-import')({
-            path: [themeDir]
-        }), 
-        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
-        require('autoprefixer'),
-    ]
+module.exports = {
+  plugins: [
+    require('postcss-import')({
+      path: [themeDir]
+    }),
+    require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
+    require('autoprefixer'),
+  ]
 }

assets/css/postcss.config.js

@@ -1,28 +1,28 @@
 const themeDir = __dirname + '/../../';
 
-module.exports = {    
-    plugins: [        
-        require('postcss-import')({
-            path: [themeDir]
-            }), 
-        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
-        // Configuration of purgecss for Tailwindcss
-        // see https://tailwindcss.com/docs/controlling-file-size/#setting-up-purgecss
-        require('@fullhuman/postcss-purgecss')({
-            // Specify the paths to all of the template files in your project 
-            content: [
-                themeDir + 'layouts/**/*.html',
-                themeDir + 'exampleSite/content/**/*.html',
-                'layouts/**/*.html',
-                'content/**/*.html',
-            ],
-            // Include any special characters you're using in this regular expression
-            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], 
-            fontFace: true
-        }),    
-        require('autoprefixer')({
-            grid: true
-        }),
-        require('postcss-reporter'),
-    ]
+module.exports = {
+  plugins: [
+    require('postcss-import')({
+      path: [themeDir]
+      }),
+    require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
+    // Configuration of purgecss for Tailwindcss
+    // see https://tailwindcss.com/docs/controlling-file-size/#setting-up-purgecss
+    require('@fullhuman/postcss-purgecss')({
+      // Specify the paths to all of the template files in your project 
+      content: [
+        themeDir + 'layouts/**/*.html',
+        themeDir + 'exampleSite/content/**/*.html',
+        'layouts/**/*.html',
+        'content/**/*.html',
+      ],
+      // Include any special characters you're using in this regular expression
+      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], 
+      fontFace: true
+    }),
+    require('autoprefixer')({
+      grid: true
+    }),
+    require('postcss-reporter'),
+  ]
 }

layouts/_default/baseof.html

@@ -7,9 +7,9 @@
         {{- block "main" . }}{{- end }}
         </main>
         {{- partial "footer.html" . -}}
-      
+
         {{ $app := resources.Get "js/app.js" | fingerprint }}
-        <script src="{{ $app.RelPermalink }}" integrity="{{ $app.Data.Integrity }}"></script>     
+        <script src="{{ $app.RelPermalink }}" integrity="{{ $app.Data.Integrity }}"></script>
         <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
     </body>
 </html>

layouts/partials/head.html

@@ -1,23 +1,29 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>{{ block "title" . }}
-{{- .Title }} - {{ .Site.Title -}}
-{{ end }}</title>
-{{ if .Description }}
-<meta name="description" content="{{ .Description }}" />
+<title>
+  {{ block "title" . }}
+  {{- .Title }} - {{ .Site.Title -}}
+  {{ end }}
+</title>
+
+{{ with .Description }}
+<meta name="description" content="{{ . }}" />
 {{ end }}
-{{ if .Keywords }}
-<meta name="keywords" content="{{ delimit .Keywords "," }}" />
+{{ with .Keywords }}
+<meta name="keywords" content="{{ delimit . "," }}" />
 {{ end }}
-{{ if .Params.Author }}
-<meta name="author" content="{{ .Params.Author}}" />
+{{ with .Params.Author }}
+<meta name="author" content="{{ . }}" />
 {{ end }}
-{{ hugo.Generator }}
+
+{{ $styles := resources.Get "css/styles.css" }}
 
 {{ if .Site.IsServer }}
-    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}">
+  {{ $style := $styles | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 {{ else }}
-    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
+  {{ $style := $styles | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
 {{ end }}
+
+{{ hugo.Generator }}

layouts/partials/header.html

@@ -6,7 +6,7 @@
       </a>
     </div>
   </div>
-    
+
     <nav class="flex flex-wrap items-center justify-between bg-white xs:flex-col sm:flex-col md:flex-col lg:flex-row">
       <div class="flex-none p-1 md:items-center sm:w-auto md:w-auto">
         <a href="{{ .Site.Home.Permalink }}" class="flex items-center">