Scheletro per la pagina sulla storia del PHC

public/style.css

@@ -732,6 +732,77 @@ form .field-set input {
     animation: rotate 1s linear infinite;
 }
 
+.page-storia .history-container {
+    --bar-size: 6px;
+
+    display: flex;
+    flex-direction: row;
+
+    margin: 5rem 0;
+
+    position: relative;
+}
+
+.page-storia .history-container .timeline-bar {
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: -2rem;
+    width: var(--bar-size);
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .timeline-bar::before {
+    content: '';
+    position: absolute;
+
+    top: -3rem;
+    bottom: -3rem;
+    left: 0;
+    border-left: var(--bar-size) dashed var(--bg-darker-4);
+}
+
+.page-storia .history-container .events {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.page-storia .history-container .events .event::before {
+    --size: 1rem;
+
+    content: '';
+    position: absolute;
+    left: calc(-2rem + var(--bar-size) / 2 - var(--size) / 2);
+    transform: translate(0, 1rem);
+
+    width: var(--size);
+    height: var(--size);
+
+    border-radius: 100%;
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .events .event .title {
+    font-size: 22px;
+
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.page-storia .history-container .events .event .date {
+    color: var(--card-date);
+    font-size: 18px;
+}
+
+.page-storia .history-container .events .spacer {
+    height: 4rem;
+}
+
 @keyframes rotate {
     0% {
         transform: rotate(0deg);