ci(deploy): respect path prefix in styles using url()

timmywil · timmywil · commit c9383499c9e9 · 2023-12-10T17:28:11.000-05:00
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -1,3 +1,6 @@
+---
+---
+
 <!doctype html>
 <html lang="{{ metadata.language }}" class="bg-background h-full">
   <head>
@@ -7,6 +10,20 @@
     <meta name="description" content="{{ description or metadata.description }}">
     {% favicon './public/favicon.svg' %}
     <link rel="stylesheet" href="/style.css?v={% version %}"/>
+    {# Insert styles dependent on path prefix here #}
+    <style type="text/css">
+      @font-face {
+        font-family: Cairo;
+        src: url("/fonts/Cairo/Cairo-Bold.ttf") format("truetype");
+        font-weight: bold;
+      }
+      .bg-dark-tiles {
+        background-image: url("/img/dark-grey-tile.png");
+      }
+      .pagefind-ui__form:after {
+        background: url("/img/search.svg") no-repeat 2px center;
+      }
+    </style>
   </head>
   <body class="flex flex-col h-full items-center">
     <a href="#skip" class="sr-only">Skip to main content</a>
diff --git a/_includes/menu.njk b/_includes/menu.njk
@@ -1,7 +1,7 @@
 <nav class="fixed top-[34px] inset-x-0 bottom-0 bg-gray-dark text-white py-4 lg:relative lg:inset-auto lg:bg-transparent lg:p-0 lg:opacity-100 lg:transform-none peer-checked/menu:opacity-100 peer-checked/menu:transform-none opacity-0 translate-x-full transition-[opacity,transform] overflow-y-auto lg:overflow-visible">
   <ul class="lg:flex lg:flex-row lg:border-l lg:border-l-white/10 lg:border-r lg:border-r-gray-dark">
     <li>
-      <a href="https://plugins.jquery.com/" class="link-nav">Plugins</a>
+      <a href="/" class="link-nav">Plugins</a>
     </li>
     <li class="dropdown">
       <a href="https://contribute.jquery.org/" class="link-nav">Contribute</a>
diff --git a/styles/search.css b/styles/search.css
@@ -4,7 +4,6 @@
 }
 .pagefind-ui__form:after {
   content: '';
-  background: url(/img/search.svg) no-repeat 2px center;
   position: absolute;
   right: 0.25rem;
   top: 50%;
diff --git a/styles/tailwind.config.js b/styles/tailwind.config.js
@@ -1,5 +1,4 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
-const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   mode: 'jit',
@@ -8,7 +7,6 @@ module.exports = {
   theme: {
     extend: {
       backgroundImage: {
-        'dark-tiles': 'url(/img/dark-grey-tile.png)',
         'sidebar-gradient':
           'radial-gradient(ellipse at left, #f2f2f2, #ffffff 80%)',
         'sidebar-header-gradient': 'linear-gradient(to right, #efefef, #f3f3f3)'
@@ -68,16 +66,5 @@ module.exports = {
         serif: ['Cairo', ...defaultTheme.fontFamily.serif]
       }
     }
-  },
-  plugins: [
-    plugin(function ({ addBase }) {
-      addBase({
-        '@font-face': {
-          fontFamily: 'Cairo',
-          src: 'url("/fonts/Cairo/Cairo-Bold.ttf") format("truetype")',
-          fontWeight: 'bold'
-        }
-      })
-    })
-  ]
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`}`
`5`	`5`	`.pagefind-ui__form:after {`
`6`	`6`	`content: '';`
`7`		`- background: url(/img/search.svg) no-repeat 2px center;`
`8`	`7`	`position: absolute;`
`9`	`8`	`right: 0.25rem;`
`10`	`9`	`top: 50%;`