diff --git a/public/about.php b/public/about.php
index 4791029..4851da7 100644
--- a/public/about.php
+++ b/public/about.php
@@ -85,12 +85,12 @@
all() as $lang => $bytes): ?>
-
+
get_percent_str($lang) ?>
get_bytes_str($lang) ?>
-
diff --git a/public/assets/css/pages/about.css b/public/assets/css/pages/about.css
index 42f855a..8907ddd 100644
--- a/public/assets/css/pages/about.css
+++ b/public/assets/css/pages/about.css
@@ -4,14 +4,23 @@
--primer-color-accent: 148, 255, 21;
--color-accent: rgb(var(--primer-color-accent));
- --color-go: rgb(0, 173, 216);
- --color-php: rgb(79, 93, 149);
- --color-css: rgb(86, 61, 124);
- --color-html: rgb(227, 76, 38);
- --color-shell: rgb(137, 224, 81);
- --color-python: rgb(53, 114, 165);
- --color-typescript: rgb(49, 120, 198);
- --color-javascript: rgb(241, 224, 90);
+ --primer-color-go: 0, 173, 216;
+ --primer-color-php: 79, 93, 149;
+ --primer-color-css: 86, 61, 124;
+ --primer-color-html: 227, 76, 38;
+ --primer-color-shell: 137, 224, 81;
+ --primer-color-python: 53, 114, 165;
+ --primer-color-typescript: 49, 120, 198;
+ --primer-color-javascript: 241, 224, 90;
+
+ --color-go: rgb(var(--primer-color-go));
+ --color-php: rgb(var(--primer-color-php));
+ --color-css: rgb(var(--primer-color-css));
+ --color-html: rgb(var(--primer-color-html));
+ --color-shell: rgb(var(--primer-color-shell));
+ --color-python: rgb(var(--primer-color-python));
+ --color-typescript: rgb(var(--primer-color-typescript));
+ --color-javascript: rgb(var(--primer-color-javascript));
}
vv-shell {
@@ -183,18 +192,17 @@ section.languages languages-list language-item {
background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%);
}
-section.languages languages-list language-item p.lang {
- font-size: 1.3em;
- font-weight: 900;
- color: var(--color-php);
-}
-
section.languages languages-list language-item svg {
width: 2em;
margin-left: auto;
transform: rotate(-90deg);
}
+section.languages button p.lang {
+ font-size: 1.3em;
+ font-weight: 900;
+}
+
/* # Interests */
div.interests {
diff --git a/public/assets/css/pages/contact.css b/public/assets/css/pages/contact.css
index 1e8adda..bb7b2ff 100644
--- a/public/assets/css/pages/contact.css
+++ b/public/assets/css/pages/contact.css
@@ -108,6 +108,10 @@ section.pgp .buttons {
gap: var(--padding);
}
+section.pgp .buttons .download svg.chevron {
+ transform: unset;
+}
+
/* ## Contact form */
section.form :is(input, textarea) {
diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css
index 56d0743..e940adf 100644
--- a/public/assets/css/shell.css
+++ b/public/assets/css/shell.css
@@ -101,35 +101,43 @@ button {
/* ### Inline */
button.inline {
- padding: calc(var(--padding) / 2) var(--padding);
- color: white;
- border: solid 2px white;
- border-radius: 6px;
+ gap: 10px;
+ display: flex;
+ border-radius: 7px;
+ align-items: center;
+ fill: var(--color-accent);
+ padding: calc(var(--padding) / 1.5);
+ background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(var(--primer-color-accent), .1) 100%);
+}
+
+button.inline:not(.solid) {
+ box-shadow:
+ 0 0 0 2px rgba(var(--primer-color-accent), .1),
+ 10px 7px 40px 3px rgba(var(--primer-color-accent), .06)
+ ;
+}
+
+button.inline svg {
+ height: 1em;
+}
+
+button.inline svg:last-child {
+ width: 1.5em;
+ margin-left: auto;
+}
+
+button.inline svg.chevron:last-child {
+ transform: rotate(-90deg);
}
button.inline.solid {
+ fill: black;
color: black;
+ border: solid 2px rgba(var(--primer-color-accent), 1);
border-color: var(--color-accent);
background-color: var(--color-accent);
}
-a > button::after {
- content: " ➜";
-}
-
-/* ### Text links */
-
-a[target="_blank"] > button::after,
-:is(h1, h2, h3, p, li) > a[target="_blank"]::after {
- content: " ↑";
- color: var(--color-accent);
- white-space: nowrap;
-}
-
-a > button.solid:not(:hover)::after {
- color: black;
-}
-
/* ## Header */
header {
@@ -327,7 +335,8 @@ search-results .info :is(svg, img) {
/* # Components */
button.inline {
- transition: 200ms background-color, 200ms border-color, 200ms color;
+ transition-duration: 300ms;
+ transition-property: background-color, border-color, box-shadow, color, fill;
}
button:hover {
@@ -335,8 +344,19 @@ search-results .info :is(svg, img) {
background-color: rgba(255, 255, 255, .1);
}
- button.solid:hover {
+ button.inline:hover {
+ fill: var(--color-accent);
color: var(--color-accent);
+ }
+
+ button.inline:not(.solid):hover {
+ box-shadow:
+ 0 0 0 2px rgba(var(--primer-color-accent), 1),
+ 10px 7px 30px 3px rgba(var(--primer-color-accent), .07)
+ ;
+ }
+
+ button.solid:hover {
border-color: rgba(var(--primer-color-accent), .2);
background-color: rgba(var(--primer-color-accent), .2);
box-shadow: 0 -10px 20px 10px rgba(var(--primer-color-accent), .05);
diff --git a/public/assets/media/icons/chevron.svg b/public/assets/media/icons/chevron.svg
index 056ac62..5f067d3 100644
--- a/public/assets/media/icons/chevron.svg
+++ b/public/assets/media/icons/chevron.svg
@@ -1 +1 @@
-Please consider encrypting your message with my PGP key, even if your message doesn't contain anything sensitive. The key is also available via WKD , and is listed on the openPGP key server for victor@vlw.se.
Fingerprint for victor@vlw.seDCE987311CB5D2A252F58951D0AD730E1057DFC6
@@ -129,7 +135,11 @@
your message (required)
- send
+
+
+ send message
+
+
diff --git a/public/work.php b/public/work.php
index 00dc63a..85f7bb8 100644
--- a/public/work.php
+++ b/public/work.php
@@ -50,7 +50,10 @@
get_summary("vlw/vegvisir") ?>
@@ -62,7 +65,10 @@
get_summary("vlw/reflect") ?>
@@ -75,7 +81,10 @@
vlw.se
Can I put my own website here, is that cheating? Maybe, but I think this site counts as the most important thing I've personally created. I've only used my own libraries and frameworks to create this website, so it kind of works as a live demonstration of many of my web projects bundled together.
@@ -85,7 +94,10 @@
Silly dabbles
I create silly things for fun to challenge myself sometimes, and putting them all on the timeline is not right. So I made an appropriately-themed and named page to highlight most of my "what if I could" projects.
@@ -95,7 +107,11 @@
vlw/php-mysql
get_summary("vlw/php-mysql") ?>
@@ -105,7 +121,10 @@
Website for iCellate Medical
get_summary("icellate/website") ?>
@@ -115,7 +134,10 @@
Modernizing GeneMate by iCellate
get_summary("icellate/genemate") ?>
@@ -125,7 +147,10 @@
Custom pages for Deltaco AB
get_summary("deltaco/asyncapp") ?>
@@ -134,5 +159,8 @@
\ No newline at end of file
+
+ view full timeline
+
+ This timeline has most but not all of my FOSS software. If you want to see a list of all things I've created for the free software world, check out my repos on Codeberg or Forgejo.