Skip to content

Instantly share code, notes, and snippets.

@hans-min
Last active June 4, 2024 17:39
Show Gist options
  • Save hans-min/030019393cce4bf0af4c1874a26cc33b to your computer and use it in GitHub Desktop.
Save hans-min/030019393cce4bf0af4c1874a26cc33b to your computer and use it in GitHub Desktop.
css elements from a bunch of classless CSS library that I like
# from chota
.nav {
display: flex;
min-height: 5rem;
align-items: stretch;
}
.nav-center,
.nav-left,
.nav-right {
display: flex;
flex: 1;
}
.nav-left {
justify-content: flex-start;
}
.nav-right {
justify-content: flex-end;
}
.nav-center {
justify-content: center;
}
@media screen and (max-width: 480px) {
.nav {
flex-direction: column;
}
.nav-center,
.nav-left,
.nav-right {
flex-wrap: wrap;
justify-content: center;
}
}
.nav a {
text-decoration: none;
display: flex;
align-items: center;
padding: 1rem 2rem;
color: #3f4144;
}
.nav [aria-current="page"]:not(.button),
.nav .active:not(.button) {
color: #000; /* fallback */
color: #14854f;
}
:root {
--secondary-fore-color: #444;
--blockquote-color: #f57c00;
--secondary-border-color: #ddd;
--universal-margin: 0.5rem;
--universal-padding: 0.5rem;
--universal-border-radius: 0.125rem;
--preformatted: #ccc;
}
# from mini.css
blockquote {
display: block;
position: relative;
font-style: italic;
color: var(--secondary-fore-color);
margin: var(--universal-margin);
padding: calc(3 * var(--universal-padding));
border: 0.0625rem solid var(--secondary-border-color);
border-left: 0.375rem solid var(--blockquote-color);
border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
}
blockquote:before {
position: absolute;
top: calc(0rem - var(--universal-padding));
left: 0;
font-family: sans-serif;
font-size: 3rem;
font-weight: 700;
content: "\201c";
color: var(--blockquote-color);
}
blockquote[cite]:after {
font-style: normal;
font-size: 0.75em;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
header.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
top: 0;
}
footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
bottom: 0;
}
#from simple.css
kbd {
color: var(--preformatted);
border: 1px solid var(--preformatted);
border-bottom: 3px solid var(--preformatted);
border-radius: var(--standard-border-radius);
padding: 0.1rem 0.4rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment