diff --git a/assets/icon_triangle.svg b/assets/icon_triangle.svg
new file mode 100644
index 0000000..faeb05c
--- /dev/null
+++ b/assets/icon_triangle.svg
@@ -0,0 +1,80 @@
+
+
+
+
diff --git a/assets/triangle_mountain.jpg b/assets/triangle_mountain.jpg
new file mode 100644
index 0000000..58db3ea
Binary files /dev/null and b/assets/triangle_mountain.jpg differ
diff --git a/src/components/head.html b/src/components/head.html
index 8efee8f..3b2f476 100644
--- a/src/components/head.html
+++ b/src/components/head.html
@@ -6,7 +6,8 @@
The SANDWICH
-
+
+
@@ -57,6 +58,10 @@
+
+
+
+
@@ -93,6 +98,7 @@
-
+
\ No newline at end of file
diff --git a/src/components/tab/content.html b/src/components/tab/content.html
index 4a9d476..7b02aa0 100644
--- a/src/components/tab/content.html
+++ b/src/components/tab/content.html
@@ -4,12 +4,12 @@
}
-
+
diff --git a/src/style.css b/src/style.css
index 762d091..1f73bb4 100644
--- a/src/style.css
+++ b/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;
}
diff --git a/src/triangle.css b/src/triangle.css
new file mode 100644
index 0000000..ede2c5c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/triangle.js b/src/triangle.js
new file mode 100644
index 0000000..972ae04
--- /dev/null
+++ b/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);
+ }
+}