Beta5
New code structure Added profiles Fixed skin pulldown Added rain images
This commit is contained in:
fraxle
@@ -0,0 +1,197 @@
|
||||
/* ════════════════════════════════════════════════════════════════════════
|
||||
header.css — Page header: title wordmark, UTCI dial, and search box.
|
||||
════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
|
||||
/* ── 4. HEADER (title + dial + search, three-column grid) ──────────── */
|
||||
|
||||
.utci-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr; /* title | dial | search */
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 2px solid #c9b08a;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* The big "SUNScope" wordmark */
|
||||
.utci-title {
|
||||
font-family: Fraunces, serif;
|
||||
font-weight: 900;
|
||||
font-variation-settings: "opsz" 144;
|
||||
font-size: clamp(48px, 6vw, 80px); /* responsive — scales with viewport */
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.03em;
|
||||
color: #1e1208;
|
||||
}
|
||||
|
||||
.utci-title .title-sun { /* "SUN" — bold + brass */
|
||||
color: #c8922a;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.utci-title .title-scope { /* "Scope" — italic */
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
color: #1e1208;
|
||||
}
|
||||
|
||||
.utci-title .title-beta { /* the small "beta" subscript */
|
||||
font-size: 0.38em;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
vertical-align: super;
|
||||
color: #b09870;
|
||||
}
|
||||
|
||||
/* "See the sun the way..." */
|
||||
.utci-tagline {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-size: 17px;
|
||||
color: #7a5c2a;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* The credits line under the tagline */
|
||||
.utci-subtitle {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
margin-top: 10px;
|
||||
color: #b09870;
|
||||
}
|
||||
|
||||
.utci-subtitle-link { /* The "UTCI" link in the credits */
|
||||
color: #c8922a;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(200, 146, 42, 0.4);
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.utci-subtitle-link:hover {
|
||||
color: #a06e18;
|
||||
border-bottom-color: #a06e18;
|
||||
}
|
||||
|
||||
/* "↳ Pangbourne, Berkshire" */
|
||||
.utci-current-loc {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
margin-top: 12px;
|
||||
color: #1e1208;
|
||||
}
|
||||
|
||||
/* The lat/lon next to the location */
|
||||
.utci-loc-coords {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
color: #b09870;
|
||||
margin-left: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* The big UTCI dial in the middle of the header.
|
||||
Change width/height to resize it. */
|
||||
.scope-ring {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* The search box on the right of the header */
|
||||
.utci-search-wrap {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.utci-search-label {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: #b09870;
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.utci-search {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1.5px solid #c9b08a;
|
||||
background: #fffcf2;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #1e1208;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.utci-search::placeholder {
|
||||
color: #c0a880;
|
||||
}
|
||||
|
||||
.utci-search:focus {
|
||||
border-color: #c8922a;
|
||||
box-shadow: 0 0 0 3px #c8922a24; /* brass glow when focused */
|
||||
}
|
||||
|
||||
/* The dropdown list of city results */
|
||||
.utci-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fffcf2;
|
||||
border: 1.5px solid #c9b08a;
|
||||
border-top: none;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
box-shadow: 0 8px 24px #6446141f;
|
||||
}
|
||||
|
||||
.utci-result {
|
||||
padding: 11px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #ede4cc;
|
||||
font-size: 14px;
|
||||
transition: background 0.12s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.utci-result:hover {
|
||||
background: #fef3dc;
|
||||
border-left-color: #c8922a; /* brass marker on hover */
|
||||
}
|
||||
|
||||
/* The "GB · 51.48°, -1.07°" line under each city */
|
||||
.utci-result-meta {
|
||||
font-size: 11px;
|
||||
color: #b09870;
|
||||
font-family: JetBrains Mono, monospace;
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.utci-searching {
|
||||
margin-top: 7px;
|
||||
font-size: 10px;
|
||||
color: #b09870;
|
||||
font-family: JetBrains Mono, monospace;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
Reference in New Issue
Block a user