diff --git a/assets/css/callouts.css b/assets/css/callouts.css index 12bab2b8aa..9a2aaac119 100644 --- a/assets/css/callouts.css +++ b/assets/css/callouts.css @@ -10,7 +10,20 @@ @apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100; quotes: none; > *:first-child { - @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info']; + @apply relative ml-6 mt-0; + &:before { + @apply bg-black dark:bg-white; + position: absolute; + display: block; + margin-left: -24px; + margin-top: 4px; + width: 20px; + height: 20px; + mask-image: url('/icons/info-fill.svg'); + -webkit-mask-image: url('/icons/info-fill.svg'); + mask-repeat: no-repeat; + mask-size: cover; + } } *:last-child { @apply mb-0 after:content-none; @@ -18,34 +31,39 @@ &.warning { @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100; - > *:first-child { - @apply before:content-['dangerous']; + > *:first-child:before { + mask-image: url('/icons/dangerous-fill.svg'); + -webkit-mask-image: url('/icons/dangerous-fill.svg'); } } &.important { @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100; - > *:first-child { - @apply before:content-['warning']; + > *:first-child:before { + mask-image: url('/icons/warning-fill.svg'); + -webkit-mask-image: url('/icons/warning-fill.svg'); } } &.tip { @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100; - > *:first-child { - @apply before:content-['lightbulb']; + > *:first-child:before { + mask-image: url('/icons/lightbulb-fill.svg'); + -webkit-mask-image: url('/icons/lightbulb-fill.svg'); } } &.experimental { - > *:first-child { - @apply before:content-['science']; + > *:first-child:before { + mask-image: url('/icons/science-fill.svg'); + -webkit-mask-image: url('/icons/science-fill.svg'); } } &.restricted { @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100; - > *:first-child { - @apply before:content-['rocket\_launch']; + > *:first-child:before { + mask-image: url('/icons/rocket_launch-fill.svg'); + -webkit-mask-image: url('/icons/rocket_launch-fill.svg'); } } } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 99bdf9ebaa..e9a1970a85 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -60,3 +60,4 @@ {{ $mermaid := resources.Get "js/mermaid.js" | js.Build (dict "minify" true) }} {{ end }} +{{ partialCached "utils/resources.html" . }} diff --git a/layouts/partials/utils/resources.html b/layouts/partials/utils/resources.html new file mode 100644 index 0000000000..e1cfedf119 --- /dev/null +++ b/layouts/partials/utils/resources.html @@ -0,0 +1,11 @@ +{{/* meta partial for publishing resources */}} +{{ $icons := slice }} +{{ $icons = $icons | append (resources.Get "icons/info-fill.svg") }} +{{ $icons = $icons | append (resources.Get "icons/dangerous-fill.svg") }} +{{ $icons = $icons | append (resources.Get "icons/warning-fill.svg") }} +{{ $icons = $icons | append (resources.Get "icons/lightbulb-fill.svg") }} +{{ $icons = $icons | append (resources.Get "icons/science-fill.svg") }} +{{ $icons = $icons | append (resources.Get "icons/rocket_launch-fill.svg") }} +{{ range $icons }} + {{ .Publish}} +{{ end }}