VuePress Tutorial 20 - Pagination Links Styling

In this video we're going to begin the process of styling the Prev and Next pagination links that we added to each of the pagination pages in the previous tutorial!!! 🐵

To implement the styling we'll be adding the following CSS classes pagination, left-arrow, and right-arrow to the IndexPost layout component.

The pagination class will be used to properly space out the Prev and Next pagination links.

The left-arrow and right-arrow classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global vp-icon component.

📗 VuePress: https://vuepress.vuejs.org/

🦍 Pagination Links Styling Post: https://www.codemonkeys.tech/vuepress-tutorial-20/

🐒 Code Monkeys Blog Tutorials Repo: https://github.com/codemonkeysio/code-monkeys-blog-tutorials

🐵 Code Monkeys Blog Repo: https://github.com/codemonkeysio/code-monkeys-blog

-----------------------------------------------------------------------------------------

Timestamps
00:00 - Intro
00:24 - Overview
00:46 - What We're Doing
02:24 - Pagination Class
08:14 - Downloading the Icons
09:35 - Updating the Icons Directory
10:20 - Displaying the Icons
14:22 - Styling the Icons
17:38 - Optimizing the Icons
20:03 - Recap
20:54 - Outro

-----------------------------------------------------------------------------------------

SOCIAL MEDIA
🐒 Blog: https://www.codemonkeys.tech/
💻 GitHub: https://github.com/codemonkeysio
🤖 Discord: https://discord.gg/mh9rQmwJ8H
📨 Telegram: https://t.me/codemonkeystech
🐦 Twitter: https://twitter.com/codemonkeystech
🐸 Let's Gab: https://gab.com/codemonkeys
💡 Speak your mind on Minds: https://www.minds.com/codemonkeys/
👷‍♂️ LinkedIn: https://www.linkedin.com/in/jason-chiarulli-321358143/

-----------------------------------------------------------------------------------------

BUY US A BANANA 🍌
💵 SubscribeStar: https://www.subscribestar.com/code-monkeys
💳 Patreon: https://www.patreon.com/codemonkeys?fan_landing=true
💰 PayPal: https://paypal.me/codemonkeystech?locale.x=en_US
💲 Venmo: https://venmo.com/u/codemonkeys
🍌 Sponsor Code Monkeys: https://github.com/sponsors/codemonkeysio
❤️ Sponsor Jay the Code Monkey: https://github.com/sponsors/jchiarulli

🤖 Instead of using the static Bitcoin address below, improve your privacy by using a PayNym: https://paynym.is/

PayNym: https://paynym.is/+blackviolet838

Payment Code: PM8TJf7wdgnWbAdnwbgTMY8ic3UZ2LFvkSJxuFtK4JwXSKFmqys1iL964UX55fGKfqZXfTdVjK1Z3FwbgTPbmEp2ErGPVaXZds8v9YUBxgfqvoQUBF2X

₿ Bitcoin (BTC): bc1q5rsnx4d320jtuvdf0k8kkmgjzfnac95gphyznn

Monero (XMR): 89DRhZtKrfPS5yuMcFoivqBCuXs19qRnChXn5VKGeYDG457WHFcGoWbQXqW92Gah2mZFChLCkV5Cfc6zcwFwmz9zN8GRuDF

-----------------------------------------------------------------------------------------

MUSIC 🎵

Special thanks to Bizonacci II, Trigger Haven, and Chief Bizzo for the song!!! 🐵

AC/BC - You Shook Me All Night Long (PALEOROCK CLASSIC): https://www.youtube.com/watch?v=28--5aEV1Z0

#CodeMonkeys #VuePress #Software

Видео VuePress Tutorial 20 - Pagination Links Styling канала Code Monkeys