mobile styles

ayushsaranGithuB · Aug 14, 2024 · ced12d1 · ced12d1
1 parent 05a1e1a
commit ced12d1
Show file tree

Hide file tree

Showing 4 changed files with 263 additions and 69 deletions.
diff --git a/public/global.css b/public/global.css
@@ -324,4 +324,13 @@ footer .creative-commons {
 
 footer .creative-commons {
     background-image: url('/public/images/creative-commons.svg');
+}
+
+/* MOBILE */
+@media only screen and (max-width: 600px) {
+
+    footer .inner-content {
+        flex-direction: column;
+        row-gap: 40px;
+    }
 }
diff --git a/public/home.css b/public/home.css
@@ -130,7 +130,7 @@
     background-color: var(--background-secondary);
     max-width: 70%;
     border-radius: 0 var(--border-r-l) var(--border-r-l) 0;
-    padding: 60px 60px 60px calc(100% - var(--max-width));
+    padding: 60px 60px 60px calc(100% - var(--max-width) + 20px);
     font-size: 34px;
     font-weight: 700;
     line-height: 1.3;
@@ -140,6 +140,7 @@
 .page-header .content {
     grid-area: 2 / 2 / 2 / 3;
     max-width: 80%;
+    padding-left: 20px;
 }
 
 .page-header .content h4 {
@@ -193,9 +194,6 @@
 
 /* TUTORIALS SECTION */
 
-section.tutorials {
-    /* padding-top: 0; */
-}
 
 .tutorials h2 {
     font-size: 36px;
@@ -449,4 +447,165 @@ div.tutorials-medium {
 
 .roadmap span.seperator {
     display: block;
+}
+
+
+/* ALL RESPONSIVE STYLES */
+
+#mobile-menu-checkbox {
+    display: none;
+}
+
+/* TABLETS */
+@media only screen and (max-width: 920px) {
+
+    /* menus */
+    label.mobile-menu {
+        display: none;
+    }
+}
+
+/* MOBILE */
+@media only screen and (max-width: 600px) {
+
+    /* menus */
+    label.mobile-menu {
+        display: block;
+    }
+
+    header ul.main-menu {
+        display: none;
+    }
+
+    header svg#icon-menu {
+        width: 30px;
+        cursor: pointer;
+    }
+
+    #burger-1,
+    #burger-2,
+    #burger-3 {
+        transition: all 0.3s ease;
+    }
+
+    nav:has(input#mobile-menu-checkbox:checked) #burger-1 {
+        transform: rotate(45deg) translate(6px, -6px);
+    }
+
+    nav:has(input#mobile-menu-checkbox:checked) #burger-2 {
+        transform: rotate(-45deg) translate(-14px, 5px);
+    }
+
+    nav:has(input#mobile-menu-checkbox:checked) #burger-3 {
+        transform: translate(0px, 8px);
+    }
+
+    input#mobile-menu-checkbox:checked~ul.main-menu {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        width: 100%;
+        background-color: var(--background-primary);
+        z-index: 100;
+        column-gap: 0;
+        row-gap: 30px;
+        padding: 20px 20px 40px;
+        height: 100%;
+    }
+
+
+    /* hero */
+
+    .hero h1 {
+        width: 100%;
+        font-size: 52px;
+    }
+
+    .hero h2 {
+        width: 80%;
+        margin-bottom: 30px;
+    }
+
+    .hero p {
+        margin: 10px 0 0;
+        padding-bottom: 20px;
+    }
+
+    .hero .button {
+        font-size: 18px;
+    }
+
+    .hero span.hero-image {
+        display: none;
+    }
+
+    .hero::before {
+        top: -50px;
+    }
+
+    .hero::after {
+        display: none;
+    }
+
+    /* page header */
+
+    .page-header {
+        grid-template-columns: 1fr;
+    }
+
+    .page-header h2 {
+        padding: 40px 20px;
+        font-size: 26px;
+        line-height: 1.4;
+        max-width: 80%;
+        word-break: keep-all;
+
+    }
+
+    .page-header .content p {
+        margin-bottom: 60px;
+    }
+
+    .secondary {
+        padding: 40px 0;
+    }
+
+    .secondary h2 {
+        font-size: 26px;
+        margin-bottom: 30px;
+    }
+
+    .skill-level {
+        padding: 10px 0;
+    }
+
+    .skill-level .title {
+        flex-direction: column;
+        row-gap: 30px;
+    }
+
+    .skill-level .title h3 {
+        font-size: 16px;
+        padding: 20px 50px;
+    }
+
+    div.tutorials-medium {
+        row-gap: 30px;
+    }
+
+    .tutorials-medium .tutorial {
+        width: 100%;
+    }
+
+    .tutorials-medium .seperator {
+        display: none;
+    }
+
+    .button {
+        padding: 14px 44px 12px 14px;
+        background-position: calc(100% - 10px) center;
+    }
+
 }
diff --git a/src/_includes/partials/header.liquid b/src/_includes/partials/header.liquid
@@ -1,41 +1,94 @@
 <header>
-	<div class="logo">
-		<a href="/">
-			<img src="/public/images/ts-logo-solid-white.svg" alt="logo">
-			Learn TypeScript
-		</a>
-	</div>
-	<nav>
-		<ul class="mobile-menu">
-			<li>
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-					stroke="#FFFFFF" id="icon-menu">
-					<path stroke-linecap="round" stroke-linejoin="round"
-						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-				</svg>
-			</li>
-		</ul>
-		<ul class="main-menu">
-			<li id="theme-switch-container">
-				<input type="checkbox" class="theme-slider" id="theme-checkbox" checked>
-				<label for="theme-checkbox" class="theme-slider-label">
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-						stroke="currentColor" class="icon-moon">
-						<path stroke-linecap="round" stroke-linejoin="round"
-							d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-					</svg>
+  <div class="logo">
+    <a href="/">
+      <img src="/public/images/ts-logo-solid-white.svg" alt="logo">
+      Learn TypeScript
+    </a>
+  </div>
+  <nav>
+    <label class="mobile-menu" for="mobile-menu-checkbox">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="#FFFFFF"
+        id="icon-menu">
+        <path
+          id="burger-1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M 3.75 6.75 L 20.25 6.75"
+          style=""
+          transform="matrix(1, 0, 0, 1, 0, 2.220446049250313e-16)" />
+        <path
+        id="burger-2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M 3.75 12 L 20.25 12"
+          style=""
+          transform="matrix(1, 0, 0, 1, 0, 2.220446049250313e-16)" />
+        <path
+        id="burger-3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M 3.75 17.25 L 20.25 17.25"
+          style=""
+          transform="matrix(1, 0, 0, 1, 0, 2.220446049250313e-16)" />
 
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-						stroke="currentColor" class="icon-sun">
-						<path stroke-linecap="round" stroke-linejoin="round"
-							d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-					</svg>
-					<span class="ball"></span>
-				</label>
-			</li>
-			<li class="link"><a href="/">Home</a></li>
-			<li class="link"><a href="/tutorials">Tutorials</a></li>
-			<li class="link"><a href="/about">About</a></li>
-		</ul>
-	</nav>
+      </svg>
+    </label>
+    <input
+      type="checkbox"
+      name="mobile-menu"
+      id="mobile-menu-checkbox">
+
+
+    <ul class="main-menu">
+      <li id="theme-switch-container">
+        <input
+          type="checkbox"
+          class="theme-slider"
+          id="theme-checkbox"
+          checked>
+        <label for="theme-checkbox" class="theme-slider-label">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="icon-moon">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+          </svg>
+
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="icon-sun">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+          </svg>
+          <span class="ball"></span>
+        </label>
+      </li>
+      <li class="link">
+        <a href="/">Home</a>
+      </li>
+      <li class="link">
+        <a href="/tutorials">Tutorials</a>
+      </li>
+      <li class="link">
+        <a href="/about">About</a>
+      </li>
+    </ul>
+  </nav>
 </header>
diff --git a/src/tutorials/index.html b/src/tutorials/index.html
@@ -158,32 +158,5 @@ <h4>
 	</section>
 
 
-	<!--
-		<section class="recent-tutorials tertiary">
-			<div class="inner-content">
-
-				<h2>
-					Recently Added Tutorials
-				</h2>
-				<p>
-					Explore new topics added to our learning paths
-				</p>
-				<div class="updates">
-					<div class="update">
-						<h3><a href="/">Typescript</a></h3>
-						<p>Learn TypeScript from the ground up to discover a robust coding. experience.</p>
-						<p class="meta">
-							<span class="cost">FREE</span>
-							<span class="length">24 Tutorials</span>
-						</p>
-					</div>
-
-				</div>
-				<a href="/" class="cta button next">
-					Browse All Recent Tutorials
-				</a>
-			</div>
-		</section>
-	-->
 
 </main>