add css transitions
Prithu Goswami prithugoswami524@gmail.com
Sat, 09 May 2020 12:30:09 +0530
2 files changed,
11 insertions(+),
19 deletions(-)
M
hugo-site/static/css/blog.css
→
hugo-site/static/css/blog.css
@@ -45,16 +45,16 @@
.post-labels{ display:flex; flex-wrap: wrap; - margin-left: -0.4rem; + margin-left: -0.2rem; margin-bottom: 2rem; } .post-label{ background-color: rgba(0, 0, 0, 0.15); - border-radius: 0.4rem; - padding: 0.2rem 1rem; - font-size: 0.8rem; - margin: 0.2rem 0.4rem; + border-radius: 0.3rem; + padding: 0.2rem 0.8rem; + font-size: 0.85rem; + margin: 0.2rem 0.2rem; } .posts{@@ -111,7 +111,6 @@ margin: 0 auto;
} .post-text p{ - text-align: justify; line-height: 1.5; margin: 1rem 0; }
M
hugo-site/static/css/main.css
→
hugo-site/static/css/main.css
@@ -79,16 +79,6 @@ /* flex-flow: column; */
/* margin-top: 6rem; */ /* } */ -@keyframes btnup{ - from { - transform: translate(0, 0); - } - to { - transform: translate(0, -2px); - box-shadow: 0px 7px 7px rgba(0,0,0,0.15); - box-shadow: 0 10px 18px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08); - } -} #intro{ margin-top: 6rem;@@ -216,6 +206,7 @@
.sb{ padding: 15px; display: flex; + transition: transform 150ms ease; box-shadow: 0px 7px 10px rgba(0,0,0,0.20); border-radius: 6px; }@@ -236,7 +227,7 @@
.sb:hover{ color: #7795f8; transform: translateY(-2px); - box-shadow: 0 10px 18px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08); + box-shadow: 0 10px 18px rgba(50, 50, 93, 0.3), 0 3px 6px rgba(0, 0, 0, 0.08); } .sb:active{@@ -266,7 +257,7 @@ margin-bottom: 10rem;
} #writeups a:hover{ - color: #4ED44C + color: inherit; } .page-section h1 {@@ -308,6 +299,7 @@
.page-section .section-sub-text{ margin-left: 1.6rem; margin-bottom: 1rem; + color: rgba(0,0,0,0.7); } .section-item {@@ -327,10 +319,11 @@ display: inline-block;
padding: 1rem 2rem; border-radius: 6px; box-shadow: 0px 7px 7px rgba(0,0,0,0.15); + transition: transform 150ms ease; } .btn:hover { - transform: translateY(-1px); + transform: translateY(-2px); box-shadow: 0px 7px 7px rgba(0,0,0,0.15); box-shadow: 0 10px 18px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08); }