Add option to increase triangle
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
5a6a311889
commit
19f2479788
GPG key ID:
B67D7410F33A0F61
9 changed files with 542 additions and 22 deletions
80
assets/icon_triangle.svg
Normal file
80
assets/icon_triangle.svg
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="1024"
|
||||
height="1024"
|
||||
viewBox="0 0 1024 1024"
|
||||
sodipodi:docname="icon_triangle.svg"
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
inkscape:export-filename="icon.png"
|
||||
inkscape:export-xdpi="6"
|
||||
inkscape:export-ydpi="6"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="linearGradient5"
|
||||
inkscape:collect="always">
|
||||
<stop
|
||||
style="stop-color:#957b09;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop5" />
|
||||
<stop
|
||||
style="stop-color:#f8d170;stop-opacity:1;"
|
||||
offset="0.64978778"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient5"
|
||||
id="linearGradient6"
|
||||
x1="238.13318"
|
||||
y1="785.09656"
|
||||
x2="784.8255"
|
||||
y2="237.32028"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1.7624601,0,0,1.7624601,-389.38763,-359.7014)" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.68050576"
|
||||
inkscape:cx="404.84595"
|
||||
inkscape:cy="522.40557"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1080"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g1"
|
||||
showguides="true">
|
||||
<sodipodi:guide
|
||||
position="0,1024"
|
||||
orientation="0.70710678,0.70710678"
|
||||
id="guide1"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Image"
|
||||
id="g1">
|
||||
<path
|
||||
id="path5"
|
||||
style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:96.9356;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 378.25244,407.46119 945.36823,973.62177 M 512.9919,108.42888 V 976.92739 M 512.9919,108.42888 V 108.42888 L 945.36823,975.5322 H 78.780228 Z"
|
||||
sodipodi:nodetypes="ccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
BIN
assets/triangle_mountain.jpg
Normal file
BIN
assets/triangle_mountain.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -46,23 +46,25 @@ html {
|
|||
blockquote {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p::before {
|
||||
&::before {
|
||||
content: "\201C";
|
||||
}
|
||||
|
||||
p::after {
|
||||
&::after {
|
||||
content: "\201D";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&+p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&+p::before {
|
||||
&::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;
|
||||
}
|
||||
|
|
|
|||
405
src/triangle.css
Normal file
405
src/triangle.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
12
src/triangle.js
Normal file
12
src/triangle.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue