LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 12:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement bowtie list styling

Browse Source
This commit is contained in:
James Fenn
2023-06-25 18:31:30 -04:00
parent 86e7bd6cfd
commit d11a3fbcd5
5 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/icons/list-bowtie-dark.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2797_35161)">
<path d="M5 3H2L1 8L2 13H5L7 10.5L5 8L7 5.5L5 3Z" fill="#87CEFF"/>
<path d="M11 3H14L15 8L14 13H11L9 10.5L11 8L9 5.5L11 3Z" fill="#87CEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 6C3.22386 6 3 6.22386 3 6.5C3 6.77614 3.22386 7 3.5 7H5.5C5.77614 7 6 6.77614 6 6.5C6 6.22386 5.77614 6 5.5 6H3.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10H5.5C5.77614 10 6 9.77614 6 9.5C6 9.22386 5.77614 9 5.5 9H3.5ZM10 6.5C10 6.22386 10.2239 6 10.5 6H12.5C12.7761 6 13 6.22386 13 6.5C13 6.77614 12.7761 7 12.5 7H10.5C10.2239 7 10 6.77614 10 6.5ZM10.5 9C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10H12.5C12.7761 10 13 9.77614 13 9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" fill="#007FB4"/>
<mask id="mask0_2797_35161" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V16H16V0ZM8 4L4 8L8 12L12 8L8 4Z" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_2797_35161)">
<path d="M3.82468 13.2708L3.8139 13.2729C3.79927 13.2757 3.7724 13.2804 3.7351 13.2851C3.66 13.2945 3.5458 13.3034 3.40622 13.2975C3.12628 13.2859 2.76111 13.2163 2.39749 12.989C1.71077 12.5598 0.75 11.3762 0.75 8.00016C0.75 4.62509 1.71025 3.44105 2.39691 3.01151C3.10494 2.56861 3.82149 2.729 3.8216 2.72851C3.8216 2.7285 3.82153 2.72848 3.82139 2.72845C4.89921 2.99882 5.8202 3.69707 6.37154 4.66196L7.25 6.19933V9.80098L6.37167 11.338C5.82083 12.3019 4.90112 12.9997 3.82468 13.2708Z" stroke="#007FB4" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M12.1753 2.72926C11.0989 3.00027 10.1792 3.6981 9.62837 4.66203L8.75 6.19918V9.80084L9.62836 11.338C10.1792 12.3019 11.0989 12.9997 12.1753 13.2707L12.1861 13.2729C12.2007 13.2757 12.2276 13.2804 12.2649 13.2851C12.34 13.2945 12.4542 13.3033 12.5938 13.2975C12.8737 13.2859 13.2389 13.2163 13.6025 12.989C14.2892 12.5598 15.25 11.3761 15.25 8.00001C15.25 4.62398 14.2893 3.44025 13.6025 3.01103C13.2389 2.78376 12.8737 2.71415 12.5938 2.70248C12.4542 2.69666 12.34 2.70552 12.2649 2.71491C12.2276 2.71957 12.2007 2.72427 12.1861 2.72707L12.1753 2.72926Z" stroke="#007FB4" stroke-width="1.5" stroke-linejoin="round"/>
</g>
<circle cx="8" cy="8" r="2.75" fill="#E5F2FF" stroke="#007FB4" stroke-width="1.5"/>
</g>
<defs>
<clipPath id="clip0_2797_35161">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

20
public/icons/list-bowtie-light.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2797_35160)">
<path d="M5 3H2L1 8L2 13H5L7 10.5L5 8L7 5.5L5 3Z" fill="#87CEFF"/>
<path d="M11 3H14L15 8L14 13H11L9 10.5L11 8L9 5.5L11 3Z" fill="#87CEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 6C3.22386 6 3 6.22386 3 6.5C3 6.77614 3.22386 7 3.5 7H5.5C5.77614 7 6 6.77614 6 6.5C6 6.22386 5.77614 6 5.5 6H3.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10H5.5C5.77614 10 6 9.77614 6 9.5C6 9.22386 5.77614 9 5.5 9H3.5ZM10 6.5C10 6.22386 10.2239 6 10.5 6H12.5C12.7761 6 13 6.22386 13 6.5C13 6.77614 12.7761 7 12.5 7H10.5C10.2239 7 10 6.77614 10 6.5ZM10.5 9C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10H12.5C12.7761 10 13 9.77614 13 9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" fill="#006590"/>
<mask id="mask0_2797_35160" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V16H16V0ZM8 4L4 8L8 12L12 8L8 4Z" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_2797_35160)">
<path d="M3.82468 13.2708L3.8139 13.2729C3.79927 13.2757 3.7724 13.2804 3.7351 13.2851C3.66 13.2945 3.5458 13.3034 3.40622 13.2975C3.12628 13.2859 2.76111 13.2163 2.39749 12.989C1.71077 12.5598 0.75 11.3762 0.75 8.00016C0.75 4.62509 1.71025 3.44105 2.39691 3.01151C3.10494 2.56861 3.82149 2.729 3.8216 2.72851C3.8216 2.7285 3.82153 2.72848 3.82139 2.72845C4.89921 2.99882 5.8202 3.69707 6.37154 4.66196L7.25 6.19933V9.80098L6.37167 11.338C5.82083 12.3019 4.90112 12.9997 3.82468 13.2708Z" stroke="#001E2E" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M12.1753 2.72926C11.0989 3.00027 10.1792 3.6981 9.62837 4.66203L8.75 6.19918V9.80084L9.62836 11.338C10.1792 12.3019 11.0989 12.9997 12.1753 13.2707L12.1861 13.2729C12.2007 13.2757 12.2276 13.2804 12.2649 13.2851C12.34 13.2945 12.4542 13.3033 12.5938 13.2975C12.8737 13.2859 13.2389 13.2163 13.6025 12.989C14.2892 12.5598 15.25 11.3761 15.25 8.00001C15.25 4.62398 14.2893 3.44025 13.6025 3.01103C13.2389 2.78376 12.8737 2.71415 12.5938 2.70248C12.4542 2.69666 12.34 2.70552 12.2649 2.71491C12.2276 2.71957 12.2007 2.72427 12.1861 2.72707L12.1753 2.72926Z" stroke="#001E2E" stroke-width="1.5" stroke-linejoin="round"/>
</g>
<circle cx="8" cy="8" r="2.75" fill="#E5F2FF" stroke="#001E2E" stroke-width="1.5"/>
</g>
<defs>
<clipPath id="clip0_2797_35160">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

29
src/styles/markdown/lists.scss Normal file
View File

@@ -0,0 +1,29 @@
@import "src/tokens/index";
:root {
--list_margin: var(--spc-4x);
--list_padding-start: var(--spc-1x);
// should match public/icons/list-bowtie-*.svg
--list_bowtie_size: 16px;
--list_item_padding-start: var(--spc-3x);
--list_item_padding-vertical: var(--spc-1x);
}
.post-body ul {
list-style-type: none;
margin: var(--list-margin) 0;
padding: calc(var(--list_item_padding-vertical) / 2) 0;
padding-left: var(--list_padding-start);
&> li {
background: url('/icons/list-bowtie-light.svg') no-repeat 0 center;
padding: calc(var(--list_item_padding-vertical) / 2) 0;
padding-left: calc(var(--list_bowtie_size) + var(--list_item_padding-start));
@include darkTheme {
background: url('/icons/list-bowtie-dark.svg') no-repeat 0 center;
}
}
}

1
src/styles/post-body.scss
View File

@@ -158,5 +158,6 @@
}
@import "src/styles/markdown/hints";
@import "src/styles/markdown/lists";
@import "src/styles/markdown/table";
@import "src/styles/markdown/tooltips";

6
src/tokens/_utils.scss
View File

@@ -13,7 +13,11 @@
}
@mixin darkTheme() {
:global(html.dark) &, :global(body.dark) &, :global(.darkTheme) & {
// these need to be defined separately because :global does not work outside of CSS modules
html.dark & {
@content;
}
:global(html.dark) & {
@content;
}
}