Browse Source

refactor(feature/svg-favicon): swap grid html for shortcode

Josh Habdas 11 months ago
parent
commit
20a1f6429c
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 9 additions and 9 deletions
  1. 9
    9
      docs/content/feature/svg-favicon.md

+ 9
- 9
docs/content/feature/svg-favicon.md View File

@@ -3,7 +3,7 @@ title = "SVG Favicon"
3 3
 description = "Decorate your site with a unique SVG favicon."
4 4
 categories = ["customizing"]
5 5
 tags = ["color", "style", "graphics", "branding"]
6
-features = ["code highlighter", "snippets", "related content"]
6
+features = ["code highlighter", "snippets", "related content", "grid", "cell"]
7 7
 +++
8 8
 
9 9
 After Dark ships with an 169B optimized[^1] SVG favicon embedded into every page:
@@ -25,32 +25,32 @@ The color of the icon can be modified by changing the `fill` attribute:
25 25
   text-align: center;
26 26
 }
27 27
 </style>
28
-<div class="grid">
29
-  <div class="cell -4of12">
28
+{{< hackcss-grid >}}
29
+  {{< hackcss-cell class="-4of12" >}}
30 30
     <figure>
31 31
       <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E" width="96">
32 32
       <figcaption class="highlight">
33 33
         <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%23f00&quot;</span></code></pre>
34 34
       </figcaption>
35 35
     </figure>
36
-  </div>
37
-  <div class="cell -4of12">
36
+  {{< /hackcss-cell >}}
37
+  {{< hackcss-cell class="-4of12" >}}
38 38
     <figure>
39 39
       <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E" width="96">
40 40
       <figcaption class="highlight">
41 41
         <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;lime&quot;</span></code></pre>
42 42
       </figcaption>
43 43
     </figure>
44
-  </div>
45
-  <div class="cell -4of12">
44
+  {{< /hackcss-cell >}}
45
+  {{< hackcss-cell class="-4of12" >}}
46 46
     <figure>
47 47
       <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E" width="96">
48 48
       <figcaption class="highlight">
49 49
         <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%2300f&quot;</span></code></pre>
50 50
       </figcaption>
51 51
     </figure>
52
-  </div>
53
-</div>
52
+  {{< /hackcss-cell >}}
53
+{{< /hackcss-grid >}}
54 54
 
55 55
 Adjust it from `favicon.html` in the site `layouts/partials/head` directory:
56 56
 

Loading…
Cancel
Save