Skip to content

Commit

Permalink
apply accessibility changes from index to all pages, add skip navigat…
Browse files Browse the repository at this point in the history 
…ion, change visually-hidden (sr-only), correct labels for SM icons
  • Loading branch information
@xebobytes
xebobytes committed Nov 20, 2023
1 parent 02bcb82 commit 9ddfe3a
Show file tree
Hide file tree
Showing 16 changed files with 271 additions and 153 deletions.
4 changes: 2 additions & 2 deletions assets/css/color-theme-blue.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Date: Thursday, June 16th 2022, 6:49:10 pm
* @Filename: color-themes.css
* @Last modified by:
* @Last modified time: Saturday, November 18th 2023, 10:35:57 pm
* @Last modified time: Monday, November 20th 2023, 2:39:25 pm
*/

/*done up to line 1980*/
Expand All @@ -23,7 +23,7 @@

--color-action-primary: #27559B; /* #3069C0 #3370cc // #1f4e93 #0047b3 #272778 z.B. button, focus in form, links etc.;#3f8cb4 #204578 rgba(79, 127, 248, 1); */
--color-action-lighter: #3069C0; /* #477ed1 // #0066ff #6c94f9 pagination */
--color-action-light: #99b7e5; /*or #85a9e0*/
--color-action-light: #AEC3EA; /* for AAA: #DBE6F5, b4: #99b7e5 or #85a9e0*/
--color-action-darker: #214883; /* #255193 #2859a3 // #2d64b7; old: #3b70f7 pagination */

--color-action-hover: rgba(51, 112, 204, 0.05); /* rgba(245, 106, 106, 0.05) button hover - lighter version of primary action color (most alpha) */
Expand Down
96 changes: 89 additions & 7 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Adapted by xebobytes
* @Date: Thursday, April 28th 2022, 4:26:16 pm
* @Filename: main.css
* @Last modified by:
* @Last modified time: Sunday, November 19th 2023, 6:58:26 pm
* @Last modified by:
* @Last modified time: Monday, November 20th 2023, 10:27:59 pm
*/


Expand Down Expand Up @@ -261,15 +261,75 @@ hr.major {
.align-right {
text-align: right; }

/*
.hidden {
/*transform: scale(0);*/
position: absolute;
left: -999px;
}
.hidden:focus {
position: inherit;
left: inherit;
}
*/

.visually-hidden{
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
}

/* could make visually-hidden appear if focus/active
.visually-hidden:focus, .visually-hidden:active{
position: inherit;
height: auto;
width: auto;
overflow: auto;
white-space: normal;
clip: inherit;
clip-path: inherit;
-webkit-clip-path: inherit;
border: 2px solid var(--color-action-primary);
background: var(--color-background-secondary);
color: var(--color-foreground-primary);
padding: .5rem .75rem;
}
a:active span.visually-hidden{
position: inherit;
height: auto;
width: auto;
overflow: auto;
white-space: normal;
clip: inherit;
clip-path: inherit;
-webkit-clip-path: inherit;
background: var(--color-background-secondary);
color: var(--color-foreground-primary);
padding: .5rem .75rem;
}
*/

.skip-link:not(:active):not(:focus) {
top: -4rem;
}
.skip-link {
/* style when element has focus */
border: 2px solid var(--color-action-primary);
background: var(--color-background-secondary);
color: var(--color-action-primary);
padding: .25rem .5rem;
transition: top .25s ease-in;
position: absolute;
top: 1rem;
/*width: auto;
height: auto;
z-index: 1;*/
}


/* Row, responsive, with all margin possibilities*/
Expand Down Expand Up @@ -1214,8 +1274,15 @@ input[type="radio"] {
}
input[type="checkbox"] + label.checkbtn::before{
/* display: none;*/
/*position: absolute;
left: -999px;*/
position: absolute;
left: -999px;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}

input[type="checkbox"] + label:before {
Expand Down Expand Up @@ -1277,9 +1344,17 @@ input[type="radio"] + label:before {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
.icon > .label {
/*display: none;*/
/*display: none;*/
/*position: absolute;
left: -999px;*/
position: absolute;
left: -999px;}
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.icon:before {
line-height: inherit; }
.icon.solid:before {
Expand Down Expand Up @@ -2172,8 +2247,15 @@ nav {
}
#nav-check {
/*display: none;*/
/*position: absolute;
left: -999px;*/
position: absolute;
left: -999px;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.closing {
transform: scale(0);
Expand Down
24 changes: 14 additions & 10 deletions curriculum-vitae.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<meta name="description" content="Sven Kiefer is a PhD candidate in astrophysics, currently focusing on cloud formations on exoplanets." /> <!-- TODO -->

<!-- Also in html5up -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <!-- user-scalable??? -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/font-theme-orig.css">
<link rel="stylesheet" href="assets/css/color-theme-blue.css">
<link rel="stylesheet" href="assets/css/main.css">
Expand All @@ -28,7 +28,7 @@
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
</head>

<body class="is-preload" lang="en">
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">

Expand All @@ -37,26 +37,30 @@

<div class="inner">

<a class="skip-link" href="#h1">Skip navigation</a>

<!-- Header -->
<header id=header>

<!-- icons -->
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>

<!-- Navigation -->
<nav id=nav>
<nav id=nav aria-labelledby="mainmenulabel">
<input type="checkbox" id="nav-check">
<label for="nav-check" class="checkbtn">
<i class="fas fa-plus closing"></i>
<i class="fas fa-bars opening"></i>
<span class="visually-hidden">Open/close main menu with space bar</span>
</label>
<span id="mainmenulabel" class="visually-hidden">Main Menu</span>
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="active" href="curriculum-vitae.html">Curriculum Vitae</a></li>
<li><a class="active" href="curriculum-vitae.html" aria-current="page">Curriculum Vitae</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="outreach-teaching.html">Teaching&nbsp;&amp; Outreach</a></li>
<li><a href="extracurricular-activities.html">Extra-Curricular</a></li>
Expand All @@ -69,7 +73,7 @@
<section>
<!-- TODO -->
<header class="main">
<h1>Curiculum Vitae</h1>
<h1 id="h1">Curiculum Vitae</h1>
</header>

<!-- Content -->
Expand Down Expand Up @@ -270,11 +274,11 @@ <h2 id="extracurricular">Extracurricular Activities</h2>
<footer id=footer>
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>
<ul class="copyright">
<li>Copyright &copy; 2022. All rights reserved.</li>
<li>Copyright &copy; 2023 Sven Kiefer. All rights reserved.</li>
<li>Design based on <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
<!-- alt: <small>&copy; Copyright {{currentYear}}, Example Corporation</small> -->
Expand Down
21 changes: 12 additions & 9 deletions excu/anthology.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<meta name="description" content="Sven Kiefer is a PhD candidate in astrophysics, currently focusing on cloud formations on exoplanets." />

<!-- Also in html5up -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <!-- user-scalable??? -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../assets/css/font-theme-orig.css">
<link rel="stylesheet" href="../assets/css/color-theme-blue.css">
<link rel="stylesheet" href="../assets/css/main.css">
Expand All @@ -30,7 +30,7 @@
</head>


<body class="is-preload" lang="en">
<body class="is-preload">

<div id="page-wrapper">

Expand All @@ -41,23 +41,26 @@
<div id=main>
<div class="inner">

<a class="skip-link" href="#h1">Skip navigation</a>

<!-- Header -->
<header id=header>
<!-- icons -->
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>

<!-- Navigation -->
<nav id=nav>
<nav id=nav aria-labelledby="mainmenulabel">
<input type="checkbox" id="nav-check">
<label for="nav-check" class="checkbtn">
<i class="fas fa-plus closing"></i>
<i class="fas fa-bars opening"></i>
<span class="visually-hidden">Open/close main menu with space bar</span>
</label>
<span id="mainmenulabel" class="visually-hidden">Main Menu</span>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../curriculum-vitae.html">Curriculum Vitae</a></li>
Expand All @@ -73,7 +76,7 @@
<section>
<!-- Content -->
<header class="main">
<h1>Around Distant Suns</h1>
<h1 id="h1">Around Distant Suns</h1>
</header>

<!--<span class="image main"><img src="../images/aris/spac_meet.png" alt="" /></span>-->
Expand Down Expand Up @@ -175,11 +178,11 @@ <h3>Screen Play Writing</h3>
<footer id=footer>
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>
<ul class="copyright">
<li>Copyright &copy; 2022. All rights reserved.</li>
<li>Copyright &copy; 2023 Sven Kiefer. All rights reserved.</li>
<li>Design based on <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
<!-- alt: <small>&copy; Copyright {{currentYear}}, Example Corporation</small> -->
Expand Down
23 changes: 13 additions & 10 deletions excu/aris.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<meta name="description" content="Sven Kiefer is a PhD candidate in astrophysics, currently focusing on cloud formations on exoplanets." />

<!-- Also in html5up -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <!-- user-scalable??? -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../assets/css/font-theme-orig.css">
<link rel="stylesheet" href="../assets/css/color-theme-blue.css">
<link rel="stylesheet" href="../assets/css/main.css">
Expand All @@ -31,7 +31,7 @@



<body class="is-preload" lang="en">
<body class="is-preload">

<div id="page-wrapper">

Expand All @@ -42,23 +42,27 @@
<div id=main>
<div class="inner">

<a class="skip-link" href="#h1">Skip navigation</a>


<!-- Header -->
<header id=header>
<!-- icons -->
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>

<!-- Navigation -->
<nav id=nav>
<nav id=nav aria-labelledby="mainmenulabel">
<input type="checkbox" id="nav-check">
<label for="nav-check" class="checkbtn">
<i class="fas fa-plus closing"></i>
<i class="fas fa-bars opening"></i>
<span class="visually-hidden">Open/close main menu with space bar</span>
</label>
<span id="mainmenulabel" class="visually-hidden">Main Menu</span>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../curriculum-vitae.html">Curriculum Vitae</a></li>
Expand All @@ -75,7 +79,7 @@
<!-- TODO -->
<!-- Content -->
<header class="main">
<h1>ARIS</h1>
<h1 id="h1">ARIS</h1>
</header>

<span class="image main"><img src="../IMG/extracur/spac_meet.jpg" alt="Panorama picture of the exhibition hall of the Spaceport America Cup." /></span>
Expand Down Expand Up @@ -175,14 +179,13 @@ <h3>Screen Play Writing</h3>
<footer id=footer>
<ul class="icons">
<li><a href="https://twitter.com/ExoSvenK" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">Facebook</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">Medium</span></a></li>
<li><a href="https://github.com/Kiefersv" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon far fa-envelope"><span class="label">e-mail</span></a></li>
</ul>
<ul class="copyright">
<li>Copyright &copy; 2022. All rights reserved.</li>
<li>Copyright &copy; 2023 Sven Kiefer. All rights reserved.</li>
<li>Design based on <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
<!-- alt: <small>&copy; Copyright {{currentYear}}, Example Corporation</small> -->
</footer>

</div>
Expand Down
Loading

0 comments on commit 9ddfe3a

Please sign in to comment.