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

Fix Modal Scrolling and layout on mobile

Browse source
This commit is contained in:
Sangelo 2024-01-30 12:56:28 +01:00
parent 9bba107ce3
commit 9bcdba5fbd
10 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Modal.svelte
View file

@ -82,7 +82,7 @@
padding: 1em;
box-shadow: 0px 2px 10px $space-black-modal;
z-index: 1001;
overflow: auto;
// overflow: auto;
}
.close-button {

4
src/routes/modals/dashinit.svelte
View file

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

4
src/routes/modals/explorecraft.svelte
View file

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

4
src/routes/modals/lunivity.svelte
View file

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

2
src/routes/modals/more.svelte
View file

@ -27,7 +27,7 @@
<div class="gallery">
<div class="next-icon" />
</div>
<div>
<div class="content">
<h1 class="modal-title no-select">All Projects</h1>
<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">

4
src/routes/modals/sangefault.svelte
View file

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

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

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

4
src/routes/modals/utilityclient.svelte
View file

@ -10,8 +10,8 @@
<div class="gallery">
<img src="{projectLogo}" class="project-logo" alt="Project Logo" />
</div>
<div>
<zero-md class="markdown" src="{projectReadme}">
<div class="content">
<zero-md src="{projectReadme}">
<template>
<link
rel="stylesheet"

4
src/styles/mobile/modal-mobile.scss
View file

@ -9,6 +9,10 @@
overflow: scroll;
margin: 0 5% 15% 5%;
.content {
margin-top: 1em;
}
.gallery {
display: grid;
justify-items: center;

13
src/styles/modal.scss
View file

@ -1,15 +1,25 @@
content {
// height: 100%;
height: 100%;
width: 100%;
text-align: left;
display: inline-block;
.parent {
display: grid;
height: 100%;
width: auto;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: 0.5em 4% 0 0.5em;
overflow: hidden;
margin: 0.5em 5% 6% 0.5em;
.content {
padding: 0 1em 6em 0;
overflow: auto;
}
.gallery {
img.project-logo {
@ -20,7 +30,6 @@ content {
}
}
img.project-logo: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);