You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.1 KiB
122 lines
2.1 KiB
1 year ago
|
.nt-cards {
|
||
|
|
&.nt-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-auto-columns: 1fr;
|
||
|
|
gap: 0.5rem;
|
||
|
|
|
||
|
|
// the following 3 rules are for mobile devices, to avoid
|
||
|
|
// the grid forcing the width of the page
|
||
|
|
max-width: 100vw;
|
||
|
|
overflow-x: auto;
|
||
|
|
padding: 1px;
|
||
|
|
|
||
|
|
&.cols-1 {
|
||
|
|
grid-template-columns: repeat(1, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.cols-2 {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.cols-3 {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.cols-4 {
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.cols-5 {
|
||
|
|
grid-template-columns: repeat(5, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.cols-6 {
|
||
|
|
grid-template-columns: repeat(6, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// for small devices
|
||
|
|
|
||
|
|
@media only screen and (max-width: 400px) {
|
||
|
|
|
||
|
|
// force one card per line
|
||
|
|
.nt-cards.nt-grid {
|
||
|
|
grid-template-columns: repeat(1, 1fr) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card {
|
||
|
|
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 24%), 0 3px 1px -2px rgb(0 0 0 / 30%), 0 1px 5px 0 rgb(0 0 0 / 22%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-md-color-scheme="slate"] {
|
||
|
|
.nt-card {
|
||
|
|
border: 0.05rem solid var(--md-typeset-table-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.nt-card>a {
|
||
|
|
color: var(--md-default-fg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card>a>div {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card {
|
||
|
|
padding: 5px;
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card-title {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: bold;
|
||
|
|
margin: 4px 0 8px 0;
|
||
|
|
line-height: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card-content {
|
||
|
|
padding: .4rem .8rem .8rem .8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card-text {
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card .nt-card-image {
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 2px;
|
||
|
|
background-position: center center;
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
min-height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card .nt-card-image.tags img {
|
||
|
|
margin-top: 12px
|
||
|
|
}
|
||
|
|
|
||
|
|
.nt-card .nt-card-image img {
|
||
|
|
height: 105px;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.nt-card a:hover,
|
||
|
|
.nt-card a:focus {
|
||
|
|
color: var(--md-accent-fg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.nt-card h2 {
|
||
|
|
margin: 0;
|
||
|
|
}
|