WIP: Refactoring

1 files changed, 65 insertions, 21 deletions

diff --git a/css/main.scss b/css/main.scss
index 42b0b28..27a62ec 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -11,7 +11,7 @@ $sel-background: rgba($accent, .996);
 $sel-text:       #000;
 
 $font-monospace:    'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
-$font-proportional: 'Iosevka Aile', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif;
+$font-proportional: 'Open Sans', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif;
 
 //
 // Basic element styles
@@ -28,16 +28,48 @@ body {
     // );
     color:            $text;
     font-family:      $font-monospace;
-    font-size:        1 / 16 * 17em;
+    font-size:        1em; //1 / 16 * 17em;
     line-height:      1.5;
 }
 
+pre {
+    margin:      0;
+    font:        inherit;
+    font-family: $font-monospace;
+    white-space: pre-wrap;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font:        inherit;
+    font-weight: bold;
     color:       $text-plus;
     margin:      0;
 }
 
+p {
+    margin: 0;
+}
+
+ul, ol {
+    margin:          0;
+    padding:         0;
+    list-style-type: none;
+}
+
+ul {
+    li {
+        padding-left: 4ch;
+
+        &::before {
+            display:      inline-block;
+            width:        2ch;
+            padding-left: 2ch;
+            margin-left:  -4ch;
+            content:      '–';
+        }
+    }
+}
+
 button {
     background:      none;
     border:          0;
@@ -191,14 +223,9 @@ strong {
     text-align: center;
 
     &--word-wrap {
-        max-width: 50em;
-        max-width: 100ch;
+        max-width: 45em;
+        max-width: 90ch;
         margin:    0 auto;
-
-        .content {
-            white-space: pre-wrap;
-            word-wrap:   break-word;
-        }
     }
 }
 
@@ -213,22 +240,39 @@ strong {
     font:         inherit;
     font-family:  $font-proportional;
 
-    &--has-type-annotations {
-        padding-left: 3em;
-        padding-left: 5ch;
-    }
-
-    &--has-monospace-font {
+    &--monospace,
+    &--prefer-monospace {
         font-family: $font-monospace;
     }
 }
 
-.type-annotation {
-    margin-left: -3em;
-    margin-left: -5ch;
-    color:       $text-minus;
-    white-space: pre;
-    font-family: $font-monospace;
+.section {
+    display:         flex;
+    align-items:     baseline;
+    flex-direction:  row;
+    justify-content: flex-start;
+    min-height:      1em * 1.5;
+    padding-left:    3em;
+    padding-left:    5ch;
+
+    &__type {
+        flex:          0 0 auto;
+        margin-left:   -3em;
+        margin-left:   -5ch;
+        padding-right: 1.25em;
+        padding-right: 2ch;
+        width:         1.75em;
+        width:         3ch;
+        color:         $text-minus;
+        font-family:   $font-monospace;
+        text-align:    right;
+        user-select:   none;
+    }
+
+    &__content {
+        min-width: 0;
+        word-wrap: break-word;
+    }
 }
 
 //