diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml deleted file mode 100644 index be15621..0000000 --- a/.forgejo/workflows/deploy.yaml +++ /dev/null @@ -1,26 +0,0 @@ -on: - push: - branches: - - main - -env: - REMOTE: ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} - PORT: ${{ secrets.SSH_PORT }} - -jobs: - deploy: - runs-on: docker - steps: - - name: Set up SSH keys - run: | - mkdir -m 700 -p ~/.ssh - echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_deploy - chmod 600 ~/.ssh/id_deploy - - - name: Pull latest branch to production - run: | - ssh-keyscan -p $PORT ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts - ssh -i ~/.ssh/id_deploy -p $PORT ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} <Made with love by Bliss Town -Trans rights - a cool source for a cool website! diff --git a/public/img/avatars/arispacegirl.avif b/public/img/avatars/arispacegirl.avif deleted file mode 100644 index e512881..0000000 Binary files a/public/img/avatars/arispacegirl.avif and /dev/null differ diff --git a/public/img/avatars/karakara.avif b/public/img/avatars/karakara.avif deleted file mode 100644 index 5fd169d..0000000 Binary files a/public/img/avatars/karakara.avif and /dev/null differ diff --git a/public/img/avatars/loudar.avif b/public/img/avatars/loudar.avif deleted file mode 100644 index 173d50c..0000000 Binary files a/public/img/avatars/loudar.avif and /dev/null differ diff --git a/public/img/avatars/vimae.avif b/public/img/avatars/vimae.avif deleted file mode 100644 index ef2d2af..0000000 Binary files a/public/img/avatars/vimae.avif and /dev/null differ diff --git a/public/img/avatars/zaire.avif b/public/img/avatars/zaire.avif deleted file mode 100644 index 86f6325..0000000 Binary files a/public/img/avatars/zaire.avif and /dev/null differ diff --git a/public/img/badges/bliss-town.svg b/public/img/badges/bliss-town.svg deleted file mode 100644 index 9936219..0000000 --- a/public/img/badges/bliss-town.svg +++ /dev/null @@ -1 +0,0 @@ -Made with love by: Bliss TownMade with love byBliss Town \ No newline at end of file diff --git a/public/img/badges/trans-rights.svg b/public/img/badges/trans-rights.svg deleted file mode 100644 index c42e75c..0000000 --- a/public/img/badges/trans-rights.svg +++ /dev/null @@ -1 +0,0 @@ -Trans rightsTrans rights \ No newline at end of file diff --git a/public/img/projects/campfire.avif b/public/img/projects/campfire.avif deleted file mode 100644 index 7f94722..0000000 Binary files a/public/img/projects/campfire.avif and /dev/null differ diff --git a/public/img/projects/campfire.png b/public/img/projects/campfire.png new file mode 100644 index 0000000..e3e81a3 Binary files /dev/null and b/public/img/projects/campfire.png differ diff --git a/public/index.html b/public/index.html index 40622f3..7cd889a 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - + bliss town @@ -16,27 +16,28 @@ +

-
+ -
+ welcome to bliss.town!

@@ -51,63 +52,41 @@
-
- ari melody photo -
+ ari melody photo

ari

@arispacegirl

+
+ she/her + developer + musician + artist +
-
- vimae photo -
+ vimae photo

mae

@vimae

+
+ she/they + musician + artist + developer +
-
- claire photo -
+ claire photo

claire

@zaire

-
-
-
-
- julia photo -
-
-

julia

-

@karakara

-
-
-
-
- alex photo -
-
-

alex

-

@loudar

+
+ she/her + musician + artist +
@@ -121,15 +100,12 @@
- screenshot of the campfire timeline + screenshot of the campfire timeline
-

- - campfire - -

+

campfire

a pretty, modern web client for the fediverse!

+ campfire.bliss.town
@@ -137,10 +113,8 @@
- - diff --git a/public/script/index.js b/public/script/index.js index 9794e18..9480ea7 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -1,8 +1,13 @@ -import { hijackClickEvent } from "./main.js"; +import { hijackClickEvent } from './main.js'; -document.addEventListener("readystatechange", () => { - document.querySelectorAll(".project-item").forEach(container => { - const link = container.querySelector("a"); - hijackClickEvent(container, link); +document.addEventListener('readystatechange', () => { + document.querySelectorAll("#project-list .project-item").forEach(projectItem => { + const link = projectItem.querySelector('a'); + hijackClickEvent(projectItem, link); + }); + + document.querySelectorAll("#crew-list .crew-item .crew-info").forEach(crewItem => { + const link = crewItem.querySelector('a.handle'); + hijackClickEvent(crewItem, link); }); }); diff --git a/public/script/main.js b/public/script/main.js index c1f3aea..9da5ed9 100644 --- a/public/script/main.js +++ b/public/script/main.js @@ -1,4 +1,4 @@ -export function hijackClickEvent(container, link) { + export function hijackClickEvent(container, link) { container.addEventListener('click', event => { if (event.target.tagName.toLowerCase() === 'a') return; event.preventDefault(); diff --git a/public/style/index.css b/public/style/index.css index 6fd88c0..2becc64 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -8,113 +8,110 @@ border-radius: 8px; overflow: clip; background-color: var(--primary); - box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); + transition: background-color .2s linear; + box-shadow: 2px 2px 2px #0004; cursor: pointer; +} +.project-item:hover { + outline: 1px solid var(--on-primary); +} - .project-item-banner { - width: 256px; - height: 128px; +.project-item-banner { + width: 256px; + height: 128px; +} +.project-item-banner img { + width: 100%; + height: 100%; + object-fit: cover; +} - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .project-info { - padding: .4em .5em; - - h3 { - margin: 0 0 .2em 0; - - a { - color: var(--on-background); - } - } - - p { - font-size: .8em; - margin: 0; - } - } - - &:hover { - outline: 1px solid var(--on-primary); - } +.project-info { + padding: .4em .5em; +} +.project-info h3 { + margin: 0; +} +.project-info p { + font-size: .8em; + margin: 0; +} +.project-info a { + font-style: italic; + font-size: .8em; + color: var(--on-background); + opacity: .75; + transition: color .2s linear; + text-decoration: none; } #crew-list { display: flex; + gap: 1em; flex-wrap: wrap; - justify-content: center; - gap: 2em 4em; - - .crew-item { - width: 10em; - display: grid; - grid-template-rows: 8em 4em; - gap: .5em; - text-align: center; - transform: rotate(2deg); - - &:nth-child(even) { - transform: rotate(-2deg); - - &:hover .crew-avatar img.avatar { - transform: rotate(-4deg); - } - } - - .crew-avatar img.avatar, .crew-info { - box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); - } - - &:hover .crew-avatar img.avatar { - transform: rotate(2deg); - } - } - - .crew-avatar { - img.avatar { - width: 8em; - height: 8em; - aspect-ratio: 1; - object-fit: cover; - border-radius: 8px; - background-color: var(--primary); - } - } - .crew-item:nth-child(even) .crew-avatar img.avatar { - transform: rotate(-2deg); - } - - .crew-info { - padding: .5em; - display: flex; - flex-direction: column; - background-color: var(--primary); - border-radius: 8px; - - h3, p { - margin: 0; - } - - h3 { - font-size: 1.5em; - } - - p { - font-size: .8em; - } - } - .crew-item:nth-child(odd) .crew-info:before { - transform: skew(0, 2deg) translate(1.3em, -.2em); - } } -@media screen and (max-width: 900px) { - #crew-list { - #grid-template-columns: repeat(2, 1fr); - } +.crew-item { + display: flex; + flex-direction: row; + gap: .5em; +} + +.crew-item img.avatar { + width: 64px; + height: 64px; + object-fit: cover; + border-radius: 8px; + background-color: #101010; +} + +.crew-item .crew-info { + padding: .5em; + background-color: var(--primary); + border-radius: 8px; + box-shadow: 2px 2px 2px #0004; + transition: background-color .2s linear; + cursor: pointer; +} +.crew-info:hover { + outline: 1px solid var(--on-primary); +} + +.crew-item h3 { + display: block; + margin: 0 0 -.2em 0; + transition: inherit; +} +.crew-item h3 a { + display: block; + color: inherit; +} + +.crew-item a.handle { + display: block; + font-style: italic; + font-size: .8em; + color: var(--on-background); + opacity: .75; + transition: color .2s linear; + text-decoration: none; +} + +.crew-item p { + margin: .2em 0; +} + +.crew-item .crew-tags { + margin: .5em 0 0 0; + display: flex; + gap: .2em; +} + +.crew-item .crew-tag { + font-size: .75em; + padding: .2em .5em; + border-radius: 4px; + text-wrap: nowrap; + color: var(--on-primary); + border: 1px solid var(--on-primary); } diff --git a/public/style/main.css b/public/style/main.css index 68874c0..22c1508 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -25,11 +25,8 @@ body { color: var(--on-background); background-color: var(--background); -} -*, *::before, *::after { - transition-property: background-color, color, box-shadow, border-color, opacity; - transition-duration: .2s; + transition: color .2s linear, background-color .2s linear; } header { @@ -41,6 +38,7 @@ header { border-bottom: 1px solid var(--primary); background-color: var(--background); z-index: 1000; + transition: background-color .2s linear, box-shadow .2s linear, border-color .2s linear; } header nav { @@ -80,10 +78,12 @@ main { .only-light { opacity: 1; + transition: opacity .2s linear; } .only-dark { opacity: 0; + transition: opacity .2s linear; } hr { @@ -99,12 +99,14 @@ hr::after { padding: 5px; color: var(--on-background); background: var(--background); + transition: color .2s linear, background-color .2s linear; } a { color: var(--on-primary); text-decoration: none; font-weight: bold; + transition: color .2s linear; } a:hover { @@ -121,6 +123,7 @@ button { border: none; border-radius: 2em; cursor: pointer; + transition: color .2s linear, background-color .2s linear, transform .1s ease-out; } button:hover { @@ -137,6 +140,7 @@ footer { padding: 1em 0; text-align: center; opacity: .5; + transition: opacity .1s ease-out; } footer:hover { @@ -149,15 +153,13 @@ footer:hover { .title-icon { position: relative; - width: 1.3em; - height: 1.1em; + height: 1.2em; margin: 0 .1em; + padding-right: 1.6em; display: inline-block; } .title-icon img { - width: 1.4em; - height: 1.4em; position: absolute; } @@ -177,9 +179,3 @@ footer:hover { box-shadow: 0 2px 8px #0c03116e; } } - -@media screen and (max-width: 500px) { - h1 { - font-size: 1.2em; - } -}