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
|
|
@ -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 {
|
||||
|
|
|
|||
Reference in a new issue