add source codes
This commit is contained in:
parent
9da3d1044d
commit
1a26f0aaf4
55 changed files with 2774 additions and 0 deletions
193
src/lib/components/Markdown.css
Normal file
193
src/lib/components/Markdown.css
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
.markdown {
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@media (width>480px) {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
& h1, h2 {
|
||||
font-weight: 600;
|
||||
padding-top: 25px;
|
||||
@media(width>999px){padding-top:50px; margin-top:0;}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: '§';
|
||||
margin-right: 4px;
|
||||
width: 4px;
|
||||
color: #0000;
|
||||
background-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0 0.5em;
|
||||
line-height: 2em;
|
||||
@media (width>480px) {
|
||||
margin: 1em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
& a[target="_blank"]:after {
|
||||
content: '■';
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path d="m293.3-240q-22 0-37.67-15.67-15.67-15.67-15.67-37.67v-373.3q0-22 15.67-37.67 15.67-15.67 37.67-15.67h186.7v53.33h-186.7v373.3h373.3v-186.7h53.33v186.7q0 22-15.67 37.67-15.67 15.67-37.67 15.67zm125.3-141.3-37.33-37.33 248-248h-96v-53.33h186.7v186.7h-53.33v-96z"/></svg>');
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
& li {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
& code {
|
||||
font-size: 1rem;
|
||||
margin: 0 3px;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--code-color);
|
||||
}
|
||||
& details {
|
||||
margin: 0 0.5em;
|
||||
padding: 0 .5em;
|
||||
border: dashed #8888 2px;
|
||||
border-radius: 6px;
|
||||
line-height: 2em;
|
||||
@media (width>480px) {
|
||||
margin: 1em 2em;
|
||||
}
|
||||
}
|
||||
& pre {
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background-color: var(--code-block);
|
||||
color: #d1d9e1;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #aaa #444;
|
||||
|
||||
@media (width<480px) {
|
||||
margin: 1em 0;
|
||||
}
|
||||
& code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: #fff0;
|
||||
}
|
||||
/*
|
||||
issue: 擬似要素は { イベントリスナを設置できない, アニメーション不可, スクロールに巻き込まれる }
|
||||
&::after {
|
||||
content: '';
|
||||
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white"><path d="m200-120c-44 0-80-35.6-80-80v-560c0-44 35.6-80 80-80h167c15-47.5 62.7-80 113-80 55.7 0 100 35 114 80h166c44 0 80 35.6 80 80v560c0 44-35.6 80-80 80zm0-80h560v-560h-80v120h-400v-120h-80zm280-560c22.8 0 40-17.2 40-40 0-22.8-17.2-40-40-40-22.8 0-40 17.2-40 40 0 22.8 17.2 40 40 40z"/></svg>');
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
} */
|
||||
}
|
||||
& table {
|
||||
margin: 1rem auto;
|
||||
font-size: 1.2rem;
|
||||
border-collapse: collapse;
|
||||
|
||||
& thead tr {
|
||||
border-bottom: solid 1px var(--black-white);
|
||||
}
|
||||
& tbody tr {
|
||||
border-top: solid color-mix(in srgb, var(--black-white) 20%, var(--back-color)) 1px;
|
||||
/* background-color: color-mix(in srgb, var(--black-white) 10%, var(--back-color)); */
|
||||
}
|
||||
& td,th {
|
||||
border-width: 0px;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
& blockquote {
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 1em auto;
|
||||
border-top: 1px solid var(--font-color);
|
||||
border-bottom: 1px solid var(--font-color);
|
||||
|
||||
& p::before {
|
||||
content: '';
|
||||
mask-image: url('data:image/svg+xml;utf-8,<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m57.2 36.6-4.3 20.4h-20.5l3.8-17.9q3.3-16 10.4-23.5 7.2-7.5 16.8-8.6l-1.6 7.9q-11.7 3.2-15.7 21.7zm-31.8 0-4.3 20.4h-20.5l3.8-17.9q3.3-16 10.4-23.5 7.2-7.5 16.8-8.6l-1.6 7.9q-11.7 3.2-15.7 21.7z"/></svg>');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
background-color: var(--font-color);
|
||||
top: -.4em;
|
||||
left: -1em;
|
||||
}
|
||||
& p::after {
|
||||
content: '';
|
||||
mask-image: url('data:image/svg+xml;utf-8,<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m6.8 27.4 4.3-20.4h20.5l-3.8 17.9q-3.3 16-10.4 23.5-7.17 7.5-16.8 8.6l1.6-7.9q11.7-3.2 15.7-21.7zm31.8 0 4.3-20.4h20.5l-3.8 17.9q-3.3 16-10.4 23.5-7.17 7.5-16.8 8.6l1.6-7.9q11.7-3.2 15.7-21.7z"/></svg>');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
background-color: var(--font-color);
|
||||
bottom: -.4em;
|
||||
right: -1em;
|
||||
}
|
||||
}
|
||||
& iframe {
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
border: none;
|
||||
width: 80%;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 6px 30px var(--frame-shadow);
|
||||
max-height: 75vh;
|
||||
transition: max-height .3s ease-in-out;
|
||||
&.hide {
|
||||
max-height: 30px;
|
||||
}
|
||||
@media(width<480px) {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
box-shadow: 0px 4px 16px var(--frame-shadow);
|
||||
}
|
||||
@media(width>1280px) {
|
||||
width: 60%;
|
||||
}
|
||||
&[src*="youtube.com"]{
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
& video {
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 6px 30px var(--frame-shadow);
|
||||
@media(width<480px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media(width>1280px) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
& math[display="block"] {
|
||||
margin: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue