Fixing components Tailwind For Main Lessons (Ready Class [.main_conte…

…nt])
amirroox · Jul 7, 2023 · b59819d · b59819d
1 parent 0d27f52
commit b59819d
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 33 deletions.
diff --git a/Lessons/GettingStart/ArchLinux/index.php b/Lessons/GettingStart/ArchLinux/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/Debian/index.php b/Lessons/GettingStart/Debian/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/Fedora/index.php b/Lessons/GettingStart/Fedora/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/Gentoo/index.php b/Lessons/GettingStart/Gentoo/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/History/index.php b/Lessons/GettingStart/History/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/LinuxMint/index.php b/Lessons/GettingStart/LinuxMint/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/OpenSUSE/index.php b/Lessons/GettingStart/OpenSUSE/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/RedHat/index.php b/Lessons/GettingStart/RedHat/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/Ubuntu/index.php b/Lessons/GettingStart/Ubuntu/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/Lessons/GettingStart/choosing-a-linux-distribution/index.php b/Lessons/GettingStart/choosing-a-linux-distribution/index.php
@@ -17,7 +17,7 @@
 <!-- End Header -->
 
 <!-- Start Main -->
-<main class="p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4">
+<main class="main_content">
 
     <!-- Start Menu -->
     <?php include_once "../menu.php" ?>

diff --git a/dist/output.css b/dist/output.css
@@ -534,10 +534,8 @@ h2 {
   --tw-backdrop-sepia:  ;
 }
 
-@media (min-width: 768px) {
-  .content_lessons {
-    grid-column: span 4 / span 4;
-  }
+.content_lessons {
+  /* Style for Content Lessons */
 }
 
 .content_lessons > :not([hidden]) ~ :not([hidden]) {
@@ -547,30 +545,45 @@ h2 {
 }
 
 .content_lessons {
-  text-align: justify;
   border-radius: 1rem;
   border-width: 4px;
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  text-align: right;
+  text-align: justify;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 @media (min-width: 768px) {
   .content_lessons {
+    grid-column: span 4 / span 4;
     max-height: -moz-fit-content;
     max-height: fit-content;
   }
 }
 
-.content_lessons {
-  text-align: right;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.main_content {
+  /* Style For Parent Content Lessons */
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  text-align: center;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+@media (min-width: 768px) {
+  .main_content {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }

diff --git a/src/input.css b/src/input.css
@@ -14,17 +14,11 @@
 }
 /* Custom Project */
 @layer components {
-    .content_lessons {
-        @apply md:col-span-4;
-        @apply space-y-3;
-        @apply text-justify;
-        @apply rounded-2xl;
-        @apply border-4;
-        @apply border-blue-800;
-        @apply md:max-h-fit;
-        @apply text-right;
-        @apply py-3;
-        @apply px-5;
-        @apply text-white;
+    .content_lessons { /* Style for Content Lessons */
+        @apply md:col-span-4 md:max-h-fit space-y-3 text-justify rounded-2xl border-4 border-blue-800
+                text-right py-3 px-5 text-white;
+    }
+    .main_content { /* Style For Parent Content Lessons */
+        @apply p-4 text-white text-center grid grid-cols-1 md:grid-cols-5 gap-4;
     }
 }