try to unify css; experimental accessibility feature for margin/side note

layouts/_default/single.html

@@ -5,13 +5,11 @@
 */}}
 
 {{ define "main" }}
-<div id="layout" class="pure-g">
-<article class="pure-u-1">
+<article id="main">
   {{ partial "content.header.html" . }}
   {{ partial "toc.html" . }}
   <section>{{ .Content }}</section>
   <section>{{ partial "footer.html" . }}</section>
   <section>{{ partial "nav.html" . }}</section>
 </article>
-</div>
 {{ end }}

layouts/partials/header.includes.html

@@ -27,4 +27,4 @@
 {{ $htstyle := resources.Get "scss/hugo-tufte.scss"| resources.ExecuteAsTemplate "main.scss" .  | resources.ToCSS $htoptions }}
 <link rel="stylesheet" href="{{ $htstyle.Permalink | relURL }}">
 
-<link rel="stylesheet"  href="{{ "/css/hugo-tufte-override.css" | relURL }}">
+<link rel="stylesheet" href="{{ "/css/hugo-tufte-override.css" | relURL }}">

layouts/partials/shortcodes/button.html

@@ -33,18 +33,18 @@
 {{- $icon = trim $icon " " }}
 {{- $iconposition := .iconposition | default "left" }}
 {{- with $context }}
-<span class="btn cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<span class="btn {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   {{- if $isButton }}
   <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
   {{- else }}
   <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
   {{- end }}
     {{- if and $icon (eq $iconposition "left") }}
-    {{ $icon }}
+    <span class="icon">{{ $icon }}</span>
     {{- end }} 
     {{ $title | safeHTML }}
     {{- if and $icon (eq $iconposition "right") }}
-    {{ $icon }}
+    <span class="icon">{{ $icon }}</span>
     {{- end }}
   {{- if $isButton }}
   </button>