#obsidian
# CSS-Kepano's Card List CSS
![[Obsidian_CardList.webp]]
> [!tip]
> 목록(List)을 Cards 뷰로 전환해주는 .css 코드
> yaml frontmatter와 함께 사용해야 하며 별도의 플러그인 없이 publish에서 작동합니다.
# How to use
(1) [[#^196fd5|.css 코드]]을 publish.css 끝에 붙여 넣기 후 저장
> Add [[#^196fd5|This .css code]] to your publish.css file and place it in the root (/) of your obsidian publish vault.
(2) Cards 뷰로 보일 부분을 List로 작성 후, .md 파일 의 상단 [[#Yaml|yaml frontmatter]] 에 cssclasses 지정
> Write the sections as a List which will be displayed in the Cards view. Then, specify the cssclasses in the [[#Yaml|YAML frontmatter]] at the top of the .md file
# Yaml
> You would need to add this to your note you want to publish.
```yaml
---
cssclasses:
- list-cards
- list-cards-mobile-full
---
```
# CSS
^196fd5
```
/* List Cards */
.list-cards {
--list-cards-template: repeat(2, minmax(0, 1fr));
}
.list-cards div > ul {
--link-color: var(--text-normal);
--link-unresolved-color: var(--text-muted);
--link-decoration: none;
--link-decoration-hover: none;
--link-external-color: var(--text-normal);
--link-external-decoration: none;
--link-external-decoration-hover: none;
display: grid;
gap: 8px;
grid-template-columns: var(--list-cards-template);
padding: 0;
}
.list-cards div > ul > li {
display: flex;
border-radius: var(--radius-s);
border: 1px solid var(--color-base-25);
flex-wrap: wrap;
}
.list-cards div > ul > li a {
flex-grow: 0;
}
.list-cards div > ul > li a:after {
content: "";
flex-basis: 100%;
height: 0;
}
.list-cards div ul > li a {
flex-grow: 1;
padding: 16px;
font-weight: var(--font-semibold);
background: none;
}
.list-cards div ul > li:hover {
border-color: var(--color-base-35);
}
.theme-dark .list-cards div ul > li {
background-color: var(--background-secondary);
}
.list-cards div ul ul {
display: block;
width: 100%;
color: var(--text-muted);
font-size: var(--font-smaller);
margin-top: -8px;
padding: 0 16px 16px;
}
.list-cards div ul ul > li {
display: block;
}
@media screen and (max-width: 750px) {
.list-cards.list-cards-mobile-full {
--list-cards-template: repeat(1, minmax(0, 1fr));
}
}
```
# References
https://forum.obsidian.md/t/obsidian-publish-buttons/73759/2
---
- [[Index-Obsidian]]