Update site layout and color

acweathersby · Sep 26, 2024 · 58d5d71 · 58d5d71
1 parent c2733a5
commit 58d5d71
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 83 deletions.
diff --git a/crates/cli/bin.rs b/crates/cli/bin.rs
@@ -42,6 +42,10 @@ pub fn command() -> ArgMatches {
           }})
           .default_value("bytecode")
         )
+        .arg(
+          arg!( --lab "Export the built parser to the RADLR online lab" )
+          .required(false)
+        )
         .arg(
           arg!( -a --ast "Create AST code, in the target language, from AScripT definitions" )
           .required(false)

diff --git a/site/assets/sass/codemirror.sass b/site/assets/sass/codemirror.sass
@@ -3,7 +3,7 @@
 
 .cm-editor
   font-family: monospace
-  color: #000
+  color: white
   direction: ltr
   left: 0
   right: 0
@@ -12,11 +12,29 @@
   outline: none
   position: absolute !important
 
+  .cm-line
+    background: none
+    box-sizing: border-box
+
+    &.cm-activeLine
+      background-color: $inc-1-bg-color
+      color: $inc-1-fg-color
+      border-radius: 2px
+
+  .cm-cursor
+    border-color: #ac3e3e
+    border-right: 1.5px solid #ac3e3e
+
   .cm-gutters
     border: none
-    background-color: $accent-color
     width: 40px
     text-align: right
+    background-color: $basic-bg-color
+    color: $inactive-color
+
+    .cm-activeLineGutter
+      color: $active-color
+      background: none
 
     .syn-prod
       color: #9f9f9f
@@ -50,9 +68,6 @@
   font-weight: bold
   margin-right: 2px
 
-.cm-activeLine
-  background-color: #626060 !important
-
 .cm-editor
   color: #9f9f9f
 

diff --git a/site/assets/sass/color.sass b/site/assets/sass/color.sass
@@ -1,5 +1,22 @@
 $accent-color: #9f9f9f
-$background-color: #2c2c2c
+
+$inc-2-bg-color: #9b9b9b
+$inc-1-bg-color: #373737
+$basic-bg-color: #2c2c2c
+$dec-1-bg-color: #3c3c3c
+$dec-2-bg-color: #111111
+
+$inc-2-fg-color: #3a3a3a
+$inc-1-fg-color: #8f8f8f
+$basic-fg-color: #b9b9b9
+$dec-1-fg-color: #efefef
+$dec-2-fg-color: #ffffff
+
+$nb-header-bg-color: #ac3e3e
+$nb-header-fg-color: #bdbdbd
+
+$loader-bg: #bdbdbd
+$loader-fg: $nb-header-bg-color
 
 $base-color: #e4e4e4
 $focus-color: #e4e4e4
@@ -13,11 +30,5 @@ $debugger-action-red: #f17559
 $debugger-controls-height: 30px
 $highlight-accent-1: #ED5E3F
 
-$loader-bg: #bf7526
-$loader-fg: #e48826
-
-$nb-background: red
-$nb-header-background: red
-
 $active-color: #828282
 $inactive-color: #4a4a4a
diff --git a/site/assets/sass/header.sass b/site/assets/sass/header.sass
@@ -3,19 +3,28 @@ header
   top: 0
   box-sizing: border-box
   flex-direction: row
-  align-items: center
   z-index: 10
-  height: 40px
+  height: 80px
   display: flex
   align-items: center
-  padding-right: 10px
+  justify-content: space-between
+  padding: 0 20px
 
   a
     display: contents
 
+  .header-left, .header-right
+    display: flex
+    align-items: center
+    flex-direction: row
+    justify-content: space-between
+
+  .header-right
+    width: 100px
+
   #header-logo
     display: inline-block
-    height: 16px
+    height: 2em
     margin-left: 10px
     margin-right: 4px
 
@@ -30,11 +39,12 @@ header
     border-left: 1px solid #7777773a
     padding-left: 4px
     margin-left: 2px
-    line-height: 1em
+    line-height: 20px
     position: relative
-    font-size: 20px
+    font-size: 2em
     height: 20px
     text-transform: uppercase
+    float: right
 
   #page-category-name
     font-size: .75em

diff --git a/site/assets/sass/lab.sass b/site/assets/sass/lab.sass
@@ -1,13 +1,12 @@
 #notebook
   user-select: none
   position: relative
-  width: 100%
   height: 100%
   bottom: 0px
   display: flex
   flex-direction: row
   align-content: center
-  top:
+  margin: 20px 40px
 
 .nb-row
   position: relative
@@ -25,45 +24,47 @@
   &.dragging
     position: fixed
     z-index: 1000
-    background-color: $background-color
+    background-color: $basic-bg-color
     box-shadow: 2px 2px 10px black
 
   &.nb-blank-field
     height: 0
     transition: height 200ms
 
   &.nb-content-field
-    color: white
     border-radius: 5px
     overflow: hidden
-    font-size: 18px
+    padding: 20px 0
 
     .nb-header
       position: relative
-      //background: $nb-header-background
       height: 20px
       display: flex
       flex-direction: row
+      justify-content: space-between
       align-items: center
-      transition: background 200ms
-      font-size: 12px
+      font-size: 1em
       font-weight: 800
+      border-radius: 2px
+      color: $inc-1-fg-color
+      transition: all 200ms
 
       &:hover
-        background: red
+        color: $nb-header-fg-color
+        background: $nb-header-bg-color
 
       .nb-label
         padding: 0 20px
 
       .nb-loader
-        width: 100px
+        width: 25%
         height: 10px
         background-color: $loader-bg
         border: 2px solid $loader-bg
         border-radius: 10px
         box-sizing: content-box
         padding: 0 10px
-        margin: 0 20px
+        margin-right: 10px
         opacity: 0
         visibility: hidden
         transition: opacity 100ms, visibility 100ms
@@ -82,7 +83,7 @@
           width: 10px
 
         50%
-          width: 20px
+          width: 30%
 
         100%
           left: 100%
@@ -91,23 +92,20 @@
     .nb-body
       position: relative
       background: none
-
       height: 400px
       padding: 20px
       margin-top: 20px
-      //height: 400px
       overflow: hidden
       opacity: 0
-      font-size: 14px
+      font-size: 1.35em
       flex-grow: 1
-
       transition: height 200ms, padding 200ms, margin 200ms, opacity 100ms
 
     &.collapsed .nb-body
       height: 0
+      opacity: 0
       margin-top: 0
       padding: 0px 20px
-      opacity: 0
 
     &.loading .nb-loader
       visibility: visible
@@ -116,28 +114,3 @@
     &.content-visible .nb-body
       height: unset
       opacity: 1
-
-  .cm-editor
-
-    color: white
-
-    .cm-cursor
-      border-color: red
-      border-right: 1.5px solid red
-
-    .cm-line
-      background: none
-      box-sizing: border-box
-
-      &.cm-activeLine
-        background: none !important
-        border-top: 1px solid $active-color
-        border-bottom: 1px solid $active-color
-
-    .cm-gutters
-      background: none
-      color: $inactive-color
-
-      .cm-activeLineGutter
-        color: $active-color
-        background: none
diff --git a/site/assets/sass/main_template.sass b/site/assets/sass/main_template.sass
@@ -2,8 +2,6 @@
 
 @import "color"
 
-$tab-height: 24px
-
 @font-face
   font-family: "LexandDeca"
   src: url('{{ urls.JoinPath .Site.BaseURL "./webfonts/LexandDeca/LexendDeca-VariableFont_wght.ttf" }}')
@@ -18,8 +16,6 @@ $tab-height: 24px
 
 body
   position: relative
-
-  background-color: rgb(255, 255, 255)
   border: none
 
   top: 0
@@ -33,12 +29,13 @@ body
   margin: 0
 
   font-family: Catamaran, Arial, Helvetica, sans-serif
-  font-size: 14px
+  font-size: 12px
+  letter-spacing: 0.08em
 
   opacity: 1
 
-  color: #7a7a7a
-  background-color: $background-color
+  color: $basic-fg-color
+  background-color: $basic-bg-color
 
   display: flex
   flex-direction: column
@@ -75,22 +72,28 @@ body.preload
   opacity: 0
 
 button
+  background: $basic-bg-color
   border: none
-  margin: 10px
-  font-size: 1.2em
-  padding: 5px 10px
-  border-radius: 20px
-  color: rgb(107, 107, 107)
+  font-size: 1.5em
+  border-radius: 1.5em
+  padding: 10px 10px
   transition: all 150ms
-  background-color: none
+  display: flex
+  flex-direction: row
+  align-items: center
+  color: $basic-fg-color
+  transition: color 250ms, background 250ms
+
+  path
+    fill: $basic-fg-color
+    transition: fill 250ms
 
 button:hover
-  background-color: #5fc7f0
-  color: white
   cursor: pointer
-
-button
-  font-size: 14px
+  background-color: $inc-1-bg-color
+  color: $inc-1-fg-color
+  path
+    fill: $inc-1-fg-color
 
 @import "./codemirror"
 @import "./header"

diff --git a/site/layouts/partials/header/header.html b/site/layouts/partials/header/header.html
@@ -1,5 +1,8 @@
 <header>
-    <a href="{{ relURL "/" }}">
+    <div class="header-left">
+
+
+    <a href="{{ relURL "/" }}" title="RADLR lab">
         <svg id="header-logo"  viewBox="0 0 1632 621" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
           <g transform="matrix(1,0,0,1,0,-846.565)">
               <g id="radlr-logo" transform="matrix(1.67421,0,0,0.893161,2191.98,296.115)" style="fill:white">
@@ -25,10 +28,19 @@
     {{ with .Scratch.Get "headerSubtext" }}
     <div id="page-category"><span id="page-category-name">{{ . }} </span></div>
     {{ end }}
-    {{ if eq .Kind "home" }}
-    <a href="https://github.com/acweathersby/radlr/tree/public-main/docs"><button> docs </button></a>
+  </div>
+  <div class="header-right">
+    <a href="https://github.com/acweathersby/radlr/tree/public-main/docs" title="RADLR's documentation on Github">
+      <button id="docs-button"> docs </button>
+    </a>
     {{ with $.Site.Data.resource_locations }}
-    <a href="{{  .github_repo_url }}"><img width=20 height="20" src="{{ relURL "/img/github-mark.svg"}}"></a>
-    {{end}}
+    <a href="{{  .github_repo_url }}" title="The RADLR Github repo">
+      <button id="github-logo">
+        <svg  width="20" height="20" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/>
+        </svg>
+      </button>
+    </a>
     {{end}}
+  </div>
 </header>