host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit services illustration size and add prefixed text-decoration property for WebKit compatibility

Browse source
This commit is contained in:
Paul Nicoué 2023-03-20 09:59:39 +01:00
parent e2b1064b1e
commit 1d185e9ff4
2 changed files with 9 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/styles/main.scss
View file

@ -140,6 +140,7 @@ em {
a { a {
color: var(--secondary-color); color: var(--secondary-color);
text-decoration: underline var(--primary-accent-color); text-decoration: underline var(--primary-accent-color);
-webkit-text-decoration: underline var(--primary-accent-color); // Prefixed shorthand for WebKit (Safari) compatibility
border-radius: 2px; border-radius: 2px;
transition: color 200ms ease-in-out; transition: color 200ms ease-in-out;

18
components/ServicesSection.vue
View file

@ -90,10 +90,10 @@
.services { .services {
display: grid; display: grid;
grid: grid:
'illustration' auto '. illustration .' auto
'title' auto 'title title title' auto
'list' auto 'list list list' auto
/ 1fr; / 1fr minmax(15rem, 30rem) 1fr;
place-content: start; place-content: start;
place-items: start; place-items: start;
row-gap: 2rem; row-gap: 2rem;
@ -102,11 +102,9 @@
&__illustration { &__illustration {
grid-area: illustration; grid-area: illustration;
width: 100%; width: 100%;
display: flex;
justify-content: center;
svg { svg {
max-width: 30rem; width: 100%;
height: auto; height: auto;
} }
} }
@ -129,9 +127,9 @@
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $tablet-media-query) {
grid: grid:
'title illustration' auto 'title . illustration .' auto
'list list' auto 'list list list list' auto
/ auto 1fr; / auto 1fr minmax(15rem, 30rem) 1fr;
&__title { &__title {
place-self: end start; place-self: end start;