Optimize fonts: convert to WOFF2, add font-display swap
Convert FiraSans-Regular.ttf (432 KB) to WOFF2 (135 KB). Add font-display: swap to @font-face rule. Delete unused FiraCode-VariableFont_wght.ttf (256 KB).
This commit is contained in:
Tony M
parent
9de5c64704
commit
dd1855b20e
Binary file not shown.
Binary file not shown.
BIN
assets/FiraSans-Regular.woff2
Normal file
BIN
assets/FiraSans-Regular.woff2
Normal file
Binary file not shown.
217
css/styles.css
217
css/styles.css
@ -51,7 +51,8 @@ img {
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSans";
|
||||
src: url("/assets/FiraSans-Regular.ttf") format("truetype");
|
||||
src: url("/assets/FiraSans-Regular.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ---------- Medieval theme base ---------- */
|
||||
@ -526,7 +527,7 @@ h6 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
@ -538,17 +539,62 @@ h6 {
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform 0.4s ease-in-out, visibility 0s linear 0.4s;
|
||||
}
|
||||
|
||||
.sticky-bar.is-visible {
|
||||
display: flex;
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transition: transform 0.4s ease-in-out, visibility 0s linear 0s;
|
||||
}
|
||||
|
||||
@media (min-width: 961px) {
|
||||
.sticky-bar {
|
||||
display: none !important;
|
||||
max-width: 1200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 12px 24px;
|
||||
gap: 16px;
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.sticky-bar.is-visible {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.sticky-bar__label {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sticky-bar__countdown {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sticky-bar__actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sticky-bar__btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sticky-bar__cta {
|
||||
padding: 0.6rem 1.4rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sticky-bar .attendee-counter__number {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sticky-bar .attendee-counter__label {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -744,7 +790,7 @@ h6 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
z-index: 200;
|
||||
z-index: 1100;
|
||||
text-align: center;
|
||||
padding: 36px 28px 28px;
|
||||
max-width: 560px;
|
||||
@ -806,7 +852,7 @@ h6 {
|
||||
.hero__popup-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 199;
|
||||
z-index: 1099;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@ -1714,12 +1760,11 @@ footer {
|
||||
.speaker:hover .speaker__media img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.speaker__play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
@ -1732,16 +1777,52 @@ footer {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.speaker:hover .speaker__play {
|
||||
.speaker:hover .speaker__play,
|
||||
.speaker__play:focus-visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.speaker__play:hover {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
box-shadow: 0 0 0 8px rgba(52, 168, 90, 0.25);
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.speaker__play {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.speaker__video-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
color: var(--color-white);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.speaker__video-badge i {
|
||||
color: var(--color-gold-light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.speaker__body {
|
||||
@ -1804,7 +1885,7 @@ footer {
|
||||
.speaker-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1859,7 +1940,7 @@ footer {
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -4554,3 +4635,113 @@ footer {
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Tickets embed ---------- */
|
||||
.tickets-embed {
|
||||
width: 100%;
|
||||
padding: 80px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.tickets-embed__title {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tickets-embed__intro {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tickets-embed__widget {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: var(--color-white);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.tickets-embed__widget iframe {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tickets-embed__widget {
|
||||
overflow: visible;
|
||||
}
|
||||
.tickets-embed__widget iframe {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.tickets-embed__widget iframe::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tickets-embed__fallback {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tickets-embed__fallback.is-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tickets-embed__fallback p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tickets-embed__notes {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 760px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tickets-embed__notes li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tickets-embed__notes li i {
|
||||
margin-top: 4px;
|
||||
color: var(--color-primary, #579c8b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tickets-embed__notes-hero {
|
||||
border: 1px solid #d1c8e6;
|
||||
background: #f6f3fc;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.tickets-embed__notes-hero i {
|
||||
color: #8b5cf6 !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user