feat: style layers, imports and nesting
This commit is contained in:
Cory Dransfeldt
parent
8e5d497389
commit
d4c87b8abe
58 changed files with 968 additions and 981 deletions
565
src/assets/styles/base/index.css
Normal file
565
src/assets/styles/base/index.css
Normal file
|
|
@ -0,0 +1,565 @@
|
|||
body,
|
||||
html {
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
background: var(--background-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-lightest);
|
||||
background: var(--selection-color);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-lightest);
|
||||
background: var(--selection-color);
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
body,
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: var(--sizing-xs);
|
||||
height: var(--sizing-xs);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: var(--sizing-md);
|
||||
height: var(--sizing-md);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
line-height: var(--line-height-lg);
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-lg);
|
||||
padding-left: var(--sizing-lg);
|
||||
color: var(--gray-dark);
|
||||
border-left: var(--sizing-xs) solid var(--gray-dark);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
:is(body, html, nav .tags, nav .search) svg {
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > svg {
|
||||
margin-right: var(--sizing-xs);
|
||||
stroke-width: var(--stroke-width-bold) !important;
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
strong,
|
||||
blockquote {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
em,
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a,
|
||||
.active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main__title, footer nav:last-child) a:hover,
|
||||
:is(.main__title, footer nav:last-child) a:focus,
|
||||
:is(.main__title, footer nav:last-child) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition-property: color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
:is(
|
||||
a:has(svg):hover,
|
||||
a:has(svg):active,
|
||||
a:has(svg):focus,
|
||||
button:has(svg):hover,
|
||||
button:has(svg):active,
|
||||
button:has(svg):focus
|
||||
) svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
h1 { font-size: var(--font-size-3xl) }
|
||||
h2 { font-size: var(--font-size-2xl) }
|
||||
h3 { font-size: var(--font-size-xl) }
|
||||
h4 { font-size: var(--font-size-lg) }
|
||||
h5 { font-size: var(--font-size-base) }
|
||||
h6 { font-size: var(--font-size-sm) }
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--gray-light);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
hr.large__spacing {
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--rounded);
|
||||
border: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:is(th, td):not(:last-child) {
|
||||
border-right: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th,
|
||||
tr:not(:last-child) {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--sizing-sm);
|
||||
min-width: calc(var(--sizing-3xl) * 2);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-weight-bold);
|
||||
background-color: var(--gray-lighter);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.main__title {
|
||||
width: 100%;
|
||||
padding-top: var(--sizing-3xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& h1 {
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
padding-bottom: var(--sizing-md);
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* nav */
|
||||
nav.menu__primary {
|
||||
gap: var(--sizing-md);
|
||||
|
||||
& a,
|
||||
& span {
|
||||
height: var(--sizing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
:is(a:hover, a:active, a:focus) svg,
|
||||
a svg:hover,
|
||||
a svg:active,
|
||||
a svg:focus,
|
||||
button:hover svg,
|
||||
button svg:hover,
|
||||
.icon--bold > svg {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
.active,
|
||||
.active svg {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
a svg,
|
||||
nav .active svg,
|
||||
nav ul li .active svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
.active:hover svg,
|
||||
.active svg:hover,
|
||||
nav ul li .active:hover svg,
|
||||
nav ul li .active svg:hover {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
/* social icons */
|
||||
.at svg { stroke: var(--brand-hey) !important; }
|
||||
.brand-github svg { stroke: var(--brand-github) !important; }
|
||||
.brand-npm svg { stroke: var(--brand-npm) !important; }
|
||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
||||
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
||||
.books svg { stroke: var(--brand-storygraph) !important; }
|
||||
.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
||||
.heart-handshake svg { stroke: var(--webrings) !important; }
|
||||
.rss svg { stroke: var(--brand-rss) !important; }
|
||||
|
||||
/* layout */
|
||||
.default__wrapper {
|
||||
padding-top: var(--sizing-3xl);
|
||||
}
|
||||
|
||||
.main__wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 0%;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* now */
|
||||
.now__topper,
|
||||
article {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
.now__topper p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
footer nav:first-child {
|
||||
gap: var(--sizing-sm);
|
||||
margin-top: var(--sizing-3xl);
|
||||
padding: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
width: 100%;
|
||||
|
||||
& svg {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
width: var(--sizing-xl);
|
||||
height: var(--sizing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
footer nav:last-child {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding-bottom: var(--sizing-3xl);
|
||||
|
||||
& span:not(.active) {
|
||||
margin-left: var(--sizing-xs);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
:is(.main__title, footer nav:last-child) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--sizing-xs);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: var(--sizing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
}
|
||||
|
||||
/* articles */
|
||||
article {
|
||||
& h2 {
|
||||
color: var(--text-color);
|
||||
line-height: var(--line-height-2xl);
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
& a h2:hover,
|
||||
& a h2:focus,
|
||||
& a h2:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
& [rel="author"],
|
||||
& time {
|
||||
color: var(--gray-dark);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
|
||||
& [rel="author"] {
|
||||
margin-bottom: var(--sizing-xs);
|
||||
}
|
||||
|
||||
& p:first-of-type {
|
||||
margin-top: var(--sizing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-bottom: var(--sizing-lg);
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
svg {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
.icon--small > svg {
|
||||
width: var(--sizing-lg);
|
||||
height: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.icon--center__vertical > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
margin: var(--sizing-base) 0;
|
||||
padding-left: var(--sizing-base);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: var(--sizing-lg);
|
||||
margin-bottom: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.link__list {
|
||||
margin-bottom: 0;
|
||||
|
||||
& li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link__list--header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image__banner {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
height: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* pages */
|
||||
.page__header {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* selects */
|
||||
select {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
color: var(--color-lightest);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.select,
|
||||
select-pagination {
|
||||
border-radius: var(--rounded-full);
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 var(--sizing-lg);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
-moz-text-align-last: center;
|
||||
}
|
||||
|
||||
.select,
|
||||
.select select,
|
||||
select-pagination,
|
||||
select-pagination select {
|
||||
min-width: calc(var(--sizing-3xl) * 4);
|
||||
padding-top: var(--sizing-xs);
|
||||
padding-bottom: var(--sizing-xs);
|
||||
}
|
||||
|
||||
.select select,
|
||||
.select::after,
|
||||
select-pagination select,
|
||||
select-pagination::after {
|
||||
grid-area: select;
|
||||
}
|
||||
|
||||
.select::after,
|
||||
select-pagination::after {
|
||||
content: '';
|
||||
width: var(--sizing-md);
|
||||
height: var(--sizing-sm);
|
||||
display: inline-block;
|
||||
background-color: var(--color-lightest);
|
||||
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* utilities */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text--centered {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text--small {
|
||||
font-size: var(--font-size-sm) !important;
|
||||
line-height: var(--line-height-sm) !important;
|
||||
}
|
||||
|
||||
.flex--centered {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify--centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex--wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
/* screens: md */
|
||||
@media screen and (min-width: 768px) {
|
||||
.main__title {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main__title h1 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.main__title h1,
|
||||
.page__header {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-3xl);
|
||||
}
|
||||
|
||||
article {
|
||||
& h2 {
|
||||
margin: 0 0 var(--sizing-xs);
|
||||
}
|
||||
|
||||
& p:first-of-type {
|
||||
margin-top: var(--sizing-md);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-bottom: var(--sizing-sm);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--sizing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
footer nav:first-child {
|
||||
gap: var(--sizing-md);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,31 @@
|
|||
:root {
|
||||
--grid: repeat(1,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.addon-links__wrapper {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
grid-template-columns: var(--grid);
|
||||
}
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
|
||||
.addon-links__wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
& h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.addon-links__wrapper div:last-of-type h2 {
|
||||
margin-top: var(--sizing-base);
|
||||
& div:last-of-type h2 {
|
||||
margin-top: var(--sizing-base);
|
||||
}
|
||||
|
||||
&.link__list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--grid: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.addon-links__wrapper {
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
|
||||
.addon-links__wrapper div h2 {
|
||||
margin-top: 0 !important;
|
||||
& div:first-of-type {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
|
||||
& div h2 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,20 @@
|
|||
:root {
|
||||
--grid: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.badge__grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-md);
|
||||
grid-template-columns: var(--grid);
|
||||
}
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
|
||||
.badge__grid > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
& > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge__grid img {
|
||||
image-rendering: pixelated;
|
||||
img {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--grid: repeat(4,minmax(0,1fr));
|
||||
.badge__grid {
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
|
|
@ -3,38 +3,38 @@
|
|||
padding: var(--sizing-md);
|
||||
border: 1px solid;
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
.banner.old-post {
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin: 0 !important;
|
||||
|
||||
.banner.npm {
|
||||
border-color: var(--brand-npm);
|
||||
}
|
||||
& > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-lg);
|
||||
width: var(--sizing-lg);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.banner.npm svg {
|
||||
stroke: var(--brand-npm);
|
||||
}
|
||||
&.old-post {
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.banner.github {
|
||||
border-color: var(--brand-github);
|
||||
}
|
||||
&.npm {
|
||||
border-color: var(--brand-npm);
|
||||
|
||||
.banner.github svg {
|
||||
stroke: var(--brand-github);
|
||||
}
|
||||
& svg {
|
||||
stroke: var(--brand-npm);
|
||||
}
|
||||
}
|
||||
|
||||
.banner p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin: 0 !important;
|
||||
}
|
||||
&.github {
|
||||
border-color: var(--brand-github);
|
||||
|
||||
.banner p > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-lg);
|
||||
width: var(--sizing-lg);
|
||||
margin-right: var(--sizing-xs);
|
||||
& svg {
|
||||
stroke: var(--brand-github);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,50 @@
|
|||
button:not(.theme__toggle, .share) {
|
||||
border-radius: var(--rounded-full);
|
||||
padding: var(--sizing-sm) var(--sizing-lg);
|
||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
border: 2px solid var(--accent-color);
|
||||
transition-property: all;
|
||||
}
|
||||
button {
|
||||
&:not(.theme__toggle, .share) {
|
||||
border-radius: var(--rounded-full);
|
||||
padding: var(--sizing-sm) var(--sizing-lg);
|
||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
border: 2px solid var(--accent-color);
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
button:not(.theme__toggle, .share, .active):hover,
|
||||
button:not(.theme__toggle, .share, .active):active,
|
||||
button:not(.theme__toggle, .share, .active):focus {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
&:not(.theme__toggle, .share, .active):hover,
|
||||
&:not(.theme__toggle, .share, .active):active,
|
||||
&:not(.theme__toggle, .share, .active):focus {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
button.small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding: var(--sizing-xs) var(--sizing-sm);
|
||||
}
|
||||
&.small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding: var(--sizing-xs) var(--sizing-sm);
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
color: var(--accent-color);
|
||||
background: transparent;
|
||||
}
|
||||
&.secondary {
|
||||
color: var(--accent-color);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button.secondary:not(.theme__toggle, .share):hover,
|
||||
button.secondary:not(.theme__toggle, .share):active,
|
||||
button.secondary:not(.theme__toggle, .share):focus {
|
||||
color: var(--accent-color-hover);
|
||||
background: transparent;
|
||||
}
|
||||
&.secondary:not(.theme__toggle, .share):hover,
|
||||
&.secondary:not(.theme__toggle, .share):active,
|
||||
&.secondary:not(.theme__toggle, .share):focus {
|
||||
color: var(--accent-color-hover);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button.active {
|
||||
cursor: not-allowed;
|
||||
&.active {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,9 +35,9 @@ textarea:focus {
|
|||
margin-top: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.search__results li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
& li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +1,42 @@
|
|||
link-peek:defined a:not([data-key]) {
|
||||
display: none;
|
||||
}
|
||||
link-peek {
|
||||
&:defined {
|
||||
& a:not([data-key]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
link-peek:defined figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
||||
gap: 1rem;
|
||||
max-inline-size: max-content;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: var(--rounded);
|
||||
padding: 1rem;
|
||||
margin: 0 0 var(--sizing-base);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
& figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
||||
gap: 1rem;
|
||||
max-inline-size: max-content;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: var(--rounded);
|
||||
padding: 1rem;
|
||||
margin: 0 0 var(--sizing-base);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
link-peek:defined a[data-key="data.title.link"],
|
||||
link-peek:defined figure p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
& a[data-key="data.title.link"],
|
||||
& figure p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
}
|
||||
|
||||
link-peek img[data-key="data.logo.url"] {
|
||||
margin-right: var(--sizing-xs);
|
||||
inline-size: var(--sizing-lg);
|
||||
block-size: var(--sizing-lg);
|
||||
vertical-align: middle;
|
||||
}
|
||||
& img {
|
||||
&[data-key="data.logo.url"] {
|
||||
margin-right: var(--sizing-xs);
|
||||
inline-size: var(--sizing-lg);
|
||||
block-size: var(--sizing-lg);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
link-peek img[data-key="data.image.url"] {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
border-radius: var(--rounded);
|
||||
&[data-key="data.image.url"] {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
.mastodon-post-wrapper {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
margin-bottom: var(--sizing-base);
|
||||
padding-bottom: var(--sizing-xs);
|
||||
}
|
||||
padding-bottom: var(--sizing-base);
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
& dl {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: var(--sizing-xs);
|
||||
}
|
||||
& dd {
|
||||
margin-left: var(--sizing-xs);
|
||||
|
||||
dd:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
--grid-vertical: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.now__section--header,
|
||||
.recent__links-header {
|
||||
.now__section--header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
.pagination {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
& button {
|
||||
background: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: flex;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
|
||||
.pagination a > svg {
|
||||
stroke: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
& > svg {
|
||||
stroke: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination span.disabled svg {
|
||||
cursor: not-allowed;
|
||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
& span.disabled svg {
|
||||
cursor: not-allowed;
|
||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,16 @@
|
|||
webcare-webshare {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
webcare-webshare button {
|
||||
color: var(--gray-dark);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
& button {
|
||||
color: var(--gray-dark);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
webcare-webshare button > svg {
|
||||
stroke: var(--gray-dark) !important;
|
||||
}
|
||||
|
||||
webcare-webshare button,
|
||||
webcare-webshare button > svg {
|
||||
cursor: pointer;
|
||||
& > svg {
|
||||
stroke: var(--gray-dark) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +1,41 @@
|
|||
.theme__toggle {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
& svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
& svg:hover {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
& > .light svg { stroke: var(--sun) !important; }
|
||||
& > .dark svg { stroke: var(--moon) !important; }
|
||||
|
||||
& > .light ,
|
||||
& > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme__toggle svg {
|
||||
cursor: pointer;
|
||||
.theme__dark {
|
||||
& .theme__toggle > .light {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& .theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme__toggle:hover,
|
||||
.theme__toggle svg:hover {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
.theme__light {
|
||||
& .theme__toggle > .light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__toggle > .light svg { stroke: var(--sun) !important; }
|
||||
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
|
||||
|
||||
.theme__toggle > .light ,
|
||||
.theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__dark .theme__toggle > .light {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.theme__dark .theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__light .theme__toggle > .light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__light .theme__toggle > .dark {
|
||||
display: inline;
|
||||
& .theme__toggle > .dark {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,14 @@
|
|||
.track__chart--item {
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--sizing-md);
|
||||
}
|
||||
|
||||
& .progress-bar__wrapper {
|
||||
max-width: 40%;
|
||||
margin-left: var(--sizing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.track__chart--item,
|
||||
|
|
@ -9,15 +18,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.track__chart--item:not(:last-of-type) {
|
||||
margin-bottom: var(--sizing-md);
|
||||
}
|
||||
|
||||
.track__chart--item .progress-bar__wrapper {
|
||||
max-width: 40%;
|
||||
margin-left: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.track__chart--presentation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -49,15 +49,17 @@
|
|||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
.track__chart--item img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
.track__chart--item {
|
||||
& img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
.track__chart--item img,
|
||||
.track__chart--item picture {
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
& img,
|
||||
& picture {
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.track__chart--meta {
|
||||
|
|
|
|||
|
|
@ -1,556 +1,41 @@
|
|||
body,
|
||||
html {
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
background: var(--background-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--color-lightest);
|
||||
background: var(--selection-color);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-lightest);
|
||||
background: var(--selection-color);
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
body,
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: var(--sizing-xs);
|
||||
height: var(--sizing-xs);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: var(--sizing-md);
|
||||
height: var(--sizing-md);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
line-height: var(--line-height-lg);
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-lg);
|
||||
padding-left: var(--sizing-lg);
|
||||
color: var(--gray-dark);
|
||||
border-left: var(--sizing-xs) solid var(--gray-dark);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
:is(body, html, nav .tags, nav .search) svg {
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > svg {
|
||||
margin-right: var(--sizing-xs);
|
||||
stroke-width: var(--stroke-width-bold) !important;
|
||||
}
|
||||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
strong,
|
||||
blockquote {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
em,
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a,
|
||||
.active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main__title, footer nav:last-child) a:hover,
|
||||
:is(.main__title, footer nav:last-child) a:focus,
|
||||
:is(.main__title, footer nav:last-child) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition-property: color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
:is(
|
||||
a:has(svg):hover,
|
||||
a:has(svg):active,
|
||||
a:has(svg):focus,
|
||||
button:has(svg):hover,
|
||||
button:has(svg):active,
|
||||
button:has(svg):focus
|
||||
) svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
h1 { font-size: var(--font-size-3xl) }
|
||||
h2 { font-size: var(--font-size-2xl) }
|
||||
h3 { font-size: var(--font-size-xl) }
|
||||
h4 { font-size: var(--font-size-lg) }
|
||||
h5 { font-size: var(--font-size-base) }
|
||||
h6 { font-size: var(--font-size-sm) }
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--gray-light);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
hr.large__spacing {
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--rounded);
|
||||
border: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:is(th, td):not(:last-child) {
|
||||
border-right: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th,
|
||||
tr:not(:last-child) {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--sizing-sm);
|
||||
min-width: calc(var(--sizing-3xl) * 2);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-weight-bold);
|
||||
background-color: var(--gray-lighter);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.main__title {
|
||||
width: 100%;
|
||||
padding-top: var(--sizing-3xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main__title h1 {
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
padding-bottom: var(--sizing-md);
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
}
|
||||
|
||||
/* nav */
|
||||
nav.menu__primary {
|
||||
gap: var(--sizing-md);
|
||||
}
|
||||
|
||||
nav.menu__primary a,
|
||||
nav.menu__primary span {
|
||||
height: var(--sizing-xl);
|
||||
}
|
||||
|
||||
:is(a:hover, a:active, a:focus) svg,
|
||||
a svg:hover,
|
||||
a svg:active,
|
||||
a svg:focus,
|
||||
button:hover svg,
|
||||
button svg:hover,
|
||||
.icon--bold > svg {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
.active,
|
||||
.active svg {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
a svg,
|
||||
nav .active svg,
|
||||
nav ul li .active svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
.active:hover svg,
|
||||
.active svg:hover,
|
||||
nav ul li .active:hover svg,
|
||||
nav ul li .active svg:hover {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
/* social icons */
|
||||
.at svg { stroke: var(--brand-hey) !important; }
|
||||
.brand-github svg { stroke: var(--brand-github) !important; }
|
||||
.brand-npm svg { stroke: var(--brand-npm) !important; }
|
||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
||||
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
||||
.books svg { stroke: var(--brand-storygraph) !important; }
|
||||
.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
||||
.heart-handshake svg { stroke: var(--webrings) !important; }
|
||||
.rss svg { stroke: var(--brand-rss) !important; }
|
||||
|
||||
/* layout */
|
||||
.default__wrapper {
|
||||
padding-top: var(--sizing-3xl);
|
||||
}
|
||||
|
||||
.main__wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 0%;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* now */
|
||||
.now__topper,
|
||||
article {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
.now__topper p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
footer nav:first-child {
|
||||
gap: var(--sizing-sm);
|
||||
margin-top: var(--sizing-3xl);
|
||||
padding: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer nav:first-child svg {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
footer nav:first-child a {
|
||||
width: var(--sizing-xl);
|
||||
height: var(--sizing-xl);
|
||||
}
|
||||
|
||||
footer nav:last-child {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding-bottom: var(--sizing-3xl);
|
||||
}
|
||||
|
||||
footer nav:last-child span:not(.active) {
|
||||
margin-left: var(--sizing-xs);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
|
||||
:is(.main__title, footer nav:last-child) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--sizing-xs);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: var(--sizing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
}
|
||||
|
||||
/* articles */
|
||||
article h2 {
|
||||
color: var(--text-color);
|
||||
line-height: var(--line-height-2xl);
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
article a h2:hover,
|
||||
article a h2:focus,
|
||||
article a h2:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
article [rel="author"],
|
||||
article time {
|
||||
color: var(--gray-dark);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
|
||||
article [rel="author"] {
|
||||
margin-bottom: var(--sizing-xs);
|
||||
}
|
||||
|
||||
article p:first-of-type {
|
||||
margin-top: var(--sizing-sm);
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-bottom: var(--sizing-lg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tag:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
svg {
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
.icon--small > svg {
|
||||
width: var(--sizing-lg);
|
||||
height: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.icon--center__vertical > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
margin: var(--sizing-base) 0;
|
||||
padding-left: var(--sizing-base);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: var(--sizing-lg);
|
||||
margin-bottom: var(--sizing-lg);
|
||||
}
|
||||
|
||||
.link__list li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
}
|
||||
|
||||
.link__list,
|
||||
.link__list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image__banner {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image__banner,
|
||||
.image__banner > * {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image__banner > * {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* pages */
|
||||
.page__header {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* selects */
|
||||
select {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
color: var(--color-lightest);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.select,
|
||||
select-pagination {
|
||||
border-radius: var(--rounded-full);
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 var(--sizing-lg);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
-moz-text-align-last: center;
|
||||
}
|
||||
|
||||
.select,
|
||||
.select select,
|
||||
select-pagination,
|
||||
select-pagination select {
|
||||
min-width: calc(var(--sizing-3xl) * 4);
|
||||
padding-top: var(--sizing-xs);
|
||||
padding-bottom: var(--sizing-xs);
|
||||
}
|
||||
|
||||
.select select,
|
||||
.select::after,
|
||||
select-pagination select,
|
||||
select-pagination::after {
|
||||
grid-area: select;
|
||||
}
|
||||
|
||||
.select::after,
|
||||
select-pagination::after {
|
||||
content: '';
|
||||
width: var(--sizing-md);
|
||||
height: var(--sizing-sm);
|
||||
display: inline-block;
|
||||
background-color: var(--color-lightest);
|
||||
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* utilities */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text--centered {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text--small {
|
||||
font-size: var(--font-size-sm) !important;
|
||||
line-height: var(--line-height-sm) !important;
|
||||
}
|
||||
|
||||
.flex--centered {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify--centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex--wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
/* screens: md */
|
||||
@media screen and (min-width: 768px) {
|
||||
.main__title {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main__title h1 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.main__title h1,
|
||||
.page__header {
|
||||
font-size: var(--font-size-3xl);
|
||||
line-height: var(--line-height-3xl);
|
||||
}
|
||||
|
||||
article h2 {
|
||||
margin: 0 0 var(--sizing-xs);
|
||||
}
|
||||
|
||||
article p:first-of-type {
|
||||
margin-top: var(--sizing-md);
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-bottom: var(--sizing-sm);
|
||||
}
|
||||
|
||||
.tag:not(:last-child) {
|
||||
margin-right: var(--sizing-sm);
|
||||
}
|
||||
|
||||
footer nav:first-child {
|
||||
gap: var(--sizing-md);
|
||||
}
|
||||
}
|
||||
@layer reset, defaults, base, page, components, plugins;
|
||||
|
||||
/* style resets */
|
||||
@import url('./reset.css') layer(reset);
|
||||
|
||||
/* core defaults */
|
||||
@import url('./defaults/fonts.css') layer(defaults);
|
||||
@import url('./defaults/vars.css') layer(defaults);
|
||||
@import url('./defaults/animations.css') layer(defaults);
|
||||
|
||||
/* base styles */
|
||||
@import url('./base/index.css') layer(base);
|
||||
|
||||
/* plugins */
|
||||
@import url('./plugins/prism.css') layer(plugins);
|
||||
|
||||
/* page styles */
|
||||
@import url('./pages/404.css') layer(page);
|
||||
@import url('./pages/about.css') layer(page);
|
||||
@import url('./pages/blogroll.css') layer(page);
|
||||
@import url('./pages/contact.css') layer(page);
|
||||
@import url('./pages/links.css') layer(page);
|
||||
@import url('./pages/now.css') layer(page);
|
||||
@import url('./pages/post.css') layer(page);
|
||||
@import url('./pages/webrings.css') layer(page);
|
||||
|
||||
/* component styles */
|
||||
@import url('./components/addon-links.css') layer(components);
|
||||
@import url('./components/badge-grid.css') layer(components);
|
||||
@import url('./components/banners.css') layer(components);
|
||||
@import url('./components/buttons.css') layer(components);
|
||||
@import url('./components/forms.css') layer(components);
|
||||
@import url('./components/link-peek.css') layer(components);
|
||||
@import url('./components/mastodon-post.css') layer(components);
|
||||
@import url('./components/media-grid.css') layer(components.media);
|
||||
@import url('./components/paginator.css') layer(components);
|
||||
@import url('./components/post-graph.css') layer(components);
|
||||
@import url('./components/progress-bar.css') layer(components.media);
|
||||
@import url('./components/share-button.css') layer(components);
|
||||
@import url('./components/theme-toggle.css') layer(components);
|
||||
@import url('./components/track-chart.css') layer(components.media);
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
.four-oh-four__wrapper .image__banner {
|
||||
margin-bottom: var(--sizing-base);
|
||||
.four-oh-four__wrapper {
|
||||
& .image__banner {
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
& .page__header {
|
||||
margin-bottom: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,28 +5,26 @@
|
|||
.avatar__wrapper {
|
||||
margin-bottom: var(--sizing-xl);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar__wrapper .avatar__wrapper--interior {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
padding: var(--sizing-lg);
|
||||
background-color: var(--color-lightest);
|
||||
}
|
||||
|
||||
.avatar__wrapper,
|
||||
.avatar__wrapper .avatar__wrapper--interior {
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar__wrapper .avatar__wrapper--interior picture > *,
|
||||
.avatar__wrapper .avatar__wrapper--interior img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
& .avatar__wrapper--interior {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
padding: var(--sizing-lg);
|
||||
background-color: var(--color-lightest);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
& picture > *,
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.blog--roll__icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: row !important;
|
||||
gap: var(--sizing-xs);
|
||||
}
|
||||
|
||||
.blog--roll__icons a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
& a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,31 @@
|
|||
.contact__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& .column.contact__description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__wrapper textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.contact__wrapper .column.contact__description p:first-child {
|
||||
margin-top: 0;
|
||||
.contact__success--header {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.contact__wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contact__wrapper .column {
|
||||
width: 50%;
|
||||
}
|
||||
& .column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.contact__wrapper .column.contact__description {
|
||||
padding-right: var(--sizing-xl);
|
||||
& .column.contact__description {
|
||||
padding-right: var(--sizing-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.link__list {
|
||||
padding-left: 0;
|
||||
.default__wrapper > .link__list {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--sizing-3xl);
|
||||
}
|
||||
|
|
@ -1,26 +1,25 @@
|
|||
/* now */
|
||||
.now__section--text {
|
||||
padding-left: var(--sizing-base);
|
||||
|
||||
& p {
|
||||
margin: var(--sizing-xs) 0;
|
||||
|
||||
& > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-base);
|
||||
width: var(--sizing-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.now__section--text p {
|
||||
margin: var(--sizing-xs) 0;
|
||||
}
|
||||
|
||||
.now__section--text p > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-base);
|
||||
width: var(--sizing-base);
|
||||
}
|
||||
|
||||
.now__section--header,
|
||||
.recent__links-header {
|
||||
.now__section--header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.default__wrapper > .now__section--header:first-of-type {
|
||||
margin-top: 0;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.link__list {
|
||||
|
|
@ -31,10 +30,4 @@
|
|||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
padding-top: var(--sizing-lg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.now__section--text {
|
||||
padding-left: var(--sizing-3xl);
|
||||
}
|
||||
}
|
||||
|
|
@ -11,10 +11,10 @@ hr.footnotes-sep {
|
|||
.footnotes-list {
|
||||
margin-bottom: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.footnotes-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
.webring__wrapper {
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
.webring__wrapper > .webring__centered {
|
||||
justify-content: center;
|
||||
h3 {
|
||||
margin: var(--sizing-2xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
& > .webring__centered {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
46
src/assets/styles/reset.css
Normal file
46
src/assets/styles/reset.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
3. Add accessible line-height
|
||||
4. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
5. Improve media defaults
|
||||
*/
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
6. Remove built-in form typography styles
|
||||
*/
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
7. Avoid text overflows
|
||||
*/
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
8. Create a root stacking context
|
||||
*/
|
||||
#root, #__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
Reference in a new issue