170 lines
2.3 KiB
CSS
170 lines
2.3 KiB
CSS
@import url("reset.css");
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
height: 100%;
|
|
}
|
|
|
|
.canvas-mode {
|
|
overflow: hidden;
|
|
& #toggle-physics {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.tldraw__editor {
|
|
overscroll-behavior: none;
|
|
position: fixed;
|
|
inset: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tl-background {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tlui-debug-panel {
|
|
display: none;
|
|
}
|
|
|
|
.overflowing {
|
|
box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
background-color: white;
|
|
}
|
|
|
|
/* Non-tldraw stuff */
|
|
|
|
main {
|
|
max-width: 60em;
|
|
margin: 0 auto;
|
|
padding-left: 4em;
|
|
padding-right: 4em;
|
|
padding-top: 3em;
|
|
padding-bottom: 3em;
|
|
font-family: "Recursive";
|
|
font-variation-settings: "MONO" 1;
|
|
font-variation-settings: "CASL" 1;
|
|
color: #24292e;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 2em;
|
|
font-size: 1.5rem;
|
|
font-variation-settings: "MONO" 1;
|
|
font-variation-settings: "CASL" 1;
|
|
}
|
|
|
|
i {
|
|
font-variation-settings: "slnt" -15;
|
|
}
|
|
|
|
p {
|
|
font-family: Recursive;
|
|
margin-top: 0;
|
|
margin-bottom: 0.6em;
|
|
font-size: 1.1em;
|
|
font-variation-settings: "wght" 350;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
p a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dinkus {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
margin-top: 2em;
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
ol {
|
|
padding-left: 0;
|
|
font-size: 1rem;
|
|
& li::marker {
|
|
color: rgba(0, 0, 0, 0.322);
|
|
}
|
|
}
|
|
|
|
#toggle-physics,
|
|
#toggle-canvas {
|
|
position: fixed;
|
|
z-index: 999;
|
|
right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0.25;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
& img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
#toggle-canvas {
|
|
top: 10px;
|
|
}
|
|
#toggle-physics {
|
|
top: 60px;
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
main {
|
|
padding: 2em;
|
|
}
|
|
header {
|
|
margin-bottom: 1em;
|
|
}
|
|
ol {
|
|
list-style-position: inside;
|
|
}
|
|
}
|
|
|
|
.tl-html-layer {
|
|
font-family: "Recursive";
|
|
font-variation-settings: "MONO" 1;
|
|
font-variation-settings: "CASL" 1;
|
|
& h1,
|
|
p,
|
|
span,
|
|
header,
|
|
ul,
|
|
ol {
|
|
margin: 0;
|
|
}
|
|
|
|
& header {
|
|
font-size: 1.5rem;
|
|
}
|
|
& p {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
.transparent {
|
|
opacity: 0 !important;
|
|
transition: opacity 0.25s ease-in-out;
|
|
}
|