sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00
Code Activity

feat: remove card component styles

Browse Source
This commit is contained in:
sendevia
2025-11-03 17:54:07 +08:00
parent 4396295cbd
commit 5882418617
2 changed files with 0 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
.vitepress/theme/styles/_components/card.scss
View File

@@ -1,333 +0,0 @@
@use "../mixin";
// https://m3.material.io/components/cards/
.card {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
.card-impression {
img {
display: block;
max-width: unset;
object-fit: cover;
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
}
.card-supporting {
color: var(--md-sys-color-on-surface);
pointer-events: none;
h3 {
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
}
&[spec="feed"] {
margin-block-end: 24px;
padding-block-end: 12px;
border-radius: var(--md-sys-shape-corner-extra-large);
background-color: var(--md-sys-color-surface-container-lowest);
transform: translateY(0px);
& > a {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-impression {
display: flex;
gap: 12px;
flex-direction: column;
.impression-image img {
height: 240px;
width: 100%;
border-radius: var(--md-sys-shape-corner-large);
outline: 1px solid var(--md-sys-color-outline-variant);
}
.impression-title {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
padding-inline: 12px;
.author-mugshot {
position: relative;
img {
height: 48px;
width: 48px;
border-radius: var(--md-sys-shape-corner-full);
}
span {
@include mixin.material-symbols($size: 18);
padding: 3px;
position: absolute;
right: -3px;
bottom: -3px;
background-color: var(--md-sys-color-surface-container);
border-radius: 100%;
text-align: center;
}
}
.article-title {
h4 {
font-family: "Josefin Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
}
}
}
}
.card-supporting {
padding-inline: 12px;
h4 {
letter-spacing: 0.6rem;
}
}
.card-action {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
padding-inline: 12px;
p {
padding: 8px 12px;
color: var(--md-sys-color-on-surface);
background-color: var(--md-sys-color-surface-bright);
border-radius: var(--md-sys-shape-corner-medium);
}
div {
display: flex;
flex-direction: row;
gap: 12px;
}
a {
text-decoration: none;
}
}
&[size="large"] {
gap: 12px;
.card-supporting h3 {
min-height: 150px;
}
}
&[size="medium"] {
gap: 12px;
padding-block: 12px;
.card-impression {
flex-direction: row-reverse;
justify-content: space-between;
.impression-image img {
width: 140px;
height: 140px;
}
.impression-title {
flex-direction: column;
align-items: flex-start;
h5 {
min-height: 120px;
}
}
}
}
&[size="small"] {
align-items: center;
flex-direction: row;
justify-content: space-between;
padding-block: 6px;
padding-inline: 18px 6px;
.card-action button {
justify-content: end;
}
$colors: ("red", "blue", "green", "yellow", "purple");
@each $color in $colors {
&[color="#{$color}"] {
color: var(--md-sys-color-on-#{$color}-container);
background-color: var(--md-sys-color-#{$color}-container);
}
}
}
&:hover {
&[size="large"],
&[size="medium"] {
background-color: var(--md-sys-color-surface-container);
}
&[size="small"] {
border-radius: var(--md-sys-shape-corner-large);
}
}
}
&[spec="clear"] {
border-radius: var(--md-sys-shape-corner-extra-large);
background-color: var(--md-sys-color-surface-bright);
cursor: pointer;
@media (prefers-color-scheme: dark) {
background-color: var(--md-sys-color-surface-dim);
}
.card-impression {
position: relative;
border-radius: var(--md-sys-shape-corner-extra-large-bottom);
background-color: var(--md-sys-color-inverse-primary);
overflow: hidden;
img {
height: 240px;
width: 100%;
}
}
.card-supporting {
display: flex;
flex-direction: column;
gap: 10px;
padding-block: 20px 18px;
padding-inline: 20px;
#card-supporting--weaken {
text-align: end;
opacity: 0.5;
}
}
&:hover {
color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
.card-supporting h3 {
font-weight: 700;
}
}
&:active {
border-radius: calc(2 * var(--md-sys-shape-corner-extra-large));
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
.card-supporting h3 {
font-weight: 200;
}
}
}
&[spec="focus"] {
height: 240px;
border-radius: var(--md-sys-shape-corner-extra-large);
outline: 1px solid var(--md-sys-color-outline-variant);
background-color: var(--md-sys-color-primary);
cursor: pointer;
.card-impression {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.card-supporting {
position: absolute;
bottom: 0px;
margin: 20px;
color: var(--md-sys-color-on-primary);
transform: translateY(calc(100% + 20px));
transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
h3 {
font-weight: 100;
}
}
&:hover {
img {
opacity: 0.5;
transition: opacity var(--md-sys-motion-duration-medium2);
}
.card-supporting {
transform: translateY(0%);
h3 {
font-weight: 700;
}
}
}
&:active {
transform: scale(0.95);
}
}
}

1
.vitepress/theme/styles/main.scss
View File

@@ -9,7 +9,6 @@
@include meta.load-css("animation");
@include meta.load-css("_components/appbar");
@include meta.load-css("_components/card");
@include meta.load-css("_components/dialog");
@include meta.load-css("_components/loading-splash");
@include meta.load-css("_components/snackbar");