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;
+}