chore: cleanup
This commit is contained in:
parent
fa55f40899
commit
1c445a6275
25 changed files with 227 additions and 245 deletions
|
@ -14,7 +14,7 @@
|
|||
|
||||
&:focus img,
|
||||
&:focus-within img {
|
||||
outline: var(--outline-default)
|
||||
outline: var(--outline-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
.banner {
|
||||
padding: var(--sizing-md);
|
||||
border: 1px solid;
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
|
@ -36,29 +37,12 @@
|
|||
&.old-post,
|
||||
&.rss,
|
||||
&.warning {
|
||||
&.error {
|
||||
--border-color: var(--error);
|
||||
}
|
||||
|
||||
&.github {
|
||||
--border-color: var(--brand-github);
|
||||
}
|
||||
|
||||
&.npm {
|
||||
--border-color: var(--brand-npm);
|
||||
}
|
||||
|
||||
&.old-post {
|
||||
--border-color: var(--gray-dark);
|
||||
}
|
||||
|
||||
&.rss {
|
||||
--border-color: var(--brand-rss);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
--border-color: var(--warning);
|
||||
}
|
||||
&.error { --border-color: var(--error); }
|
||||
&.github { --border-color: var(--brand-github); }
|
||||
&.npm { --border-color: var(--brand-npm); }
|
||||
&.old-post { --border-color: var(--gray-dark); }
|
||||
&.rss { --border-color: var(--brand-rss); }
|
||||
&.warning { --border-color: var(--warning); }
|
||||
|
||||
border-color: var(--border-color);
|
||||
|
||||
|
@ -68,6 +52,11 @@
|
|||
color: var(--border-color);
|
||||
}
|
||||
|
||||
& p a:focus,
|
||||
& p a:focus-within {
|
||||
outline: 2px dashed var(--border-color);
|
||||
}
|
||||
|
||||
& svg {
|
||||
stroke: var(--border-color);
|
||||
}
|
||||
|
|
|
@ -12,6 +12,7 @@ button,
|
|||
|
||||
&:not(.theme-toggle) {
|
||||
border: 2px solid var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
padding: var(--sizing-xs) var(--sizing-md);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
|
@ -48,6 +49,7 @@ button,
|
|||
&.theme-toggle:focus,
|
||||
&.theme-toggle:focus-within {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
|
@ -61,8 +63,4 @@ button,
|
|||
color: var(--accent-color-hover);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
|
@ -8,15 +8,15 @@ input[type="email"],
|
|||
input[type="search"],
|
||||
textarea {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-base);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--sizing-sm);
|
||||
font-size: var(--font-size-base);
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
font-weight: var(--font-weight-base);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
label:has(input):has(+ *) input,
|
||||
|
@ -40,7 +40,7 @@ textarea:focus-within {
|
|||
select {
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--text-color);
|
||||
border-radius: 0;
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--sizing-xs) var(--sizing-sm);
|
||||
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -35,6 +36,7 @@
|
|||
& img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -43,35 +45,33 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&.shadow::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 1px;
|
||||
left: 0;
|
||||
box-shadow: inset 0 -85px 60px -60px var(--black);
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 1px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
transition-property: border-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
& a:hover img,
|
||||
& a:active img {
|
||||
& a:hover .item-wrapper.shadow::after,
|
||||
& a:active .item-wrapper.shadow::after {
|
||||
border-color: var(--accent-color-hover)
|
||||
}
|
||||
|
||||
& a:focus img,
|
||||
& a:focus-within img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
& a:focus .shadow::after,
|
||||
& a:focus-within .shadow::after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
& a:focus .item-wrapper.shadow::after,
|
||||
& a:focus-within .item-wrapper.shadow::after {
|
||||
border: 0;
|
||||
outline: var(----outline-default);
|
||||
}
|
||||
|
||||
& .meta-text {
|
||||
|
@ -94,13 +94,6 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
transition-property: border-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
&:focus,
|
||||
&:focus-within {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& svg {
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
width: 100%;
|
||||
inset: 0;
|
||||
overflow: scroll;
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--sizing-lg) var(--sizing-2xl);
|
||||
|
||||
& .modal-close {
|
||||
|
@ -26,6 +27,7 @@
|
|||
&:focus svg,
|
||||
&:focus-within svg {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& svg {
|
||||
|
@ -33,6 +35,7 @@
|
|||
|
||||
&:focus {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
@ -65,6 +68,7 @@
|
|||
&:focus svg,
|
||||
&:focus-within svg {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& svg {
|
||||
|
@ -73,6 +77,7 @@
|
|||
|
||||
&:focus {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
@ -27,6 +27,7 @@
|
|||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
}
|
||||
|
@ -66,6 +67,7 @@
|
|||
&:focus,
|
||||
&:focus-within {
|
||||
outline: var(--outline-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
.progress-bar-wrapper {
|
||||
display: flex;
|
||||
background-color: rgba(217, 222, 228, .6);
|
||||
border-radius: var(--border-radius-full);
|
||||
overflow: hidden;
|
||||
height: var(--sizing-lg);
|
||||
width: 100%;
|
||||
|
|
Reference in a new issue