hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

svg fixed widths

This commit is contained in:
Heydon Pickering 2017-08-24 13:31:48 +01:00
parent a2e30b592e
commit 54abe01d97
5 changed files with 49 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/css/styles.css
View File

@ -642,30 +642,38 @@ p:empty {
a svg,
button svg,
h1 svg,
th svg {
th svg,
li > svg {
height: 0.75em;
width: auto;
width: 0.75em;
margin-right: 0.25em;
}
h1 svg,
li > svg,
h2 a svg {
height: 1em;
width: auto;
vertical-align: middle;
}
h1 svg {
margin-right: 0;
margin-right: 0;
width: 0.85em;
height: 0.85em;
}
.wcag-icon {
width: 1.25em;
}
.bookmark-icon {
vertical-align: middle;
}
.link-icon {
width: 0.75em;
height: 0.75em;
}
.tags svg, .link-icon {
vertical-align: middle;
}
.balloon-icon {
width: 0.75em;
margin-right: 0;
}
.print {
white-space: nowrap;
font-style: normal;
}
.svg-outer {
width: 0.75em;
display: inline-block;
vertical-align: middle;
}
/* Color palettes */
.colors {
display: flex;

33
docs/js/dom-scripts.js
View File

@ -70,7 +70,7 @@
link.setAttribute('href', '#' + id);
var headingText = heading.textContent;
link.setAttribute('aria-label', 'This ' + headingText + ' section');
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
container.appendChild(link);
@ -79,37 +79,6 @@
})
}());
/* SVG scaling fix for IE10-11 */
(function () {
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
// Get all the SVGs on the page except the symbol defs
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg, th svg');
// ... iterate over SVGs
Array.prototype.forEach.call(svgs, function(svg) {
// Set preserveAspectRatio to 'XMidYMin slice'
svg.setAttribute('preserveAspectRatio', 'xMidYMin slice');
// Turn the viewBox values into an array
var viewBox = svg.getAttribute('viewBox').split(' ');
// Calculate padding value needed (width/height x 100)
var padding = (viewBox[2] / viewBox[3]) * 100;
// Set inline styles
svg.setAttribute('style', 'width: 100%; height: 1px; padding-bottom: ' + padding + '%; overflow: visible');
// Create span wrapper
var span = document.createElement('span');
span.setAttribute('class', 'svg-outer');
span.style.width = '0.75em';
svg.parentNode.insertBefore(span, svg);
span.appendChild(svg);
})
}
}());
/* Enable scrolling by keyboard of code samples */
(function () {
var codeBlocks = document.querySelectorAll('pre');

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

38
themes/infusion/static/css/styles.css
View File

@ -642,30 +642,38 @@ p:empty {
a svg,
button svg,
h1 svg,
th svg {
th svg,
li > svg {
height: 0.75em;
width: auto;
width: 0.75em;
margin-right: 0.25em;
}
h1 svg,
li > svg,
h2 a svg {
height: 1em;
width: auto;
vertical-align: middle;
}
h1 svg {
margin-right: 0;
margin-right: 0;
width: 0.85em;
height: 0.85em;
}
.wcag-icon {
width: 1.25em;
}
.bookmark-icon {
vertical-align: middle;
}
.link-icon {
width: 0.75em;
height: 0.75em;
}
.tags svg, .link-icon {
vertical-align: middle;
}
.balloon-icon {
width: 0.75em;
margin-right: 0;
}
.print {
white-space: nowrap;
font-style: normal;
}
.svg-outer {
width: 0.75em;
display: inline-block;
vertical-align: middle;
}
/* Color palettes */
.colors {
display: flex;

33
themes/infusion/static/js/dom-scripts.js
View File

@ -70,7 +70,7 @@
link.setAttribute('href', '#' + id);
var headingText = heading.textContent;
link.setAttribute('aria-label', 'This ' + headingText + ' section');
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
container.appendChild(link);
@ -79,37 +79,6 @@
})
}());
/* SVG scaling fix for IE10-11 */
(function () {
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
// Get all the SVGs on the page except the symbol defs
var svgs = document.querySelectorAll('a svg, button svg, h1 svg, .tags svg, th svg');
// ... iterate over SVGs
Array.prototype.forEach.call(svgs, function(svg) {
// Set preserveAspectRatio to 'XMidYMin slice'
svg.setAttribute('preserveAspectRatio', 'xMidYMin slice');
// Turn the viewBox values into an array
var viewBox = svg.getAttribute('viewBox').split(' ');
// Calculate padding value needed (width/height x 100)
var padding = (viewBox[2] / viewBox[3]) * 100;
// Set inline styles
svg.setAttribute('style', 'width: 100%; height: 1px; padding-bottom: ' + padding + '%; overflow: visible');
// Create span wrapper
var span = document.createElement('span');
span.setAttribute('class', 'svg-outer');
span.style.width = '0.75em';
svg.parentNode.insertBefore(span, svg);
span.appendChild(svg);
})
}
}());
/* Enable scrolling by keyboard of code samples */
(function () {
var codeBlocks = document.querySelectorAll('pre');