From 9f42452ba52d5a82e2a9d5cbd1a4f88d4df8942c Mon Sep 17 00:00:00 2001 From: m0onmo0n Date: Sun, 12 Apr 2026 17:27:20 +0200 Subject: [PATCH] Add github Actions deploy workflow --- .github/workflows/deploy.yml | 19 + index.html | 14 +- navigation.js | 27 +- style.css | 930 ++++++++++++++++++----------------- 4 files changed, 530 insertions(+), 460 deletions(-) create mode 100644 .github/workflows/deploy.yml diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..52f4091 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,19 @@ +name: Deploy to Server +on: + push: + branches: [main] +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Deploy via SSH + uses: appleboy/ssh-action@v1.0.3 + with: + host: ${{ secrets.SERVER_HOST }} + username: ${{ secrets.SERVER_USERNAME }} + key: ${{ secrets.SERVER_SSH_KEY }} + script: | + cd /home/prodesk/live-site || exit 1 + git checkout main + git pull origin main + echo "Deployed successfully" diff --git a/index.html b/index.html index 894c1b2..3280632 100644 --- a/index.html +++ b/index.html @@ -21,13 +21,11 @@ @@ -38,8 +36,8 @@

Welcome to Moon Moon's Hub

- -

I am a 28-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server. + +

I am a 29-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server. Some of these you can check out at my dashborad.

diff --git a/navigation.js b/navigation.js index 4fad527..35c20a2 100644 --- a/navigation.js +++ b/navigation.js @@ -1,14 +1,13 @@ -const nav = document.querySelector(".primary-navigation"); -const navToggle = document.querySelector(".mobile-nav-toggle"); - -navToggle.addEventListener("click", () => { - - const visiblity = nav.getAttribute("data-visible"); - if (visiblity === "false") { - nav.setAttribute("data-visible", true); - navToggle.setAttribute("aria-expanded", true); - } else { - nav.setAttribute("data-visible", false); - navToggle.setAttribute("aria-expanded", false); - } -}) +const nav = document.querySelector(".primary-navigation"); +const navToggle = document.querySelector(".mobile-nav-toggle"); + +navToggle.addEventListener("click", () => { + const visibility = nav.getAttribute("data-visible"); + if (visibility === "false") { + nav.setAttribute("data-visible", true); + navToggle.setAttribute("aria-expanded", true); + } else { + nav.setAttribute("data-visible", false); + navToggle.setAttribute("aria-expanded", false); + } +}); diff --git a/style.css b/style.css index bea4bde..b24b69e 100644 --- a/style.css +++ b/style.css @@ -1,438 +1,492 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} -/* ------------------- */ -/* Custom properties */ -/* ------------------- */ - -:root { - /* colors */ - --clr-dark: 230 35% 7%; - --clr-light: 231 77% 90%; - --clr-white: 0 0% 100%; - - /* font-sizes */ - --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem); - --fs-800: 3.5rem; - --fs-700: 1.5rem; - --fs-600: 1rem; - --fs-500: 1rem; - --fs-400: 0.9375rem; - --fs-300: 1rem; - --fs-200: 0.875rem; - - /* font-families */ - --ff-serif: "Bellefair", serif; - --ff-sans-cond: "Barlow Condensed", sans-serif; - --ff-sans-normal: "Barlow", sans-serif; -} - -@media (min-width: 35em) { - :root { - --fs-800: 5rem; - --fs-700: 2.5rem; - --fs-600: 1.5rem; - --fs-500: 1.25rem; - --fs-400: 1rem; - } -} - -@media (min-width: 45em) { - :root { - /* font-sizes */ - --fs-800: 6.25rem; - --fs-700: 3.5rem; - --fs-600: 2rem; - --fs-500: 1.75rem; - --fs-400: 1.125rem; - } -} -/* ------------------- */ -/* Reset */ -/* ------------------- */ - -/* https://piccalil.li/blog/a-modern-css-reset/ */ - -/* Box sizing */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* Reset margins */ -body, -h1, -h2, -h3, -h4, -h5, -p, -figure, -picture { - margin: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6, -p { - font-weight: 400; -} - -/* set up the body */ -body { - color: hsl( var(--clr-white) ); - font-family: var(--ff-sans-normal); - font-size: var(--fs-400); - background-color: hsl( var(--clr-dark) ); - display: flex; - justify-content: center; - align-items: center; - line-height: 1.5; - min-height: 100vh; - overflow-x: hidden; -} - -.background { - position: absolute; - top: 0; - left: 0; - width: 100%; - min-height: 100vh; - background-image: url('Assets/background.jpg'); - background-repeat: no repeat; - background-position: bottom center; - background-size: cover; - z-index: -1; - filter:blur(5px) saturate(100%) brightness(75%); -} - -/* primary-header */ - -.primary-header { - display: flex; - padding: 20px 100px; - position: fixed; - top: 0; - height: auto; - width: 100%; - align-items: center; - justify-content: space-between; - z-index: 99; -} - -.logo { - width: auto; - height: 90px; - margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem); - user-select: none; -} - - -.primary-navigation { - --gap: clamp(1.5rem, 5vw, 3.5rem); - --underline-gap: 2rem; - list-style: none; - padding: 0; - margin: 0; -} - -.primary-navigation a { - text-decoration: none; -} - -.primary-navigation a > span { - font-weight: 700; - margin-right: .5em; -} - -.mobile-nav-toggle { - display: none; -} - -@media (max-width: 35rem) { - .primary-navigation { - --underline-gap: .5rem; - position: fixed; - z-index: 1000; - inset: 0 0 0 30%; - list-style: none; - padding: min(20rem, 15vh) 2rem; - margin: 0; - flex-direction: column; - transform: translateX(100%); - transition: transform 500ms ease-in-out; - } - - .primary-navigation[data-visible="true"] { - transform: translateX(0); - } - - .primary-navigation.underline-indicators > .active { - border: 0; - } - - .mobile-nav-toggle { - display: block; - position: absolute; - z-index: 2000; - right: 1rem; - top: 2rem; - background: transparent; - background-image: url('Assets/icon-hamburger.svg'); - background-repeat: no-repeat; - background-position: center; - width: 1.5rem; - aspect-ratio: 1; - border: 0; - } - - .mobile-nav-toggle[aria-expanded="true"] { - background-image: url('Assets/icon-close.svg'); - } - - .mobile-nav-toggle:focus-visible { - outline: 5px solid white; - outline-offset: 5px; - } - -} - -@media (min-width: 35em) { - .primary-navigation { - padding-inline: clamp(3rem, 7vw, 7rem); - } -} - -@media (min-width: 35em) and (max-width: 44.999em) { - .primary-navigation a > span { - display: none; - } -} - -@media (min-width: 45em) { - - .primary-header::after { - content: ''; - display: block; - position: relative; - height: 1px; - width: 100%; - margin-right: -2.5rem; - background: hsl( var(--clr-white) / .25); - order: 1; - } - - nav { - order: 2; - } - - .primary-navigation { - margin-block: 2rem; - } - - -} - - -.primary-navigation a { - position: relative; - align-self: flex-end; - align-items: center; - font-size: 1.1em; - color: #fff; - text-decoration: none; - font-weight: 500; - margin-left: 40px; - margin: 0.5rem; - margin-inline-end: 0.5rem; -} - -.primary-navigation a::after { - content: ''; - position: absolute; - left: 0; - bottom: -6px; - width: 100%; - height: 3px; - background: #fff; - border-radius: 5px; - transform-origin: right; - transform: scaleX(0); - transition: transform .5s; -} - -.primary-navigation a:hover::after { - transform-origin: right; - transform: scaleX(1); -} - - -.content { - display: flex; - justify-content: center; - text-align: center; - width: 700px; - height: 50vh; - margin: 0 auto; -} - -.content p { - font-size: 25px; - color: #000000; - height: auto; -} - - -footer { - position: fixed; - display: flex; - bottom: 0; - align-items: center; - justify-content: center; - z-index: 99; - min-height: 10vh; - overflow-x: hidden; -} - - -.social-buttons { - display: flex; - align-self: center; - position: relative; - align-items: center; - bottom: 0; - margin: 0 auto; -} - -.social-buttons a { - position: relative; - display: inline-block; - width: 45px; - height: 45px; - background: transparent; - box-shadow: 0 4px 4px rgba(0, 0, 0, .3); - margin: 0 8px; - z-index: 1; - text-align: center; - line-height: 45px; - transition: .3s; -} - -.social-buttons a:hover{ - background: rgb(63, 9, 126); - transform: rotate(135deg); - box-shadow: 0 0 5px rgb(63, 9, 126), 0 0 10px rgb(63, 9, 126); -} - -.social-buttons a::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 40px; - height: 40px; - background: #929498; - z-index: -1; -} - -.social-buttons a i { - font-size: 18px; - color: #000; - transition: .3s; -} - -.social-buttons a i:hover { - transform: rotate(225deg); - color: rgb(63, 9, 126); - -} - -/* ------------------- */ -/* Utility classes */ -/* ------------------- */ - -/* general */ - -.flex { - display: flex; - gap: var(--gap, .5rem) -} - -.grid { - display: grid; - gap: var(--gap, 1rem); -} - -.d-block { - display: block; -} - -.flow > *:where(:not(:first-child)) { - margin-top: var(--flow-space, 1rem); -} - -.flow--space-small { - --flow-space: .75rem; -} - -.container { - padding-inline: 2em; - margin-inline: auto; - max-width: 80rem; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; /* added line */ - border: 0; -} - -.skip-to-content { - position: absolute; - z-index: 9999; - background: hsl( var(--clr-white) ); - color: hsl( var(--clr-dark) ); - padding: .5em 1em; - margin-inline: auto; - transform: translateY(-100%); - transition: transform 250ms ease-in; -} - -.skip-to-content:focus { - transform: translateY(0); -} - -.grid-container { - text-align: center; - display: grid; - place-items: center; - padding-inline: 1rem; - padding-bottom: 4rem; -} - -.grid-container p:not([class]) { - max-width: 50ch; -} - -img, -picture { - max-width: 100%; - display: block; -} \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +/* ------------------- */ +/* Custom properties */ +/* ------------------- */ + +:root { + /* colors */ + --clr-dark: 230 35% 7%; + --clr-light: 231 77% 90%; + --clr-white: 0 0% 100%; + + /* font-sizes */ + --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem); + --fs-800: 3.5rem; + --fs-700: 1.5rem; + --fs-600: 1rem; + --fs-500: 1rem; + --fs-400: 0.9375rem; + --fs-300: 1rem; + --fs-200: 0.875rem; + + /* font-families */ + --ff-serif: "Bellefair", serif; + --ff-sans-cond: "Barlow Condensed", sans-serif; + --ff-sans-normal: "Barlow", sans-serif; +} + +@media (max-width: 35rem) { + .primary-navigation { + --underline-gap: 0.35rem; + position: fixed; + z-index: 1000; + inset: 0 0 0 28%; + list-style: none; + margin: 0; + padding: min(16vh, 6rem) 1.25rem 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + + background: rgba(10, 12, 18, 0.96); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-left: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); + + transform: translateX(100%); + transition: transform 500ms ease-in-out; + } + + .primary-navigation[data-visible="true"] { + transform: translateX(0); + } + + .primary-navigation.underline-indicators > .active { + border: 0; + } + + .primary-navigation a { + display: block; + margin: 0; + padding: 0.7rem 0; + font-size: 1rem; + line-height: 1.2; + } + + .primary-navigation a > span { + margin-right: 0.4em; + } + + .primary-navigation a::after { + bottom: 0; + } + + .mobile-nav-toggle { + display: block; + position: absolute; + z-index: 2000; + right: 1rem; + top: 2rem; + background: transparent; + background-image: url("Assets/icon-hamburger.svg"); + background-repeat: no-repeat; + background-position: center; + width: 1.5rem; + aspect-ratio: 1; + border: 0; + } + + .mobile-nav-toggle[aria-expanded="true"] { + background-image: url("Assets/icon-close.svg"); + } + + .mobile-nav-toggle:focus-visible { + outline: 5px solid white; + outline-offset: 5px; + } +} + +@media (min-width: 45em) { + :root { + /* font-sizes */ + --fs-800: 6.25rem; + --fs-700: 3.5rem; + --fs-600: 2rem; + --fs-500: 1.75rem; + --fs-400: 1.125rem; + } +} +/* ------------------- */ +/* Reset */ +/* ------------------- */ + +/* https://piccalil.li/blog/a-modern-css-reset/ */ + +/* Box sizing */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reset margins */ +body, +h1, +h2, +h3, +h4, +h5, +p, +figure, +picture { + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-weight: 400; +} + +/* set up the body */ +body { + color: hsl(var(--clr-white)); + font-family: var(--ff-sans-normal); + font-size: var(--fs-400); + background-color: hsl(var(--clr-dark)); + display: flex; + justify-content: center; + align-items: center; + line-height: 1.5; + min-height: 100vh; + overflow-x: hidden; +} + +.background { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-height: 100vh; + background-image: url("Assets/background.jpg"); + background-repeat: no repeat; + background-position: bottom center; + background-size: cover; + z-index: -1; + filter: blur(5px) saturate(100%) brightness(75%); +} + +/* primary-header */ + +.primary-header { + display: flex; + padding: 20px 100px; + position: fixed; + top: 0; + height: auto; + width: 100%; + align-items: center; + justify-content: space-between; + z-index: 99; +} + +.logo { + width: auto; + height: 90px; + margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem); + user-select: none; +} + +.primary-navigation { + --gap: clamp(1.5rem, 5vw, 3.5rem); + --underline-gap: 2rem; + list-style: none; + padding: 0; + margin: 0; +} + +.primary-navigation a { + text-decoration: none; +} + +.primary-navigation a > span { + font-weight: 700; + margin-right: 0.5em; +} + +.mobile-nav-toggle { + display: none; +} + +@media (max-width: 35rem) { + .primary-navigation { + --underline-gap: 0.5rem; + position: fixed; + z-index: 1000; + inset: 0 0 0 30%; + list-style: none; + padding: min(20rem, 15vh) 2rem; + margin: 0; + flex-direction: column; + transform: translateX(100%); + transition: transform 500ms ease-in-out; + } + + .primary-navigation[data-visible="true"] { + transform: translateX(0); + } + + .primary-navigation.underline-indicators > .active { + border: 0; + } + + .mobile-nav-toggle { + display: block; + position: absolute; + z-index: 2000; + right: 1rem; + top: 2rem; + background: transparent; + background-image: url("Assets/icon-hamburger.svg"); + background-repeat: no-repeat; + background-position: center; + width: 1.5rem; + aspect-ratio: 1; + border: 0; + } + + .mobile-nav-toggle[aria-expanded="true"] { + background-image: url("Assets/icon-close.svg"); + } + + .mobile-nav-toggle:focus-visible { + outline: 5px solid white; + outline-offset: 5px; + } +} + +@media (min-width: 35em) { + .primary-navigation { + padding-inline: clamp(3rem, 7vw, 7rem); + } +} + +@media (min-width: 35em) and (max-width: 44.999em) { + .primary-navigation a > span { + display: none; + } +} + +@media (min-width: 45em) { + .primary-header::after { + content: ""; + display: block; + position: relative; + height: 1px; + width: 100%; + margin-right: -2.5rem; + background: hsl(var(--clr-white) / 0.25); + order: 1; + } + + nav { + order: 2; + } + + .primary-navigation { + margin-block: 2rem; + } +} + +.primary-navigation a { + position: relative; + align-self: flex-end; + align-items: center; + font-size: 1.1em; + color: #fff; + text-decoration: none; + font-weight: 500; + margin-left: 40px; + margin: 0.5rem; + margin-inline-end: 0.5rem; +} + +.primary-navigation a::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 3px; + background: #fff; + border-radius: 5px; + transform-origin: right; + transform: scaleX(0); + transition: transform 0.5s; +} + +.primary-navigation a:hover::after { + transform-origin: right; + transform: scaleX(1); +} + +.content { + display: flex; + justify-content: center; + text-align: center; + width: 700px; + height: 50vh; + margin: 0 auto; +} + +.content p { + font-size: 25px; + color: #000000; + height: auto; +} + +footer { + position: fixed; + display: flex; + bottom: 0; + align-items: center; + justify-content: center; + z-index: 99; + min-height: 10vh; + overflow-x: hidden; +} + +.social-buttons { + display: flex; + align-self: center; + position: relative; + align-items: center; + bottom: 0; + margin: 0 auto; +} + +.social-buttons a { + position: relative; + display: inline-block; + width: 45px; + height: 45px; + background: transparent; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); + margin: 0 8px; + z-index: 1; + text-align: center; + line-height: 45px; + transition: 0.3s; +} + +.social-buttons a:hover { + background: rgb(63, 9, 126); + transform: rotate(135deg); + box-shadow: + 0 0 5px rgb(63, 9, 126), + 0 0 10px rgb(63, 9, 126); +} + +.social-buttons a::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background: #929498; + z-index: -1; +} + +.social-buttons a i { + font-size: 18px; + color: #000; + transition: 0.3s; +} + +.social-buttons a i:hover { + transform: rotate(225deg); + color: rgb(63, 9, 126); +} + +/* ------------------- */ +/* Utility classes */ +/* ------------------- */ + +/* general */ + +.flex { + display: flex; + gap: var(--gap, 0.5rem); +} + +.grid { + display: grid; + gap: var(--gap, 1rem); +} + +.d-block { + display: block; +} + +.flow > *:where(:not(:first-child)) { + margin-top: var(--flow-space, 1rem); +} + +.flow--space-small { + --flow-space: 0.75rem; +} + +.container { + padding-inline: 2em; + margin-inline: auto; + max-width: 80rem; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; /* added line */ + border: 0; +} + +.skip-to-content { + position: absolute; + z-index: 9999; + background: hsl(var(--clr-white)); + color: hsl(var(--clr-dark)); + padding: 0.5em 1em; + margin-inline: auto; + transform: translateY(-100%); + transition: transform 250ms ease-in; +} + +.skip-to-content:focus { + transform: translateY(0); +} + +.grid-container { + text-align: center; + display: grid; + place-items: center; + padding-inline: 1rem; + padding-bottom: 4rem; +} + +.grid-container p:not([class]) { + max-width: 50ch; +} + +img, +picture { + max-width: 100%; + display: block; +}