Update LittleLink profile
This commit is contained in:
BIN
Google-Calendar-Logo.png
Normal file
BIN
Google-Calendar-Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -215,6 +215,83 @@ a:hover {
|
|||||||
text-decoration-color: #67e8f9;
|
text-decoration-color: #67e8f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Meeting CTA ──────────────────────────────── */
|
||||||
|
.button-meeting {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: 18.75rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
text-decoration: none;
|
||||||
|
background: rgba(34, 211, 238, 0.06);
|
||||||
|
border: 1px solid rgba(34, 211, 238, 0.18);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
||||||
|
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
||||||
|
border-color 0.3s ease;
|
||||||
|
animation: fadeUp var(--dur) var(--ease-out-expo) 0.34s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting + .button {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting + .button::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -0.875rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 70%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: rgba(34, 211, 238, 0.35);
|
||||||
|
box-shadow: 0 4px 24px rgba(34, 211, 238, 0.1),
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
transition-duration: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting__icon {
|
||||||
|
width: 2.25rem;
|
||||||
|
height: 2.25rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting__title {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-meeting__sub {
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Buttons ──────────────────────────────────── */
|
/* ── Buttons ──────────────────────────────────── */
|
||||||
.button, button {
|
.button, button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -242,14 +319,14 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Stagger entrance delays */
|
/* Stagger entrance delays */
|
||||||
.button-stack > :nth-child(1) { animation-delay: 0.36s; }
|
.button-stack > :nth-child(1) { animation-delay: 0.34s; }
|
||||||
.button-stack > :nth-child(2) { animation-delay: 0.46s; }
|
.button-stack > :nth-child(2) { animation-delay: 0.44s; }
|
||||||
.button-stack > :nth-child(3) { animation-delay: 0.56s; }
|
.button-stack > :nth-child(3) { animation-delay: 0.52s; }
|
||||||
.button-stack > :nth-child(4) { animation-delay: 0.66s; }
|
.button-stack > :nth-child(4) { animation-delay: 0.60s; }
|
||||||
.button-stack > :nth-child(5) { animation-delay: 0.76s; }
|
.button-stack > :nth-child(5) { animation-delay: 0.68s; }
|
||||||
.button-stack > :nth-child(6) { animation-delay: 0.86s; }
|
.button-stack > :nth-child(6) { animation-delay: 0.76s; }
|
||||||
.button-stack > :nth-child(7) { animation-delay: 0.96s; }
|
.button-stack > :nth-child(7) { animation-delay: 0.84s; }
|
||||||
.button-stack > :nth-child(8) { animation-delay: 1.06s; }
|
.button-stack > :nth-child(8) { animation-delay: 0.92s; }
|
||||||
|
|
||||||
/* ── Icons ────────────────────────────────────── */
|
/* ── Icons ────────────────────────────────────── */
|
||||||
.icon {
|
.icon {
|
||||||
|
|||||||
BIN
images/icons/google-calendar.png
Normal file
BIN
images/icons/google-calendar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -44,6 +44,14 @@
|
|||||||
|
|
||||||
<div class="button-stack" role="navigation">
|
<div class="button-stack" role="navigation">
|
||||||
|
|
||||||
|
<a class="button-meeting" href="https://calendar.app.google/AKKxBk7oqPzdLXLu6" target="_blank" rel="noopener" role="button">
|
||||||
|
<img class="button-meeting__icon" aria-hidden="true" src="images/icons/google-calendar.png" alt="Google Calendar">
|
||||||
|
<div class="button-meeting__text">
|
||||||
|
<span class="button-meeting__title">Tea Chat 예약하기</span>
|
||||||
|
<span class="button-meeting__sub">In-person Meeting · Google Calendar</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a class="button button-naver-blog" href="https://blog.naver.com/ssum_official" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/naver-blog.jpg" alt="Naver Blog Logo">네이버 블로그</a>
|
<a class="button button-naver-blog" href="https://blog.naver.com/ssum_official" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/naver-blog.jpg" alt="Naver Blog Logo">네이버 블로그</a>
|
||||||
|
|
||||||
<a class="button button-linked" href="https://www.linkedin.com/in/ssum21/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
<a class="button button-linked" href="https://www.linkedin.com/in/ssum21/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user