Add option to increase triangle

src/components/head.html

@@ -6,7 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="dark">
   <title>The SANDWICH</title>
-  <link rel="stylesheet" href="style.css">
+  <script type="module" src="triangle.js"></script>
+  <link id="thisStylesheet" rel="stylesheet" href="style.css">
   <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
@@ -57,6 +58,10 @@
             <input id="tube" type="checkbox" onclick="tube()">
             <label for="tube">Increase tubes</label>
           </li>
+          <li>
+            <input id="triangle" type="checkbox" onclick="window.triangle(event)">
+            <label for="triangle">Increase ⨻</label>
+          </li>
         </ul>
       </div>
       <img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
@@ -93,6 +98,7 @@
   <script>
     document.getElementById('playpause').checked = false
     document.getElementById('tube').checked = false
+    document.getElementById('triangle').checked = false
     function spaghetti() {
       var player = document.getElementById('player-spaghetti');
 

src/components/interest.html

@@ -13,9 +13,10 @@
       <x-img src="/assets/{{person}}.jpg" class="person">
     </div>
   </a>
-  <svg height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;">
-    <circle cx="2" cy="2" r="2" fill="#484848"></circle>
-  </svg>
+  <!-- <svg class="thought-bubble" height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;"> -->
+  <!-- <circle cx="2" cy="2" r="2" fill="#484848"></circle> -->
+  <!-- </svg> -->
+  <div class="thought-bubble"></div>
   <x-project onclick="{{onclick}}" titlestyle="{{titlestyle}}" headerstyle="{{headerstyle}}">
     <if condition="$slots.img?.filled">
       <fill:img>

src/components/tab/button.html

@@ -1,10 +1,10 @@
 <script props>
   module.exports = {
     page: props.page,
-    aria_selected: Boolean(props.selected)
+    selected: Number(props.selected),
   }
 </script>
-<a href="/src/{{page}}" hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab" aria-selected="{{aria_selected}}"
-  aria-controls="tab-content">
+<a href="/src/{{page}}" hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab"
+  aria-selected="{{ selected == 0 }}" class="{{ selected % 2 == 0 ? 'tab-alt' : '' }}" aria-controls="tab-content">
   <yield></yield>
 </a>

src/components/tab/content.html

@@ -4,12 +4,12 @@
   }
 </script>
 <nav class="tab-list" role="tablist" hx-indicator="#indicator">
-  <x-tab.button page="projects.html" selected="{{ selected-- == 0 }}">Our Projects</x-tab.button>
-  <x-tab.button page="who_we_are.html" selected="{{ selected-- == 0 }}">Who we are</x-tab.button>
-  <x-tab.button page="interests.html" selected="{{ selected-- == 0 }}">Our Interests</x-tab.button>
-  <x-tab.button page="page_four.html" selected="{{ selected-- == 0 }}">Page Four</x-tab.button>
+  <x-tab.button page="projects.html" selected="{{ selected-- }}">Our Projects</x-tab.button>
+  <x-tab.button page="who_we_are.html" selected="{{ selected-- }}">Who we are</x-tab.button>
+  <x-tab.button page="interests.html" selected="{{ selected-- }}">Our Interests</x-tab.button>
+  <x-tab.button page="page_four.html" selected="{{ selected-- }}">Page Four</x-tab.button>
 </nav>
-<hr style="margin: 0">
+<hr id="tab-break">
 <div id="tab-content" role="tabpanel" class="tab-content">
   <yield></yield>
 </div>

src/style.css

@@ -46,23 +46,25 @@ html {
 blockquote {
   p {
     text-align: center;
+
+    &::before {
+      content: "\201C";
+    }
+
+    &::after {
+      content: "\201D";
+    }
   }
 
-  p::before {
-    content: "\201C";
-  }
-
-  p::after {
-    content: "\201D";
-  }
 
   &+p {
     text-align: right;
+
+    &::before {
+      content: "—";
+    }
   }
 
-  &+p::before {
-    content: "—";
-  }
 
   @media (--phone) {
     margin: 0px auto;
@@ -319,6 +321,20 @@ blockquote {
   }
 }
 
+.thought-bubble {
+  width: 4rem;
+  height: 4rem;
+  min-width: 4rem;
+  min-height: 4rem;
+  background-color: #484848;
+  clip-path: circle(50%);
+  margin-bottom: 1rem;
+}
+
+#tab-break {
+  margin: 0;
+}
+
 body {
   margin: 0;
 }

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;
+}

src/triangle.js

@@ -0,0 +1,12 @@
+window.triangle = (event) => {
+  const checked = event.target.checked;
+  const pageContent = document.getElementById("page-content");
+
+  if (checked) {
+    thisStylesheet.href = new URL("triangle.css", import.meta.url);
+    logo.src = new URL("/assets/icon_triangle.svg", import.meta.url);
+  } else {
+    thisStylesheet.href = new URL("style.css", import.meta.url);
+    logo.src = new URL("/assets/icon.svg", import.meta.url);
+  }
+}