[c+a] New Project Logo, Style tweaks

- Mobile Style tweaks
- Sangelo's Space Logo
- Gitpot Consistency Fix
- Added Gitpot Modal

src/lib/components/Modal.svelte

@@ -60,57 +60,6 @@
 {/if}
 
 <style lang="scss">
-	.modal {
+	@import '$styles/modal-core.scss';
-		position: fixed;
+    @import '$styles/mobile/modal-core.scss';
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(0, 0, 0, 0.5);
-		backdrop-filter: blur(8px);
-		z-index: 1000;
-
-		.modal-card {
-            height: 80%;
-            width: 85%;
-			position: relative;
-			background-color: $space-gray;
-			border-radius: 2em;
-			padding: 1em;
-			box-shadow: 0px 2px 10px $space-black-modal;
-			z-index: 1001;
-            // overflow: auto;
-		}
-
-		.close-button {
-			position: absolute;
-			top: 0.9em;
-			right: 0.8em;
-			background: none;
-			border: none;
-			font-size: 20px;
-			cursor: pointer;
-			z-index: 1002;
-			color: #fff;
-		}
-
-        .error-msg {
-            justify-self: center;
-            align-self: center;
-        }
-
-        .error-icon {
-            color: #fe8484;
-        }
-	}
-    @media (max-width: 850px) {
-        .modal {
-            .modal-card {
-                height: 85%;
-            }
-        }
-    }
 </style>

src/lib/components/Projects.svelte

@@ -10,6 +10,7 @@
 	import UtilityClientModal from '$lib/modals/utilityclient.svelte';
 	import SangeloSpaceModal from '$lib/modals/sangelospace.svelte';
 	import LunivityModal from '$lib/modals/lunivity.svelte';
+	import GitpotModal from '$lib/modals/gitpot.svelte';
 	import MoreProjectsModal from '$lib/modals/more.svelte';
 	
 	let showModal = false;
@@ -73,7 +74,7 @@
 					<button class="button lunivity" on:click={() => openModalWith(LunivityModal)} />
 				</div>
 				<div class="two">
-					<a href="https://gitpot.dev" rel="noopener noreferrer" target="_blank" tabindex="-1"><button class="button gitpot" /></a>
+					<button class="button gitpot" on:click={() => openModalWith(GitpotModal)} />
 					<button class="button dashinit" on:click={() => openModalWith(DashinitModal)} />
 					<button class="button explorecraft" on:click={() => openModalWith(ExploreCraftModal)} />
 					<button class="button utility" on:click={() => openModalWith(UtilityClientModal)} />

src/lib/modals/dashinit.svelte

@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/lib/modals/explorecraft.svelte

@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/lib/modals/gitpot.svelte

@@ -0,0 +1,42 @@
+<script>
+	import IconOpenInNew from 'svelte-material-icons/OpenInNew.svelte';
+    let projectLogo = "assets/logos/gitpot-color.svg";
+    let projectReadme = "https://gitpot.dev/gitpot/.profile/raw/branch/main/README.md";
+    let projectSite = "https://gitpot.dev"
+</script>
+
+<content>
+	<div class="parent">
+        <div class="gallery">
+            <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
+		</div>
+		<div class="content">
+			<zero-md src="{projectReadme}">
+				<template>
+                    <link
+                        rel="stylesheet"
+                        href="/assets/style/markdown.css"
+                    />
+				</template>
+			</zero-md>
+		</div>
+	</div>
+	<div class="button-container">
+		<a
+			class="button"
+			target="_blank"
+			rel="noopener noreferrer"
+			href="{projectSite}"
+			tabindex="-1"
+			><button>
+				<IconOpenInNew size="1.2em" />
+				<p>Visit Project</p>
+			</button>
+		</a>
+	</div>
+</content>
+
+<style lang="scss">
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal.scss';
+</style>

src/lib/modals/lunivity.svelte

@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/lib/modals/more.svelte

@@ -6,14 +6,6 @@
 	let showModal = false;
 	let selectedModule: any = null;
 
-	function openModalWith(module: any) {
-		selectedModule = module;
-		showModal = true;
-	}
-
-	function handleModalClose() {
-		showModal = false;
-	}
 </script>
 
 <content>
@@ -26,7 +18,7 @@
 			<p class="modal-title">These are all of my projects, including the ones that didn't fit in the homepage. Take a look!</p>
 			<ul class="item-list">
 				<a class="item" href="https://gitpot.dev/sangelo/website" rel="noopener noreferrer" target="_blank" tabindex="0">
-					<div class="thumbnail"><img src="assets/logos/sangelo.svg" alt="Sangelo's Logo" /></div>
+					<div class="thumbnail"><img src="assets/logos/sangelos-space-website.svg" alt="Sangelo's Logo" /></div>
 					<div class="item-details">
 						<h2>Sangelo's Space</h2>
 						<p class="item-description">This website's repository and source code.</p>
@@ -40,7 +32,7 @@
 					</div>
 				</a>
 				<a class="item" href="https://gitpot.dev" rel="noopener noreferrer" target="_blank" tabindex="0">
-					<div class="thumbnail"><img src="assets/logos/gitpot.svg" alt="Gitpot Logo" /></div>
+					<div class="thumbnail"><img src="assets/logos/gitpot-color.svg" alt="Gitpot Logo" /></div>
 					<div class="item-details">
 						<h2>Gitpot</h2>
 						<p class="item-description">Code so sweet, bugs can't compete! A Forgejo-powered git forge which is part of the Lunivity Circle.</p>
@@ -113,7 +105,7 @@
 					<div class="thumbnail"><img src="assets/logos/not-found.svg" alt="No Project Logo" /></div>
 					<div class="item-details">
 						<h2>Default++</h2>
-						<p class="item-description">A BetterDiscord theme made to add support for userbg to another theme, which I don't remember anymore. I used this project to explore CSS' capabilities.</p>
+						<p class="item-description">A BetterDiscord theme made to add support for userbg to another theme, which I don't remember anymore.</p>
 					</div>
 				</a>
 			</ul>
@@ -127,6 +119,7 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 	@import '$styles/modal-more.scss';
+	@import '$styles/mobile/modal-more.scss';
 </style>

src/lib/modals/sangefault.svelte

@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/lib/modals/sangelospace.svelte

@@ -1,6 +1,6 @@
 <script>
 	import IconOpenInNew from 'svelte-material-icons/OpenInNew.svelte';
-    let projectLogo = "assets/logos/sangelo.svg";
+    let projectLogo = "assets/logos/sangelos-space-website.svg";
     let projectReadme = "https://gitpot.dev/sangelo/website/raw/branch/main/README.md";
     let projectSite = "https://gitpot.dev/sangelo/website";
 </script>
@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/lib/modals/utilityclient.svelte

@@ -38,5 +38,5 @@
 
 <style lang="scss">
 	@import '$styles/modal.scss';
-	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal.scss';
 </style>

src/styles/index.scss

@@ -4,6 +4,7 @@
 	width: 100%;
 	scroll-snap-type: y mandatory;
 	overflow-y: scroll;
+	overflow-x: hidden;
 }
 
 .section {
@@ -13,4 +14,5 @@
 	justify-content: center;
 	align-items: center;
 	text-align: center;
+	overflow-x: scroll;
 }

src/styles/mobile/home.scss

@@ -5,6 +5,7 @@
         text-align: center;
         user-select: text;
         cursor: text;
+        line-height: 1.2;
     }
 
     header .logo {

src/styles/mobile/modal-core.scss

@@ -0,0 +1,10 @@
+@media (max-width: 850px) {
+    .modal {
+        .modal-card {
+            height: 100%;
+            width: 100%;
+            border-radius: 0;
+            padding: 0 1em 0 1em;
+        }
+    }
+}

src/styles/mobile/modal-more.scss

@@ -0,0 +1,10 @@
+@media (max-width: 850px) {
+
+    .item-list {
+        &::before {
+            width: 100% !important;
+            bottom: 0 !important;
+            left: 0;
+        }
+    }
+}

src/styles/mobile/modal.scss

@@ -7,10 +7,13 @@
 			grid-column-gap: 0px;
 			grid-row-gap: 0px;
             overflow: scroll;
-            margin: 0 5% 15% 5%;
+            margin: 0;
+            padding: 1em;
 
             .content {
                 margin-top: 1em;
+                padding-bottom: 8em;
+                padding-right: 0em;
             }
             
             .gallery {
@@ -32,11 +35,12 @@
         }
 
         .button-container {
-            bottom: 7.5%;
+            bottom: 2%;
 
             &::before {
-                bottom: 5.9%;
+                bottom: 0;
-                width: 80%;
+                width: 100%;
+                left: 0;
             }
 
             button {

src/styles/modal-core.scss

@@ -0,0 +1,46 @@
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    z-index: 1000;
+
+    .modal-card {
+        height: 80%;
+        width: 85%;
+        position: relative;
+        background-color: $space-gray;
+        border-radius: 2em;
+        padding: 1em;
+        box-shadow: 0px 2px 10px $space-black-modal;
+        z-index: 1001;
+        // overflow: auto;
+    }
+
+    .close-button {
+        position: absolute;
+        top: 0.9em;
+        right: 0.8em;
+        background: none;
+        border: none;
+        font-size: 20px;
+        cursor: pointer;
+        z-index: 1002;
+        color: #fff;
+    }
+
+    .error-msg {
+        justify-self: center;
+        align-self: center;
+    }
+
+    .error-icon {
+        color: #fe8484;
+    }
+}

src/styles/modal-more.scss

@@ -50,13 +50,13 @@
 		position: fixed;
 		left: 9%;
 		bottom: calc(10% - 0.96em);
-		height: calc(100% + 1em); // 1em higher than the button
+		height: calc(100% + 1em);
 		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
+		z-index: 1001;
 	}
 
 	.item {
@@ -127,6 +127,7 @@
 .end-text {
 	display: flex;
 	flex-direction: column;
+	text-align: center;
 	align-items: center;
 	gap: 0.5em;
     margin: 4% auto 0 auto;

src/styles/modal.scss

@@ -17,7 +17,7 @@ content {
 		overflow: hidden;
 
 		.content {
-			padding: 0 1em 6em 0;
+			padding: 0 1em 7em 0;
 			overflow: auto;
 		}
 

src/styles/projects.scss

@@ -99,7 +99,7 @@
 			}
 	
 			.sangelo {
-				background-image: url('/assets/logos/sangelo.svg');
+				background-image: url('/assets/logos/sangelos-space-website.svg');
 			}
 	
 			.lunivity {

static/assets/logos/gitpot-color.svg

@@ -11,8 +11,8 @@
 </g>
 <defs>
 <radialGradient id="paint0_radial_313_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(74.8936 57.5745) rotate(50.4206) scale(227.744)">
-<stop offset="0.242846" stop-color="#E84E1B"/>
+<stop offset="0.242846" stop-color="#fa7042"/>
-<stop offset="1" stop-color="#A9142F"/>
+<stop offset="1" stop-color="#d23652"/>
 </radialGradient>
 <clipPath id="clip0_313_2">
 <rect width="220" height="220" fill="white"/>

static/assets/logos/sangelos-space-website.svg

@@ -0,0 +1,15 @@
+<svg width="2000" height="2000" viewBox="0 0 2000 2000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1716_198)">
+<rect width="2000" height="500" fill="#00C4FB"/>
+<rect y="500" width="2000" height="500" fill="#00B1FA"/>
+<rect y="1000" width="2000" height="500" fill="#0091FB"/>
+<rect y="1500" width="2000" height="500" fill="#0075F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1415.99 1172.65C1438.02 1116.82 1449.1 1056.98 1448.59 996.55C1448.46 981.483 1447.62 966.453 1446.06 951.513C1394.1 1035.4 1325.65 1123.52 1243.44 1206.17C1153.49 1296.61 1044.01 1385.31 936.664 1451.37C959.172 1454.92 981.948 1456.72 1004.8 1456.72C1063.58 1456.72 1121.69 1444.82 1175.81 1421.69C1229.93 1398.57 1278.99 1364.67 1320.2 1321.94C1361.41 1279.21 1393.96 1228.48 1415.99 1172.65ZM777.586 1393.36C744.712 1373.62 714.302 1349.63 687.13 1321.94C645.204 1279.21 611.805 1228.48 588.841 1172.65C565.877 1116.82 553.797 1056.98 553.291 996.55C552.785 936.12 563.862 876.281 585.891 820.451C607.92 764.621 640.469 713.892 681.679 671.162C722.889 628.431 771.954 594.535 826.072 571.41C880.19 548.284 938.3 536.381 997.087 536.381C1055.87 536.381 1114.18 548.284 1168.69 571.41C1223.19 594.535 1272.83 628.431 1314.75 671.162C1345.15 702.141 1371.06 737.325 1391.77 775.608C1347.23 891.875 1254.7 1035.19 1151.26 1136.85C1042.59 1243.52 894.675 1345.95 777.586 1393.36Z" fill="#121316"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1080.62 544.657C1130.09 553.838 1175.37 571.982 1217.24 595.964C1297.81 564.019 1358.77 555.836 1397.17 589.187C1477.46 658.886 1331.13 960.073 1151.26 1136.85C963.335 1321.31 663.975 1490.59 595.147 1390.73C558.396 1337.33 587.057 1269.9 606.337 1210.14C582.999 1161 564.925 1111.87 557.74 1056.41C424.187 1233.65 392.635 1432.13 468.452 1510.55C627.008 1674.77 998.559 1452.37 1243.44 1206.17C1536.2 911.827 1642.06 569.701 1525.71 464.965C1437.55 385.429 1177.59 466.714 1080.62 544.657Z" fill="#121316" fill-opacity="0.65"/>
+</g>
+<defs>
+<clipPath id="clip0_1716_198">
+<rect width="2000" height="2000" fill="white"/>
+</clipPath>
+</defs>
+</svg>