Refactor js

css/elements.css

@@ -0,0 +1,173 @@
+/* X sign visible in the photo viewer mode. */
+#exit {
+  position: absolute;
+  width: var(--exit-size);
+  height: var(--exit-size);
+  top: var(--exit-size);
+  right: var(--exit-size);
+  cursor: pointer;
+}
+#exit:before,
+#exit:after {
+  content: "";
+  position: absolute;
+  width: var(--line-width);
+  height: calc(var(--exit-size) * 1.4142);
+  background: white;
+  border-radius: var(--border-radius);
+  top: calc(var(--exit-size) * -0.4142 / 2);
+  left: 50%;
+}
+#exit:before {
+  transform: rotate(45deg);
+}
+#exit:after {
+  transform: rotate(-45deg);
+}
+/**/
+
+/* Links with interactive underline. */
+a {
+  text-decoration: none;
+  position: relative;
+  border-bottom: solid 3px var(--light-accent-color);
+  cursor: pointer;
+  display: inline-block;
+}
+a:after {
+  content: "";
+  height: var(--line-width);
+  background-color: var(--accent-color);
+  position: absolute;
+  left: 0;
+  bottom: calc(-1 * var(--line-width));
+  width: 0;
+  transition: width var(--transition-time);
+}
+a:hover:after {
+  width: 100%;
+}
+/**/
+
+/* Line with circle for the timeline sections. */
+.line {
+  margin-left: calc(var(--dot-size) / 2);
+  margin-right: var(--line-height);
+  border-left: var(--line-width) solid var(--text-color);
+  position: relative;
+}
+.line:before {
+  content: "";
+  position: absolute;
+  left: calc(-1 / 2 * var(--dot-size) - 4px);
+  background: var(--bg-color);
+  top: 33%;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 100%;
+  border: var(--line-width) var(--text-color) solid;
+}
+/**/
+
+/* Activity cards. */
+.card {
+  border-radius: var(--border-radius);
+  text-align: center;
+  padding: var(--margin);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
+  transition: box-shadow;
+  transition-duration: var(--transition-time);
+  background: var(--card-color);
+}
+.card:hover {
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
+}
+/**/
+
+/* Dates related to the lines and cards. */
+.date-narrow-screen,
+.date-wide-screen {
+  font: 400 1em "Open sans", sans-serif;
+}
+.date-narrow-screen {
+  display: none;
+  margin: 0;
+  margin-top: calc(var(--line-height) / 2.25) !important;
+  color: var(--light-text-color);
+}
+.date-wide-screen {
+  position: relative;
+  top: calc(33% + var(--dot-size) + 1ch);
+  margin: 0 var(--margin) 0 calc(var(--line-width) + 1ex);
+  width: 100px;
+}
+/**/
+
+/* The photo viewer */
+#photo-viewer {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: var(--photo-viewer-color);
+  z-index: -3;
+  opacity: 0;
+  transition: opacity var(--transition-time);
+}
+
+/* #photo */
+#photo-viewer > img {
+  max-width: 80vw;
+  max-height: 80vh;
+}
+/**/
+
+/* Scrollbar. */
+body::-webkit-scrollbar-track,
+body::-webkit-scrollbar {
+  background-color: var(--scroll-color);
+  width: 12px;
+}
+body::-webkit-scrollbar-thumb {
+  background-color: var(--accent-color);
+  border-radius: var(--border-radius);
+}
+/**/
+
+/* Selections. */
+::-moz-selection {
+  background: var(--accent-color);
+  color: white;
+}
+::selection {
+  background: var(--accent-color);
+  color: white;
+}
+/**/
+
+/* Absolute centering parent. */
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/**/
+
+@media (max-width: 900px) {
+  .line {
+    display: none;
+  }
+
+  /* Disable animation. */
+  .card:hover {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
+  }
+
+  .date-narrow-screen {
+    display: block;
+  }
+  .date-wide-screen {
+    display: none;
+  }
+}