jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sidenote dismiss button

Browse Source
This commit is contained in:
Joseph Montanaro 2022-06-16 20:00:09 -07:00
parent 0d6542289e
commit e0c2dc2ab8
1 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/lib/Sidenote.svelte
View File

@ -51,6 +51,10 @@
margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
} }
.dismiss {
display: none;
}
} }
/* mobile display */ /* mobile display */
@ -67,12 +71,15 @@
.sidenote { .sidenote {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
z-index: 1;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-right: 2rem; --pad: max(1rem, calc(50vw - var(--content-width) / 2));
padding-left: var(--pad);
padding-right: var(--pad);
background-color: #fff; background-color: #fff;
box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
display: none; display: none;
@ -81,19 +88,35 @@
.sidenote-toggle:checked + .sidenote { .sidenote-toggle:checked + .sidenote {
display: block; display: block;
} }
.dismiss {
position: absolute;
right: 1.5rem;
top: -0.2rem;
font-size: 1.25rem;
color: #8c0606;
cursor: pointer;
&:hover {
transform: scale(1.1);
font-weight: 800;
}
}
} }
/* slight tweaks for in between state */ // /* slight tweaks for in between state */
@media (min-width: 52.5em) and (max-width: 70em) { // @media (min-width: 52.5em) and (max-width: 70em) {
.sidenote { // .sidenote {
padding-left: calc(50vw - 19rem); // padding-left: calc(50vw - 19rem);
} // }
} // }
@media (max-width: 52.5em) { // @media (max-width: 52.5em) {
.sidenote { // .sidenote {
padding-left: 2rem; // padding-left: 2rem;
} // }
} // }
</style> </style>
<script context="module"> <script context="module">
@ -121,5 +144,6 @@
<label for={id} on:click={toggleState} class="counter"></label> <label for={id} on:click={toggleState} class="counter"></label>
<input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" /> <input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" />
<span class="sidenote"> <span class="sidenote">
<label class="dismiss" for={id} on:click={toggleState}>&times;</label>
<slot></slot> <slot></slot>
</span> </span>