add skip to content link

remove old tesseract fx files
Uberton · Dec 30, 2021 · c2666e8 · c2666e8
1 parent 28a9e97
commit c2666e8
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 202 deletions.
diff --git a/Contact.html b/Contact.html
@@ -26,6 +26,7 @@
 
 
 <body onload="onBodyLoad()">
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="banner"></div>
     <div class="header-spacer"></div>
 
@@ -57,7 +58,7 @@
     </div>
 
     <div class="main-wrapper">
-        <main>
+        <main id="main-content">
 
             <h1>
                 Contact

diff --git a/Developer.html b/Developer.html
@@ -25,6 +25,7 @@
 </head>
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="logo">
         <img src="media/img/logo_black_glow.svg">
     </div>
@@ -37,16 +38,16 @@
 
 
     <div class="main-wrapper">
-        <main>
+        <main id="main-content">
             <h1>
                 Documentation for Developers
             </h1>
             <p>
-                Überton is entirely open-source, you can get the source code from Github and build the 
-                audio plugins on your maschine. 
+                Überton is entirely open-source, you can get the source code from Github and build the
+                audio plugins on your maschine.
             </p>
             <p>
-                In this developer section you can find information for building and modifying the plugins of the Überton 
+                In this developer section you can find information for building and modifying the plugins of the Überton
                 project (or creating new ones) and how to contribute or fix errors.
             </p>
             <p>

diff --git a/Listening.html b/Listening.html
@@ -29,6 +29,7 @@
 
 
 <body onload="onBodyLoad()">
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="banner"></div>
     <div class="header-spacer"></div>
 
@@ -60,7 +61,7 @@
     </div>
 
     <div class="main-wrapper">
-        <main>
+        <main id="main-content">
 
             <h1>
                 Projects using Überton
@@ -87,9 +88,9 @@ <h1>
                         Read the booklet for more information (German only).
                     </p>
                     <!--<div class="newplayer">
-                        <button>Play</button>
-                        <button>Pause</button>
-                    </div>-->
+                    <button>Play</button>
+                    <button>Pause</button>
+                </div>-->
                     <audio class="audioplayer" controls>
                         <source src="media/audio/raum_et_ude.mp3" type="audio/mp3" />
                         Your browser doesn't support playing this audio file.

diff --git a/Plugins.html b/Plugins.html
@@ -26,6 +26,7 @@
 </head>
 
 <body onload="onBodyLoad()">
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="banner"></div>
     <div class="header-spacer"></div>
 
@@ -57,7 +58,7 @@
     </div>
 
     <div class="main-wrapper">
-        <main>
+        <main id="main-content">
 
             <h1 class="plugin-page-title">
                 Plugins

diff --git a/css/base.css b/css/base.css
@@ -0,0 +1,23 @@
+
+.skip-to-content {
+    padding: 1rem;
+    position: absolute;
+    z-index: 21;
+    background: rgb(128 128 128 / 81%);
+    color: white;
+    font-weight: bold;
+    font-size: small;
+    text-transform: uppercase;
+    text-decoration: none;
+    transform: translateY(-120%);
+    transition: transform .4s;
+}
+
+    .skip-to-content:focus {
+        transform: translateY(0);
+    }
+
+
+#main-content {
+    scroll-margin-top: 60px;
+}
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,4 @@
+@import "base.css";
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
 /*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap');*/

diff --git a/css/main_developer.css b/css/main_developer.css
@@ -1,10 +1,13 @@
+@import "base.css";
+
 html {
     min-height: 100%;
 }
 
 
 body {
     background: rgb(249, 249, 249);
+    font-family: sans-serif;
 }
 
 .logo {
@@ -29,8 +32,6 @@ nav {
     justify-content: center;
     flex-wrap: wrap;
     background: linear-gradient(88deg, black, transparent);
-    font-family: sans-serif;
-
     /*background: linear-gradient(88deg, black, #1337489e);*/
 }
 
@@ -61,7 +62,6 @@ nav {
     padding: 0;
     width: 80%;
     font-size: 16px;
-    font-family: sans-serif;
     text-align: justify;
     line-height: 140%;
     color: #353535;
@@ -163,27 +163,27 @@ h2 {
     overflow: scroll;
 }
 
-.file-list, .file-list ul {
-    padding-left: 20px;
-}
-
-    .file-list li {
-        list-style-type: '-';
-        padding-left: 5px;
-        list-style-type: none;
+    .file-list, .file-list ul {
+        padding-left: 20px;
     }
 
-        .file-list li::before {
-            width: 18px;
-            height: 18px;
-            margin-right: 5px;
-            content: ' ';
-            background-size: 18px 18px;
-            display: inline-block;
-            position: relative;
-            top: 2px;
+        .file-list li {
+            list-style-type: '-';
+            padding-left: 5px;
+            list-style-type: none;
         }
 
+            .file-list li::before {
+                width: 18px;
+                height: 18px;
+                margin-right: 5px;
+                content: ' ';
+                background-size: 18px 18px;
+                display: inline-block;
+                position: relative;
+                top: 2px;
+            }
+
 li.fl-folder::before {
     background-image: url(../media/img/folder-icon.svg);
 }
@@ -207,9 +207,11 @@ li.fl-html::before {
 li.fl-cpp::before {
     background-image: url(../media/img/cpp-icon.svg);
 }
+
 li.fl-header::before {
     background-image: url(../media/img/header-icon.svg);
 }
+
 li.fl-png::before {
     background-image: url(../media/img/png-icon.svg);
 }

diff --git a/developer/Audio_Programming_for_Beginners.html b/developer/Audio_Programming_for_Beginners.html
@@ -32,6 +32,7 @@
 </head>
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="logo">
         <img src="../media/img/logo_black_glow.svg">
     </div>
@@ -44,7 +45,7 @@
 
 
 
-    <div class="main-wrapper">
+    <div class="main-wrapper" id="main-content">
         <header>
             <h1>
                 Audio programming for beginners

diff --git a/developer/Creating_a_new_plugin_project.html b/developer/Creating_a_new_plugin_project.html
@@ -25,6 +25,7 @@
 </head>
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="logo">
         <img src="../media/img/logo_black_glow.svg">
     </div>
@@ -36,7 +37,7 @@
     </nav>
 
 
-    <div class="main-wrapper">
+    <div class="main-wrapper" id="main-content">
         <header>
             <h1>
                 Creating a new plugin

diff --git a/developer/Installation_and_Setup.html b/developer/Installation_and_Setup.html
@@ -27,6 +27,7 @@
 </head>
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="logo">
         <img src="../media/img/logo_black_glow.svg">
     </div>
@@ -39,7 +40,7 @@
 
 
 
-    <div class="main-wrapper">
+    <div class="main-wrapper" id="main-content">
         <header>
             <h1>
                 Installation and Setup

diff --git a/developer/Overview_uberton_repository.html b/developer/Overview_uberton_repository.html
@@ -27,6 +27,7 @@
 </head>
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="logo">
         <img src="../media/img/logo_black_glow.svg">
     </div>
@@ -39,7 +40,7 @@
 
 
 
-    <div class="main-wrapper">
+    <div class="main-wrapper" id="main-content">
         <header>
             <h1>
                 Overview of the structure of the Überton Git repository
@@ -170,7 +171,7 @@ <h2><a id="plugin-struc"></a>2. Plugin structure</h2>
                 </ul>
             <p>
                 A set of factory presets for the plugin can be added as well as a user guide or manual to be included in the
-                Windows/Linux installer. 
+                Windows/Linux installer.
             </p>
             <p>
                 Extended structure of the Tesseract directory:

diff --git a/index.html b/index.html
@@ -24,6 +24,7 @@
 </head>
 
 <body onload="onBodyLoad()">
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="banner"></div>
     <div class="header-spacer"></div>
 
@@ -55,14 +56,14 @@
     </div>
 
     <div class="main-wrapper">
-        <main class="two_col_container">
+        <main class="two_col_container" id="main-content">
 
             <div>
                 <h1 class="glow1">
                     How would a different universe sound?
                 </h1>
                 <p>
-                    The Überton Project aims to develop ready-to-use and open-source VST&reg; audio plugins for instruments 
+                    The Überton Project aims to develop ready-to-use and open-source VST&reg; audio plugins for instruments
                     and sound effects based on concepts of theoretical physics.
 
                 </p>

diff --git a/plugins/Tesseract.html b/plugins/Tesseract.html
@@ -27,6 +27,7 @@
 </head>
 
 <body onload="onBodyLoad()">
+    <a href="#main-content" class="skip-to-content">Skip to content</a>
     <div class="banner"></div>
     <div class="header-spacer"></div>
 
@@ -58,7 +59,7 @@
     </div>
 
     <div class="main-wrapper">
-        <main>
+        <main id="main-content">
             <h1 class="plugin-page-plugin-name">VST Plugin Tesseract</h1>