Something went wrong. Try again.
Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language shlf.space
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126header { position: sticky; top: 0; z-index: 50; padding-inline: 1rem;}
.header-nav { display: flex; justify-content: space-between; align-items: center; margin-inline: auto; max-width: 80rem; height: 4rem;}
.header-logo { font-size: 1.25rem; font-weight: 500; text-decoration: none; color: inherit;
span { font-size: 0.75rem; font-weight: 400; font-style: italic; }}
.header-dropdown { position: relative; display: inline-block;
summary { cursor: pointer; list-style: none; display: flex; gap: 0.375rem; align-items: center; font-family: var(--font-primary); }
& > div { position: absolute; right: 0; margin-top: 0.5rem; padding: 0.25rem; display: flex; flex-direction: column; width: 12rem; background: var(--color-tonal); border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
hr { border: none; border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); margin: 0.25rem 0; } }}
.header-avatar { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--color-dim);
svg { height: 1rem; width: 1rem; }}
.header-nav-link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--color-dim);
&:hover { color: var(--color-ink); }}
.header-signin { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-ink);
&:hover { color: var(--color-dim); }}
.header-username { font-size: 0.875rem; font-weight: 500;}
.header-dropdown-btn { display: block; width: 100%; padding: 0.4rem 0.75rem; font-size: 0.8125rem; font-family: var(--font-primary); color: var(--color-dim); text-decoration: none; text-align: left; background: none; border: none; cursor: pointer;
&:hover { background: var(--color-hover); color: var(--color-ink); }}