Add a margin-top for h{2..4} tags and make <p> inline inside <li> (#165)

.github/workflows/frontend.yml

@@ -21,6 +21,16 @@ jobs:
         echo "$HOME/node_modules/.bin" >> $GITHUB_PATH
         source ./environment.ci.sh
 
+    - uses: actionsx/prettier@v2
+      with:
+        # prettier CLI arguments.
+        args: --check ./assets/css
+
+    - name: Stylelint 
+      run: |
+        cd assets
+        yarn
+        yarn stylelint css
 
     - name: Build
       run: |

Makefile

@@ -60,10 +60,12 @@ watch-server: soufflé ## Start flora-server in ghcid
 lint: ## Run the code linter (HLint)
 	@find app test src -name "*.hs" | xargs -P $(PROCS) -I {} hlint --refactor-options="-i" --refactor {}
 
-style: ## Run the code formatters (stylish-haskell, cabal-fmt, nixfmt)
+style: ## Run the code formatters (stylish-haskell, cabal-fmt, nixfmt, prettier, stylelint)
 	@find app test src -name '*.hs' -exec fourmolu -i {} +
 	@cabal-fmt -i flora.cabal
 	@nixfmt *.nix
+	@cd assets ; yarn prettier --write css
+	@cd assets ; yarn stylelint --fix css
 
 nix-shell: ## Enter the Nix shell
 	@nix-shell

assets/.prettierignore

@@ -0,0 +1,2 @@
+# Ignore artifacts:
+node_modules

assets/.prettierrc.json

@@ -0,0 +1 @@
+{}

assets/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "hue-degree-notation": "number"
+  }
+}

assets/css/app.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -7,14 +9,14 @@
 @layer components {
   .larger-container {
     @apply max-w-7xl mx-auto px-2;
-  }  
+  }
 
   .form-input {
     @apply my-1 rounded-md p-2 text-gray-900 placeholder-gray-600 border-2 border-gray-500;
   }
 
   .btn {
-    @apply rounded-md p-2 hover:bg-purple-1
+    @apply rounded-md p-2 hover:bg-purple-1;
   }
 
   a:hover h2 {
@@ -28,7 +30,7 @@ a {
 }
 
 .brand {
-  @apply border-b-4 border-gray-7 dark:border-purple-6 pb-2
+  @apply border-b-4 border-gray-7 dark:border-purple-6 pb-2;
 }
 
 #navbar-search-package-name {
@@ -54,6 +56,12 @@ div[class="bullets"] {
   }
 }
 
+.package-install-string {
+  @apply font-mono shadow-sm text-base w-full bg-transparent;
+  @apply focus:ring-indigo-500 focus:border-indigo-500 block;
+  @apply border-gray-800 dark:border-gray-800 rounded-md;
+}
+
 .package-body {
   a {
     font-weight: 500;
@@ -66,7 +74,7 @@ div[class="bullets"] {
   .package-body-section__license {
     font-weight: 500;
   }
-  
+
   .package-install-string {
     font-weight: 500;
   }
@@ -84,43 +92,38 @@ div[class="bullets"] {
   align-items: center;
 
   .pagination-footer__page {
-    padding-bottom: .5rem;
-    padding-top: .5rem;
-    padding-left: .75rem;
-    padding-right: .75rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
     border-width: 1px;
     border-collapse: collapse;
     height: 40px;
   }
 
   .pagination-footer__previous {
-    border-bottom-left-radius: .5rem;
-    border-top-left-radius:    .5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
   }
 
   .pagination-footer__next {
-    border-bottom-right-radius: .5rem;
-    border-top-right-radius:    .5rem;
+    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
   }
 }
 
-.package-install-string {
-  @apply font-mono shadow-sm text-base w-full bg-transparent;
-  @apply focus:ring-indigo-500 focus:border-indigo-500 block;
-  @apply border-gray-800 dark:border-gray-800 rounded-md;
-}
-
 .navbar-search {
-  color: hsl(0, 0%, 100%);
+  color: hsl(0 0% 100%);
   @apply rounded-full w-full mr-3 pl-3 py-1 px-1;
   @apply leading-tight focus:outline-none border border-2;
   @apply dark:bg-blue-2 dark:border-blue-2;
-  @apply text-gray-1 dark:text-gray-100
+  @apply text-gray-1 dark:text-gray-100;
 }
 
 .navbar-element:hover {
   --tw-text-opacity: 1;
-  color: hsl(254.3, 95%, 76.7%);
+
+  color: hsl(254.3 95% 76.7%);
 }
 
 .category-card__name {
@@ -130,22 +133,25 @@ div[class="bullets"] {
 .category-card__synopsis {
   @apply dark:text-gray-100 text-gray-900;
 }
+
 /* Dark mode-specific rules */
 .dark {
   .social-button:hover {
     --tw-text-opacity: 1;
-    color: hsl(254.3, 95%, 76.7%);
+
+    color: hsl(254.3 95% 76.7%);
   }
 }
 
 .divider {
   padding-bottom: 1em;
   margin-bottom: 0.66em;
-  border-bottom: 1px solid hsl(0, 0%, 80%);
+  border-bottom: 1px solid hsl(0 0% 80%);
 }
 
 .category-card {
   @apply block py-4 px-8;
+
   width: 400px;
   height: 112px;
 }
@@ -158,15 +164,23 @@ ul.package-list a {
   @apply py-3 pl-4;
 }
 
-li.package-list-item a:hover {
-  @apply bg-gray-7 dark:bg-blue-1;
+ul.version-list a {
+  @apply py-3 pl-4;
 }
 
-li.package-list-item a:hover h4.package-list-item__name {
+.package-link a:hover {
   text-decoration: underline;
 }
 
-.package-link a:hover {
+.version-link a:hover {
+  text-decoration: underline;
+}
+
+li.package-list-item a:hover {
+  @apply bg-gray-7 dark:bg-blue-1;
+}
+
+li.package-list-item a:hover h4.package-list-item__name {
   text-decoration: underline;
 }
 
@@ -190,10 +204,6 @@ li.package-list-item a:hover h4.package-list-item__name {
   @apply dark:text-purple-7;
 }
 
-ul.version-list a {
-  @apply py-3 pl-4;
-}
-
 li.version-list-item a:hover {
   @apply bg-gray-7 dark:bg-blue-1;
 }
@@ -202,10 +212,6 @@ li.version-list-item a:hover h4.version-list-item__name {
   text-decoration: underline;
 }
 
-.version-link a:hover {
-  text-decoration: underline;
-}
-
 .version-list-item {
   @apply xl:text-xl;
 }
@@ -254,7 +260,7 @@ li.dependents a.dependent:hover {
   }
 
   .category-card {
-    --tw-shadow-color: rgb(102 51 153 / 0.25);
+    --tw-shadow-color: rgb(102 51 153 / 25%);
     --tw-shadow: var(--tw-shadow-colored);
   }
 
@@ -267,13 +273,6 @@ li.dependents a.dependent:hover {
     margin-left: auto;
   }
 
-  .navbar {
-    margin-bottom: 20rem;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    margin-bottom: 4rem;
-  }
-
   .headline {
     margin-bottom: 5px;
   }

assets/css/package-readme.css

@@ -1,9 +1,9 @@
-.package-readme-column{
+.package-readme-column {
   margin: 0 2em;
   overflow: auto;
 }
 
-.package-readme{
+.package-readme {
   overflow-wrap: break-word;
   box-sizing: border-box;
 
@@ -12,6 +12,7 @@
     padding-bottom: 0.3em;
     margin-bottom: 16px;
     font-size: 2em;
+
     a {
       display: inline-block;
     }
@@ -26,43 +27,69 @@
   h2 {
     border-bottom: 1px solid #354561;
     margin-bottom: 16px;
+    margin-top: 16px;
     padding-bottom: 0.3em;
     font-size: 1.5em;
   }
 
   h3 {
     border-bottom: 1px solid #354561;
     margin-bottom: 16px;
+    margin-top: 16px;
     padding-bottom: 0.3em;
     font-size: 1.25em;
   }
 
   h4 {
     border-bottom: 1px solid #354561;
     margin-bottom: 16px;
+    margin-top: 16px;
     padding-bottom: 0.3em;
     font-size: 1em;
   }
 
-  ul {
+  p {
+    overflow-wrap: break-word;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+
+    a {
+      display: inline-block;
+    }
+  }
+
+  ol {
     margin-bottom: 16px;
+    padding-left: 1em;
 
     li {
       overflow-wrap: break-word;
-      list-style-type: disc;
-      list-style-position: inside;
+      list-style-type: decimal;
+      list-style-position: outside;
+
+      p {
+        display: inline;
+      }
     }
-    li + li {
-      margin-top: .25em;
+
+    ul {
+      margin-bottom: 16px;
+      padding-left: 1em;
+
+      li {
+        overflow-wrap: break-word;
+        list-style-type: disc;
+        list-style-position: outside;
+        margin-bottom: 10px;
+
+        p {
+          display: inline;
+        }
+      }
     }
-  }
 
-  p {
-    overflow-wrap: break-word;
-    margin-bottom: 16px;
-    box-sizing: border-box;
-    a {
-      display: inline-block;
+    li + li {
+      margin-top: 0.25em;
     }
   }
 
@@ -78,7 +105,7 @@
   }
 
   code {
-    padding: .2em .4em;
+    padding: 0.2em 0.4em;
     margin: 0;
     font-size: 85%;
     background-color: #354561;

assets/esbuild.config.js

@@ -1,22 +1,22 @@
 const esbuild = require("esbuild");
-const copyDest = "../static"
+const copyDest = "../static";
 
 const minify = false;
 const sourcemap = true;
 const watch_fs = true;
 
-if (process.env.NODE_ENV === 'prod') {
-  minify =  true;
+if (process.env.NODE_ENV === "prod") {
+  minify = true;
   sourcemap = false;
   watch_fs = false;
 }
 
 esbuild.build({
-  entryPoints: ['./js/app.js', './js/autoreload.js'],
+  entryPoints: ["./js/app.js", "./js/autoreload.js"],
   outdir: `${copyDest}/js/`,
   bundle: true,
   sourcemap: sourcemap,
   minify: minify,
   target: "es2018",
   watch: watch_fs,
-})
+});