Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
151 lines (148 loc) · 11.1 KB
/
Copy pathstyle.css
File metadata and controls
151 lines (148 loc) · 11.1 KB
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
:root {
color-scheme: light;
--cream: #f5faff;
--ink: #493b53;
--muted: #938399;
--pink: #82b9ed;
--pink-deep: #5688c4;
--lilac: #a8c9ef;
--mint: #a8d8bd;
--yellow: #ffe6a5;
--mono: "Consolas", "Courier New", monospace;
--round: "Trebuchet MS", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--round); }
body::before { position: fixed; inset: 0; z-index: -2; content: ""; opacity: .32; background-image: radial-gradient(#b8cde3 1px, transparent 1.2px); background-size: 23px 23px; }
.slide { width: min(1440px, calc(100% - 76px)); height: 100vh; height: 100svh; margin: auto; display: grid; grid-template-rows: 61px minmax(0, 1fr) 37px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #ecdfeb; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: .05em; }
.brand b { color: var(--pink-deep); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; color: white; border: 3px solid white; border-radius: 50%; background: var(--pink); box-shadow: 0 3px 0 #6497cd; font: 700 23px Georgia, serif; }
.top-note, .edition, .eyebrow, .detail p, .card-top, .card-bottom, .footer { font-family: var(--mono); letter-spacing: .07em; }
.top-note { color: #788da6; font-size: 11px; }
.branch-glyph { color: var(--pink-deep); font: 19px var(--round); padding-left: 5px; }
.edition { padding: 9px 13px; color: #6485aa; border: 1px solid #c9dced; border-radius: 99px; background: #fff; font-size: 9px; }
.welcome { min-height: 0; position: relative; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(30px, 6vw, 90px); padding: 35px 6.5%; isolation: isolate; }
.welcome::before { position: absolute; z-index: -1; content: ""; width: 62%; height: 85%; top: 8%; right: -3%; border-radius: 48% 52% 40% 60% / 46% 42% 58% 54%; background: linear-gradient(135deg, #e9f4ff 0%, #edf3ff 54%, #edf8f1 100%); }
.welcome-copy { position: relative; z-index: 1; max-width: 430px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #7187a2; font-size: 10px; }
.eyebrow span { color: var(--pink); font: 20px var(--round); }
h1 { margin: 0; color: #4e405a; font-size: clamp(50px, 6.4vw, 88px); font-weight: 800; line-height: .95; letter-spacing: -.065em; }
h1 > span:first-of-type { color: var(--pink-deep); }
.title-git { width: .32em; height: .44em; margin: .05em 0 0 .12em; overflow: visible; color: #76a8da; vertical-align: top; animation: sway 4s ease-in-out infinite; }
.title-git path, .doodle-branch svg path, .avatar svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.title-git circle, .doodle-branch svg circle, .avatar svg circle { fill: currentColor; }
@keyframes sway { 50% { rotate: 8deg; scale: 1.08; } }
.subtitle { max-width: 320px; margin: 22px 0 20px; color: #71839a; font-size: 16px; line-height: 1.65; }
.mini-note { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; color: #657e9b; border: 1px solid #c9dced; border-radius: 13px; background: #fffdfb; font-size: 11px; box-shadow: 0 4px 14px #567fac0d; }
.mini-note span { color: var(--pink-deep); font-size: 17px; }
.profile-card { position: relative; z-index: 1; width: min(100%, 800px); justify-self: center; padding: clamp(24px, 3.2vw, 43px); border: 1px solid #d7e3f1; border-radius: 30px; background: linear-gradient(145deg, #fffefd, #f8fbff 60%, #f4fbf7); box-shadow: 0 22px 65px #57769b20, 0 5px 14px #57769b0c; rotate: 1deg; }
.profile-card::before { position: absolute; inset: 10px; content: ""; pointer-events: none; border: 1px dashed #d8e3ef; border-radius: 22px; }
.card-top, .card-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; color: #8294a8; font-size: 10px; }
.card-top > span:first-child { display: flex; align-items: center; gap: 5px; }
.card-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.card-top i:nth-child(2) { background: var(--yellow); }
.card-top i:nth-child(3) { background: var(--mint); margin-right: 7px; }
.card-number { color: var(--pink-deep); }
.card-content { display: flex; align-items: center; gap: clamp(18px, 3.2vw, 42px); margin: clamp(25px, 4vw, 50px) 0 clamp(24px, 3.5vw, 43px); }
.avatar-wrap { position: relative; flex: 0 0 auto; }
.avatar { width: clamp(94px, 11vw, 142px); height: clamp(94px, 11vw, 142px); display: grid; place-items: center; border: 7px solid white; border-radius: 38% 48% 42% 50%; color: #648ab5; background: linear-gradient(145deg, #fff0bb, #b9ddfa 63%, #d7cbf5); box-shadow: 0 4px 0 #c8dcee, 0 10px 23px #8ab4dc27; rotate: -5deg; }
.avatar svg { width: 47%; height: 55%; }
.avatar-caption { position: absolute; right: -38px; bottom: -8px; padding: 7px 10px; color: #597ba3; border: 2px solid white; border-radius: 50%; background: #e6f2ff; font-size: 10px; font-weight: 700; line-height: 1.05; rotate: 8deg; }
.identity { min-width: 0; }
.hello { margin: 0 0 8px; color: #8296ae; font: 10px var(--mono); letter-spacing: .12em; }
.identity h2 { margin: 0; color: #493a52; font-size: clamp(35px, 5.2vw, 65px); line-height: 1.02; letter-spacing: -.055em; overflow-wrap: anywhere; }
.cursor { color: var(--pink-deep); font-weight: 400; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.tagline { margin: 10px 0 0; color: #7f91a8; font-size: 13px; }
.tagline span { color: var(--pink); }
.details { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; padding: 20px 0; border-top: 1px dashed #d9e3ed; border-bottom: 1px dashed #d9e3ed; }
.detail { min-width: 0; display: flex; align-items: center; gap: 12px; }
.detail-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; color: #648bb8; background: #eaf3ff; font-size: 21px; }
.branch-icon { color: #648f78; background: #eaf6ee; }
.college-icon { color: #b0784e; background: #fff3dc; }
.detail p { margin: 0 0 5px; color: #a18fa5; font-size: 9px; }
.detail strong { display: block; color: #514357; font-size: clamp(13px, 1.5vw, 17px); overflow-wrap: anywhere; }
.card-bottom { padding-top: 18px; color: #6c8cae; font-size: 9px; }
.card-bottom > span:first-child { display: flex; align-items: center; gap: 7px; }
.card-bottom i { width: 8px; height: 8px; border-radius: 50%; background: #8ec7a0; box-shadow: 0 0 0 4px #8ec7a01c; }
.bottom-commit { color: var(--pink); font-size: 17px; }
.doodle { position: absolute; z-index: -1; display: grid; place-items: center; border: 1px dashed #c9d9eb; border-radius: 50%; background: #f7fbffcc; }
.doodle-branch { width: 62px; height: 62px; left: 43%; top: 14%; color: #77a9da; animation: bob 4.2s ease-in-out infinite; }
.doodle-branch svg { width: 24px; height: 30px; }
.doodle-code { width: 43px; height: 43px; left: 46%; bottom: 14%; color: #8c9ed0; font: 700 12px var(--mono); animation: bob 4.5s ease-in-out -1s infinite; }
.doodle-heart { width: 48px; height: 48px; right: 3%; top: 17%; color: #78aee1; font-size: 27px; rotate: 12deg; }
@keyframes bob { 50% { translate: 0 -7px; } }
.footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dce7f1; color: #7f91a5; font-size: 8px; }
.footer b { color: var(--pink); font: 16px var(--round); vertical-align: -2px; }
@media (max-width: 760px) {
.slide { width: calc(100% - 32px); grid-template-rows: 50px minmax(0, 1fr) 30px; }
.top-note { display: none; }
.welcome { grid-template-columns: .7fr 1.3fr; gap: 18px; padding: 20px 0; }
.welcome::before { width: 75%; right: -6%; }
.eyebrow { font-size: 8px; margin-bottom: 12px; }
h1 { font-size: clamp(38px, 7vw, 56px); }
.subtitle { margin: 13px 0; font-size: 12px; }
.mini-note { padding: 8px 10px; font-size: 9px; }
.profile-card { padding: 23px; border-radius: 24px; }
.card-content { gap: 20px; margin: 27px 0; }
.avatar { width: 88px; height: 88px; }
.avatar-caption { right: -29px; font-size: 8px; }
.identity h2 { font-size: clamp(30px, 5vw, 43px); }
.tagline { font-size: 10px; }
.details { gap: 7px; padding: 15px 0; }
.detail { gap: 7px; }
.detail-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 11px; font-size: 16px; }
.detail p { font-size: 7px; }
.detail strong { font-size: 11px; }
.card-bottom { padding-top: 13px; font-size: 7px; }
.doodle-branch { left: 40%; width: 42px; height: 42px; }
.doodle-branch svg { width: 18px; height: 22px; }
.doodle-code { left: 40%; width: 32px; height: 32px; font-size: 9px; }
.doodle-heart { width: 33px; height: 33px; font-size: 19px; }
}
@media (max-width: 520px) {
.slide { width: calc(100% - 24px); grid-template-rows: 45px minmax(0, 1fr) 26px; }
.brand { font-size: 12px; }
.brand-mark { width: 29px; height: 29px; font-size: 19px; }
.edition { padding: 7px 9px; font-size: 7px; }
.welcome { grid-template-columns: 1fr; align-content: center; gap: 17px; padding: 15px 0; }
.welcome::before { width: 100%; height: 88%; right: -8%; top: 6%; }
.welcome-copy { max-width: 100%; text-align: center; }
.eyebrow { justify-content: center; margin-bottom: 7px; }
h1 { font-size: clamp(31px, 9vw, 44px); line-height: .96; }
.subtitle { max-width: 290px; margin: 8px auto; font-size: 10px; }
.mini-note { padding: 7px 10px; font-size: 8px; }
.profile-card { width: min(100%, 470px); padding: 16px; border-radius: 19px; rotate: .5deg; }
.profile-card::before { inset: 6px; border-radius: 14px; }
.card-top { font-size: 7px; }
.card-top i { width: 6px; height: 6px; }
.card-content { gap: 15px; margin: 19px 0 16px; }
.avatar { width: 67px; height: 67px; border-width: 4px; }
.avatar-caption { right: -26px; bottom: -5px; padding: 5px 7px; font-size: 7px; }
.hello { margin-bottom: 4px; font-size: 7px; }
.identity h2 { font-size: clamp(25px, 7vw, 36px); }
.tagline { margin-top: 5px; font-size: 9px; }
.details { grid-template-columns: 1fr 1fr; gap: 11px 7px; padding: 12px 0; }
.detail { gap: 7px; }
.detail-icon { flex-basis: 29px; width: 29px; height: 29px; border-radius: 10px; font-size: 14px; }
.detail p { margin-bottom: 3px; font-size: 7px; }
.detail strong { font-size: 10px; }
.college { grid-column: 1 / -1; }
.card-bottom { padding-top: 10px; font-size: 7px; }
.doodle-branch { left: 9%; top: 34%; }
.doodle-code { left: auto; right: 4%; bottom: 5%; }
.doodle-heart { right: 6%; top: 30%; }
.footer { justify-content: center; font-size: 7px; }
.footer span:last-child { display: none; }
}
@media (max-height: 650px) and (min-width: 521px) {
.slide { grid-template-rows: 45px minmax(0, 1fr) 25px; }
.welcome { padding-top: 12px; padding-bottom: 12px; }
.profile-card { padding-top: 22px; padding-bottom: 22px; }
.card-content { margin-top: 20px; margin-bottom: 20px; }
.avatar { width: 90px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }