Add .link underline

This commit is contained in:
venashial
2022-07-11 13:23:19 -07:00
parent e280c0c5ca
commit 3e87d88825
31 changed files with 59 additions and 49 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);
}

View File

@@ -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.

View File

@@ -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 {

View File

@@ -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%;

View File

@@ -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 */

View File

@@ -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>

View File

@@ -40,6 +40,6 @@
<style lang="postcss">
.chips {
display: flex;
gap: 0.5rem;
grid-gap: 0.5rem;
}
</style>

View File

@@ -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);

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;
}
}

View File

@@ -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;

View File

@@ -124,7 +124,7 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
grid-gap: 1rem;
flex-wrap: wrap;
position: relative;

View File

@@ -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)) {

View File

@@ -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);

View File

@@ -15,7 +15,7 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
grid-gap: 0.5rem;
&__input {
-webkit-appearance: none;

View File

@@ -28,7 +28,7 @@
.text-input {
display: flex;
flex-direction: column;
gap: 0.5rem;
grid-gap: 0.5rem;
position: relative;
width: 20rem;

View File

@@ -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;

View File

@@ -1,5 +1,5 @@
.button-group {
display: flex;
gap: 0.5rem;
grid-gap: 0.5rem;
flex-wrap: wrap;
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
grid-gap: 2rem;
&__image {
max-width: 18.5rem;

View File

@@ -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 {

View File

@@ -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);

View File

@@ -1,7 +1,7 @@
.markdown {
display: flex;
flex-direction: column;
gap: 1rem;
grid-gap: 1rem;
blockquote,
details,

View File

@@ -1,6 +1,6 @@
.member {
display: flex;
gap: 1rem;
grid-gap: 1rem;
border-radius: var(--rounded-sm);
padding: 0.5rem;

View File

@@ -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;
}

View File

@@ -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;
}