diff --git a/.postcssrc b/.postcssrc
new file mode 100644
index 0000000..af7ee41
--- /dev/null
+++ b/.postcssrc
@@ -0,0 +1,5 @@
+{
+ "plugins": {
+ "postcss-custom-media": true
+ }
+}
diff --git a/package.json b/package.json
index d3acf73..3535397 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
"@parcel/config-default": "^2.15.4",
"markdown-it-sup": "^2.0.0",
"parcel": "^2.15.4",
+ "postcss": "^8.5.6",
+ "postcss-custom-media": "^11.0.6",
"posthtml": "^0.16.6",
"posthtml-component": "^2.2.0",
"posthtml-include": "^2.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ba978a3..1f56403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
htmx.org:
specifier: ^2.0.6
version: 2.0.6
+ postcss-custom-media:
+ specifier: ^11.0.6
+ version: 11.0.6(postcss@8.5.6)
devDependencies:
'@parcel/compressor-brotli':
specifier: ^2.15.4
@@ -30,6 +33,9 @@ importers:
parcel:
specifier: ^2.15.4
version: 2.15.4(@swc/helpers@0.5.17)
+ postcss:
+ specifier: ^8.5.6
+ version: 8.5.6
posthtml:
specifier: ^0.16.6
version: 0.16.6
@@ -45,6 +51,30 @@ importers:
packages:
+ '@csstools/cascade-layer-name-parser@2.0.5':
+ resolution: {integrity: sha512-p1ko5eHgV+MgXFVa4STPKpvPxr6ReS8oS2jzTukjR74i5zJNyWO1ZM1m8YKBXnzDKWfBN1ztLYlHxbVemDD88A==}
+ engines: {node: '>=18'}
+ peerDependencies:
+ '@csstools/css-parser-algorithms': ^3.0.5
+ '@csstools/css-tokenizer': ^3.0.4
+
+ '@csstools/css-parser-algorithms@3.0.5':
+ resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+ engines: {node: '>=18'}
+ peerDependencies:
+ '@csstools/css-tokenizer': ^3.0.4
+
+ '@csstools/css-tokenizer@3.0.4':
+ resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+ engines: {node: '>=18'}
+
+ '@csstools/media-query-list-parser@4.0.3':
+ resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+ engines: {node: '>=18'}
+ peerDependencies:
+ '@csstools/css-parser-algorithms': ^3.0.5
+ '@csstools/css-tokenizer': ^3.0.4
+
'@lezer/common@1.2.3':
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
@@ -829,6 +859,11 @@ packages:
msgpackr@1.11.4:
resolution: {integrity: sha512-uaff7RG9VIC4jacFW9xzL3jc0iM32DNHe4jYVycBcjUePT/Klnfj7pqtWJt9khvDFizmjN2TlYniYmSS2LIaZg==}
+ nanoid@3.3.11:
+ resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+ engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+ hasBin: true
+
node-addon-api@6.1.0:
resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
@@ -864,9 +899,19 @@ packages:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
+ postcss-custom-media@11.0.6:
+ resolution: {integrity: sha512-C4lD4b7mUIw+RZhtY7qUbf4eADmb7Ey8BFA2px9jUbwg7pjTZDl4KY4bvlUV+/vXQvzQRfiGEVJyAbtOsCMInw==}
+ engines: {node: '>=18'}
+ peerDependencies:
+ postcss: ^8.4
+
postcss-value-parser@4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+ postcss@8.5.6:
+ resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+ engines: {node: ^10 || ^12 || >=14}
+
posthtml-attrs-parser@1.1.2:
resolution: {integrity: sha512-9Que9y4k8c33iv8h5QyTfHKlurmsJIscozy7oeFRxuWeX/osXjVGu9o9MKrmo4TI6Vr9a9vh9b4LYXqm3/GvhA==}
engines: {node: '>=16.0.0'}
@@ -931,6 +976,10 @@ packages:
engines: {node: '>=10'}
hasBin: true
+ source-map-js@1.2.1:
+ resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+ engines: {node: '>=0.10.0'}
+
style-to-object@1.0.9:
resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
@@ -971,6 +1020,22 @@ packages:
snapshots:
+ '@csstools/cascade-layer-name-parser@2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+ dependencies:
+ '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+ '@csstools/css-tokenizer': 3.0.4
+
+ '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+ dependencies:
+ '@csstools/css-tokenizer': 3.0.4
+
+ '@csstools/css-tokenizer@3.0.4': {}
+
+ '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+ dependencies:
+ '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+ '@csstools/css-tokenizer': 3.0.4
+
'@lezer/common@1.2.3': {}
'@lezer/lr@1.4.2':
@@ -1980,6 +2045,8 @@ snapshots:
optionalDependencies:
msgpackr-extract: 3.0.3
+ nanoid@3.3.11: {}
+
node-addon-api@6.1.0: {}
node-addon-api@7.1.1: {}
@@ -2024,8 +2091,22 @@ snapshots:
picomatch@2.3.1: {}
+ postcss-custom-media@11.0.6(postcss@8.5.6):
+ dependencies:
+ '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+ '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+ '@csstools/css-tokenizer': 3.0.4
+ '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+ postcss: 8.5.6
+
postcss-value-parser@4.2.0: {}
+ postcss@8.5.6:
+ dependencies:
+ nanoid: 3.3.11
+ picocolors: 1.1.1
+ source-map-js: 1.2.1
+
posthtml-attrs-parser@1.1.2: {}
posthtml-component@2.2.0:
@@ -2095,6 +2176,8 @@ snapshots:
semver@7.7.2: {}
+ source-map-js@1.2.1: {}
+
style-to-object@1.0.9:
dependencies:
inline-style-parser: 0.2.4
diff --git a/src/components/link/instagram.html b/src/components/link/instagram.html
new file mode 100644
index 0000000..1eb345a
--- /dev/null
+++ b/src/components/link/instagram.html
@@ -0,0 +1,17 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/partials/who_we_are.html b/src/partials/who_we_are.html
index 9aeadaa..968bb0f 100644
--- a/src/partials/who_we_are.html
+++ b/src/partials/who_we_are.html
@@ -65,48 +65,52 @@
Step on it, Richard!
-
-
- I love everything from making distributed systems, to physically building them. I'm in my element when I'm
- making software with Python, and deploying it via Docker.
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ 
+
+
+
+ # Gunnar Huscroft
+
+
+
+ #### CEO of c0re (same thing)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nothing but the courage and unselfishness of individuals is ever going to make any system work properly
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -130,13 +134,13 @@
You only live once, die trying
-
-
- Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️
-
-
+
+
+
+
+
-
+
@@ -161,12 +165,12 @@
Pog
-
-
- I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems!
- Ever since I was 7, my specialization has always been in looking for problems to solve, and working with people
- to solve them.
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index aba4335..8eca2d3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,9 +1,18 @@
+@custom-media --tablet only screen and (max-width: 1200px);
+@custom-media --phone only screen and (max-width: 700px);
+@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;
@@ -18,6 +27,12 @@
h1 {
font-size: 48pt;
}
+
+ @media (--tablet) {
+ text-align: center;
+ display: flex;
+ flex-direction: column-reverse;
+ }
}
center:has(> blockquote) {
@@ -43,11 +58,10 @@ blockquote {
&+p {
text-align: right;
}
-}
-html {
- color-scheme: dark;
- font-family: system-ui;
+ @media (--phone) {
+ margin: 0px auto;
+ }
}
#page-content {
@@ -87,6 +101,20 @@ html {
&>div {
padding: 16px;
}
+
+ @media (--phone) {
+ flex-direction: column;
+ padding: 18px;
+
+ &>div {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ p {
+ font-size: 14pt;
+ }
+ }
}
.project-title {
@@ -100,6 +128,10 @@ html {
.description {
width: 100%;
+
+ @media (--phone) {
+ width: unset;
+ }
}
.links {
@@ -127,6 +159,24 @@ html {
font-weight: bold;
border-bottom: solid 6px #eee;
}
+
+ @media (--smaller-phone) {
+ flex-direction: column;
+
+ a {
+ background-color: transparent;
+ border: solid 3px #999;
+ font-size: 16pt;
+ padding: 8px;
+ }
+
+ a[aria-selected=true] {
+ background-color: #eee;
+ font-weight: bold;
+ color: black;
+ border: solid 12px #eee;
+ }
+ }
}
.figure {
@@ -193,57 +243,4 @@ a {
color: inherit;
/* no underline */
text-decoration: none;
-}
-
-
-@media only screen and (max-width: 1200px) {
- .section-header {
- text-align: center;
- display: flex;
- flex-direction: column-reverse;
- }
-}
-
-@media only screen and (max-width: 700px) {
- .description {
- width: unset;
- }
-
- .project {
- flex-direction: column;
- padding: 18px;
-
- &>div {
- padding-top: 0;
- padding-bottom: 0;
- }
-
- p {
- font-size: 14pt;
- }
- }
-
- blockquote {
- margin: 0px auto;
- }
-}
-
-@media only screen and (max-width: 500px) {
- .tab-list {
- flex-direction: column;
-
- a {
- background-color: transparent;
- border: solid 3px #999;
- font-size: 16pt;
- padding: 8px;
- }
-
- a[aria-selected=true] {
- background-color: #eee;
- font-weight: bold;
- color: black;
- border: solid 12px #eee;
- }
- }
}
\ No newline at end of file