180 lines
4.5 KiB
SCSS
180 lines
4.5 KiB
SCSS
.document {
|
||
--color-text: #ffffff;
|
||
--color-concept: hsl(39, 100%, 25%, 0.5);
|
||
--color-concept-hsl: 39, 100%, 25%;
|
||
--color-outline: #ffffff40;
|
||
* {
|
||
color: var(--color-text);
|
||
}
|
||
h1 {
|
||
position: relative;
|
||
width: auto;
|
||
font-size: 2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
hr {
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
border-top: 1px solid var(--color-outline);
|
||
}
|
||
> *:not(h1, hr) {
|
||
margin-left: 2rem;
|
||
}
|
||
h2 {
|
||
font-size: 1.5rem;
|
||
position: relative;
|
||
&::before {
|
||
content: '#';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -1.5rem;
|
||
font-size: 1.75rem;
|
||
color: rgb(131, 131, 131);
|
||
}
|
||
}
|
||
h3 {
|
||
font-size: 1.25rem;
|
||
}
|
||
h4 {
|
||
font-size: 1.05rem;
|
||
}
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid var(--color-outline);
|
||
}
|
||
img {
|
||
max-height: 300px;
|
||
}
|
||
a {
|
||
position: relative;
|
||
display: inline-block;
|
||
transform: translate(0, 0);
|
||
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
|
||
transition: 0.2s ease-out;
|
||
font-weight: normal;
|
||
&:hover {
|
||
transform: translate(0, -0.1rem);
|
||
}
|
||
}
|
||
blockquote {
|
||
position: relative;
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
padding: 0;
|
||
padding-left: 1rem;
|
||
color: rgb(162, 162, 162);
|
||
&::before {
|
||
content: '“';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -0.5rem;
|
||
font-size: 2rem;
|
||
color: rgb(131, 131, 131);
|
||
}
|
||
}
|
||
warn {
|
||
position: relative;
|
||
display: block;
|
||
padding: 1rem 0.7rem 0.7rem;
|
||
background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
|
||
background-origin: border-box;
|
||
box-shadow: inset 0 0 0 100vh var(--background-color);
|
||
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl),1);
|
||
border: 1px solid transparent;
|
||
border-radius: 0.5rem;
|
||
&::before {
|
||
content: 'note:warn';
|
||
position: relative;
|
||
display: block;
|
||
top: 0;
|
||
font-size: 0.8rem;
|
||
margin-bottom: -0.3rem;
|
||
transform: translate(0, -0.5rem);
|
||
text-shadow: 0 0 1rem red;
|
||
}
|
||
}
|
||
pre {
|
||
font-family: monospace;
|
||
margin-top: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
code {
|
||
display: inline-block;
|
||
padding: 0.2rem;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-radius: 0.2rem;
|
||
font-family: monospace;
|
||
}
|
||
details {
|
||
position: relative;
|
||
display: block;
|
||
border-radius: 0.5rem;
|
||
transition: 0.2s ease-out;
|
||
transition-property: height;
|
||
padding-inline-start: 0.1rem;
|
||
> summary {
|
||
position: relative;
|
||
border-radius: 0.5rem;
|
||
list-style: '＋ ' outside;
|
||
margin-left: 1rem;
|
||
padding: 0.2rem;
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
|
||
cursor: pointer;
|
||
&:hover {
|
||
text-shadow: 0 0 0.25rem rgb(255, 255, 255);
|
||
}
|
||
}
|
||
> p {
|
||
margin-block-start: 0.5rem;
|
||
margin-block-end: 0.5rem;
|
||
margin-left: 1rem;
|
||
display: none;
|
||
}
|
||
&[open] {
|
||
> summary {
|
||
list-style: '－ ' outside;
|
||
}
|
||
> p {
|
||
animation: detailsIn 0.5s ease;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
@keyframes detailsIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
table {
|
||
border-spacing: 0;
|
||
border: none;
|
||
border: 1px solid var(--color-outline);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
|
||
thead {
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
color: #fff;
|
||
}
|
||
tr {
|
||
&:nth-child(2n) {
|
||
background-color: #ffffff0d;
|
||
}
|
||
}
|
||
td,
|
||
th {
|
||
padding: 0.5em;
|
||
border-left: 1px solid var(--color-outline);
|
||
&:first-child {
|
||
border-left: none;
|
||
}
|
||
}
|
||
}
|
||
}
|