diff --git a/src/assets/styles/base/_helpers.scss b/src/assets/styles/base/_helpers.scss index c456299d..fa623b32 100644 --- a/src/assets/styles/base/_helpers.scss +++ b/src/assets/styles/base/_helpers.scss @@ -116,7 +116,7 @@ box-shadow: 0 0.5rem 0 0 var(--fl-fgColor, var(--color-red-45)); inline-size: 64px; left: calc(50% - 64px / 2); - top: calc(35% - 64px / 2); + top: calc(25% - 64px / 2); } &:hover, @@ -129,7 +129,7 @@ &:active { .play-button { box-shadow: 0 6px 0 0 var(--fl-fgColor, var(--color-red-45)); - top: calc(35% - 30px); + top: calc(25% - 30px); } } } @@ -177,8 +177,8 @@ margin: calc(var(--space) / 2); } -.switcher > * > :nth-last-child(n+4), -.switcher > * > :nth-last-child(n+4) ~ * { +.switcher > * > :nth-last-child(n+5), +.switcher > * > :nth-last-child(n+5) ~ * { flex-basis: 100%; } diff --git a/src/index.md b/src/index.md index 790e86de..cc02fa5c 100644 --- a/src/index.md +++ b/src/index.md @@ -3,13 +3,16 @@ headerCallToActionText: Create createSection: title: Let's check out Weavly! cards: + - title: Customize Weavly + link: https://youtu.be/eAG2VnmCotc + image: /assets/media/customizing-weavly.png - link: https://youtu.be/zg-TmHyBx0E - title: How to create a program in Weavly + title: Create a program image: /assets/media/creating-a-program-in-weavly.png - - title: How to customize Weavly - link: https://youtu.be/eAG2VnmCotc + - title: Customize backgrounds + link: https://www.youtube.com/watch?v=3c5YW8N_Gdg image: /assets/media/customizing-weavly.png - - title: How to share a program + - title: Share a program link: https://youtu.be/VZyaot1YL9U image: /assets/media/sharing-programs.png learnSection: