Add option to increase triangle

src/triangle.css

@@ -0,0 +1,405 @@
+@import 'apex.css';
+
+@custom-media --tablet only screen and (max-width: 1200px);
+@custom-media --phone only screen and (max-width: 800px);
+@custom-media --smaller-phone only screen and (max-width: 500px);
+
+:root {
+  --energy: 0px;
+  --page-width: min(100%, 1024px);
+  color: white;
+}
+
+html {
+  color-scheme: dark;
+  font-family: system-ui;
+}
+
+.title {
+  font-size: min(10vw, 36pt);
+  margin-bottom: 48px;
+}
+
+.section-header {
+  display: flex;
+  text-align: left;
+
+  justify-content: space-between;
+
+  h1 {
+    font-size: 48pt;
+    border: solid 3px #eee;
+    clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+    padding: 24pt;
+  }
+
+  @media (--tablet) {
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+
+.blockquote {
+  margin: 16px;
+  font-size: min(5vw, 22pt);
+  padding: 15px;
+}
+
+blockquote {
+  p {
+    text-align: center;
+
+    &::before {
+      content: "\201C";
+    }
+
+    &::after {
+      content: "\201D";
+    }
+  }
+
+
+  &+p {
+    text-align: right;
+
+    &::before {
+      content: "—";
+    }
+  }
+
+
+  @media (--phone) {
+    margin: 0px auto;
+  }
+}
+
+#page-content {
+  background-image: url("/assets/triangle_mountain.jpg");
+  background-repeat: no-repeat;
+  background-size: auto max(4000px, 100%);
+  background-position: center 0;
+
+  &,
+  &>* {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+#page-content-content {
+  width: var(--page-width);
+  margin: 0 auto;
+  text-align: center;
+}
+
+#footer {
+  background-color: #484848;
+
+  p,
+  li {
+    font-size: 8pt;
+  }
+}
+
+.footnotes {
+  padding: 0 40;
+}
+
+.project-alt {
+  flex-direction: row-reverse;
+}
+
+.project {
+  background-color: #484848;
+  display: flex;
+  align-items: center;
+  margin: 32px 16px;
+  padding: 16px 5%;
+  justify-content: space-evenly;
+  position: relative;
+  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+
+  &.project-alt {
+    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
+  }
+
+
+  iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    margin: 16pt 0;
+  }
+
+  &>div,
+  &>section {
+    padding: 8px;
+  }
+
+  &>section {
+    width: 100%;
+
+    @media (--phone) {
+      width: unset;
+    }
+  }
+
+
+  @media (--phone) {
+    flex-direction: column;
+
+    padding: 5% 8%;
+
+    &>div,
+    &>section {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @media (--smaller-phone) {
+    p {
+      font-size: 14pt;
+    }
+
+    iframe {
+      margin: 14pt 0;
+    }
+  }
+}
+
+.interest {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  &.project-alt .project {
+    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
+  }
+
+  .person {
+    width: 128px;
+    margin: 25px;
+  }
+
+  @media (--tablet) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 18px;
+
+    &.project-alt {
+      align-items: flex-end;
+    }
+  }
+
+  @media (--smaller-phone) {
+    .project {
+      margin: 0;
+    }
+  }
+}
+
+.project-title {
+  min-width: 275px;
+
+  @media (--smaller-phone) {
+    min-width: 0;
+  }
+
+  h1 {
+    font-size: 24pt;
+    margin: 0;
+  }
+}
+
+.links {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 20px 0;
+}
+
+.tab-list {
+  display: flex;
+
+  a {
+    background-color: transparent;
+    border: solid 3px #eee;
+    font-size: 16pt;
+    padding: 1%;
+    width: 100%;
+    clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+  }
+
+  a[aria-selected=true] {
+    font-weight: bold;
+    /* border-bottom: solid 6px #eee; */
+    background-color: #eee;
+    color: black;
+  }
+
+  @media only screen and (max-width: 550px) {
+    flex-direction: column;
+
+    a {
+      background-color: #eee;
+      color: black;
+      border: solid 2px #999;
+      font-size: 16pt;
+      padding: 8px;
+      clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
+      width: unset;
+    }
+
+    .tab-alt {
+      clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+    }
+
+    a[aria-selected=true] {
+      font-weight: bold;
+      padding: 16px;
+    }
+  }
+}
+
+.figure {
+
+  img,
+  p,
+  svg {
+    width: 80%;
+  }
+
+  &>svg {
+    height: 80%;
+  }
+}
+
+
+.person {
+  clip-path: polygon(0 10%, 100% 10%, 50% 100%);
+  margin: 15px 0;
+}
+
+/* .thought-bubble { */
+/* clip-path: polygon(50% 0, 100% 100%, 0 100%); */
+/* } */
+
+.flex-container {
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+  /* flex-flow: column; */
+  flex-direction: column;
+
+  height: 100%;
+  gap: 5px;
+
+}
+
+/* From https://codepen.io/Knovour/pen/boJNPN */
+.marquee {
+  margin: 0;
+  padding: 0;
+  color: #343434;
+  font-size: 72px;
+  font-weight: bold;
+  position: relative;
+  width: 100vw;
+  max-width: 100%;
+  height: 80px;
+  line-height: 1.0;
+  overflow-x: hidden;
+}
+
+.track {
+  position: absolute;
+  white-space: nowrap;
+  will-change: transform;
+  animation: marquee 32s linear infinite;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.htmx-indicator {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.thought-bubble {
+  width: 4rem;
+  height: 4rem;
+  min-width: 4rem;
+  min-height: 4rem;
+  background-color: #484848;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  margin-bottom: 2rem;
+}
+
+#tab-break {
+  margin: 0;
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 32pt;
+  /* margin: 0; */
+}
+
+hr {
+  border: 0;
+  border-top: 2px solid #ddd;
+}
+
+input[type="checkbox"] {
+  transform: scale(1.5);
+  margin: 10px;
+}
+
+li,
+p {
+  font-size: 16pt;
+  text-align: left;
+}
+
+sup {
+  font-size: 12pt;
+}
+
+ol {
+  padding: 0;
+}
+
+form {
+  text-align: left;
+}
+
+textarea {
+  width: 100%;
+}
+
+a {
+  color: inherit;
+  /* no underline */
+  text-decoration: none;
+}