/* — Logo — */
.logo-text {
font-family: ‘Bitcount Grid Double’, sans-serif;
font-weight: 500;
font-size: 2rem;
letter-spacing: 0.7px;
color: #ffffff;
text-decoration: none !important;
}
/* — Header — */
header {
padding: 16px 22px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
background: #000000;
color: #ffffff;
position: sticky;
top: 0;
z-index: 1000;
}
/* — Navigation links — */
header nav {
display: flex;
gap: 20px;
}
header nav a {
font-family: ‘Asimovian’, serif;
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
color: #ffffff;
position: relative;
padding: 6px 0;
}
/* — Dropdown container — */
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%; /* places below parent */
left: 0;
background: #111111;
min-width: 180px;
border-radius: 4px;
overflow: hidden;
}
.dropdown-content a {
display: block;
padding: 10px 14px;
font-size: 0.95rem;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
}
.dropdown-content a:hover {
background: #D10072; /* deep pink hover */
color: #ffffff;
}
/* — Show dropdown on hover — */
.dropdown:hover .dropdown-content {
display: block;
}
Funky Earth
🙂
Opinions
About
/* — quick theming — */
.latest-badge-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.latest-badge {
display: inline-block;
text-decoration: none;
}
/* Colors (tweak as you like) */
.latest-badge svg {
–txt: #ffffff; /* text color */
–dot: #D10072; /* center dot (deep pink) */
–speed: 8s; /* rotation speed */
}
/* Text + dot styling */
.ring-text { fill: var(–txt); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.dot { fill: var(–dot); }
/* Spin animation */
.latest-badge svg {
animation: spin var(–speed) linear infinite;
will-change: transform;
display: block;
}
/* Hover: speed up a little + tint */
.latest-badge:hover svg { animation-duration: 5s; }
.latest-badge:hover .ring-text { fill: #D10072; } /* deep pink on hover */
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
.latest-badge svg { animation: none; }
}
/* Keyframes */
@keyframes spin {
to { transform: rotate(360deg); }
}
funky earth 