+
+
+
+
+ get("about_text");
+ foreach($about_text as $one_about_text_line){
+ echo("
" . $one_about_text_line . "");
+ }
+ ?>
+
+
diff --git a/page/style.css b/page/style.css
index ebb2e74..cae8b3c 100644
--- a/page/style.css
+++ b/page/style.css
@@ -454,14 +454,14 @@ a.box:hover {
flex-direction: column;
}
-.timeline > .item {
+.timeline > .item, .timeline > .wrapper > .item {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
-.timeline > .item > .connector {
+.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
align-self: stretch;
position: relative;
@@ -470,7 +470,7 @@ a.box:hover {
flex-direction: column;
justify-content: center;
}
-.timeline > .item:not(:first-child) > .connector::before, .timeline > .item:not(:last-child) > .connector::after {
+.timeline > .item:not(:first-child) > .connector::before, .timeline > .wrapper:not(:first-child) > .item > .connector::before, .timeline > .item:not(:last-child) > .connector::after, .timeline > .wrapper:not(:last-child) > .item > .connector::after {
content: "";
position: absolute;
left: calc(50% - 0.25rem);
@@ -481,24 +481,24 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 0;
}
-.timeline > .item > .connector::before {
+.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before {
top: 0;
}
-.timeline > .item.done > .connector::before {
+.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before {
background-color: var(--theme);
}
-.timeline > .item.next > .connector::before {
+.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before {
background-color: var(--theme);
}
-.timeline > .item > .connector::after {
+.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after {
top: 50%;
z-index: 1 !important;
}
-.timeline > .item.done > .connector::after {
+.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after {
background-color: var(--theme);
}
-.timeline > .item > .connector > .waypoint {
+.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
padding: 1rem;
font-size: 1.5rem;
@@ -506,15 +506,15 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 2;
}
-.timeline > .item.done > .connector > .waypoint {
+.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint {
color: var(--color-bg);
background-color: var(--theme);
}
-.timeline > .item.next > .connector > .waypoint {
+.timeline > .item.next > .connector > .waypoint, .timeline > .wrapper > .item.next > .connector > .waypoint {
background-color: var(--color-gray-dark);
}
-.timeline > .item > .box {
+.timeline > .item > .box, .timeline > .wrapper > .item > .box {
flex-grow: 1;
align-items: flex-start;
@@ -523,24 +523,24 @@ a.box:hover {
text-align: left;
}
-.timeline > .item:first-child > .box {
+.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box {
margin: 0 0 1rem 0;
}
-.timeline > .item:last-child > .box {
+.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
margin: 1rem 0 0 0;
}
@media only screen and (max-width: 1000px) {
- .timeline > .item {
+ .timeline > .item, .timeline > .wrapper > .item {
position: relative;
flex-direction: column;
gap: 0;
}
- .timeline > .item > .connector {
+ .timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
align-self: center;
}
- .timeline > .item:not(:last-child)::after {
+ .timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after {
content: "";
position: absolute;
left: calc(50% - 0.25rem);
@@ -551,35 +551,35 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 0;
}
- .timeline > .item.done::after {
+ .timeline > .item.done::after, .timeline > .wrapper > .item.done::after {
background-color: var(--theme);
}
- .timeline > .item.done-stop::after {
+ .timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after {
background-color: var(--theme);
}
- .timeline > .item:not(:last-child) > .box {
+ .timeline > .item:not(:last-child) > .box, .timeline > .wrapper:not(:last-child) > .item > .box {
margin: 0 0 4rem 0;
}
- .timeline > .item:last-child > .box {
+ .timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
margin: 0;
}
- .timeline > .item > .connector > .waypoint {
+ .timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
border-radius: 50% 50% 0 0;
}
- .timeline > .item > .box {
+ .timeline > .item > .box, .timeline > .wrapper > .item > .box {
align-items: center;
text-align: center;
}
- .timeline > .item > .box {
+ .timeline > .item > .box, .timeline > .wrapper > .item > .box {
outline: 0.125rem solid var(--color-bg-light);
}
- .timeline > .item.done > .box {
+ .timeline > .item.done > .box, .timeline > .wrapper > .item.done > .box {
outline: 0.125rem solid var(--theme);
}
- .timeline > .item.next > .box {
+ .timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box {
outline: 0.125rem solid var(--color-gray-dark);
}
}
@@ -667,14 +667,14 @@ a.box:hover {
/* SECTION: NEWS */
-.section > .content.rows > #newsletter, .section > .content.rows > #social-media {
+#newsletter .box, #social-media .box {
align-items: flex-start;
}
-.section > .content.rows > #newsletter {
+#newsletter {
flex-basis: 22rem;
flex-grow: 64;
}
-.section > .content.rows > #social-media {
+#social-media {
flex-basis: 16rem;
flex-grow: 1;
flex-shrink: 1;
@@ -795,6 +795,11 @@ a.box:hover {
/* COPYLINKS */
+.wrapper.copylink-id {
+ padding-top: 5.3rem; /* NOTE: This is tied to `nav .nav-container` */
+ margin-top: -5.3rem; /* NOTE: This is tied to `nav .nav-container` */
+}
+
.copylink {
position: absolute;
padding: 0.5rem;
diff --git a/page/timeline/index.php b/page/timeline/index.php
index 52c52b9..6c3ee71 100644
--- a/page/timeline/index.php
+++ b/page/timeline/index.php
@@ -49,363 +49,387 @@
= $dict->get("timeline_title") ?>