feat: Add CSS animation site

jjswifty · Oct 1, 2022 · 8a0358a · 8a0358a
1 parent 657bb7e
commit 8a0358a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 20 deletions.
diff --git a/contents/_data/github.js b/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'),

diff --git a/contents/_includes/layouts/base.njk b/contents/_includes/layouts/base.njk
@@ -40,7 +40,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>
@@ -50,8 +51,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://github.com/phuocng" target="_blank">GitHub</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">@phuocng on GitHub</a></li>
                     </ul>
                     <div class="footer__author">
                         © 2020 — 2022<br>

diff --git a/styles/blocks/_footer.scss b/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;
 }

diff --git a/styles/blocks/_nav.scss b/styles/blocks/_nav.scss
@@ -1,21 +1,13 @@
 :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;
     display: flex;
     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;
     }
 }