From 58d5d71975d76c37ddac1e99f506bcedc99d711f Mon Sep 17 00:00:00 2001 From: Anthony Weathersby Date: Thu, 26 Sep 2024 08:42:43 -0600 Subject: [PATCH] Update site layout and color --- crates/cli/bin.rs | 4 ++ site/assets/sass/codemirror.sass | 25 ++++++++--- site/assets/sass/color.sass | 25 ++++++++--- site/assets/sass/header.sass | 22 ++++++--- site/assets/sass/lab.sass | 57 +++++++----------------- site/assets/sass/main_template.sass | 39 ++++++++-------- site/layouts/partials/header/header.html | 22 ++++++--- 7 files changed, 111 insertions(+), 83 deletions(-) diff --git a/crates/cli/bin.rs b/crates/cli/bin.rs index 93e2af3d..a3f04f2a 100644 --- 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 index 5bffe438..5a7acd86 100644 --- 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 index d9f13e1a..3efa0f92 100644 --- 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 index d9400a8b..b14df122 100644 --- 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 index 663f9b80..8e01624a 100644 --- 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,7 +24,7 @@ &.dragging position: fixed z-index: 1000 - background-color: $background-color + background-color: $basic-bg-color box-shadow: 2px 2px 10px black &.nb-blank-field @@ -33,37 +32,39 @@ 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 index 1b939296..291a5e43 100644 --- 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 index f2bd8b02..58abe2e2 100644 --- a/site/layouts/partials/header/header.html +++ b/site/layouts/partials/header/header.html @@ -1,5 +1,8 @@
- +
+ + +
{{ . }}
{{ end }} - {{ if eq .Kind "home" }} - +
+
+ + + {{ with $.Site.Data.resource_locations }} - - {{end}} + + + {{end}} +
\ No newline at end of file