Jump to anchor inside details tag and refactor tablet styles

src/assets/javascripts/index.ts

@@ -277,6 +277,28 @@ export function initialize(config: unknown) {
     )
       .subscribe()
 
+  // TODO: patch details!
+
+  /* Open details after anchor jump */
+  merge(hash$, of(location.hash)) // getLocationHash
+    .subscribe(hash => {
+      const el = getElement(hash)
+      console.log("jump to", hash)
+      if (typeof el !== "undefined") {
+        const parent = el.closest("details")
+        if (parent && !parent.open) { // only if it is not open!
+          parent.open = true
+
+          /* Hack: force reload for repositioning */ // TODO. what happens here!?
+          location.hash = "" // reset
+          requestAnimationFrame(() => {
+            location.hash = hash // tslint:disable-line
+          })
+          // TODO: setLocationHash() + forceLocationHashChange
+        }
+      }
+    })
+
   // Scroll lock
   const toggle$ = useToggle("search")
   combineLatest([
@@ -300,6 +322,8 @@ export function initialize(config: unknown) {
     )
       .subscribe()
 
+  /* ----------------------------------------------------------------------- */
+
   // General keyboard handlers
   keyboard$
     .pipe(

src/assets/stylesheets/base/_typeset.scss

@@ -419,12 +419,11 @@ kbd {
 
   // Data tables
   table:not([class]) {
-    @include z-depth(2);
-
     display: inline-block;
     max-width: 100%;
     border-radius: px2rem(2px);
     font-size: ms(-1);
+    box-shadow: inset 0 0 0 px2rem(1px) $md-color-black--lightest;
     overflow: auto;
     -webkit-overflow-scrolling: touch;