rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

services list styling layout

This commit is contained in:
ManjaroOne666 2019-01-23 17:27:42 +00:00
parent 2ddfc51a5f
commit f2086fa315
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pages/services.vue
View File

@ -15,7 +15,7 @@
<h2 class="services-list__heading service-heading">{{ service.heading }}</h2> <h2 class="services-list__heading service-heading">{{ service.heading }}</h2>
<div class="services-list__body" v-html="service.html"> <div class="services-list__body" v-html="service.html">
</div> </div>
<a class="services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a> <a class="btn-link services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a>
</div> </div>
</li> </li>
</ul> </ul>
@ -105,9 +105,12 @@ export default {
.services-list__body { .services-list__body {
align-self: flex-end; align-self: flex-end;
@media (min-width: $bp__layout) {
text-align: right; text-align: right;
} }
} }
}
&:nth-child(even) { &:nth-child(even) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$overlap})); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$overlap}));
@ -128,6 +131,14 @@ export default {
left: auto; left: auto;
right: 2rem; right: 2rem;
} }
.services-list__body {
text-align: right;
@media (min-width: $bp__layout) {
text-align: left;
}
}
} }
&:first-child { &:first-child {
@ -157,10 +168,13 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-height: 20em; min-height: 20em;
padding-bottom: 1rem;
} }
.services-list__body { .services-list__body {
width: 100%; width: 100%;
color: $color__neutral-800;
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
width: 80%; width: 80%;