SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 update markup and styles

Browse source 
Minor text changes, add credits in muscle refs with hover, change responsive breakpoints and make paragraphs wider
This commit is contained in:
Sebin Nyshkim 2020-09-04 00:29:37 +02:00
parent 8b04958b1a
commit 416086df7e
1 changed files with 56 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/App.vue
View file

@ -197,51 +197,87 @@
<div class="prose" v-show="!nsfw"> <div class="prose" v-show="!nsfw">
<p class="nsfw-bar"> <p class="nsfw-bar">
Some of these additional references are NSFW. Click Some of these additional references are NSFW. Click
<a href="#" @click.prevent="nsfw = !nsfw">here</a> to see them. <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
mode.
</p> </p>
</div> </div>
<gallery v-show="nsfw"> <gallery v-show="nsfw">
<ul> <ul>
<li> <li>
<img src="@img/muscle-ref/muscle-ref1.png" alt="By Grisser" /> <img
src="@img/muscle-ref/muscle-ref1.png"
alt="By Grisser"
title="By Grisser"
/>
</li> </li>
<li> <li>
<img <img
src="@img/muscle-ref/muscle-ref2.png" src="@img/muscle-ref/muscle-ref2.png"
alt="By valentinapaz" alt="By valentinapaz"
title="By valentinapaz"
/> />
</li> </li>
<li> <li>
<img <img
src="@img/muscle-ref/muscle-ref3.png" src="@img/muscle-ref/muscle-ref3.png"
alt="By Marsel-Defender" alt="By Marsel-Defender"
title="By Marsel-Defender"
/> />
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref4.png" alt="By SirBoburto" /> <img
src="@img/muscle-ref/muscle-ref4.png"
alt="By SirBoburto"
title="By SirBoburto"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref5.jpeg" alt="By SexMuffin" /> <img
src="@img/muscle-ref/muscle-ref5.jpeg"
alt="By SexMuffin"
title="By SexMuffin"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref6.png" alt="By Knuxlight" /> <img
src="@img/muscle-ref/muscle-ref6.png"
alt="By Knuxlight"
title="By Knuxlight"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref7.png" alt="By ShoNuff44" /> <img
src="@img/muscle-ref/muscle-ref7.png"
alt="By ShoNuff44"
title="By ShoNuff44"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref8.jpeg" alt="By j-cock" /> <img
src="@img/muscle-ref/muscle-ref8.jpeg"
alt="By j-cock"
title="By j-cock"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref9.jpeg" alt="By j-cock" /> <img
src="@img/muscle-ref/muscle-ref9.jpeg"
alt="By j-cock"
title="By j-cock"
/>
</li> </li>
<li> <li>
<img src="@img/muscle-ref/muscle-ref10.png" alt="By j-cock" /> <img
src="@img/muscle-ref/muscle-ref10.png"
alt="By j-cock"
title="By j-cock"
/>
</li> </li>
<li> <li>
<img <img
src="@img/muscle-ref/muscle-ref11.jpeg" src="@img/muscle-ref/muscle-ref11.jpeg"
alt="By Marsel-Defender" alt="By Marsel-Defender"
title="By Marsel-Defender"
/> />
</li> </li>
</ul> </ul>
@ -631,7 +667,7 @@ export default {
font-size: 1.25em; font-size: 1.25em;
} }
@media (min-width: 160em) { @media (min-width: 125em) {
font-size: 1.5em; font-size: 1.5em;
} }
} }
@ -640,15 +676,23 @@ main {
h2, h2,
h3, h3,
p { p {
max-width: 40rem; max-width: 45rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
} }
.prose { .prose {
max-width: 40rem; max-width: 45rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
} }
@include mq-mobile { @include mq-mobile {