diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte index 8348b7d..3613230 100644 --- a/src/routes/Modal.svelte +++ b/src/routes/Modal.svelte @@ -82,7 +82,7 @@ padding: 1em; box-shadow: 0px 2px 10px $space-black-modal; z-index: 1001; - overflow: scroll; + overflow: auto; } .close-button { diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte index 3810cf8..0ea7757 100644 --- a/src/routes/Projects.svelte +++ b/src/routes/Projects.svelte @@ -6,6 +6,7 @@ import ExploreCraftModal from './modals/explorecraft.svelte'; import UtilityClientModal from './modals/utilityclient.svelte'; import SangeloSpaceModal from './modals/sangelospace.svelte' + import MoreProjectsModal from './modals/more.svelte'; // import type { SvelteComponent } from 'svelte'; let showModal = false; @@ -41,10 +42,6 @@ redirectToHome(); } } - - function openWebsite(url: string) { - goto(url); - }
Visit Project
diff --git a/src/routes/modals/explorecraft.svelte b/src/routes/modals/explorecraft.svelte index ba2cca6..cebedd9 100644 --- a/src/routes/modals/explorecraft.svelte +++ b/src/routes/modals/explorecraft.svelte @@ -15,11 +15,11 @@Visit Project
diff --git a/src/routes/modals/more.svelte b/src/routes/modals/more.svelte new file mode 100644 index 0000000..5acd37d --- /dev/null +++ b/src/routes/modals/more.svelte @@ -0,0 +1,127 @@ + + +These are all of my projects, including the ones that didn't fit in the homepage. Take a look!
+This website's repository and source code.
+Open-source by nature, self-hosted by choice. Self-hosted cloud services.
+Code so sweet, bugs can't compete! A Forgejo-powered git forge which is part of the Lunivity Circle.
+Performance oriented 1.8.9 Minecraft Client. I'm responsible for UI/UX.
+Minecraft 1.19.2 Quilt modpack oriented towards exploration. Powered by packwiz!
+A nim-powered initializer that's fast, fully configurable, and effortlessly sets up your projects.
+Open-source Minecraft resourcepack for 1.8.9
+These are projects that have either been archived or don't see a lot of work anymore.
+ +Small group of passionate devs and designers.
+Was-to-be a Minecraft minigame server network with original minigames.
+A Discord bot made to do general moderation and management tasks.
+
+
+ You've reached the end! There might be more projects coming soon 🤔...
+
Visit Project
diff --git a/src/routes/modals/sangelospace.svelte b/src/routes/modals/sangelospace.svelte index e785744..724c1e1 100644 --- a/src/routes/modals/sangelospace.svelte +++ b/src/routes/modals/sangelospace.svelte @@ -15,7 +15,7 @@Visit Project
diff --git a/src/routes/modals/utilityclient.svelte b/src/routes/modals/utilityclient.svelte index 2209e8c..ce904f2 100644 --- a/src/routes/modals/utilityclient.svelte +++ b/src/routes/modals/utilityclient.svelte @@ -1,7 +1,7 @@ @@ -15,11 +15,11 @@Visit Project
diff --git a/src/styles/mobile/modal-mobile.scss b/src/styles/mobile/modal-mobile.scss index c914b26..c7be02a 100644 --- a/src/styles/mobile/modal-mobile.scss +++ b/src/styles/mobile/modal-mobile.scss @@ -13,10 +13,17 @@ display: grid; justify-items: center; - img.project-logo { + img.project-logo, + .next-icon { height: 5em; + width: 5em; margin-right: 0; } + + .next-icon { + background-size: 2em; + margin-bottom: 1em; + } } } @@ -32,5 +39,12 @@ font-size: 20px; } } + + .item-list { + &::before { + bottom: 5.9%; + width: 80%; + } + } } } \ No newline at end of file diff --git a/src/styles/modal-more.scss b/src/styles/modal-more.scss new file mode 100644 index 0000000..7121d5a --- /dev/null +++ b/src/styles/modal-more.scss @@ -0,0 +1,127 @@ +.parent { + h1.modal-title, + h2.modal-title { + margin: 0 auto 0.2em auto; + } + + h2.modal-title { + margin-top: 1em; + } + + p.modal-title { + margin: 0 auto 2em auto; + } + + .gallery { + .next-icon { + background: url('/assets/icons/next.svg'); + background-color: $space-cadet; + background-repeat: no-repeat; + background-size: 5em; + background-position: center; + margin-right: 2em; + border-radius: 0.8em; + height: 15em; + width: 15em; + transition: ease-in-out 0.3s; + } + + .next-icon:hover { + box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5); + } + } +} + +/* Style for the item list */ +.item-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + + &::before { + content: ''; + position: fixed; + left: 9%; + bottom: calc(10% - 0.96em); + height: calc(100% + 1em); // 1em higher than the button + height: 15%; + width: 82%; + pointer-events: none; + background: linear-gradient(to top, $space-gray, transparent); + background: -webkit-linear-gradient(to top, $space-gray, transparent); + z-index: 1001; // Place it behind the button + } + + .item { + border-radius: 8px; + display: flex; + align-items: center; + margin-bottom: 1em; + width: 100%; + cursor: pointer; + transition: ease-in-out 0.03s; + color: white; + text-decoration: none; + + &::after { + content: '>'; + margin-right: 1.5em; + } + + .thumbnail { + img { + border-radius: 8px; + max-width: 4em; + max-height: 4em; + margin: 10% 2em 3.5% 10%; + } + } + + .item-details { + flex-grow: 1; + + h2 { + margin: 0 auto 0 auto; + } + + .item-description { + margin: 0 auto 0.5em auto; + } + } + } + + .item:hover { + opacity: 0.9; + } + + .item:active { + opacity: 0.8; + transform: scale(0.995); + } + + .item.inactive, + .item.inactive:hover, + .item.inactive:active { + opacity: 0.5; + transform: none; + } + + /* Add background color to every other item */ + .item:nth-child(even) { + background-color: $space-black-modal; + } + + .no-select { + user-select: none; + } +} + +.end-text { + margin: 4% auto 0 auto; + color: $star-gray; + text-align: center; +} diff --git a/src/styles/modal.scss b/src/styles/modal.scss index 8550b30..b39169c 100644 --- a/src/styles/modal.scss +++ b/src/styles/modal.scss @@ -22,8 +22,8 @@ content { img.project-logo:hover { - box-shadow: 10px 10px 71px -32px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 10px 10px 71px -32px rgba(0,0,0,0.5); + box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 10px 10px 69px -32px rgba(0,0,0,0.5); } } @@ -47,6 +47,7 @@ content { width: 82%; pointer-events: none; background: linear-gradient(to top, $space-gray, transparent); + background: -webkit-linear-gradient(to top, $space-gray, transparent); z-index: 1001; // Place it behind the button } diff --git a/static/assets/logos/runestudios.svg b/static/assets/logos/runestudios.svg new file mode 100644 index 0000000..fbc2b08 --- /dev/null +++ b/static/assets/logos/runestudios.svg @@ -0,0 +1,21 @@ + diff --git a/static/assets/logos/spacebot.svg b/static/assets/logos/spacebot.svg new file mode 100644 index 0000000..6f2a222 --- /dev/null +++ b/static/assets/logos/spacebot.svg @@ -0,0 +1,121 @@ + diff --git a/static/assets/logos/spectrumgalaxy.svg b/static/assets/logos/spectrumgalaxy.svg new file mode 100644 index 0000000..5281ec5 --- /dev/null +++ b/static/assets/logos/spectrumgalaxy.svg @@ -0,0 +1,18 @@ +