[c+a] New Project Logo, Style tweaks

- Mobile Style tweaks
- Sangelo's Space Logo
- Gitpot Consistency Fix
- Added Gitpot Modal
This commit is contained in:
Sangelo 2024-03-13 12:12:04 +01:00
parent 11023ac3ea
commit 7c94894dbd
23 changed files with 157 additions and 83 deletions

View file

@ -60,57 +60,6 @@
{/if} {/if}
<style lang="scss"> <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> </style>

View file

@ -10,6 +10,7 @@
import UtilityClientModal from '$lib/modals/utilityclient.svelte'; import UtilityClientModal from '$lib/modals/utilityclient.svelte';
import SangeloSpaceModal from '$lib/modals/sangelospace.svelte'; import SangeloSpaceModal from '$lib/modals/sangelospace.svelte';
import LunivityModal from '$lib/modals/lunivity.svelte'; import LunivityModal from '$lib/modals/lunivity.svelte';
import GitpotModal from '$lib/modals/gitpot.svelte';
import MoreProjectsModal from '$lib/modals/more.svelte'; import MoreProjectsModal from '$lib/modals/more.svelte';
let showModal = false; let showModal = false;
@ -73,7 +74,7 @@
<button class="button lunivity" on:click={() => openModalWith(LunivityModal)} /> <button class="button lunivity" on:click={() => openModalWith(LunivityModal)} />
</div> </div>
<div class="two"> <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 dashinit" on:click={() => openModalWith(DashinitModal)} />
<button class="button explorecraft" on:click={() => openModalWith(ExploreCraftModal)} /> <button class="button explorecraft" on:click={() => openModalWith(ExploreCraftModal)} />
<button class="button utility" on:click={() => openModalWith(UtilityClientModal)} /> <button class="button utility" on:click={() => openModalWith(UtilityClientModal)} />

View file

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

View file

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

View file

@ -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>

View file

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

View file

@ -6,14 +6,6 @@
let showModal = false; let showModal = false;
let selectedModule: any = null; let selectedModule: any = null;
function openModalWith(module: any) {
selectedModule = module;
showModal = true;
}
function handleModalClose() {
showModal = false;
}
</script> </script>
<content> <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> <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"> <ul class="item-list">
<a class="item" href="https://gitpot.dev/sangelo/website" rel="noopener noreferrer" target="_blank" tabindex="0"> <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"> <div class="item-details">
<h2>Sangelo's Space</h2> <h2>Sangelo's Space</h2>
<p class="item-description">This website's repository and source code.</p> <p class="item-description">This website's repository and source code.</p>
@ -40,7 +32,7 @@
</div> </div>
</a> </a>
<a class="item" href="https://gitpot.dev" rel="noopener noreferrer" target="_blank" tabindex="0"> <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"> <div class="item-details">
<h2>Gitpot</h2> <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> <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="thumbnail"><img src="assets/logos/not-found.svg" alt="No Project Logo" /></div>
<div class="item-details"> <div class="item-details">
<h2>Default++</h2> <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> </div>
</a> </a>
</ul> </ul>
@ -127,6 +119,7 @@
<style lang="scss"> <style lang="scss">
@import '$styles/modal.scss'; @import '$styles/modal.scss';
@import '$styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal.scss';
@import '$styles/modal-more.scss'; @import '$styles/modal-more.scss';
@import '$styles/mobile/modal-more.scss';
</style> </style>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -50,13 +50,13 @@
position: fixed; position: fixed;
left: 9%; left: 9%;
bottom: calc(10% - 0.96em); bottom: calc(10% - 0.96em);
height: calc(100% + 1em); // 1em higher than the button height: calc(100% + 1em);
height: 15%; height: 15%;
width: 82%; width: 82%;
pointer-events: none; pointer-events: none;
background: linear-gradient(to top, $space-gray, transparent); background: linear-gradient(to top, $space-gray, transparent);
background: -webkit-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 { .item {
@ -127,6 +127,7 @@
.end-text { .end-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
margin: 4% auto 0 auto; margin: 4% auto 0 auto;

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

View file

@ -11,8 +11,8 @@
</g> </g>
<defs> <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)"> <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> </radialGradient>
<clipPath id="clip0_313_2"> <clipPath id="clip0_313_2">
<rect width="220" height="220" fill="white"/> <rect width="220" height="220" fill="white"/>

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 2.1 KiB