diff --git a/README.md b/README.md index 2e740f1..57b582f 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 belo --- - [Features](#features) +- [CSS Variable](#css-variable) - [Built-in shortcodes](#built-in-shortcodes) - [Code highlighting](#code-highlighting) - [How to start](#how-to-start) @@ -61,6 +62,29 @@ re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 belo - fully responsive - fully based on Hugo ecosystem (Pipes and Modules) +## CSS Variables + +You can find all of them in the browser's page inspector, but here is the list with default values anyway: + +```css + :root { + --accent: #23B0FF; /* 1 of 5 basic colors */ + --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */ + --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */ + --color: white; /* text color, also some other text use the variable in color mixing */ + --border-color: rgba(255, 255, 255, .1); /* border color */ + --phone: "max-width: 684px"; /* phone breakpoint */ + --tablet: "max-width: 900px"; /* tablet breakpoint */ + --article-link-color: var(inherit); /* for you, who want to colorize your article links */ + + /* code syntax */ + /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */ + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-value-color: color-mix(in srgb, var(--accent), white); + } +``` + #### Built-in shortcodes - **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**) diff --git a/assets/css/post.scss b/assets/css/post.scss index 438c274..c77bbe5 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -78,6 +78,10 @@ &-content { margin-top: 30px; + + & a { + color: var(--article-link-color); + } } &-cover { diff --git a/assets/css/variables.scss b/assets/css/variables.scss index 70e44ad..cbb507c 100644 --- a/assets/css/variables.scss +++ b/assets/css/variables.scss @@ -4,6 +4,7 @@ --accent-contrast-color: black; --color: white; --border-color: rgba(255, 255, 255, .1); + --article-link-color: var(inherit); /* MEDIA QUERIES */ --phone: "max-width: 684px"; diff --git a/demoSite/content/posts/hello.md b/demoSite/content/posts/hello.md index a2363d8..01b3cd1 100644 --- a/demoSite/content/posts/hello.md +++ b/demoSite/content/posts/hello.md @@ -41,3 +41,5 @@ as default monospaced font. It's gorgeous! So, there you have it... enjoy! ``` + +[a link example](https://re-terminal.nebroeser.com) \ No newline at end of file