feat: Add CSS animation site

contents/_data/github.js

@@ -15,6 +15,7 @@ module.exports = async function() {
     return {
         'oneloc': await fetchGitHubStars('phuocng/1loc'),
         'crossbrowser': await fetchGitHubStars('phuocng/cross-browser'),
+        'cssanimation': await fetchGitHubStars('phuocng/css-animation'),
         'csslayout': await fetchGitHubStars('phuocng/csslayout'),
         'frontendtips': await fetchGitHubStars('phuocng/frontend-tips'),
         'htmldom': await fetchGitHubStars('phuocng/html-dom'),

contents/_includes/layouts/base.njk

@@ -37,7 +37,8 @@
                     <div class="footer__heading">Learning resources</div>
                     <ul class="footer__list">
                         <li class="footer__item"><a class="footer__link" href="https://1loc.dev" target="_blank">1 LOC</a> ● {{ github.oneloc.stargazers }}★</li>
-                        <li class="footer__item"><a class="footer__link" href="https://crossbrowser.dev" target="_blank">Cross Browser</a> ● {{ github.crossbrowser.stargazers }}★</li>
+                        <li class="footer__item"><a class="footer__link" href="https://crossbrowser.dev" target="_blank">Cross Browser</a> ● {{ github.crossbrowser.stargazers }}★ <span class="footer__new">new</span></li>
+                        <li class="footer__item"><a class="footer__link" href="https://cssanimation.dev" target="_blank">CSS Animation</a> ● {{ github.cssanimation.stargazers }}★ <span class="footer__new">new</span></li>
                         <li class="footer__item"><a class="footer__link" href="https://csslayout.io" target="_blank">CSS Layout</a> ● {{ github.csslayout.stargazers }}★</li>
                         <li class="footer__item"><a class="footer__link" href="https://getfrontend.tips" target="_blank">Front-end Tips</a> ● {{ github.frontendtips.stargazers }}★</li>
                         <li class="footer__item"><a class="footer__link" href="https://htmldom.dev" target="_blank">HTML DOM</a> ● {{ github.htmldom.stargazers }}★</li>
@@ -47,8 +48,8 @@
                 <div class="footer__col">
                     <div class="footer__heading">Follow me</div>
                     <ul class="footer__list">
-                        <li class="footer__item"><a class="footer__link" href="https://twitter.com/nghuuphuoc" target="_blank">Twitter</a></li>
+                        <li class="footer__item"><a class="footer__link" href="https://twitter.com/nghuuphuoc" target="_blank">@nghuuphuoc on Twitter</a></li>
-                        <li class="footer__item"><a class="footer__link" href="https://github.com/phuocng" target="_blank">GitHub</a></li>
+                        <li class="footer__item"><a class="footer__link" href="https://github.com/phuocng" target="_blank">@phuocng on GitHub</a></li>
                     </ul>
                     <div class="footer__author">
                         © 2020 — 2022<br>

styles/blocks/_example.scss

@@ -1,10 +1,11 @@
 .example {
     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-    margin: 2rem 0;
+    margin: 2rem -1rem 2rem -1rem;
     position: relative;
 }
 .example--border {
-    border: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
 }
 .example__ribbon {
     height: 8rem;
@@ -22,7 +23,7 @@
     }
 }
 .example__title {
-    background-color: #818cf8;
+    background-color: #6366f1;
     color: #fff;
     position: absolute;
     padding: 0.5rem 0;

styles/blocks/_footer.scss

@@ -11,9 +11,9 @@
     margin: 2rem 0;
 }
 .footer__heading {
-    font-size: 1rem;
+    font-size: 1.25rem;
     font-weight: 600;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
 }
 .footer__list {
     list-style-type: none;
@@ -30,6 +30,16 @@
 .footer__link:hover {
     text-decoration: underline;
 }
+
+.footer__new {
+    background: #6366f1;
+    border-radius: 9999px;
+    color: #fff;
+    font-size: 0.75rem;
+    padding: 0 0.5rem;
+    margin-left: 0.5rem;
+}
+
 .footer__author {
     margin-top: 1rem;
 }

styles/blocks/_nav.scss

@@ -1,13 +1,5 @@
 :root {
-    --nav-flex-direction: column;
     --nav__item-margin-bottom: 1rem;
-    --nav__item--next-margin-left: 0;
-    --nav__item--prev-margin-right: 0;
-}
-.nav {
-    display: flex;
-    flex-direction: var(--nav-flex-direction);
-    justify-content: space-between;
 }
 .nav__item {
     align-items: center;
@@ -15,7 +7,7 @@
     justify-content: center;
     text-align: center;
 
-    background: #60a5fa;
+    background: #6366f1;
     border-radius: 0.25rem;
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
     color: #f9fafb;
@@ -25,17 +17,17 @@
     text-decoration: none;
 }
 .nav__item--next {
-    margin-left: var(--nav__item--next-margin-left);
+    margin-left: auto;
 }
 .nav__item--prev {
-    margin-right: var(--nav__item--prev-margin-right);
+    margin-right: auto;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 640px) {
+    .nav {
+        display: flex;
+    }
     :root {
-        --nav-flex-direction: row;
         --nav__item-margin-bottom: 0;
-        --nav__item--next-margin-left: 1rem;
-        --nav__item--prev-margin-right: 1rem;
     }
 }