Fix Modal Scrolling and layout on mobile
This commit is contained in:
parent
9bba107ce3
commit
9bcdba5fbd
10 changed files with 29 additions and 16 deletions
|
@ -82,7 +82,7 @@
|
|||
padding: 1em;
|
||||
box-shadow: 0px 2px 10px $space-black-modal;
|
||||
z-index: 1001;
|
||||
overflow: auto;
|
||||
// overflow: auto;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -8,6 +8,10 @@
|
|||
grid-row-gap: 0px;
|
||||
overflow: scroll;
|
||||
margin: 0 5% 15% 5%;
|
||||
|
||||
.content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue