-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
45 lines (23 loc) · 3.16 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
* {margin:0;padding:0;text-decoration:0;box-sizing:border-box;transition:all ease-in-out .5s}
a:not([class]) {text-decoration-skip-ink:auto}
img,picture {max-width:100%;display:block;line-height:0}
button,input,select,textarea {font:inherit}
button {all:unset;cursor:pointer}
:root {--p-x:var(--p-dark);--h1-x:var(--h1-dark);--card-x:var(--card-dark);--bg-x:var(--bg-dark);--hover-x:var(--hover-light);--p-light:hsl(220, 15%, 55%);--h1-light:hsl(218, 44%, 22%);--hover-light:hsla(217, 95%, 56%, 1);--bg-light:hsla(212, 45%, 89%, 1);--bg-1-light:#D5E1EF;--bg-2-light:#A3C8F2;--card-light:rgb(255, 255, 255);--card-1-light:hsla(0, 0%, 100%, 1);--card-2-light:hsla(0, 0%, 100%, 0.6);--p-dark:rgb(228, 216, 232);--h1-dark:rgb(255, 249, 255);--hover-dark:hsla(173, 100%, 72%, 1);--bg-dark:hsla(240, 23%, 12%, 1);--bg-1-dark:hsla(233, 32%, 10%, 1);--bg-2-dark:hsla(259, 60%, 15%, 1);--card-dark:rgb(61, 51, 85);--card-1-dark:hsla(258, 81%, 65%, 1);--card-2-dark:hsla(258, 75%, 56%, 0.9)}
.light-theme {--p-x:var(--p-light);--h1-x:var(--h1-light);--card-x:var(--card-light);background:linear-gradient(180deg,var(--bg-1-light) 0,var(--bg-2-light) 100%)}
#icon {max-width:50%;margin-bottom:16px;transition:all ease-in-out .7s}
#icon:hover {transform:scale(1.03);opacity:.7;transition:all ease-in-out .5s}
.icons {display:flex;justify-content:center;align-items:center;padding:0 30px;border-radius:12px}
.attribution {font-size:.65rem;display:flex;justify-content:center;align-items:center;padding:0 30px;border-radius:12px}
* {box-sizing:border-box;margin:0;padding:0;text-decoration:none}
body {font-family:Outfit,sans-serif;display:flex;justify-content:center;align-items:center;width:100%;min-height:100vh;background:linear-gradient(180deg,var(--bg-1-dark) 0,var(--bg-2-dark) 100%)}
.container {display:flex;justify-content:center;flex-wrap:wrap;max-width:320px;padding:16px;margin:24px;border-radius:20px;box-shadow:5px 5px 15px 5px rgba(0,0,0,.02);background:var(--card-x)}
.card {display:block;margin:auto;overflow:hidden;max-width:100%;border-radius:10px;transform:scale(1);background-color:var(--hover-x)}
img {max-width:100%;display:block;width:100%;height:auto;transition:ease-in-out .5s}
h1 {font-size:1.4rem;text-align:center;color:var(--h1-x);display:block;padding-bottom:24px;margin:0 auto;padding-top:36px;transition:ease-in-out .5s}
h2 {font-size:1rem;font-weight:700}
p {font-size:1rem;line-height:1.4;text-align:center;color:var(--p-x);padding-bottom:24px;margin:0 24px}
@media (max-width:275px) {h1{font-size:1.4rem;padding-top:24px}p{font-size:.85rem;padding-bottom:16px;margin:0}img{margin:0 auto;width:100%;height:100%}}
@media (hover:hover) {.container:hover{filter:saturate(1.5);box-shadow:5px 5px 15px 5px rgba(0,46,87,.118)}h1:hover{color:var(--hover-x);transition:ease-in-out .3s}h1{transition:ease-in-out .3s}.card img:hover{transform:rotate(90deg) scale(125%);transition:ease-in-out .5s}.card img{transition:ease-in-out .7s}}
.container,.container img,h1,p {-webkit-animation:slideIn 1s ease-in;animation:slideIn 1s ease-out}
@keyframes slideIn {0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateX(0);opacity:1}}