mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-05 13:47:25 +02:00
Code Issues Releases Wiki Activity

feat: Add CSS animation site

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-10-01 18:04:08 +07:00
parent e1443c51b8
commit 8dafde2799
5 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
contents/_data/github.js
View File

@@ -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'),

7
contents/_includes/layouts/base.njk
View File

@@ -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://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>

7
styles/blocks/_example.scss
View File

@@ -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;

14
styles/blocks/_footer.scss
View File

@@ -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;
}

22
styles/blocks/_nav.scss
View File

@@ -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;
}
}