add content and change project layout

assets/pubkey.asc

@@ -0,0 +1,51 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=98Kc
+-----END PGP PUBLIC KEY BLOCK-----

assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"./images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"./images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

assets/styles/content.sass

@@ -0,0 +1,50 @@
+@import 'variables'
+
+*
+  scroll-behavior: smooth
+
+a
+  cursor: pointer
+
+@media print
+  a.print:after
+    content: " (" attr(href) ") "
+    font-size: 50%
+
+.synopsis
+  .desc > p
+    // make command line wraps keep indent
+    margin: 0
+    margin-left: 4em
+    text-indent: -4em
+    @media (max-width: 600px)
+      margin-left: 2em
+      text-indent: -2em
+
+.options, .history
+  .desc > ul > li
+    list-style: none
+  .desc  li > .opt_desc
+    margin-left: 2em
+    @media (max-width: 600px)
+      margin-left: 1em
+    p
+      margin-top: 0
+
+.history
+  // .job
+  //   font-weight: bold
+  // .org
+  //   font-style: italic
+  .period
+    float: right
+    font-style: italic
+
+#phone-hint
+  visibility: hidden
+  opacity: 0
+#phone:hover
+  #phone-hint
+    opacity: inherit
+    visibility: inherit
+    transition: all 1s ease-out

assets/styles/index.sass

@@ -0,0 +1,10 @@
+@import 'variables'
+@import 'npm:@csstools/normalize.css/normalize.css'
+
+*
+  box-sizing: border-box
+
+@import 'structure'
+@import 'content'
+@import 'typography'
+@import 'scheme'

assets/styles/scheme.sass

@@ -0,0 +1,89 @@
+
+$bg: #444444
+$mg: #222222
+$fg: #C8C8C8
+
+$dim: #A4A4A4
+$bright: #D8D8D8
+$dimmer: #888888
+$brighter: #FBFBFB
+
+$accent1: #98e2ff
+$accent2: #ffe655
+$accent3: #82cdff
+$accent4: #69f07b
+
+body
+  background-color: $bg
+  color: $fg
+.container
+  background-color: $bg
+.content
+  background-color: $mg
+  h1, h2, h3, h4, h5, h6
+    color: $brighter
+.main
+  .target:target
+    animation: 2s attention ease-out
+
+  .period
+    color: $dimmer
+header, footer
+  color: $dimmer
+
+.dark
+  color: $bg
+.dim
+  color: $dim
+.dimmer
+  color: $dimmer
+.bright
+  color: $bright
+.brighter
+  color: $brighter
+
+.main
+  b
+    color: $accent4
+  em
+    color: $accent1
+  h1
+    color: $fg
+  .description, .options
+    em
+      color: $accent1
+  .options b
+      color: $accent4
+  .synopsis
+    .desc > p > b
+      color: $accent4
+  .history
+    .job
+      color: $accent4
+
+.target a, a.target
+  text-decoration: none
+  border: none
+  color: inherit
+  &:visited
+    color: inherit
+  &:hover
+    color: inherit
+
+a
+  text-decoration: none
+  border-bottom: 1px dotted grey
+  color: inherit
+  &:visited
+    color: inherit
+  &:hover, &:focus
+    color: $accent2
+
+#phone-hint
+  color: $dimmer
+
+@keyframes attention
+  70%
+    color: $accent2
+  100%
+    color: auto

assets/styles/structure.sass

@@ -0,0 +1,97 @@
+@import 'variables'
+
+body
+  padding: 0
+  margin: 0
+  line-height: 1.5
+
+.container
+  max-width: 1200px
+  margin: 0 auto
+  padding: 20px
+  min-height: 100vh
+
+.content
+  // text-align: justify
+  max-width: 1000px
+  margin: 0 auto
+  padding: 20px 40px
+  border-radius: 3px
+  @media (max-width: 600px)
+    padding: 20px
+
+.main
+  section
+    margin-bottom: 1.5*$size
+  h1
+    padding-left: 0
+  h2
+    padding-left: 2em
+    @media (max-width: 600px)
+      padding-left: 1em
+  .desc
+    padding-left: 4em
+    @media (max-width: 600px)
+      padding-left: 2em
+  ol, ul
+    padding-left: 2em
+    @media (max-width: 600px)
+      padding-left: 1em
+    li
+      // list-style-position: inside
+      list-style-type: square
+  .history
+    .desc > ul > li
+      margin-bottom: 1.5*$size
+
+header
+  margin-bottom: 2*$size
+footer
+  margin-top: 2*$size
+
+header table, footer table
+  width: 100%
+  border-collapse: collapse
+  border-spacing: 0
+  .left, .right
+    width: 30%
+  .center
+    width: 40%
+  td
+    word-break: break-word
+
+header
+  .left, .right
+    text-transform: uppercase
+footer
+  .right
+    text-transform: uppercase
+
+.left
+  text-align: left
+.center
+  text-align: center
+.right
+  text-align: right
+
+// .box {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 100%;
+//   heigh: 100%;
+//   padding: 10px;
+//   box-sizing: border-box;
+// }
+//
+// .box div {
+//   width: 100%;
+//   height: 100%;
+//   padding: 10px;
+//   margin: 0;
+//   border: 0;
+//   box-sizing: border-box;
+// }
+// .box p {
+//     margin: 0
+// }

assets/styles/typography.sass

@@ -0,0 +1,24 @@
+@import 'variables'
+
+$font: 'IBM Plex Mono'
+$font_stack: $font, 'SF Mono', 'Liberation Mono', 'Consolas', monospace
+
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap')
+*
+  font-family: $font_stack
+
+body
+  font-size: $size
+
+h1, h2, h3, h4, h5, h6
+  font-size: $size + 2
+  text-transform: uppercase
+
+.header, .footer
+  // font-size: $size - 1
+  text-transform: uppercase
+  .center
+    text-transform: capitalize
+.footer
+  .left
+    text-transform: none

assets/styles/variables.sass

@@ -0,0 +1 @@
+$size: 12pt