Update styling

thephpleague · Jun 22, 2024 · a2fd638 · a2fd638
1 parent b610a5b
commit a2fd638
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 41 deletions.
diff --git a/docs/_data/manifest.yml b/docs/_data/manifest.yml
@@ -1,4 +1,4 @@
 {
-  "docs.css": "/styles.0003.css",
+  "docs.css": "/styles.0004.css",
   "docs.js": "/scripts.0002.js"
 }
diff --git a/docs/_layouts/index.html b/docs/_layouts/index.html
@@ -29,12 +29,9 @@
 
                 <div class="font-black">PERIOD</div>
             </div>
-            <div class="flex items-center gap-2 md:gap-6">
-                <a href="https://github.com/thephpleague/period" target="_blank" class="hidden sm:flex text-white transition-all hover-button rounded-full">
-                    <img src="/assets/img/github-logo.svg" alt="Github" class=""/>
-                </a>
-                <a href="{{ site.data.project.releases.current.documentation_link}}" class="px-2 py-2 sm:px-6 sm:py-3 rounded-full text-xs md:text-lg font-bold text-white bg-period-base transition-all whitespace-nowrap hover-button">documentation</a>
-                <a href="https://github.com/sponsors/nyamsprod" target="_blank" class="px-2 py-2 sm:px-6 sm:py-3 rounded-full text-xs md:text-lg font-bold text-white bg-period-dark whitespace-nowrap hover-button">Become a sponsor</a>
+            <div class="flex items-center gap-0 md:gap-0">
+                <a href="https://github.com/thephpleague/period" class="px-2 py-2 sm:px-6 sm:py-3 font-black text-md text-black-50 hover:text-period-dark hover:underline whitespace-nowrap">SOURCE CODE</a>
+                <a href="/5.0/" class="px-2 py-2 sm:px-6 sm:py-3 text-md text-black bg-period-light hover:bg-period-base transition-all whitespace-nowrap rounded">Documentation</a>
             </div>
         </div>
     </header>
@@ -46,8 +43,8 @@ <h1 class="font-black text-8xl md:text-9xl tracking-tighter">PERIOD</h1>
             <h2 class="font-medium text-3xl text-light">Time range API for PHP</h2>
 
             <div class="flex">
-                <span class="mt-6 rounded-xl bg-white p-6 py-9 shadow-lg border border-light border-opacity-10 flex items-center gap-6 transition hover-block">
-                    <div class="bg-gray-200 px-6 py-3 rounded-lg text-light font-mono transition-all hover:bg-black-200">
+                <span class="mt-6 rounded-xl bg-white p-6 py-9 border border-period-dark flex items-center gap-6 transition">
+                    <div class="bg-gray-200 px-6 py-3 rounded-lg text-light font-mono transition-all">
                         composer require league/period:^{{ site.data.project.releases.current.latest }}
                     </div>
                 </span>

diff --git a/docs/styles.0003.css → docs/styles.0004.css b/docs/styles.0003.css → docs/styles.0004.css
@@ -816,6 +816,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -891,13 +895,14 @@ video {
   border-color: rgb(128 128 128 / var(--tw-border-opacity));
 }
 
-.border-slate-300 {
+.border-period-dark {
   --tw-border-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+  border-color: rgb(178 139 20 / var(--tw-border-opacity));
 }
 
-.border-opacity-10 {
-  --tw-border-opacity: 0.1;
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
 
 .border-opacity-50 {
@@ -914,16 +919,6 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-period-base {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 198 29 / var(--tw-bg-opacity));
-}
-
-.bg-period-dark {
-  --tw-bg-opacity: 1;
-  background-color: rgb(178 139 20 / var(--tw-bg-opacity));
-}
-
 .bg-period-light {
   --tw-bg-opacity: 1;
   background-color: rgb(255 221 119 / var(--tw-bg-opacity));
@@ -1104,11 +1099,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -1871,11 +1861,25 @@ img {
   }
 }
 
+.hover\:bg-period-base:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 198 29 / var(--tw-bg-opacity));
+}
+
+.hover\:text-period-dark:hover {
+  --tw-text-opacity: 1;
+  color: rgb(178 139 20 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .active\:scale-95:active {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -1891,10 +1895,6 @@ img {
     grid-column: span 3 / span 3;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:h-\[50px\] {
     height: 50px;
   }
@@ -1974,10 +1974,6 @@ img {
     gap: 0px;
   }
 
-  .md\:gap-6 {
-    gap: 1.5rem;
-  }
-
   .md\:p-6 {
     padding: 1.5rem;
   }
@@ -1996,11 +1992,6 @@ img {
     font-size: 8rem;
     line-height: 1;
   }
-
-  .md\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
 }
 
 @media (min-width: 1024px) {