inline code

README.md

@@ -53,18 +53,19 @@ To create your own theme just rewrite following variables in your CSS file:
 
 - [x] code block
 - [x] seprate font for headline
+- [x] inline code
 - [ ] card component
 - [ ] dotted link
 - [ ] sizes for buttons
 - [ ] more demos
 - [ ] checkboxes
-- [ ] npm install support
+- [ ] `npm install` support
 - [ ] better docs page with code to copy
 
 ### v3
 
 - [ ] match variable name with CSS properties and HTML tags
-    - [ ] `--clsls-color-link-hover` →
+    - [ ] `--clsls-color-link-hover` → `--clsls-color-a-hover`
     - [ ] `--clsls-radius` → `--clsls-border-radius`
     - [ ] `--clsls-line-thickness` → `--clsls-border-width`
     - [ ] `--clsls-color-code` → `--clsls-color-code-background`

index.html

@@ -269,8 +269,9 @@ <h4><b>Horizontal</b></h4>
         <h2><b>Code</b></h2>
         <br>
         <pre><code>console.log('hi')</code></pre>
-
         <br />
+
+        <div>Use <code>var</code> keyword.</div>
         <br />
         <!-- <hr> -->
         <!-- <br> -->

src/index.css

@@ -356,6 +356,20 @@ pre:has(code) {
   border-radius: var(--clsls-radius);
 }
 
+pre code {
+  background-color: transparent;
+}
+
+/*
+    code
+*/
+
+code {
+  background-color: var(--clsls-color-code);
+  padding: 5px 10px 8px 10px;
+  border-radius: var(--clsls-radius);
+}
+
 /*
     muted text
 */