tweek tailwind css declaraton

thephpleague · Jun 17, 2024 · 2a39b9e · 2a39b9e
1 parent bc0f0ac
commit 2a39b9e
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 21 deletions.
diff --git a/docs/5.0/chart/index.md b/docs/5.0/chart/index.md
@@ -14,6 +14,8 @@ To generate a graph you need to give to the `Dataset` constructor a list of pair
 - the value at key `0` represents the label
 - the value at key `1` is a `League\Period\Period` or a `League\Period\Sequence` object
 
+#### Example
+
 ~~~php
 <?php
 
@@ -31,7 +33,7 @@ $dataset = new Chart\Dataset([
 (new Chart\GanttChart())->stroke($dataset);
 ~~~
 
-results:
+#### Result
 
 ~~~bash
  period   [----------------------------------------------------------)
@@ -42,6 +44,8 @@ results:
 
 If you want to display a `Sequence` and some of its operations. You can append the operation result using the `Dataset::append` method.
 
+#### Example
+
 ~~~php
 <?php
 
@@ -60,7 +64,7 @@ $dataset->append('GAPS', $sequence->gaps());
 (new Chart\GanttChart())->stroke($dataset);
 ~~~
 
-results:
+#### Result
 
 ~~~bash
  A    [-------------)                                                         
@@ -91,6 +95,8 @@ The `GanttChart::stroke` methods expects a `Dataset` object as its unique argume
 
 If you wish to present the graph on another medium like a web browser or an image, you will need to implement the interface for your implementation.
 
+#### Example
+
 ~~~php
 <?php
 
@@ -104,7 +110,7 @@ $graph->stroke(new Chart\Dataset([
 ]));
 ~~~
 
-results:
+#### Result
 
 ~~~bash
  first [---------------------------)
@@ -157,6 +163,8 @@ public readonly int GanttChartConfig::leftMarginSize;            //Returns the m
 
 Here's a complex example which highlights most of the features introduces along visualizing `Period` and `Sequance` instances:
 
+#### Example
+
 ~~~php
 <?php
 
@@ -199,6 +207,8 @@ $graph->stroke($dataset);
 
 which will output in your console:
 
+#### Result
+
 ~~~bash
    XLV.  💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩🍕😊😊😊😊😊😊😊😊😊🍔
   XLIV.  💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩🍅😊😊😊😊😊🎾💩💩💩

diff --git a/docs/5.0/period/modifying.md b/docs/5.0/period/modifying.md
@@ -247,7 +247,7 @@ public Period::snapToYear(): Period
 public Period::snapToIsoYear(): Period
 ~~~
 
-### Examples
+#### Examples
 
 ~~~php
 $period = Period::fromDate('2022-01-08 09:44:38', '2022-01-08 09:45:01');

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -52,7 +52,7 @@
         <div class="fixed top-[3.5rem] h-screen shadow-xl px-4 left-0 hidden peer-checked:block lg:relative lg:top-0 lg:h-auto lg:px-0 lg:block lg:flex-none lg:shadow-none  bg-slate-100 lg:bg-transparent">
             <div class="absolute inset-y-0 right-0 w-full lg:w-[50vw]"></div>
             <nav class="sticky top-[4.5rem] w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
-                <ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-8">
+                <ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-4">
                     {% if upgrading == false %}
                     {% for section in site.data.menu.version[version] %}
                     <h3 class="font-semibold tracking-tight text-slate-900">{{ section[0] }}</h3>

diff --git a/docs/input.css b/docs/input.css
@@ -19,7 +19,7 @@
 }
 
 pre {
-    @apply p-6 overflow-auto bg-gray-100 border-0 border-b-4 border-b-gray-200 rounded-lg my-4;
+    @apply p-6 overflow-auto bg-gray-100 rounded-lg my-4;
 }
 
 .hover-button:hover {
@@ -378,7 +378,7 @@ code {
 .message-info,
 .message-notice,
 .message-warning {
-  @apply p-2 my-3 rounded-lg text-light
+  @apply p-5 my-3 rounded-lg text-light
 }
 
 .message-info a,.message-notice a,.message-warning a {
@@ -393,7 +393,11 @@ code {
 .message-info code {
     background: rgba(255,255,255,0.8);
     border-color: #5faee3;
-    color: #196090
+    color: #196090;
+    margin-left:.3rem;
+    margin-right: .3rem;
+    padding-right: .3rem;
+    padding-left: .3rem;
 }
 
 .message-notice {
@@ -404,7 +408,11 @@ code {
 .message-notice code {
     background: rgba(255,255,255,0.8);
     border-color: #f4d03f;
-    color: #927608
+    color: #927608;
+    margin-left:.3rem;
+    margin-right: .3rem;
+    padding-right: .3rem;
+    padding-left: .3rem;
 }
 
 .message-warning {
@@ -415,19 +423,27 @@ code {
 .message-warning code {
     background: rgba(255,255,255,0.8);
     border-color: #ed7669;
-    color: #a82315
+    color: #a82315;
+    margin-left:.3rem;
+    margin-right: .3rem;
+    padding-right: .3rem;
+    padding-left: .3rem;
 }
 
 .content h1 {
   @apply font-black text-6xl tracking-tighter mb-6
 }
 
 .content h2 {
-  @apply text-3xl tracking-tight text-period-base mb-4
+  @apply text-3xl tracking-tight text-period-base mt-10 mb-3
 }
 
 .content h3 {
-  @apply text-2xl tracking-tight text-gray-800 py-3
+  @apply text-2xl tracking-tight text-gray-800 mt-10 mb-3 py-3
+}
+
+.content h4 {
+  @apply text-xl tracking-tight text-period-dark mt-10 mb-3 py-3
 }
 
 .content {

diff --git a/docs/output.css b/docs/output.css
@@ -691,6 +691,10 @@ video {
   margin-top: 1.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -844,6 +848,12 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1214,10 +1224,6 @@ pre {
   margin-bottom: 1rem;
   overflow: auto;
   border-radius: 0.5rem;
-  border-width: 0px;
-  border-bottom-width: 4px;
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   padding: 1.5rem;
@@ -1607,7 +1613,7 @@ code {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
   border-radius: 0.5rem;
-  padding: 0.5rem;
+  padding: 1.25rem;
   --tw-text-opacity: 1;
   color: rgb(128 128 128 / var(--tw-text-opacity));
 }
@@ -1624,7 +1630,11 @@ code {
 .message-info code {
   background: rgba(255,255,255,0.8);
   border-color: #5faee3;
-  color: #196090
+  color: #196090;
+  margin-left:.3rem;
+  margin-right: .3rem;
+  padding-right: .3rem;
+  padding-left: .3rem;
 }
 
 .message-notice {
@@ -1635,7 +1645,11 @@ code {
 .message-notice code {
   background: rgba(255,255,255,0.8);
   border-color: #f4d03f;
-  color: #927608
+  color: #927608;
+  margin-left:.3rem;
+  margin-right: .3rem;
+  padding-right: .3rem;
+  padding-left: .3rem;
 }
 
 .message-warning {
@@ -1646,7 +1660,11 @@ code {
 .message-warning code {
   background: rgba(255,255,255,0.8);
   border-color: #ed7669;
-  color: #a82315
+  color: #a82315;
+  margin-left:.3rem;
+  margin-right: .3rem;
+  padding-right: .3rem;
+  padding-left: .3rem;
 }
 
 .content h1 {
@@ -1658,7 +1676,8 @@ code {
 }
 
 .content h2 {
-  margin-bottom: 1rem;
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
   font-size: 1.875rem;
   line-height: 2.25rem;
   letter-spacing: -0.025em;
@@ -1667,6 +1686,8 @@ code {
 }
 
 .content h3 {
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: 1.5rem;
@@ -1676,6 +1697,18 @@ code {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.content h4 {
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(178 139 20 / var(--tw-text-opacity));
+}
+
 .content {
   line-height: 2;
 }