diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml new file mode 100644 index 0000000..be15621 --- /dev/null +++ b/.forgejo/workflows/deploy.yaml @@ -0,0 +1,26 @@ +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 new file mode 100644 index 0000000..e512881 Binary files /dev/null and b/public/img/avatars/arispacegirl.avif differ diff --git a/public/img/avatars/karakara.avif b/public/img/avatars/karakara.avif new file mode 100644 index 0000000..5fd169d Binary files /dev/null and b/public/img/avatars/karakara.avif differ diff --git a/public/img/avatars/loudar.avif b/public/img/avatars/loudar.avif new file mode 100644 index 0000000..173d50c Binary files /dev/null and b/public/img/avatars/loudar.avif differ diff --git a/public/img/avatars/vimae.avif b/public/img/avatars/vimae.avif new file mode 100644 index 0000000..ef2d2af Binary files /dev/null and b/public/img/avatars/vimae.avif differ diff --git a/public/img/avatars/zaire.avif b/public/img/avatars/zaire.avif new file mode 100644 index 0000000..86f6325 Binary files /dev/null and b/public/img/avatars/zaire.avif differ diff --git a/public/img/badges/bliss-town.svg b/public/img/badges/bliss-town.svg new file mode 100644 index 0000000..9936219 --- /dev/null +++ b/public/img/badges/bliss-town.svg @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000..c42e75c --- /dev/null +++ b/public/img/badges/trans-rights.svg @@ -0,0 +1 @@ +Trans rightsTrans rights \ No newline at end of file diff --git a/public/img/projects/campfire.avif b/public/img/projects/campfire.avif new file mode 100644 index 0000000..7f94722 Binary files /dev/null and b/public/img/projects/campfire.avif differ diff --git a/public/img/projects/campfire.png b/public/img/projects/campfire.png deleted file mode 100644 index e3e81a3..0000000 Binary files a/public/img/projects/campfire.png and /dev/null differ diff --git a/public/index.html b/public/index.html index 7cd889a..40622f3 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - + bliss town @@ -16,28 +16,27 @@ -

- +
- +
welcome to bliss.town!

@@ -52,41 +51,63 @@
- 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

-
- she/her - musician - artist -
+
+
+
+
+ julia photo +
+
+

julia

+

@karakara

+
+
+
+
+ alex photo +
+
+

alex

+

@loudar

@@ -100,12 +121,15 @@
- screenshot of the campfire timeline + screenshot of the campfire timeline
-

campfire

+

+ + campfire + +

a pretty, modern web client for the fediverse!

- campfire.bliss.town
@@ -113,8 +137,10 @@
+ + diff --git a/public/script/index.js b/public/script/index.js index 9480ea7..9794e18 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -1,13 +1,8 @@ -import { hijackClickEvent } from './main.js'; +import { hijackClickEvent } from "./main.js"; -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); +document.addEventListener("readystatechange", () => { + document.querySelectorAll(".project-item").forEach(container => { + const link = container.querySelector("a"); + hijackClickEvent(container, link); }); }); diff --git a/public/script/main.js b/public/script/main.js index 9da5ed9..c1f3aea 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 2becc64..6fd88c0 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -8,110 +8,113 @@ border-radius: 8px; overflow: clip; background-color: var(--primary); - transition: background-color .2s linear; - box-shadow: 2px 2px 2px #0004; + box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); cursor: pointer; -} -.project-item:hover { - outline: 1px solid var(--on-primary); -} -.project-item-banner { - width: 256px; - height: 128px; -} -.project-item-banner img { - width: 100%; - height: 100%; - object-fit: cover; -} + .project-item-banner { + width: 256px; + height: 128px; -.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; + 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); + } } #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); + } } -.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); +@media screen and (max-width: 900px) { + #crew-list { + #grid-template-columns: repeat(2, 1fr); + } } diff --git a/public/style/main.css b/public/style/main.css index 22c1508..68874c0 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -25,8 +25,11 @@ body { color: var(--on-background); background-color: var(--background); +} - transition: color .2s linear, background-color .2s linear; +*, *::before, *::after { + transition-property: background-color, color, box-shadow, border-color, opacity; + transition-duration: .2s; } header { @@ -38,7 +41,6 @@ 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 { @@ -78,12 +80,10 @@ main { .only-light { opacity: 1; - transition: opacity .2s linear; } .only-dark { opacity: 0; - transition: opacity .2s linear; } hr { @@ -99,14 +99,12 @@ 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 { @@ -123,7 +121,6 @@ button { border: none; border-radius: 2em; cursor: pointer; - transition: color .2s linear, background-color .2s linear, transform .1s ease-out; } button:hover { @@ -140,7 +137,6 @@ footer { padding: 1em 0; text-align: center; opacity: .5; - transition: opacity .1s ease-out; } footer:hover { @@ -153,13 +149,15 @@ footer:hover { .title-icon { position: relative; - height: 1.2em; + width: 1.3em; + height: 1.1em; margin: 0 .1em; - padding-right: 1.6em; display: inline-block; } .title-icon img { + width: 1.4em; + height: 1.4em; position: absolute; } @@ -179,3 +177,9 @@ footer:hover { box-shadow: 0 2px 8px #0c03116e; } } + +@media screen and (max-width: 500px) { + h1 { + font-size: 1.2em; + } +}