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

postページのcss最適化

Browse source
This commit is contained in:
moris 2025-03-10 10:10:58 +09:00
parent 27d843fa0e
commit 0848df1bf3
1 changed files with 52 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -104,9 +104,9 @@
<Metadata meta={data.metadata}/> <Metadata meta={data.metadata}/>
{#if thumbnail} {#if thumbnail}
<img class="thumbnail" alt="thumbnail" src="{thumbnail}" style='view-transition-name: {data.id}'/> <img class="thumbnail image" alt="thumbnail" src="{thumbnail}"/>
{:else if data.metadata.emoji} {:else if data.metadata.emoji}
<div class='thumbnail emoji'><img class="emoji" alt="thumbnail" src="{data.metadata.emoji}" style='view-transition-name: {data.id}'/></div> <img class="thumbnail emoji" alt="thumbnail" src="{data.metadata.emoji}"/>
{/if} {/if}
<div class='markdown'> <div class='markdown'>
@ -115,10 +115,10 @@
<div class="data"> <div class="data">
{#if PUBLIC_POST_REPO} {#if PUBLIC_POST_REPO}
<div><a target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a></div> <a class="dataItem" target="_blank" href="{PUBLIC_POST_REPO}/commits/branch/main/Posts/{data.id}.md">History</a>
<div class="spacer"></div> <div class="spacer"></div>
{/if} {/if}
<div><a target="_blank" href="raw.md">Raw file</a></div> <a class="dataItem" target="_blank" href="raw.md">Raw file</a>
</div> </div>
</article> </article>
@ -155,12 +155,12 @@
margin-inline: auto; margin-inline: auto;
flex-grow: 1; flex-grow: 1;
padding: 0 20px; padding: 0 20px;
border-radius: 8px;
@media(width<640px){ @media(width<640px){
padding: 0; padding: 0;
} }
}
& .title { .title {
font-size: 2em; font-size: 2em;
font-weight: 600; font-weight: 600;
margin: 8px; margin: 8px;
@ -170,50 +170,45 @@
font-size: 1.5em; font-size: 1.5em;
} }
} }
& .thumbnail {
.thumbnail {
display: block; display: block;
margin-inline: auto; margin-inline: auto;
max-height: 50vh; max-height: 50vh;
} }
& img.thumbnail { .image {
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
} }
& .emoji.thumbnail { .emoji {
width: 30%; width: 30%;
max-width: 30vh; max-width: 25vh;
aspect-ratio: 1; margin-block: 5vh;
@media(width<480px) {
width: 50%;
} }
& img {
margin: 15%; .markdown {
}
}
& .markdown {
margin: 1em; margin: 1em;
@media (width<480px) {margin: 8px;} @media (width<480px) {margin: 8px;}
} }
& .data {
.data {
display: flex; display: flex;
padding: 8px; padding: 8px;
margin: 12px; margin: 12px;
border-top: solid 1px; border-top: solid 1px;
font-weight: 200; font-weight: 200;
font-size: 1.2em; font-size: 1.2em;
& .spacer {
width: 1px;
background-color: var(--font-color);
box-sizing: border-box;
margin: 2px 6px;
} }
& a { .dataItem {
margin: 4px; color: currentColor;
color: var(--font-color);
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
} }
.spacer {
width: 1px;
margin: 2px .5em;
background-color: currentColor;
} }
}
aside { aside {
@media (width<1000px) { @media (width<1000px) {