Merge pull request #29 from code-IM-perfect/main

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-
+<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
 <div class="post-head">
   <div class="container">
     <div class="row">

_pages/contact.html

@@ -157,7 +157,7 @@
     hall: 6
     mail: medhaagar23@iitk.ac.in
     number: 8924885144
-    insta_id: medha09
+    insta_id: medhaagarwal__
     github: medhaa09
 
   "Om Gupta":

_pages/roadmaps.html

@@ -0,0 +1,106 @@
+---
+layout: page
+title: Roadmaps
+permalink: /roadmaps
+image:
+---
+
+<div class="roadmap-container">
+  <div class="grid">
+    {% for post in site.posts %} {% if post.categories contains 'roadmap' %}
+    <a
+      class="cardContainer"
+      href="{{ post.url | prepend: site.baseurl }}"
+    >
+      <div
+        class="image"
+        style="background-image: url({{ post.image.url }});"
+      ></div>
+      <h4>{{ post.title }}</h4>
+      <p>{{ post.summary }}</p>
+    </a>
+    {% endif %} {% endfor %}
+  </div>
+</div>
+
+<style>
+  .content .container {
+    max-width: unset;
+    padding: 0;
+
+    article {
+      max-width: unset;
+    }
+  }
+
+  .grid {
+    display: grid;
+    gap: 6rem;
+    place-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
+    margin: 10rem clamp(5rem, 7rem, 50vw);
+    grid-auto-rows: 1fr;
+
+    .cardContainer {
+      display: grid;
+      border-radius: 0.75rem;
+      height: 100%;
+      min-height: 24rem;
+      width: 100%;
+      max-width: 30rem;
+      text-align: left;
+      /* grid-template-rows: 12fr auto auto 1fr; */
+      /* grid-template-rows: subgrid; */
+      align-items: center;
+      /* grid-row: 1/5; */
+      /* background-color: #111; */
+      box-shadow: 0px 0px 20px 1px rgba(255, 123, 123, 0.9);
+      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      overflow: hidden;
+    }
+
+    .cardContainer:hover {
+      background-color: #ff7b7b;
+      color: #09080f;
+      box-shadow: 0px 0px 70px 10px rgba(255, 123, 123, 0.7);
+		transform: scale(1.2);
+      h4 {
+        color: #09080f;
+      }
+    }
+
+    .image {
+      border-radius: 0.75rem;
+      margin: 1rem;
+      height: 18rem;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      align-self: normal;
+    }
+
+    p {
+      align-self: baseline;
+      font-size: 1rem;
+      margin: 0 1.5rem;
+    }
+
+    h4 {
+      font-size: 1.75rem;
+      font-weight: 800;
+      margin: 0.5rem 1.5rem 1.5rem;
+    }
+
+    p, h4 {
+      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+  }
+
+  @media (max-width:540px) {      /* Those effin phones */
+    .grid {
+      gap: 6rem;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    margin: 7rem clamp(1rem, 2rem, 30vw);
+    }
+  }
+</style>