1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-11-29 03:24:28 +00:00
steffoweb/components/LinkPanel.module.css

62 lines
1.1 KiB
CSS
Raw Normal View History

2022-10-16 23:58:17 +00:00
.linkPanel {
2023-05-28 02:37:00 +00:00
display: grid;
grid-template-areas:
2023-05-29 01:24:24 +00:00
"icon text ext1"
"desc desc ext2"
2023-05-28 02:37:00 +00:00
;
2023-05-29 01:24:24 +00:00
grid-template-columns: auto 1fr auto;
2023-05-28 02:37:00 +00:00
grid-template-rows: auto 1fr;
2023-05-29 01:24:24 +00:00
grid-column-gap: 0;
2023-05-28 02:37:00 +00:00
grid-row-gap: 0;
2023-02-17 04:58:48 +00:00
white-space: nowrap;
2023-05-28 02:37:00 +00:00
text-decoration: none;
flex-basis: calc(50% - 4px);
flex-grow: 1;
}
2023-02-28 12:01:43 +00:00
2023-05-28 02:37:00 +00:00
@media (max-width: 492px) {
.linkPanel {
width: 100%;
}
2022-10-16 23:58:17 +00:00
}
2023-05-28 02:37:00 +00:00
.linkPanel[href]:hover, .linkPanel[href]:focus {
2022-10-16 23:58:17 +00:00
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
}
2023-05-28 02:37:00 +00:00
.linkPanel[href]:active {
2022-10-16 23:58:17 +00:00
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
}
2023-02-28 12:01:43 +00:00
.linkPanelIcon {
2023-05-28 02:37:00 +00:00
grid-area: icon;
2023-02-28 12:01:43 +00:00
justify-self: center;
2023-05-28 02:37:00 +00:00
align-self: center;
2023-02-28 12:01:43 +00:00
width: 20px;
2023-05-29 01:24:24 +00:00
margin-right: 4px;
2023-02-28 12:01:43 +00:00
}
.linkPanelText {
2023-05-28 02:37:00 +00:00
grid-area: text;
align-self: center;
text-decoration: 1px solid underline currentColor;
}
.linkPanelDescription {
grid-area: desc;
white-space: normal;
align-self: start;
2023-05-29 01:24:24 +00:00
}
.linkPanelExtraTop {
grid-area: ext1;
align-self: end;
}
.linkPanelExtraBtm {
grid-area: ext2;
align-self: end;
2023-02-28 12:01:43 +00:00
}