blog: style: replace the funky h2 backgrounds with SVGs
This commit is contained in:
parent
badd62ec2d
commit
04f48def04
|
@ -14,6 +14,41 @@
|
||||||
@return $string;
|
@return $string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @source https://gist.github.com/B-iggy/14da053d2cebf92e1930
|
||||||
|
// @author B-iggy
|
||||||
|
@function url-encode($string) {
|
||||||
|
$map: (
|
||||||
|
"%": "%25",
|
||||||
|
"<": "%3C",
|
||||||
|
">": "%3E",
|
||||||
|
" ": "%20",
|
||||||
|
"!": "%21",
|
||||||
|
"*": "%2A",
|
||||||
|
"'": "%27",
|
||||||
|
'"': "%22",
|
||||||
|
"(": "%28",
|
||||||
|
")": "%29",
|
||||||
|
";": "%3B",
|
||||||
|
":": "%3A",
|
||||||
|
"@": "%40",
|
||||||
|
"&": "%26",
|
||||||
|
"=": "%3D",
|
||||||
|
"+": "%2B",
|
||||||
|
"$": "%24",
|
||||||
|
",": "%2C",
|
||||||
|
"/": "%2F",
|
||||||
|
"?": "%3F",
|
||||||
|
"#": "%23",
|
||||||
|
"[": "%5B",
|
||||||
|
"]": "%5D"
|
||||||
|
);
|
||||||
|
$new: $string;
|
||||||
|
@each $search, $replace in $map {
|
||||||
|
$new: str-replace($new, $search, $replace);
|
||||||
|
}
|
||||||
|
@return $new;
|
||||||
|
}
|
||||||
|
|
||||||
/// declare a cross-browser @font-face.
|
/// declare a cross-browser @font-face.
|
||||||
/// note that Firefox is very picky about the syntax here: experimentation shows that
|
/// note that Firefox is very picky about the syntax here: experimentation shows that
|
||||||
/// the eot MUST come first (even if FF doesn't load it), and the other formats MUST
|
/// the eot MUST come first (even if FF doesn't load it), and the other formats MUST
|
||||||
|
@ -90,6 +125,34 @@ $icon_bootstrap_arrow_return_right: url('data:image/svg+xml; utf8, <svg xmlns="h
|
||||||
$icon_bootstrap_arrow_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>');
|
$icon_bootstrap_arrow_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>');
|
||||||
// MIT; source: https://icon-sets.iconify.design/bi/arrow-bar-right/
|
// MIT; source: https://icon-sets.iconify.design/bi/arrow-bar-right/
|
||||||
$icon_bootstrap_arrow_bar_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/></svg>');
|
$icon_bootstrap_arrow_bar_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/></svg>');
|
||||||
|
// @author colin
|
||||||
|
// made in Inkscape
|
||||||
|
$icon_h2_slash_svg: '
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
width="9.0000038"
|
||||||
|
height="36.000004"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 9.0000038 36.000004"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
stroke="#{$color_cream_5}"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M 8.3205889,0.67941499 0.67941499,35.320589"
|
||||||
|
id="path2"
|
||||||
|
style="stroke-width:1.35883;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||||
|
</svg>
|
||||||
|
';
|
||||||
|
$icon_h2_slash: url("data:image/svg+xml; utf8, #{url-encode($icon_h2_slash_svg)}");
|
||||||
|
|
||||||
|
|
||||||
$marker_title: $icon_bootstrap_arrow_return_right;
|
$marker_title: $icon_bootstrap_arrow_return_right;
|
||||||
$marker_section: $icon_bootstrap_arrow_right;
|
$marker_section: $icon_bootstrap_arrow_right;
|
||||||
|
@ -135,16 +198,6 @@ h1, h2, h3, header
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// some element which should not ever be displayed.
|
|
||||||
// TODO: probably want to inline this to prevent any early rendering.
|
|
||||||
.hide
|
|
||||||
{
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
background-color: $color_bg;
|
background-color: $color_bg;
|
||||||
|
@ -168,13 +221,6 @@ body
|
||||||
flex-grow: 1000;
|
flex-grow: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tile-slash
|
|
||||||
{
|
|
||||||
font-size: 1.6rem;
|
|
||||||
// opacity: 50%;
|
|
||||||
color: $color_cream_5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal
|
.portal
|
||||||
{
|
{
|
||||||
max-width: 40rem;
|
max-width: 40rem;
|
||||||
|
@ -325,7 +371,8 @@ body
|
||||||
}
|
}
|
||||||
h2::after
|
h2::after
|
||||||
{
|
{
|
||||||
background: -moz-element(#tile-slash) center;
|
background-image: $icon_h2_slash;
|
||||||
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO colin: numbers are slightly wrong because of scrollbar width.
|
// TODO colin: numbers are slightly wrong because of scrollbar width.
|
||||||
|
|
|
@ -32,11 +32,6 @@
|
||||||
{% block content %} {% endblock %}
|
{% block content %} {% endblock %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="hide">
|
|
||||||
<span id="tile-slash">/</span>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user