fix: small support for mobile devices
This commit is contained in:
@@ -127,7 +127,7 @@
|
||||
{#if browser}
|
||||
<article
|
||||
class="reader"
|
||||
style={`--bg-color: rgba(${color.map((c) => c * 255).join(',')}, 0.7)`}
|
||||
style={`--bg-color: rgba(${color.map((c) => c * 255).join(',')}, 0.8)`}
|
||||
bind:this={reader}
|
||||
on:scroll={() => {
|
||||
scroll = reader.scrollTop;
|
||||
@@ -184,20 +184,26 @@
|
||||
|
||||
.reader {
|
||||
display: flex;
|
||||
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
|
||||
justify-content: center;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: var(--bg-color);
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: calc(1080px / 2.5);
|
||||
min-height: calc(1920px / 2.5);
|
||||
width: calc(1080px / 3.5);
|
||||
min-height: calc(1920px / 3.5);
|
||||
@media (min-width: 1024px) {
|
||||
width: calc(1080px / 2.5);
|
||||
min-height: calc(1920px / 2.5);
|
||||
}
|
||||
background-color: #fff;
|
||||
|
||||
display: flex;
|
||||
@@ -206,6 +212,8 @@
|
||||
|
||||
padding: 0;
|
||||
|
||||
box-shadow: 0rem 1rem 1rem 0rem rgba(0, 0, 0, 0.5);
|
||||
|
||||
& form {
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
@@ -230,5 +238,11 @@
|
||||
aside {
|
||||
padding: 1rem;
|
||||
width: 20vw;
|
||||
& * {
|
||||
font-size: 0.8rem !important;
|
||||
@media (min-width: 1024px) {
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user