Add styling to dates

TomMitchell123 · Jul 25, 2024 · 8ea70e8 · 8ea70e8
1 parent 4cbf51f
commit 8ea70e8
Showing 1 changed file with 86 additions and 19 deletions.
diff --git a/styles.css b/styles.css
@@ -268,51 +268,118 @@ html, body {
 
 .timeline {
     position: relative;
-    padding-left: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.timeline::before {
+.timeline::after {
     content: '';
     position: absolute;
-    left: 0;
+    width: 6px;
+    background-color: var(--highlight-color);
     top: 0;
     bottom: 0;
-    width: 2px;
-    background-color: var(--highlight-color);
+    left: 50%;
+    margin-left: -3px;
 }
 
 .timeline-item {
-    margin-bottom: 2rem;
+    padding: 10px 40px;
     position: relative;
+    background-color: inherit;
+    width: 50%;
+}
+
+.timeline-item::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: var(--bg-color);
+    border: 4px solid var(--highlight-color);
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.timeline-item:nth-child(odd) {
+    left: 0;
+}
+
+.timeline-item:nth-child(even) {
+    left: 50%;
+}
+
+.timeline-item:nth-child(even)::after {
+    left: -16px;
 }
 
 .timeline-content {
+    padding: 20px 30px;
     background-color: var(--secondary-color);
-    padding: 20px; /* Reduced padding */
+    position: relative;
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.timeline-content:hover {
-    transform: translateY(-5px) translateX(10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+.timeline-date {
+    position: absolute;
+    top: 15px;
+    right: -200px;
+    background-color: var(--highlight-color);
+    color: var(--bg-color);
+    padding: 10px 15px;
+    border-radius: 8px;
+    font-weight: bold;
 }
 
-.timeline-content h3 {
-    margin-top: 0;
-    color: var(--highlight-color);
-    font-weight: 600;
+.timeline-item:nth-child(even) .timeline-date {
+    left: -200px;
+    right: auto;
 }
 
-.timeline-content p {
-    margin: 0;
+@media screen and (max-width: 768px) {
+    .timeline::after {
+        left: 31px;
+    }
+
+    .timeline-item {
+        width: 100%;
+        padding-left: 70px;
+        padding-right: 25px;
+    }
+
+    .timeline-item::after {
+        left: 15px;
+    }
+
+    .timeline-item:nth-child(even) {
+        left: 0%;
+    }
+
+    .timeline-item:nth-child(even)::after {
+        left: 15px;
+    }
+
+    .timeline-date {
+        position: relative;
+        right: auto;
+        left: auto;
+        top: auto;
+        margin-bottom: 10px;
+        display: inline-block;
+    }
+
+    .timeline-item:nth-child(even) .timeline-date {
+        left: auto;
+    }
 }
 
 .view-button {
     display: inline-block;
-    margin-top: 0.5rem;
-    padding: 0.5rem 1rem;
+    margin-top: 10px;
+    padding: 8px 15px;
     background: linear-gradient(45deg, var(--highlight-color), var(--accent-color));
     color: var(--bg-color);
     text-decoration: none;