safari svg fixes

This commit is contained in:
Heydon Pickering 2017-07-01 12:41:40 +01:00
parent ba4ab5cc8b
commit 2931578221
21 changed files with 48 additions and 6 deletions

View File

@ -63,6 +63,27 @@ div:not([tabindex]):focus {
outline: none;
}
/* skip link */
[href="#main"] {
display: block;
width: 100%;
padding: 0.75rem;
color: #fff;
background: #000;
position: absolute;
top: -3rem;
text-align: center;
z-index: 1;
}
[href="#main"]:focus {
top: 0;
outline: none;
}
/* text styles */
h1, h2, h3, h4 {
font-family: Miriam Libre, serif;
line-height: 1.125;

View File

@ -17,6 +17,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -16,6 +16,7 @@
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">

View File

@ -35,7 +35,7 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">{{ .Title }}</span>
</a>
</li>
@ -47,7 +47,7 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">{{ .Title }}</span>
</a>
</li>

View File

@ -8,7 +8,7 @@
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
<svg class="balloon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
{{ .title }}
</a>:
</strong>

View File

@ -6,7 +6,7 @@
{{ if in $included .ref_id }}
<li>
<strong><a href="{{ .url }}">
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
{{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
</strong>
{{ if $descriptions }}

View File

@ -620,12 +620,17 @@ a svg {
margin-right: 0.125rem;
}
a .bookmark {
a .bookmark-icon {
width: 0.75em;
}
a .balloon {
a .balloon-icon {
height: 1.125em;
width: 0.85em;
}
a .wcag-icon {
width: 1.5em;
}
/* cross references */