sangelo/website
sangelo/website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[c+a] New Project Logo, Style tweaks

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/lib/components/Modal.svelte
View file

@ -60,57 +60,6 @@
{/if}
<style lang="scss">
.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;
}
}
@media (max-width: 850px) {
.modal {
.modal-card {
height: 85%;
}
}
}
@import '$styles/modal-core.scss';
@import '$styles/mobile/modal-core.scss';
</style>

3
src/lib/components/Projects.svelte
View file

@ -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)} />

2
src/lib/modals/dashinit.svelte
View file

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

2
src/lib/modals/explorecraft.svelte
View file

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

42
src/lib/modals/gitpot.svelte Normal file
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>

2
src/lib/modals/lunivity.svelte
View file

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

17
src/lib/modals/more.svelte
View file

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

2
src/lib/modals/sangefault.svelte
View file

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

4
src/lib/modals/sangelospace.svelte
View file

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

2
src/lib/modals/utilityclient.svelte
View file

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

2
src/styles/index.scss
View file

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

1
src/styles/mobile/home.scss
View file

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

10
src/styles/mobile/modal-core.scss Normal file
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;
}
}
}

10
src/styles/mobile/modal-more.scss Normal file
View file

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

12
src/styles/mobile/modal-mobile.scss → src/styles/mobile/modal.scss
View file

@ -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%;
width: 80%;
bottom: 0;
width: 100%;
left: 0;
}
button {

46
src/styles/modal-core.scss Normal file
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;
}
}

5
src/styles/modal-more.scss
View file

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

2
src/styles/modal.scss
View file

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

2
src/styles/projects.scss
View file

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

BIN
static/assets/img/gitpot-dark.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
static/assets/img/gitpot-light.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

4
static/assets/logos/gitpot-color.svg
View file

@ -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="1" stop-color="#A9142F"/>
<stop offset="0.242846" stop-color="#fa7042"/>
<stop offset="1" stop-color="#d23652"/>
</radialGradient>
<clipPath id="clip0_313_2">
<rect width="220" height="220" fill="white"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

15
static/assets/logos/sangelos-space-website.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB