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">
<p class="nsfw-bar">
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>
</div>
<gallery v-show="nsfw">
<ul>
<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>
<img
src="@img/muscle-ref/muscle-ref2.png"
alt="By valentinapaz"
title="By valentinapaz"
/>
</li>
<li>
<img
src="@img/muscle-ref/muscle-ref3.png"
alt="By Marsel-Defender"
title="By Marsel-Defender"
/>
</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>
<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>
<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>
<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>
<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>
<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>
<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>
<img
src="@img/muscle-ref/muscle-ref11.jpeg"
alt="By Marsel-Defender"
title="By Marsel-Defender"
/>
</li>
</ul>
@ -631,7 +667,7 @@ export default {
font-size: 1.25em;
}
@media (min-width: 160em) {
@media (min-width: 125em) {
font-size: 1.5em;
}
}
@ -640,15 +676,23 @@ main {
h2,
h3,
p {
max-width: 40rem;
max-width: 45rem;
margin-left: auto;
margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
}
.prose {
max-width: 40rem;
max-width: 45rem;
margin-left: auto;
margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
}
@include mq-mobile {