Improve documentation layout

Author: nyamsprod

docs/2.0/index.md

@@ -16,13 +16,3 @@ Use composer:
 ```
 composer require bakame/http-structured-fields:^2.0
 ```
-
-## Foreword
-
-<p class="message-warning">
-While this package parses and serializes HTTP field value, it does not validate its content
-against any conformance rule out of the box. You are still required to perform such a
-compliance check against the constraints of the corresponding field. While Content
-validation is still possible and highly encouraged when using this library. Because
-of the wide variety of HTTP fields it can not be made mandatory.
-</p>

docs/2.0/validation.md

@@ -6,17 +6,34 @@ order: 6
 
 # Validation
 
+## Foreword
+
+<p class="message-warning">
+While this package parses and serializes HTTP field value, it does not validate its content
+against any conformance rule out of the box. You are still required to perform such a
+compliance check against the constraints of the corresponding field. While Content
+validation is still possible and highly encouraged when using this library. Because
+of the wide variety of HTTP fields it can not be made mandatory.
+</p>
+
+## Validating a field
+`
 When it comes to make sure about the incoming data the package provides a simple approach around validation,
 To learn and understand the package validation mechanism we will look at a real world example and expand on it.
 
 So what we are going to do is validating the following putative HTTP field `temperature`.
 
-> The field is defined as a List. meaning it can contain multiple temperature
-> definitions as items. Each temperature entry MUST contain a temperature value express in Celsius.
-> The temperature has the following required parameters `date`, `longitude` and `latitude`
-> and an optional `location` parameter which is a human-readable name of the location where
-> the temperature was read. The `location` can be a `string` or a `displaystring`. The latitude
-> and longitude are express as `decimal` values. You will find below an example of such HTTP field.
+<dl>
+<dt><dfn>temperature</dfn></dt>
+<dt>
+The field is defined as a List. meaning it can contain multiple temperature
+definitions as items. Each temperature entry MUST contain a temperature value express in Celsius.
+The temperature has the following required parameters `date`, `longitude` and `latitude`
+and an optional `location` parameter which is a human-readable name of the location where
+the temperature was read. The `location` can be a `string` or a `displaystring`. The latitude
+and longitude are express as `decimal` values. You will find below an example of such HTTP field.
+</dt>
+</dl>
 
 ```bash
 temperature: 18.3;location=%"lagos";date=@1731573026;longitude=6.418;latitude=3.389, 12.8;date=@1730894400;longitude=6.418;latitude=3.389

docs/_data/manifest.yml

@@ -1,4 +1,4 @@
 {
-  "docs.css": "/styles.0004.css",
+  "docs.css": "/styles.0005.css",
   "docs.js": "/scripts.0002.js"
 }

docs/_layouts/default.html

@@ -29,7 +29,7 @@
     <header class="flex items-center sm:justify-center pl-6 pr-6 pb-6 max-w-7xl mx-auto pb-32">
         <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
             <a class="flex items-center gap-2 sm:gap-3" href="{{ site.baseurl }}/">
-                <img src="{{ site.baseurl }}/assets/img/httpsf-logo.svg" alt="Logo" class="w-[80px] sm:w-[60px] h-[40px] sm:h-[50px]"/>
+                <img src="{{ site.baseurl }}/assets/img/httpsf-logo.svg" alt="Logo" class="w-[86px] sm:w-[70px] h-[40px] sm:h-[50px]"/>
                 <div class="font-black">HTTP Structured Fields</div>
             </a>
         </div>
@@ -88,7 +88,7 @@ <h3 class="font-semibold tracking-tight text-slate-900">Older versions</h3>
                 {{ content }}
             </article>
             <div class="flex justify-center items-center">
-                <img src="{{ site.baseurl }}/assets/img/httpsf.svg" alt="Logo" class="w-[1800px] sm:w-[170px] h-[50px] sm:h-[60px]"/>
+                <img src="{{ site.baseurl }}/assets/img/httpsf.svg" alt="Logo" />
             </div>
         </div>
     </main>

docs/_layouts/homepage.html

@@ -21,7 +21,7 @@
     <header class="flex items-center sm:justify-center">
         <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
             <div class="flex items-center gap-2 sm:gap-3">
-                <img src="{{ site.baseurl }}/assets/img/httpsf-logo.svg" alt="Logo" class="w-[80px] sm:w-[60px] h-[40px] sm:h-[50px]"/>
+                <img src="{{ site.baseurl }}/assets/img/httpsf-logo.svg" alt="Logo" class="w-[86px] sm:w-[70px] h-[40px] sm:h-[50px]"/>
             </div>
             <div class="flex items-center gap-0 md:gap-0">
                 <a href="{{ site.data.project.repository_url }}" class="px-2 py-2 sm:px-6 sm:py-3 font-black text-md text-black-50 hover:text-csv-dark hover:underlines whitespace-nowrap">SOURCE CODE</a>

docs/input.css

@@ -380,6 +380,18 @@ code {
     color: #099
 }
 
+dl {
+    @apply p-5 my-3 rounded-r-lg text-light border-l-green-500 border-l-4
+}
+
+dl dfn {
+  @apply font-bold text-black not-italic
+}
+
+dl dt {
+    @apply not-italic
+}
+
 .message-info,
 .message-notice,
 .message-warning {