Fix Modal Scrolling and layout on mobile

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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