moris/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

サイドバーのcss調整

Browse source
This commit is contained in:
moris 2025-03-10 10:04:26 +09:00
parent 5503f812ec
commit 27d843fa0e
1 changed files with 36 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/routes/(DefaultStyle)/post/[slug]/+page.svelte
View file

@ -124,21 +124,18 @@
<aside>
<div id='side'>
<div>
<Profile></Profile>
<div class='sidecontent'>
<Profile/>
</div>
<div>
<div class='sidecontent'>
<Share url={canonical} title={data.metadata.title} />
</div>
{#if data.toc.length}
<div id='toc'>
<div class='sidecontent'>
<Toc toclist={data.toc}></Toc>
</div>
{/if}
<div class="mi-posts js">
<iframe src="https://mi.moris.day/embed/user-timeline/9w7bhjzt2b5z0001?maxHeight=320&rounded=false&border=false" title="moris's posts" loading="lazy" style="border:none; width:100%; height:100%;"></iframe>
</div>
</div>
<iframe class='miframe sidecontent js' src="https://mi.moris.day/embed/user-timeline/9w7bhjzt2b5z0001?maxHeight=320&rounded=false&border=false" title="moris's posts" loading="lazy" style="border:none;"></iframe>
</aside>
</div>
@ -151,38 +148,6 @@
margin: 25px 2.5%;
}
}
aside {
min-width: 280px;
max-width: 320px;
margin: 25px 0 40px 0;
@media (width<1000px) {
display: none;
}
& #side {
display: flex;
flex-direction: column;
row-gap: 20px;
position: sticky;
top: 60px;
}
& #side>* {
background-color: var(--grid-color);
transition: background-color 1s;
border-radius: 8px;
box-shadow: 0 0 6px #1111;
overflow: hidden;
}
& .mi-posts {
height: 320px;
@media(prefers-color-scheme: dark) {
border: solid #444 1px;
}
}
}
article {
min-width: 0;
@ -249,4 +214,35 @@
}
}
}
aside {
@media (width<1000px) {
display: none;
}
min-width: 280px;
max-width: 320px;
margin: 25px 0;
}
#side {
display: flex;
flex-direction: column;
row-gap: 20px;
position: sticky;
top: 60px;
}
.sidecontent {
background-color: var(--grid-color);
transition: background-color 1s;
border-radius: 8px;
box-shadow: 0 0 6px #1111;
overflow: hidden;
}
.miframe {
height: 320px;
@media(prefers-color-scheme: dark) {
border: solid #444 1px;
}
}
</style>