A modern look with round edges

[arv-anshul]

We should implement round edges in mkdocs-material because this is the norm now-a-days. I have done same on my website too.

I've used border-radius CSS property for this in stylesheets/customize.css. My base border-radius is 0.5rem.

customize.css

👀 See full customize.css

:root {
  --base-border-radius: 0.5rem;
}

/* Change font family of filename present on top of code block. */
.highlight span.filename {
  border-bottom: none;
  border-radius: var(--base-border-radius);
  display: inline;
  font-family: var(--md-code-font-family);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 5px;
  text-align: center;
}
.highlight span.filename + pre > code {
  border-radius: var(--base-border-radius);
  border-top-left-radius: 0;
}
.md-typeset pre > code {
  border-radius: var(--base-border-radius);
}

/* Grid Cards */
.md-typeset .grid.cards > ul > li {
  border-radius: var(--base-border-radius);
}
.md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 0 0.2rem #ffffff40;
}

/* Markdown Button */
.md-typeset .md-button {
  border-radius: var(--base-border-radius);
}

/* Critic, Mark */
ins.critic,
del.critic {
  text-decoration: none;
}

.md-typeset .critic,
.md-typeset mark {
  border-radius: 0.2rem;
  padding: 0 0.2rem;
}

.md-typeset mark {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-mark-color);
}

.md-typeset ins.critic {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-ins-color);
}

.md-typeset del.critic {
  box-shadow: 0 0 0 0.1rem var(--md-typeset-del-color);
}

/* Forms */
.md-search__form {
  border-radius: var(--base-border-radius);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-top-right-radius: var(--base-border-radius);
  border-top-left-radius: var(--base-border-radius);
}

[dir="ltr"] .md-search__output {
  border-bottom-right-radius: var(--base-border-radius);
  border-bottom-left-radius: var(--base-border-radius);
}

/* Blog - index.md */
.md-post--excerpt {
  background-color: var(--md-accent-fg-color--transparent);
  box-shadow: 0 0 0 1rem var(--md-accent-fg-color--transparent);
  border-radius: var(--base-border-radius);
}

/* Table */
.md-typeset table:not([class]) {
  border-radius: var(--base-border-radius);
}

I have customised Buttons, Search Bar (form), Grid Cards, Critic, Mark, Table, Code Blocks.

😎 See some samples on my website

• Table: https://arv-anshul.github.io/blog/learn-docker/#differences-between-gitignore-and-dockerignore
• Code Blocks: https://arv-anshul.github.io/projects/yt-watch-history/channel_reco/#model-overview
• Grid Cards and Button: https://arv-anshul.github.io/#ml-projects
• Critic: https://arv-anshul.github.io/#python

[Wcowin]

Wonderful job,bro! I'm trying this.

[arv-anshul]

Thanks @Wcowin .

If you had anything interesting then please share.

[W1ndys]

Hello, here are some comments for Chinese friends
为中文用户写的一些注释

/* 定义全局变量 */
:root {
    --base-border-radius: 0.5rem; /* 基础边框半径 */
}

/* 高亮样式 */
.highlight span.filename {
    border-bottom: none; /* 取消底部边框 */
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
    display: inline;
    font-family: var(--md-code-font-family); /* 使用 Markdown 代码字体 */
    border-bottom-left-radius: 0; /* 底部左边框半径 */
    border-bottom-right-radius: 0; /* 底部右边框半径 */
    margin-bottom: 5px;
    text-align: center; /* 文本居中 */
}

.highlight span.filename+pre>code {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
    border-top-left-radius: 0; /* 顶部左边框半径 */
}

/* Markdown 类型设置 */
.md-typeset pre>code {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

/* 网格卡片 */
.md-typeset .grid.cards>ul>li {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

.md-typeset .grid.cards>ul>li:hover {
    box-shadow: 0 0 0.2rem #ffffff40; /* 鼠标悬停阴影 */
}

/* Markdown 按钮 */
.md-typeset .md-button {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

/* Critic, Mark */
ins.critic,
del.critic {
    text-decoration: none; /* 删除线和插入线的文本修饰 */
}

.md-typeset .critic,
.md-typeset mark {
    border-radius: 0.2rem; /* 边框半径 */
    padding: 0 0.2rem; /* 内边距 */
}

.md-typeset mark {
    box-shadow: 0 0 0 0.1rem var(--md-typeset-mark-color); /* 阴影 */
}

.md-typeset ins.critic {
    box-shadow: 0 0 0 0.1rem var(--md-typeset-ins-color); /* 插入线阴影 */
}

.md-typeset del.critic {
    box-shadow: 0 0 0 0.1rem var(--md-typeset-del-color); /* 删除线阴影 */
}

/* 表单 */
.md-search__form {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

[data-md-toggle="search"]:checked~.md-header .md-search__form {
    border-top-right-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
    border-top-left-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

[dir="ltr"] .md-search__output {
    border-bottom-right-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
    border-bottom-left-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

/* 博客 - index.md */
.md-post--excerpt {
    background-color: var(--md-accent-fg-color--transparent); /* 背景颜色 */
    box-shadow: 0 0 0 1rem var(--md-accent-fg-color--transparent); /* 阴影 */
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

/* 表格 */
.md-typeset table:not([class]) {
    border-radius: var(--base-border-radius); /* 使用全局变量定义边框半径 */
}

[Wcowin]

Nice job！我准备替换为你的注释

[arv-anshul]

Hey @squidfunk , Is there any way or syntax so that I can replace the bullets of list items to SVG icon.

[arv-anshul]

I have looked around this syntax "Definition Lists" but doesn't looks good due vertical margins.

Code	Rendered Page

:material-document: is a mistake 😞

[kamilkrzyskow]

Hey @arv-anshul,

you can use an HTML list for that and add a CSS class to the items <li class="sp-type">...</li>, or you can annotate each list item with attr_list {: .sp-type}

You can see both examples in this commit: GothicKit/ZenKit@9ac9ed8
The icon is added via extra css: https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

[arv-anshul]

Hey @kamilkrzyskow, Thanks I got your suggestion!

One follow up question! I define classes like { .className } but you are using different syntax like {: .className } and the docs/ you referred me they also uses this syntax. Are both syntax are different? Because I never used {: this syntax.

[kamilkrzyskow]

@arv-anshul
From the documentation https://python-markdown.github.io/extensions/attr_list/

The colon after the opening brace is optional, but is supported to maintain consistency with other implementations.

Even though it's optional I prefer it as it is more "explicit" that this {: is an opening tag for the attr_list and not some kind of other thing.