You've already forked AstralRinth
forked from didirus/AstralRinth
Add .link underline
This commit is contained in:
@@ -38,7 +38,7 @@
|
||||
border: solid 2px hsl(0, 0%, 20%);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<style lang="postcss">
|
||||
.header {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 1.5rem;
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
@@ -85,14 +85,14 @@
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
gap: 2.5rem;
|
||||
grid-gap: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
.edit-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
margin-bottom: 54px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -180,4 +180,4 @@ Use a utility by importing from `omorphia/utils`.
|
||||
|
||||
### Using icons and styles
|
||||
|
||||
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
|
||||
Follow the guides on the sidebar to learn how to use [icons](/usage/icons) and general concepts.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
*:not(.example__preview *) {
|
||||
:where(a) {
|
||||
*:not(.example__preview) * {
|
||||
:where(a):not(.link) {
|
||||
text-decoration: none;
|
||||
|
||||
&.absent {
|
||||
@@ -378,7 +378,7 @@
|
||||
background-color: var(--accent-color-transparent);
|
||||
}
|
||||
|
||||
&:where(a) {
|
||||
&:where(a):not(.link) {
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: min-content;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 100%;
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
> :global(.icon) {
|
||||
/* Icon on checkbox helps to be a little larger than normal icons 16px -> 18px */
|
||||
|
||||
@@ -37,12 +37,12 @@
|
||||
.checkbox-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
grid-gap: 2px;
|
||||
|
||||
&.wrap {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,6 +40,6 @@
|
||||
<style lang="postcss">
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<style lang="postcss">
|
||||
.code {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
font-family: var(--mono-font);
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--color-code-bg);
|
||||
|
||||
@@ -22,13 +22,13 @@
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
min-width: 0;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
grid-gap: 0;
|
||||
|
||||
&__title {
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
.file-dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
|
||||
&--constrained {
|
||||
width: 27rem;
|
||||
@@ -106,7 +106,7 @@
|
||||
padding: 1.5rem 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--rounded-sm);
|
||||
border: dashed 0.3rem var(--color-text-lightest);
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
padding: 1rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
color: var(--color-danger-text);
|
||||
border-color: var(--color-danger-text);
|
||||
border-width: 0.15rem 0;
|
||||
@@ -152,7 +152,7 @@
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
padding: 1rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
color: var(--color-danger-text);
|
||||
border-color: var(--color-danger-text);
|
||||
border-width: 0.15rem 0;
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
.pagination {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
:global(.button) {
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
@media (width <= 500px) {
|
||||
gap: 0.25rem;
|
||||
grid-gap: 0.25rem;
|
||||
|
||||
:global(> *:nth-child(4)),
|
||||
:global(> *:nth-child(6)) {
|
||||
|
||||
@@ -220,7 +220,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
border-radius: var(--rounded);
|
||||
@@ -265,7 +265,7 @@
|
||||
padding: 0.25rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&:hover:not(.current, .is-selected) {
|
||||
background-color: var(--color-brand-dark);
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&__input {
|
||||
-webkit-appearance: none;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
.text-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
position: relative;
|
||||
width: 20rem;
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
min-width: fit-content;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
||||
|
||||
padding: var(--padding);
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
max-width: 100%;
|
||||
|
||||
.profile-picture {
|
||||
@@ -19,11 +19,11 @@
|
||||
|
||||
&--gap {
|
||||
&-compressed {
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
|
||||
&-none {
|
||||
gap: 0;
|
||||
grid-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
/* Prevents shifting in height when button added */
|
||||
min-height: 3.5rem;
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
grid-gap: 2rem;
|
||||
|
||||
&__image {
|
||||
max-width: 18.5rem;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.info-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.25rem 2rem;
|
||||
grid-gap: 0.25rem 2rem;
|
||||
width: fit-content;
|
||||
|
||||
&__label {
|
||||
|
||||
@@ -2,11 +2,21 @@
|
||||
color: var(--color-link);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.25rem;
|
||||
line-height: 100%;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
|
||||
.icon > path {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +24,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
|
||||
.link {
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.markdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
|
||||
blockquote,
|
||||
details,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.member {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
grid-gap: 1rem;
|
||||
|
||||
border-radius: var(--rounded-sm);
|
||||
padding: 0.5rem;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&--light {
|
||||
color: var(--color-text-lightest);
|
||||
@@ -18,6 +18,6 @@
|
||||
|
||||
.stat-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
grid-gap: 0.25rem;
|
||||
color: var(--color-text-lightest);
|
||||
|
||||
svg {
|
||||
@@ -14,5 +14,5 @@
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
gap: 0.25rem 0.5rem;
|
||||
grid-gap: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user