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

46
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-bottom: 0.7rem;
}
.dismiss {
display: none;
}
}
/* mobile display */
@ -67,12 +71,15 @@
.sidenote {
box-sizing: border-box;
position: fixed;
z-index: 1;
left: 0;
bottom: 0;
width: 100vw;
padding-top: 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;
box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
display: none;
@ -81,19 +88,35 @@
.sidenote-toggle:checked + .sidenote {
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 */
@media (min-width: 52.5em) and (max-width: 70em) {
.sidenote {
padding-left: calc(50vw - 19rem);
}
}
@media (max-width: 52.5em) {
.sidenote {
padding-left: 2rem;
}
}
// /* slight tweaks for in between state */
// @media (min-width: 52.5em) and (max-width: 70em) {
// .sidenote {
// padding-left: calc(50vw - 19rem);
// }
// }
// @media (max-width: 52.5em) {
// .sidenote {
// padding-left: 2rem;
// }
// }
</style>
<script context="module">
@ -121,5 +144,6 @@
<label for={id} on:click={toggleState} class="counter"></label>
<input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" />
<span class="sidenote">
<label class="dismiss" for={id} on:click={toggleState}>&times;</label>
<slot></slot>
</span>