Merge pull request #34 from GeopJr/lighthouse

_includes/css/main.css

@@ -1,5 +1,8 @@
-html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }
+html { 
+  box-sizing: border-box; 
+  scroll-behavior: smooth;
+}
 
 /* ---------------------------*/
 /* ----- Special Styles ----- */
@@ -38,6 +41,8 @@ code, pre {
 }
 
 /* block code */
+blockquote, blockquote > p { color: #7B7070 !important; }
+
 pre code { background: none; display: block; }
 pre {
   display: block;
@@ -49,6 +54,9 @@ pre {
 
 .highlight { margin:20px 5%; }
 
+/* ----- anchors ----- */
+nav > ul > li > a:focus, [aria-hidden="true"] > a { box-shadow: none; }
+a:focus { box-shadow: 0 0 0 3px {{ site.colors.purple }}cc; }
 
 /* ----- base elements ----- */
 
@@ -171,7 +179,7 @@ nav ul li:hover, nav ul li.active {
   width:100%;
   min-height:240px;
   padding: 40px 0;
-  background:url(img/bgnoise.png);
+  background-image:url(img/bgnoise.png);
   /* generated noise from noisetexturegenerator.com */
 }
 
@@ -361,6 +369,13 @@ nav ul li:hover, nav ul li.active {
   }
 }
 
+/* reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
 .intro-text {
   margin: 0 0 10px;
   font-family: "Segoe UI","Helvetica Neue","Helvetica",Arial,sans-serif;
@@ -388,7 +403,7 @@ button {
   padding: 10px 0;
   font-size: 1.8rem;
   text-align: center;
-  width: 400px;
+  max-width: 400px;
   background-color: #373277;
   margin-left: auto;
   margin-right: auto;

_posts/2000-01-01-intro.md

@@ -9,7 +9,7 @@ style: center
 {: .text-purple}
 
 <span style="font-size:100px; background:rgba(255,166,0,0.1)">
-  <img src="img/vscodium.png" />
+  <img alt="screenshot" src="img/vscodium.png" />
 </span>
 
 ### VSCodium is a community-driven, freely-licensed binary distribution of Microsoft's editor VSCode

_posts/2000-01-04-why.md

@@ -4,7 +4,7 @@ bg: white
 color: black
 ---
 
-## <a id="why"></a>Why Does This Exist
+## Why Does This Exist
 Microsoft's `vscode` source code is open source (MIT-licensed), but the product available for download (Visual Studio Code) is licensed under [this not-FLOSS license](https://code.visualstudio.com/license) and contains telemetry/tracking. According to [this comment](https://github.com/Microsoft/vscode/issues/60#issuecomment-161792005) from a Visual Studio Code maintainer: 
 
 > When we [Microsoft] build Visual Studio Code, we do exactly this. We clone the vscode repository, we lay down a customized product.json that has Microsoft specific functionality (telemetry, gallery, logo, etc.), and then produce a build that we release under our license.

_posts/2000-01-05-install.md

@@ -5,8 +5,8 @@ color: black
 ---
 
 <div class="link-button">
-<a href="https://github.com/VSCodium/vscodium/releases" style="color: white;text-decoration:none;">
+<a alt="latest release" href="https://github.com/VSCodium/vscodium/releases" style="color: white;text-decoration:none;">
-<b>Download latest release here</b><br>
+<b>Download latest release</b><br>
 <font size="-1">Available for Windows, Mac OS and Linux</font>
 </a>
 </div>
@@ -37,7 +37,7 @@ If you use Windows and have [Chocolatey](https://chocolatey.org) installed (than
 choco install vscodium
 ```
 
-### <a id="install-with-scoop"></a>Install with Scoop (Windows)
+### <a tabindex="-1" aria-hidden="true" id="install-with-scoop" href="#install-with-scoop"></a>Install with Scoop (Windows)
 If you use Windows and have [Scoop](https://scoop.sh/) installed:
 ```bash
 scoop bucket add extras
@@ -63,7 +63,7 @@ sudo apt update && sudo apt install vscodium
 
 ---
 
-[@paulcarroty](https://github.com/paulcarroty) has set up a repository for VSCodium [here](https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo). The instructions below are adapted from there. Any issues installing VSCodium using your package manager should be directed to that repository's issue tracker.
+[@paulcarroty](https://github.com/paulcarroty) has set up a [repository](https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo) for VSCodium. The instructions below are adapted from there. Any issues installing VSCodium using your package manager should be directed to that repository's issue tracker.
 
 #### Debian / Ubuntu (deb package):
 Add the GPG key of the repository:
@@ -130,7 +130,7 @@ nix-env -iA nixpkgs.vscodium
 
 #### Arch Linux
 
-VSCodium is available on the AUR (Arch User Repository) [here](https://aur.archlinux.org/packages/vscodium-bin/), and can be installed with an AUR Helper.
+VSCodium is available on the [AUR (Arch User Repository)](https://aur.archlinux.org/packages/vscodium-bin/), and can be installed with an AUR Helper.
 
 Examples:
 
@@ -143,8 +143,8 @@ Examples:
   yay -S vscodium-bin
   ```
 
-### <a id="flatpak"></a>Flatpak Option (Linux)
+### <a tabindex="-1" aria-hidden="true" id="flatpak" href="#flatpak"></a>Flatpak Option (Linux)
-VSCodium is (unofficially) available as a Flatpak app [here](https://flathub.org/apps/details/com.vscodium.codium) and the build repo is [here](https://github.com/flathub/com.vscodium.codium). If your distribution has support for [flatpak](https://flathub.org), and you have enabled the [flathub repo](https://flatpak.org/setup/):
+VSCodium is (unofficially) available as a [Flatpak app](https://flathub.org/apps/details/com.vscodium.codium) and here's the [build repo](https://github.com/flathub/com.vscodium.codium). If your distribution has support for [flatpak](https://flathub.org), and you have enabled the [flathub repo](https://flatpak.org/setup/):
 ```bash
 flatpak install flathub com.vscodium.codium
 

_posts/2000-01-06-moreinfo.md

@@ -5,4 +5,4 @@ color: black
 ---
 
 # More Info
-The most up-to-date information on migrating from Visual Studio Code and other quirks you might encounter are documented [here](https://github.com/VSCodium/vscodium/blob/master/DOCS.md).
+The most up-to-date information on migrating from Visual Studio Code and other quirks you might encounter are [documented](https://github.com/VSCodium/vscodium/blob/master/DOCS.md).

index.html

@@ -16,7 +16,7 @@
 	{% if site.touch_icon %}<link rel="apple-touch-icon" href="{{ site.touch_icon }}">{% endif %}
 </head>
 <body>
-  <div id="main">
+  <div role="main" id="main">
 
     <nav><ul>
       {% for node in site.posts reversed %}
@@ -58,6 +58,5 @@
     </div>
   </div>
 </body>
-<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="site.js"></script>
 </html>

site.js

@@ -1,95 +1 @@
-
+[...document.getElementById("install").getElementsByTagName("code")].forEach(x => x.tabIndex = 0);
-$.extend($.easing,
-{
-    def: 'easeOutQuad',
-    easeInOutExpo: function (x, t, b, c, d) {
-        if (t==0) return b;
-        if (t==d) return b+c;
-        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
-        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
-    }
-});
-
-(function( $ ) {
-
-    var settings;
-    var disableScrollFn = false;
-    var navItems;
-    var navs = {}, sections = {};
-
-    $.fn.navScroller = function(options) {
-        settings = $.extend({
-            scrollToOffset: 170,
-            scrollSpeed: 800,
-            activateParentNode: true,
-        }, options );
-        navItems = this;
-
-        //attatch click listeners
-    	navItems.on('click', function(event){
-    		event.preventDefault();
-            var navID = $(this).attr("href").substring(1);
-            disableScrollFn = true;
-            activateNav(navID);
-            populateDestinations(); //recalculate these!
-        	$('html,body').animate({scrollTop: sections[navID] - settings.scrollToOffset},
-                settings.scrollSpeed, "easeInOutExpo", function(){
-                    disableScrollFn = false;
-                }
-            );
-    	});
-
-        //populate lookup of clicable elements and destination sections
-        populateDestinations(); //should also be run on browser resize, btw
-
-        // setup scroll listener
-        $(document).scroll(function(){
-            if (disableScrollFn) { return; }
-            var page_height = $(window).height();
-            var pos = $(this).scrollTop();
-            for (i in sections) {
-                if ((pos + settings.scrollToOffset >= sections[i]) && sections[i] < pos + page_height){
-                    activateNav(i);
-                }
-            }
-        });
-    };
-
-    function populateDestinations() {
-        navItems.each(function(){
-            var scrollID = $(this).attr('href').substring(1);
-            navs[scrollID] = (settings.activateParentNode)? this.parentNode : this;
-            sections[scrollID] = $(document.getElementById(scrollID)).offset().top;
-        });
-    }
-
-    function activateNav(navID) {
-        for (nav in navs) { $(navs[nav]).removeClass('active'); }
-        $(navs[navID]).addClass('active');
-    }
-})( jQuery );
-
-
-$(document).ready(function (){
-
-    $('nav li a').navScroller();
-
-    //section divider icon click gently scrolls to reveal the section
-	$(".sectiondivider").on('click', function(event) {
-    	$('html,body').animate({scrollTop: $(event.target.parentNode).offset().top - 50}, 400, "linear");
-	});
-
-    //links going to other sections nicely scroll
-	$(".container a").each(function(){
-        if ($(this).attr("href").charAt(0) == '#'){
-            $(this).on('click', function(event) {
-        		event.preventDefault();
-                var target = $(event.target).closest("a");
-                var targetHight =  $(target.attr("href")).offset().top
-            	$('html,body').animate({scrollTop: targetHight - 170}, 800, "easeInOutExpo");
-            });
-        }
-	});
-
-});
-