accessibility audit, icons part 1
using a font for icons isn't great for site accessibility, so all font icons will be removed and replaced with svgs. nav and sub nav, page options and recent meta have been replaced
This commit is contained in:
parent
252059df19
commit
8c727d4414
8 changed files with 54 additions and 53 deletions
|
@ -50,13 +50,14 @@ code {
|
|||
}
|
||||
|
||||
svg[role="icon"] {
|
||||
transition: all 0.3s linear;
|
||||
fill: var(--white);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* HEADER
|
||||
/* HEADER
|
||||
Navigation
|
||||
Notificiations
|
||||
*/
|
||||
|
@ -123,9 +124,16 @@ header > nav > div.nav-right div.submenu button {
|
|||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
header > nav > div.nav-right div.submenu button[data-render="true"] {
|
||||
background: var(--tertiary);
|
||||
color: var(--primary);
|
||||
button[data-render="true"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
button[data-render="true"] svg {
|
||||
fill: var(--highlight);
|
||||
}
|
||||
|
||||
button[data-render="false"] svg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
|
|
@ -68,22 +68,22 @@ section[class="index-recent-pages"] button i {
|
|||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
section[class="index-recent-pages"] button[data-active="true"] {
|
||||
button[data-active="true"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
section[class="index-recent-pages"] button[data-active="true"] i {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
section[class="index-recent-pages"] button[data-active="false"] {
|
||||
button[data-active="false"] {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
section[class="index-recent-pages"] button[data-active="false"] i {
|
||||
button[data-active="false"] svg {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
button[data-active="true"] svg {
|
||||
fill: var(--highlight);
|
||||
}
|
||||
|
||||
section[class="index-recent-pages"] aside {
|
||||
font-size: 1.1em;
|
||||
color: var(--white);
|
||||
|
|
|
@ -230,35 +230,6 @@ main
|
|||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
main section[role="page-meta"] div[role="page-meta-wrapper"] button[data-active="false"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
main
|
||||
section[role="page-meta"]
|
||||
div[role="page-meta-wrapper"]
|
||||
button[data-active="false"]
|
||||
svg {
|
||||
fill: var(--secondary);
|
||||
}
|
||||
|
||||
main
|
||||
section[role="page-meta"]
|
||||
div[role="page-meta-wrapper"]
|
||||
div[role="page-options"]
|
||||
button[data-active="true"] {
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
main
|
||||
section[role="page-meta"]
|
||||
div[role="page-meta-wrapper"]
|
||||
div[role="page-options"]
|
||||
button[data-active="true"]
|
||||
svg {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
main
|
||||
section[role="page-meta"]
|
||||
div[role="page-meta-wrapper"]
|
||||
|
|
|
@ -6,17 +6,23 @@
|
|||
@endif
|
||||
<a id="settings" href="/dashboard/settings" title="settings">
|
||||
<button>
|
||||
<i class="ti ti-home-cog"></i>
|
||||
<svg id="nav-settings-icon" role="icon">
|
||||
<use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
||||
<button>
|
||||
<i class="ti ti-arrow-autofit-height"></i>
|
||||
<svg id="nav-menu-icon" role="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/logout" title="log out">
|
||||
<button>
|
||||
<i class="ti ti-logout"></i>
|
||||
<svg id="nav-logout-icon" role="icon">
|
||||
<use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -33,8 +33,8 @@ if(isset($page['uuid']))
|
|||
|
||||
<br>
|
||||
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ $menu }}" title='Pin to Menu'>
|
||||
<svg id="option-page-icon" role="icon">
|
||||
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
|
||||
<svg id="option-menu-pin" role="icon">
|
||||
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
|
||||
</svg>
|
||||
</button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{ $featured }}" title='Feature'>
|
||||
<svg id="option-feature-icon" role="icon">
|
||||
|
|
|
@ -33,14 +33,20 @@ if($page['featured'] == 'true')
|
|||
</strong>
|
||||
<hr/>
|
||||
<button data-active="{{ $menu }}">
|
||||
<i class="ti ti-navigation"></i>
|
||||
<svg id="option-menu-pin" role="icon">
|
||||
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button data-active="{{ $published }}">
|
||||
<i class="ti ti-world"></i>
|
||||
<svg id="option-published-icon" role="icon">
|
||||
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button data-active="{{ $featured }}">
|
||||
<i class="ti ti-star"></i>
|
||||
<svg id="option-feature-icon" role="icon">
|
||||
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</aside>
|
||||
|
|
|
@ -1,11 +1,17 @@
|
|||
<div class="submenu">
|
||||
<button id="save-toggle" title="save settings">
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
<svg id="save-toggle" role="icon">
|
||||
<use id="save-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="publish-pages" title="publish site">
|
||||
<i class="ti ti-world-upload"></i>
|
||||
<svg id="publish-pages" role="icon">
|
||||
<use id="publish-pages" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="render-toggle" title="render on save toggle" data-render="{{ $renderOnSave }}">
|
||||
<i class="ti ti-circle-dashed"></i>
|
||||
<svg id="render-toggle" role="icon">
|
||||
<use id="render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -1,12 +1,16 @@
|
|||
<div class="submenu">
|
||||
<a href='/dashboard/pages' title="view pages">
|
||||
<button>
|
||||
<i class="ti ti-book-2"></i>
|
||||
<svg id="option-menu-pin" role="icon">
|
||||
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-book"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<a href='/dashboard/page/add/new' title="add new page">
|
||||
<button>
|
||||
<i class="ti ti-square-plus"></i>
|
||||
<svg id="option-menu-pin" role="icon">
|
||||
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue