diff --git a/assets/icons/advanced-elements.svg b/assets/icons/advanced-elements.svg index 3d038ce..b479b66 100644 --- a/assets/icons/advanced-elements.svg +++ b/assets/icons/advanced-elements.svg @@ -1,21 +1,16 @@ - - - + + + diff --git a/assets/icons/arc.svg b/assets/icons/arc.svg index ce3326c..521f5c5 100644 --- a/assets/icons/arc.svg +++ b/assets/icons/arc.svg @@ -3,7 +3,7 @@ diff --git a/assets/icons/basic-elements.svg b/assets/icons/basic-elements.svg index 38bbd59..e37292e 100644 --- a/assets/icons/basic-elements.svg +++ b/assets/icons/basic-elements.svg @@ -1 +1,8 @@ -elements copy \ No newline at end of file + + + + + elements copy + + \ No newline at end of file diff --git a/assets/icons/bezier-cubic.svg b/assets/icons/bezier-cubic.svg index 280a2c2..0c03a10 100644 --- a/assets/icons/bezier-cubic.svg +++ b/assets/icons/bezier-cubic.svg @@ -3,7 +3,7 @@ diff --git a/assets/icons/bezier-quad.svg b/assets/icons/bezier-quad.svg index 972a97a..20d6816 100644 --- a/assets/icons/bezier-quad.svg +++ b/assets/icons/bezier-quad.svg @@ -3,7 +3,7 @@ diff --git a/assets/icons/close.svg b/assets/icons/close.svg index bbe3277..3053c85 100644 --- a/assets/icons/close.svg +++ b/assets/icons/close.svg @@ -6,12 +6,12 @@ } .a, .b { - stroke: #404040; + stroke: var(--font-color); stroke-miterlimit: 10; } .b { - fill: #f8f8f8; + fill: var(--background-lighter); } diff --git a/assets/icons/coordinate-system.svg b/assets/icons/coordinate-system.svg index 765d2ae..499b435 100644 --- a/assets/icons/coordinate-system.svg +++ b/assets/icons/coordinate-system.svg @@ -1,25 +1,17 @@ - - + + - - + + diff --git a/assets/icons/graphs.svg b/assets/icons/graphs.svg index 765d2ae..85d7fce 100644 --- a/assets/icons/graphs.svg +++ b/assets/icons/graphs.svg @@ -2,7 +2,7 @@ getting-started \ No newline at end of file + + + + + getting-started + + \ No newline at end of file diff --git a/assets/icons/move-to.svg b/assets/icons/move-to.svg index d3bf3c3..8aff685 100644 --- a/assets/icons/move-to.svg +++ b/assets/icons/move-to.svg @@ -6,7 +6,7 @@ } .a, .b { - stroke: #404040; + stroke: var(--font-color); stroke-miterlimit: 10; } diff --git a/assets/icons/notes.svg b/assets/icons/notes.svg index f99acf7..0464aa9 100644 --- a/assets/icons/notes.svg +++ b/assets/icons/notes.svg @@ -2,12 +2,12 @@ path \ No newline at end of file + + + + + path + + \ No newline at end of file diff --git a/assets/icons/properties.svg b/assets/icons/properties.svg index 8a44bd4..7ee997c 100644 --- a/assets/icons/properties.svg +++ b/assets/icons/properties.svg @@ -6,7 +6,7 @@ } .b { - fill: #f8f8f8; + fill: var(--background-lighter); } .c { @@ -26,7 +26,7 @@ } .g { - stroke: #404040; + stroke: var(--font-color); stroke-miterlimit: 10; } diff --git a/assets/icons/references.svg b/assets/icons/references.svg index f99acf7..0464aa9 100644 --- a/assets/icons/references.svg +++ b/assets/icons/references.svg @@ -2,12 +2,12 @@ - + \ No newline at end of file diff --git a/assets/icons/styling.svg b/assets/icons/styling.svg index e25b8da..36c1da1 100644 --- a/assets/icons/styling.svg +++ b/assets/icons/styling.svg @@ -1,15 +1,4 @@ - - - - - + + diff --git a/assets/icons/svg-tutorial.svg b/assets/icons/svg-tutorial.svg index a51c923..e243800 100644 --- a/assets/icons/svg-tutorial.svg +++ b/assets/icons/svg-tutorial.svg @@ -6,7 +6,7 @@ } .b { - fill: #404040; + fill: var(--font-color); } diff --git a/assets/icons/svg.svg b/assets/icons/svg.svg index c09dcb0..84ca835 100644 --- a/assets/icons/svg.svg +++ b/assets/icons/svg.svg @@ -1 +1 @@ -logo-dark \ No newline at end of file +logo-dark \ No newline at end of file diff --git a/assets/icons/theme-toggle.svg b/assets/icons/theme-toggle.svg new file mode 100644 index 0000000..0187766 --- /dev/null +++ b/assets/icons/theme-toggle.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/assets/icons/tree-structure.svg b/assets/icons/tree-structure.svg index 1672b22..b2bb2bd 100644 --- a/assets/icons/tree-structure.svg +++ b/assets/icons/tree-structure.svg @@ -1 +1,19 @@ -tree-structure \ No newline at end of file + + + + + tree-structure + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/typography.svg b/assets/icons/typography.svg index 095db30..5955536 100644 --- a/assets/icons/typography.svg +++ b/assets/icons/typography.svg @@ -2,7 +2,7 @@ diff --git a/assets/icons/web-usage.svg b/assets/icons/web-usage.svg index 737c8ba..4184759 100644 --- a/assets/icons/web-usage.svg +++ b/assets/icons/web-usage.svg @@ -2,11 +2,11 @@ javascript \ No newline at end of file + + + + + javascript + + + + \ No newline at end of file diff --git a/assets/images/text-position.svg b/assets/images/text-position.svg index f435142..9f79189 100644 --- a/assets/images/text-position.svg +++ b/assets/images/text-position.svg @@ -1,202 +1,267 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/assets/images/tree-structure.svg b/assets/images/tree-structure.svg index 8fc1653..de9a0c0 100644 --- a/assets/images/tree-structure.svg +++ b/assets/images/tree-structure.svg @@ -1,75 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/assets/scss/base/_mixins.scss b/assets/scss/base/_mixins.scss index 1eb981e..88b1d2e 100644 --- a/assets/scss/base/_mixins.scss +++ b/assets/scss/base/_mixins.scss @@ -1,4 +1,7 @@ -// Media query for mobile first layout +/* Mixins + =============== */ + +// Media query for mobile first layout @mixin small-breakpoint { @media (min-width: #{$mobile}) { @content; @@ -17,4 +20,4 @@ @media (min-width: #{$desktop}) { @content; } -} +} \ No newline at end of file diff --git a/assets/scss/base/_variables.scss b/assets/scss/base/_variables.scss index cdb18a9..f52ad05 100644 --- a/assets/scss/base/_variables.scss +++ b/assets/scss/base/_variables.scss @@ -1,154 +1,209 @@ -/** - * Variables - * - * The majority of the configuration for the toolkit. - */ - -//============================================================================== -// Containers -//============================================================================== - -$x-small: 425px !default; -$small: 600px !default; -$medium: 752px !default; -$large: 984px !default; - -//============================================================================== -// Breakpoints -//============================================================================== - -$mobile: $x-small !default; -$tablet: $small !default; -$desktop: $medium !default; - -//============================================================================== -// Global Colors -//============================================================================== - -$background: white !default; -$primary-color: #0366ee !default; -$secondary-color: #29de7d !default; -$accent-color: #cdcdcd !default; -$alternate-background: #fafafa !default; -$alternate-color: #404040 !default; -$link-color: $primary-color !default; -$link-hover-color: darken($link-color, 15%) !default; -$highlight: #ffeea8 !default; -$error: #d33c40 !default; -$success: #29de7d !default; -$bq-border: 16px solid #f0f0f0 !default; - -//============================================================================== -// Typography -//============================================================================== - -// Body -$font-size: 1rem !default; -$body-font-size: 1rem !default; -$font-style: normal !default; -$font-variant: normal !default; -$font-weight: normal !default; -$font-color: #404040 !default; -$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default; -$line-height: 1.6 !default; + +// TODO: lighter and darker should switch directions with the theme. But maybe this logic is handled in the .light-theme logic just fine + +/* default dark theme */ +:root { + --background: #202020; + --background-darker: #181818; + --background-lighter: #303030; + --font-color: #e0e0e0; + --medium-color: #a0a0a0; + --contrast-color: #bebebe; + + --highlight: #404040; + --border-color: #666666; + --border-color-darker: #4d4d4d; + + --grid-primary: #666666; + --grid-secondary: #404040; + --grid-tertiary: #262626; + + // --primary-color: #ffedba; + --primary-color: hsl(44, 97%, 84%); + + --accent-color: hsl(0, 0%, 20%); + --accent-color-lighter: hsl(0, 0%, 30%); + --accent-color-mid: hsl(0, 0%, 50%); + + --button-background: #404040; + --button-background-hover: hsl(0, 0%, 35%); + --button-color: #e0e0e0; + --button-highlight-color: #666666; + --button-border-color: #666666; + --button-border-hover-color: #777777; + + --red: #F2777A; + --green: #92D192; + --blue: #6AB0F3; +} + +/* toggle light theme */ +:root.light-theme { + + --background: #ffffff; + --background-darker: hsl(0, 0%, 95%); // darker + --background-lighter: hsl(0, 0%, 95%); // darker + --font-color: #404040; + --medium-color: #808080; + --contrast-color: #404040; + + --highlight: #f0f0f0; + --border-color: hsl(0, 0%, 80%); + --border-color-darker: hsl(0, 0%, 90%); // actually means lighter + + --grid-primary: #a0a0a0; + --grid-secondary: #d0d0d0; + --grid-tertiary: #f0f0f0; + + --primary-color: #485bfc; + --primary-dark-10: $primary-light-10; + --primary-dark-15: $primary-light-15; + + --main: #404040; + + --button-background: #f8f8f8; + --button-background-hover: hsl(0, 0%, 90%); + --button-color: #404040; + --button-highlight-color: #404040; + --button-border-color: #a0a0a0; + --button-border-hover-color: #777777; + + + --color-primary: #485bfc; + --color-secondary: #4bb77e; + --tertiary: #c74440; + + --red: #c74440; + --green: #4bb77e; + --blue: #485bfc; + +} + +/* layout variables */ + +$header-height: 4rem; +$aside-width: 240px; +$aside-container: 1024px; + +/* Containers */ + +$x-small: 240px; +$small: 608px; +$medium: 720px + 32px; /* 720 max width + margin */ +$large: 932px; + +/* Breakpoints */ + +$mobile: $small; +$tablet: $medium + 16px; +$desktop: $large; + +/* Colors */ + +$background: var(--background); +$primary-color: var(--primary-color); +$secondary-color: #29de7d; +$alternate-background: #fafafa; +$alternate-color: #404040; +$link-color: var(--primary-color); +$link-hover-color: var(--primary-dark-15); +$highlight: #f0f0f0; +$error: #D33C40; +$bq-border: 16px solid #f0f0f0; + +/* Typography */ + +// Body font +$font-size: 1rem; +$body-font-size: 1rem; +$font-style: normal; +$font-variant: normal; +$font-weight: normal; +$font-color: var(--font-color); +$font-color-light: #606060; +$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif; +// $font-family: 'Helvetica Neue','Segoe UI','Helvetica','Arial', sans-serif; +$line-height: 1.6; // Headings -$heading-font-color: #404040 !default; -$heading-font-weight: 600 !default; -$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, - sans-serif !default; -$heading-line-height: 1.2 !default; - -$h1-mobile: 1.75rem !default; -$h2-mobile: 1.5rem !default; -$h3-mobile: 1.25rem !default; -$h4-mobile: 1.1rem !default; -$h5-mobile: 1rem !default; - -$h1: 2.25rem !default; -$h2: 2rem !default; -$h3: 1.75rem !default; -$h4: 1.5rem !default; -$h5: 1.25rem !default; - -//============================================================================== -// Spacing -//============================================================================== - -$padding: 1rem !default; -$margins: 1.5rem !default; -$content-padding: 60px 0 !default; -$content-padding-mobile: 30px 0 !default; - -//============================================================================== -// Borders -//============================================================================== - -$border-width: 1px !default; -$border-style: solid !default; -$border-color: #dedede !default; -$border-radius: 4px !default; -$borders: $border-width $border-style $border-color !default; - -//============================================================================== -// Buttons -//============================================================================== - -$button-background: $primary-color !default; -$button-background-hover: darken($button-background, 10%) !default; -$button-color: #ffffff !default; -$button-font-weight: 600 !default; -$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default; -$button-font-size: 1rem !default; -$button-border-width: 1px !default; -$button-border-style: solid !default; -$button-border-color: $button-background !default; -$button-border-radius: $border-radius !default; -$button-text-transform: none !default; - -// Accent buttons -$accent-button-background: $secondary-color !default; -$accent-button-color: #ffffff !default; -$accent-button-color-hover: #ffffff !default; +$heading-font-color: var(--font-color); +$heading-font-weight: 600; +$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif; +$heading-line-height: 1.2; + +// Mobile heading font size +$h1-mobile: 1.75rem; +$h2-mobile: 1.5rem; +$h3-mobile: 1.25rem; +$h4-mobile: 1.1rem; +$h5-mobile: 1rem; + +// Heading font size +$h1: 2.0rem; +$h2: 1.75rem; +$h3: 1.5rem; +$h4: 1.25rem; +$h5: 1rem; + +/* Padding */ + +$padding: 1rem; +$margins: 1.5rem; +$content-padding: 60px 0; +$content-padding-mobile: 30px 0; + +/* Borders */ + +$border-width: 1px; +$border-style: solid; +$border-color: var(--border-color); +$border-radius: 4px; +$borders: $border-width $border-style $border-color; + +/* Buttons */ + +$button-background: var(--background-lighter); +$button-background-hover: var(--primary-dark-10); +$button-color: var(--button-color); +$button-font-weight: 600; +$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif; +$button-font-size: 1rem; +$button-border-width: 1px; +$button-border-style: solid; +$button-border-color: var(--primary-color); +$button-border-radius: $border-radius; +$button-text-transform: none; // Muted Buttons -$muted-border: 1px solid $accent-color !default; -$muted-border-hover: 1px solid darken($accent-color, 30%) !default; -$muted-background: transparent !default; -$muted-background-hover: transparent !default; -$muted-color: darken($accent-color, 50%) !default; -$muted-color-hover: darken($accent-color, 50%) !default; +$muted-border: 1px solid var(--accent-color); +$muted-border-hover: 1px solid var(--accent-color-lighter); +$muted-background: var(--background-darker); +$muted-background-hover: var(--background); +$muted-color: var(--font-color); +$muted-color-hover: var(--font-color); // Round Buttons -$round-buttons: 40px !default; - -//============================================================================== -// Forms -//============================================================================== - -$forms: ( - '[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea' -) !default; -$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]') !default; -$input-background: transparent !default; -$placeholder: darken($accent-color, 20%) !default; -$form-border: 1px solid $border-color !default; -$form-border-hover: 1px solid darken($border-color, 10%) !default; -$form-border-focus: 1px solid $link-color !default; - -//============================================================================== -// Tables -//============================================================================== - -$stripes: #f8f8f8 !default; -$caption: #ababab !default; - -//============================================================================== -// Code -//============================================================================== - -$code-color: $font-color !default; -$code-size: 14px !default; -$code-family: Menlo, monospace !default; -$code-background: transparent !default; -$code-borders: $borders !default; +$round-buttons: 40px; + +/* Forms */ + +$forms: ('[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea'); +$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]'); +$input-background: transparent; +$placeholder: var(--accent-color-lighter); +$form-border: 1px solid $border-color; +$form-border-hover: 1px solid var(--border-color-darker); +$form-border-focus: 1px solid $link-color; + +/* Tables */ + +$stripes: var(--highlight); +$caption: #ababab; + +/* Code */ + +$code-color: $font-color; +$code-size: 14px; +$code-family: Menlo, monospace; +$code-background: transparent; +$code-borders: $borders; diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss index 8d3070a..fc6d960 100644 --- a/assets/scss/components/_buttons.scss +++ b/assets/scss/components/_buttons.scss @@ -1,110 +1,112 @@ -/** - * Buttons - */ +/* Buttons + =============== */ // Main button styling %buttons { - -webkit-appearance: none; - display: inline-block; - border: $button-border-width $button-border-style $button-border-color; - border-radius: $button-border-radius; - background: $button-background; - color: $button-color; - font-weight: $button-font-weight; - font-family: $button-font-family; - font-size: $button-font-size; - text-transform: $button-text-transform; - padding: 0.75rem 1.25rem; - margin: 0 0 0.5rem 0; - vertical-align: middle; - text-align: center; - cursor: pointer; - text-decoration: none; - line-height: 1; + -webkit-appearance: none; + display: inline-block; + border: 1px solid var(--button-border-color); + border-radius: 4px; + background: var(--button-background); + color: var(--button-color); + font-weight: $button-font-weight; + font-family: $button-font-family; + font-size: $button-font-size; + text-transform: $button-text-transform; + padding: .75rem 1.25rem; + margin: 0 0 .5rem 0; + vertical-align: middle; + text-align: center; + cursor: pointer; + text-decoration: none; + line-height: 1; } + + // Buttons on hover %buttons-hover { - border: $button-border-width $button-border-style darken($button-border-color, 10%); - background: $button-background-hover; - color: $button-color; - text-decoration: none; + border: $button-border-width $button-border-style var(--button-border-hover-color); + background: var(--button-background-hover); + color: $button-color; + text-decoration: none; } // Buttons on focus %buttons-focus { - border: $button-border-width $button-border-style darken($button-border-color, 10%); - background: darken($button-background, 10%); - color: $button-color; - text-decoration: none; + border: $button-border-width $button-border-style var(--button-border-color); + background: var(--primary-dark-10); + color: $button-color; + text-decoration: none; } // Apply styles to .button class, button element, and button-based inputs #{$buttons} { - @extend %buttons; - - &::-moz-focus-inner { - border: 0; - padding: 0; - } - - &:hover { - @extend %buttons-hover; - } - - &:focus, - &:active { - @extend %buttons-focus; - } + @extend %buttons; + &::-moz-focus-inner { + border: 0; + padding: 0; + } + &:hover { + @extend %buttons-hover; + } + &:focus, + &:active { + @extend %buttons-focus; + } } -// Secondary button color -.accent-button, -a.accent-button { - color: $accent-button-color; - border: 1px solid $accent-button-background; - background: $accent-button-background; - - &:hover, - &:focus, - &:active { - color: $accent-button-color-hover; - border: 1px solid darken($accent-button-background, 10%); - background: darken($accent-button-background, 10%); - } +// Muted buttons +.muted-button-small, +a.muted-button-small { + background: $muted-background; + border: $muted-border; + color: $muted-color; + padding: 0.5rem 1rem; + &:hover, + &:focus, + &:active { + color: $muted-color-hover; + border: $muted-border-hover; + background: $muted-background-hover; + } } + // Muted buttons .muted-button, a.muted-button { - background: $muted-background; - border: $muted-border; - color: $muted-color; - - &:hover, - &:focus, - &:active { - color: $muted-color-hover; - border: $muted-border-hover; - background: $muted-background-hover; - } + background: $muted-background; + border: $muted-border; + color: $muted-color; + &:hover, + &:focus, + &:active { + color: $muted-color-hover; + border: $muted-border-hover; + background: $muted-background-hover; + } } // Round buttons .round-button, a.round-button { - border-radius: $round-buttons; + border-radius: $round-buttons; } // Square buttons .square-button, a.square-button { - border-radius: 0; + border-radius: 0; } // Full width buttons (block level) .full-button, a.full-button { - display: block; - width: 100%; + display: block; + width: 100%; } + +a[download]:hover { + text-decoration: none; +} \ No newline at end of file diff --git a/assets/scss/components/_flex.scss b/assets/scss/components/_flex.scss new file mode 100644 index 0000000..8e78037 --- /dev/null +++ b/assets/scss/components/_flex.scss @@ -0,0 +1,49 @@ +/* Flex +=============== */ + +$column-padding: 1rem; +$margin-bottom: 1rem; + +// The rows have a negative margin which are offset by the padding on the columns. +%column-padding { + padding-left: $column-padding; + padding-right: $column-padding; +} + +%row-margin { + margin-left: -$column-padding; + margin-right: -$column-padding; +} + +// Flex row +.flex-row { + @extend %row-margin; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.flex-small, +.flex-large { + @extend %column-padding; + flex-basis: 100%; + margin-bottom: $margin-bottom; +} + +/* Small screen breakpoint */ + +@include small-breakpoint { + .flex-small { + flex: 1; + margin-bottom: 0; + } +} + +/* Large screen breakpoint */ + +@include large-breakpoint { + .flex-large { + flex: 1; + margin-bottom: 0; + } +} diff --git a/assets/scss/components/_forms.scss b/assets/scss/components/_forms.scss index 46720ae..479e65e 100644 --- a/assets/scss/components/_forms.scss +++ b/assets/scss/components/_forms.scss @@ -1,127 +1,122 @@ -/** - * Forms - */ +/* Forms + =============== */ // Display for all input fields (except buttons and checkbox) %forms { - display: block; - border: $form-border; - border-radius: $border-radius; - padding: 0.75rem; - outline: none; - background: $input-background; - margin-bottom: 0.5rem; - font-size: 1rem; - width: 100%; - max-width: 100%; - line-height: 1; + display: block; + border: $form-border; + border-radius: $border-radius; + padding: .75rem; + outline: none; + background: $input-background; + margin-bottom: .5rem; + font-size: 1rem; + width: 100%; + max-width: 100%; + line-height: 1; } // Input fields on hover %forms-hover { - border: $form-border-hover; + border: $form-border-hover; } // Input fields on focus %forms-focus { - border: $form-border-focus; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px lighten($link-color, 30%); + border: $form-border-focus; + // box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 6px lighten($link-color, 30%); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 6px yellow; } // Variable containing all input fields #{$forms} { - @extend %forms; - - &:hover { - @extend %forms-hover; - } - - &:focus, - &:active { - @extend %forms-focus; - } + @extend %forms; + &:hover { + @extend %forms-hover; + } + &:focus, + &:active { + @extend %forms-focus; + } } textarea { - overflow: auto; - height: auto; + overflow: auto; + height: auto; } fieldset { - border: 1px solid $border-color; - border-radius: $border-radius; - padding: $padding; - margin: $margins 0; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $padding; + margin: $margins 0; } legend { - padding: 0 0.5rem; - font-weight: 600; + padding: 0 .5rem; + font-weight: 600; +} + +select.title-filter { + background-repeat: no-repeat; + background-position: right; + border-radius: 6px; + font-weight:bold; } // Fix issues with select select { - color: $font-color; - -webkit-appearance: none; - -moz-appearance: none; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJBAMAAADN8WE8AAAAJ1BMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9YSk7AAAADXRSTlPXABaehSjPsTwKw2xUcKPlSQAAADtJREFUCNdjMGBgYGAWBAKGACCLFcwSAbIcwSyhBAY2RTBLcAMDtyCENYthJZQlw3AQyhIsF4SxOiAsAFMMCKPY35E7AAAAAElFTkSuQmCC) - right center no-repeat; - line-height: 1; // ensures text doesn't get cut off + color: $font-color; + -webkit-appearance: none; + -moz-appearance: none; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23404040;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='a' points='8 12 12.619 4 3.381 4 8 12'/%3E%3C/svg%3E") right center no-repeat; + background-origin: content-box; + line-height: 1; // ensures text doesn't get cut off } select::-ms-expand { - display: none; // dropdown icon fix for IE + display: none; // dropdown icon fix for IE } // Make range full width -[type='range'] { - width: 100%; +[type=range] { + width: 100%; } // Labels label { - font-weight: 600; - max-width: 100%; - display: block; - margin: 1rem 0 0.5rem; + font-weight: 600; + max-width: 100%; + display: block; + margin: 1rem 0 .5rem; } @include small-breakpoint { - .split-form { - // Split forms have right aligned labels and margins on the column - label { - text-align: right; - padding: 0 0.5rem; - margin-bottom: 1rem; + .split-form { + // Split forms have right aligned labels and margins on the column + label { + text-align: right; + padding: 0 .5rem; + margin-bottom: 1rem; + } } - } } -// Form validation +// Errors input, select, textarea { - &.has-error { - border: 1px solid $error; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px lighten($error, 35%); - } - - &.is-success { - border: 1px solid $success; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px lighten($success, 25%); - } - - &:hover, - &:focus, - &:active { &.has-error { - @extend .has-error; + border: 1px solid $error; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 6px lighten($error, 35%); } - - &.is-success { - @extend .is-success; + &:hover, + &:focus, + &:active { + &.has-error { + @extend .has-error; + } } - } } // Placeholder Text @@ -129,5 +124,5 @@ textarea { ::-moz-placeholder, :-moz-placeholder, :-ms-input-placeholder { - color: $placeholder; + color: $placeholder; } diff --git a/assets/scss/components/_grid.scss b/assets/scss/components/_grid.scss index aa9e7fb..d58289c 100644 --- a/assets/scss/components/_grid.scss +++ b/assets/scss/components/_grid.scss @@ -1,80 +1,49 @@ -/** - * Grid - */ +/* Grid +=============== */ -$column-padding: 1rem; -$margin-bottom: 1rem; - -// The rows have a negative margin which are offset by the padding on the columns. -%column-padding { - padding-left: $column-padding; - padding-right: $column-padding; +.grid { + display: grid; } -%row-margin { - margin-left: -$column-padding; - margin-right: -$column-padding; +.grid.two, +.grid.three, +.grid.four { + grid-template-columns: auto; } -// Flex row -.flex-row { - @extend %row-margin; - display: flex; - flex-direction: row; - flex-wrap: wrap; +.grid.five { + grid-template-columns: auto auto auto ; } -.flex-small, -.flex-large { - @extend %column-padding; - flex-basis: 100%; - margin-bottom: $margin-bottom; +/* Extra small screen breakpoint */ + +@include small-breakpoint { + + .grid.two, + .grid.three, + .grid.four { + grid-template-columns: auto auto; + } + + .grid.five { + grid-template-columns: auto auto auto auto ; + } } /* Small screen breakpoint */ -@include small-breakpoint { - .flex-small { - flex: 1; - margin-bottom: 0; - &.half { - flex: 0 0 calc(1 / 2 * 100%); - } - &.one-fourth { - flex: 0 0 calc(1 / 4 * 100%); - } - &.three-fourths { - flex: 0 0 calc(3 / 4 * 100%); - } - &.one-third { - flex: 0 0 calc(1 / 3 * 100%); - } - &.two-thirds { - flex: 0 0 calc(2 / 3 * 100%); - } +@include medium-breakpoint { + .grid.three, + .grid.four { + grid-template-columns: auto auto auto; } } -/* Large screen breakpoint */ - @include large-breakpoint { - .flex-large { - flex: 1; - margin-bottom: 0; - &.half { - flex: 0 0 calc(1 / 2 * 100%); - } - &.one-fourth { - flex: 0 0 calc(1 / 4 * 100%); - } - &.three-fourths { - flex: 0 0 calc(3 / 4 * 100%); - } - &.one-third { - flex: 0 0 calc(1 / 3 * 100%); - } - &.two-thirds { - flex: 0 0 calc(2 / 3 * 100%); - } + .grid.four { + grid-template-columns: auto auto auto auto; + } + .grid.five { + grid-template-columns: auto auto auto auto auto; } } diff --git a/assets/scss/components/_helpers.scss b/assets/scss/components/_helpers.scss index 8a6a51c..bd80d30 100644 --- a/assets/scss/components/_helpers.scss +++ b/assets/scss/components/_helpers.scss @@ -1,131 +1,129 @@ -/** - * Helpers - */ +/* Helpers + =============== */ // Classic clearfix .clearfix::before, .clearfix::after { - content: ' '; - display: block; + content: " "; + display: block; } .clearfix:after { - clear: both; + clear: both; } // Text alignment .text-left { - text-align: left; + text-align: left; } .text-right { - text-align: right; + text-align: right; } .text-center { - text-align: center; + text-align: center; } .text-justify { - text-align: justify; + text-align: justify; } // Display .block { - display: block; + display: block; } .inline-block { - display: inline-block; + display: inline-block; } .inline { - display: inline; + display: inline; } // Vertical center .vertical-center { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; +} + +.vertical-left-center { + display: flex; + align-items: center; + justify-content: left; } // Responsive images .responsive-image { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } // Display State .show { - display: block !important; + display: block !important; } .hide { - display: none !important; + display: none !important; } .invisible { - visibility: hidden; + visibility: hidden; +} + +// Floats +.float-left { + float: left; +} + +.float-right { + float: right; } // Padding .no-padding-top { - padding-top: 0; + padding-top: 0; } .no-padding-bottom { - padding-bottom: 0; + padding-bottom: 0; } .padding-top { - padding-top: 2rem; + padding-top: 2rem; } .padding-bottom { - padding-bottom: 2rem; + padding-bottom: 2rem; } // Margins .no-margin-top { - margin-top: 0; -} - -.no-margin-bottom { - margin-bottom: 0; + margin-top: 0; } .margin-top { - margin-top: 2rem; + margin-top: 2rem; } .margin-bottom { - margin-bottom: 2rem; + margin-bottom: 1.5em; } // Backgrounds .alternate-background { - background: $alternate-background; - color: $alternate-color; -} - -.space-between { - justify-content: space-between; -} - -.justify-center { - justify-content: center; -} - -.align-center { - align-items: center; + background: $alternate-background; + color: $alternate-color; } // Screen reader text for accessibility .screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; } diff --git a/assets/scss/components/_highlight.scss b/assets/scss/components/_highlight.scss deleted file mode 100644 index bd04a4a..0000000 --- a/assets/scss/components/_highlight.scss +++ /dev/null @@ -1,118 +0,0 @@ - -// dark theme : https://taniarascia.github.io/new-moon/ -// $background: #2d2d2d; -// $comment: #777c85; -// $foreground: #b3b9c5; -// $function: #ffffff; -// $variable: #f2777a; -// $number: #fca369; -// $attribute: #ffd479; -// $keyword: #ffeea6; -// $string: #92d192; -// $class_tag: #6AB0F3; -// $constant_pseudo: #76d4d6; -// $support: #e1a6f2; -// $operator: #ac8d58; - -// light theme -$background: #fafafa; -$comment: #696969; -$foreground: #404040; -$function: #ffffff; -$variable: #c3393c; -$number: #036f6f; -$attribute: #a15727; -$keyword: #93348b; -$string: #1c23a3; -$class_tag: #93348b; -$constant_pseudo: #76d4d6; -$support: #e1a6f2; -$operator: #404040; - -// .filename + .highlight pre { -// border-radius: 0px; -// border-bottom-left-radius: $border-radius; -// border-bottom-right-radius: $border-radius; -// } - -// .filename { -// padding: .5rem 1rem; -// background: #424242; -// color: #f8f8f8; -// font-weight: 420; -// border-top-left-radius: $border-radius; -// border-top-right-radius: $border-radius; -// } - -/* Background */ .chroma { color: $foreground; background-color: $background } -/* Error */ .chroma .err { color: $foreground; background-color: $background } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } -/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Keyword */ .chroma .k { color: $keyword; font-weight: bold } -/* KeywordConstant */ .chroma .kc { color: $keyword; font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { color: $keyword; font-weight: bold } -/* KeywordNamespace */ .chroma .kn { color: $keyword; font-weight: bold } -/* KeywordPseudo */ .chroma .kp { color: $keyword; font-weight: bold } -/* KeywordReserved */ .chroma .kr { color: $keyword; font-weight: bold } -/* KeywordType */ .chroma .kt { color: $keyword; font-weight: bold } -/* NameAttribute */ .chroma .na { color: $attribute } -/* NameBuiltin */ .chroma .nb { color: $variable } -/* NameBuiltinPseudo */ .chroma .bp { color: $comment } -/* NameClass */ .chroma .nc { color: $class_tag; font-weight: bold } -/* NameConstant */ .chroma .no { color: $variable } -/* NameDecorator */ .chroma .nd { color: $variable; font-weight: bold } -/* NameEntity */ .chroma .ni { color: $variable } -/* NameException */ .chroma .ne { color: $variable; font-weight: bold } -/* NameFunction */ .chroma .nf { color: $variable; font-weight: bold } -/* NameLabel */ .chroma .nl { color: $variable; font-weight: bold } -/* NameNamespace */ .chroma .nn { color: $variable } -/* NameTag */ .chroma .nt { color: $class_tag } -/* NameVariable */ .chroma .nv { color: $variable } -/* NameVariableClass */ .chroma .vc { color: $variable } -/* NameVariableGlobal */ .chroma .vg { color: $variable } -/* NameVariableInstance */ .chroma .vi { color: $variable } -/* LiteralString */ .chroma .s { color: $string } -/* LiteralStringAffix */ .chroma .sa { color: $string } -/* LiteralStringBacktick */ .chroma .sb { color: $string } -/* LiteralStringChar */ .chroma .sc { color: $string } -/* LiteralStringDelimiter */ .chroma .dl { color: $string } -/* LiteralStringDoc */ .chroma .sd { color: $string } -/* LiteralStringDouble */ .chroma .s2 { color: $string } -/* LiteralStringEscape */ .chroma .se { color: $string } -/* LiteralStringHeredoc */ .chroma .sh { color: $string } -/* LiteralStringInterpol */ .chroma .si { color: $string } -/* LiteralStringOther */ .chroma .sx { color: $string } -/* LiteralStringRegex */ .chroma .sr { color: $string } -/* LiteralStringSingle */ .chroma .s1 { color: $string } -/* LiteralStringSymbol */ .chroma .ss { color: $string } -/* LiteralNumber */ .chroma .m { color: $number } -/* LiteralNumberBin */ .chroma .mb { color: $number } -/* LiteralNumberFloat */ .chroma .mf { color: $number } -/* LiteralNumberHex */ .chroma .mh { color: $number } -/* LiteralNumberInteger */ .chroma .mi { color: $number } -/* LiteralNumberIntegerLong */ .chroma .il { color: $number } -/* LiteralNumberOct */ .chroma .mo { color: $number } -/* Operator */ .chroma .o { color: $operator; } -/* OperatorWord */ .chroma .ow { color: $operator; font-weight: bold } -/* Comment */ .chroma .c { color: $comment; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: $comment; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: $comment; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: $comment; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: $comment; font-weight: bold; font-style: italic } -/* CommentPreproc */ .chroma .cp { color: $comment; font-weight: bold; font-style: italic } -/* CommentPreprocFile */ .chroma .cpf { color: $comment; font-weight: bold; font-style: italic } -/* GenericDeleted */ .chroma .gd { color: $variable; background-color: #ffdddd } -/* GenericEmph */ .chroma .ge { color: $variable; font-style: italic } -/* GenericError */ .chroma .gr { color: $variable } -/* GenericHeading */ .chroma .gh { color: $comment } -/* GenericInserted */ .chroma .gi { color: $variable; background-color: $background } -/* GenericOutput */ .chroma .go { color: $background } -/* GenericPrompt */ .chroma .gp { color: $variable } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: $comment } -/* GenericTraceback */ .chroma .gt { color: $comment } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: #bbbbbb } diff --git a/assets/scss/components/_navigation.scss b/assets/scss/components/_navigation.scss index 7570011..1507868 100644 --- a/assets/scss/components/_navigation.scss +++ b/assets/scss/components/_navigation.scss @@ -26,7 +26,7 @@ section.documentation main { header { // padding:1.5rem 0px; // background: #f8f8f8; - border-bottom:1px solid #dddddd; + border-bottom:1px solid var(--border-color); } section.aside { @@ -72,7 +72,7 @@ section.aside aside { } .aside-link { - color: $font-color; + color: var(--font-color); display: flex; flex-direction: row; align-items: center; @@ -88,22 +88,22 @@ li.group { .aside-link.active { - color: $primary-color; + color: var(--primary-color); } -.aside-link img { +.aside-link svg { vertical-align:middle; margin: 10px; } .aside-link:hover { - background: #f0f0f0; + background: var(--highlight); text-decoration: none; color: $font-color; } aside li.active { - background: #d2eff9; + background: var(--highlight); } .aside .heading { @@ -150,7 +150,7 @@ aside { position:-webkit-sticky; top:0; width: 220px; - background: #ffffff; + background: var(--background); z-index: 2; } diff --git a/assets/scss/components/_scaffolding.scss b/assets/scss/components/_scaffolding.scss index 6df13ec..e2c4b99 100644 --- a/assets/scss/components/_scaffolding.scss +++ b/assets/scss/components/_scaffolding.scss @@ -1,37 +1,37 @@ -/** - * Scaffolding - */ +/* Scaffolding + =============== */ // HTML base html { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font: $font-style $font-variant $font-weight #{$font-size}/#{$line-height} $font-family; - font-size: $font-size; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font: $font-style $font-variant $font-weight #{$font-size}/#{$line-height} $font-family; + font-size: $font-size; } // Body base body { - color: $font-color; - background: $background; - font-size: $body-font-size; + color: $font-color; + background: $background; + font-size: $body-font-size; } p, ol, ul, dl, -table { - margin: 0 0 $margins 0; +table, +figure { + margin: 0 0 $margins 0; } // Remove extra margin for nested lists ul li ul { - margin-bottom: 0; + margin-bottom: 0; } ol li ol { - margin-bottom: 0; + margin-bottom: 0; } // Headings @@ -40,204 +40,228 @@ h2, h3, h4, h5 { - margin: $margins 0; - font-weight: $heading-font-weight; - font-family: $heading-font-family; - line-height: $heading-line-height; - color: $heading-font-color; - - &:not(:first-child) { - margin: 1.5rem 0; - } + margin: $margins 0; + font-weight: $heading-font-weight; + font-family: $heading-font-family; + line-height: $heading-line-height; + color: $heading-font-color; + + &:not(:first-child) { + margin: 1.5rem 0; + } } // Increased margin on additional headings h1:not(:first-child), h2:not(:first-child), h3:not(:first-child) { - margin-top: 2rem; + margin-top: 2rem; } // Heading individual styles h1 { - font-size: $h1-mobile; + font-size: $h1-mobile; } h2 { - font-size: $h2-mobile; + font-size: $h2-mobile; } h3 { - font-size: $h3-mobile; + font-size: $h3-mobile; } h4 { - font-size: $h4-mobile; + font-size: $h4-mobile; } h5 { - font-size: $h5-mobile; + font-size: $h5-mobile; } @include small-breakpoint { - // Increased margin on additional headings - h1:not(:first-child), - h2:not(:first-child), - h3:not(:first-child) { - margin-top: 2.5rem; - } - - // Heading desktop individual styles - h1 { - font-size: $h1; - } - - h2 { - font-size: $h2; - } - h3 { - font-size: $h3; - } - - h4 { - font-size: $h4; - } + // Increased margin on additional headings + h1:not(:first-child), + h2:not(:first-child), + h3:not(:first-child) { + margin-top: 2.5rem; + } + + // Heading desktop individual styles + h1 { + font-size: $h1; + } + + h2 { + font-size: $h2; + } + + h3 { + font-size: $h3; + } + + h4 { + font-size: $h4; + } + + h5 { + font-size: $h5; + } +} - h5 { - font-size: $h5; - } +// TODO: if there is more draft logic, this should be separated into its own +a.draft { + color: var(--font-color); } // Link styling a { - color: $link-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: $link-hover-color; - text-decoration: underline; - } + color: $link-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: $link-hover-color; + text-decoration: underline; + } } // Highlight mark { - background: $highlight; - padding: 0 0.2rem; + background: $highlight; + padding: 0 0.2rem; } // Blockquote blockquote { - margin: 0 0 $margins 0; - border-left: $bq-border; - padding: 0 1.5rem; - font-size: 1.5rem; - - cite { - display: block; - margin-top: $margins; - font-size: 1rem; - text-align: right; - } + margin: 0 0 $margins 0; + border-left: $bq-border; + padding: 0 1.5rem; + font-size: 1.5rem; + + cite { + display: block; + margin-top: $margins; + font-size: 1rem; + text-align: right; + } } // Code block styling pre { - border: 1px solid $border-color; - border-radius: $border-radius; - background: $code-background; - padding: 1rem; - tab-size: 2; - color: $code-color; - font-family: $code-family; - font-size: $code-size; - margin: 0 0 $margins 0; - overflow: auto; - - code { + border: 0; + border-radius: $border-radius; + background: $code-background; + padding: 1rem; + tab-size: 2; + color: $code-color; font-family: $code-family; - line-height: 1.2; - } + font-size: $code-size; + margin: 0 0 $margins 0; + + code { + font-family: $code-family; + line-height: 1.2; + } +} + +table pre { + margin: 0; +} + +table div.equation.box { + margin: 0; } // Keyboard input kbd { - background-color: #f7f7f7; - border: 1px solid #ccc; - border-radius: 3px; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; - color: #333; - display: inline-block; - font-family: Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 1.4; - margin: 0 0.1em; - padding: 0.1em 0.6em; - text-shadow: 0 1px 0 #fff; + background-color: #f7f7f7; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; + color: #333; + display: inline-block; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 1.4; + margin: 0 .1em; + padding: .1em .6em; + text-shadow: 0 1px 0 #fff; } // Inline code styling -:not(pre) > code { - color: $code-color; - background: $code-background; - font-family: $code-family; - font-size: $code-size; - padding: 0 0.2rem; - border: $borders; - border-radius: $border-radius; +:not(pre)>code { + color: $code-color; + background: $code-background; + font-family: $code-family; + font-size: $code-size; + padding: 0 0.2rem; + // border: $borders; + // border-radius: $border-radius; } // Line break hr { - height: 0; - border: 0; - border-top: $borders; + height: 0; + border: 0; + border-top: $borders; } // Definition list dt { - font-weight: 600; + font-weight: 600; } dd { - margin-bottom: 0.5rem; + margin-bottom: .5rem; } // Full container .full-container { - max-width: 100%; - padding: 0 1rem; + max-width: 100%; + padding: 0 1rem; } // Container .container { - max-width: $large; - padding: 0 $padding; - margin-left: auto; - margin-right: auto; + max-width: $large; + padding: 0 $padding; + margin-left: auto; + margin-right: auto; } // Small container .small-container { - @extend .container; - max-width: $small; + @extend .container; + max-width: $small; } // Medium container .medium-container { - @extend .container; - max-width: $medium; + @extend .container; + max-width: $medium; +} + +// Large container +.large-container { + @extend .container; + max-width: $large; } +.interactive-container { + margin: 0 0 1.5rem 0; +} + + // Content .content-section { - padding: $content-padding-mobile; + padding: $content-padding-mobile; } @include small-breakpoint { - .content-section { - padding: $content-padding; - } -} + .content-section { + padding: $content-padding; + } +} \ No newline at end of file diff --git a/assets/scss/components/_syntax.scss b/assets/scss/components/_syntax.scss new file mode 100644 index 0000000..b7d2ec3 --- /dev/null +++ b/assets/scss/components/_syntax.scss @@ -0,0 +1,195 @@ +/* default dark theme */ +:root { + --syntax-background: #333333; + --syntax-foreground: #cdcdcd; + --syntax-comment: #A9A9A9; // Comment color + --syntax-comment-active: #b1b2b3; // Comment active + --syntax-cursor: #ffffff; // Cursor color + --syntax-activeline-background: rgba(0, 0, 0, 0.2); // Active line + --syntax-activeline-foreground: rgba(0, 0, 0, 0.3); + --syntax-matchingtag-background: rgba(0, 0, 0, 0.7); // Matching tag + --syntax-selected-background: rgba(255, 255, 255, 0.1); // Selected text + --syntax-matchingbracket-background: rgba(255,255,255,0.2); + + --syntax-string: #94C7B5; // HTML, CSS, JS string + --syntax-tag: #78AAD6; + --syntax-variable: #76D4D6; + --syntax-variable2: #ffffff; + --syntax-number: #ED9963; + --syntax-definition: #f7f7f7; // CSS definition + --syntax-keyword: #ffeead; // CSS !important, JS define a variable + --syntax-operator: #cda869; // Math + --syntax-meta: rgba(0, 0, 0, 0.7); + --syntax-meta-color: #f7f7f7; + --syntax-id: #D6ACD6; // CSS ID + --syntax-attribute: #FFD479; // HTML class="" + --syntax-property: #d4d4d4; // CSS definer + --syntax-qualifier: #FFD479; // CSS class + --syntax-error: #F78D8C; + + --syntax-very-light-gray: #cdcdcd; + --syntax-light-gray: #868a8c; + --syntax-gray: #3a3a3a; + --syntax-dark-gray: #3a3a3a; + --syntax-very-dark-gray: #3a3a3a; + + --syntax-cyan: #fff; + --syntax-blue: #6dc5dc; + --syntax-purple: #ffeead; + --syntax-green: #99ccaa; + --syntax-red: #78AAD6; + --syntax-orange: #9dbedd; + --syntax-light-orange: light-orange; +} + +/* toggle light theme */ +:root.light-theme { + + --syntax-very-light-gray: #cdcdcd; + --syntax-light-gray: #868a8c; + --syntax-gray: #3a3a3a; + --syntax-dark-gray: #3a3a3a; + --syntax-very-dark-gray: #3a3a3a; + + --syntax-cyan: #fff; + --syntax-light-blue: #6dc5dc; + --syntax-blue: #4992d8; + --syntax-blue2: #1365b1; + --syntax-purple: #9a52ad; + --syntax-red: #F78D8C; + --syntax-red2: #a73f3d; + --syntax-light-green: #99ccaa; + --syntax-green: #2ca57d; + --syntax-green2: #1b815f; + --syntax-yellow: #ffeead; + --syntax-orange0: #cda869; + --syntax-orange: #ED9963; + --syntax-orange2: #815329; + --syntax-orange3: #8d2d07; + + --syntax-background: #fafafa; // Code background + --syntax-foreground: #404040; // Code foreground + --syntax-comment: --syntax-light-gray; // Comment color + --syntax-comment-active: #b1b2b3; // Comment active + --syntax-cursor: #404040; // Cursor color + --syntax-activeline-background: rgba(0, 0, 0, 0.2); // Active line + --syntax-activeline-foreground: rgba(0, 0, 0, 0.3); + --syntax-matchingtag-background: rgba(0, 0, 0, 0.7); // Matching tag + --syntax-selected-background: rgba(255, 255, 255, 0.1); // Selected text + --syntax-matchingbracket-background: rgba(255,255,255,0.2); + + --syntax-number: #4992d8; + --syntax-string: #1c23a3; + --syntax-keywordConstant: #4992d8; + --syntax-operator: #815329; + + --syntax-tag: #93348b; + --syntax-variable: #76D4D6; + --syntax-variable2: #ffffff; + --syntax-definition: #f7f7f7; // CSS definition + --syntax-keyword: $purple; // CSS !important, JS define a variable + --syntax-keywordType: #F78D8C; + --syntax-meta: rgba(0, 0, 0, 0.7); + --syntax-meta-color: #f7f7f7; + --syntax-id: #D6ACD6; // CSS ID + --syntax-attribute: #a15727; // HTML class="" + --syntax-property: #d4d4d4; // CSS definer + --syntax-qualifier: #FFD479; // CSS class + --syntax-error: #F78D8C; +} + +// pre-formatted text block +pre.block { + background: var(--syntax-background); + font-size: 15px; + border: 1px solid var(--border-color); +} + +.highlight > pre { + // background: #fafafa; + font-size: 15px; + border: 1px solid var(--border-color); +} + +/* Background */ .chroma { color: var(--syntax-foreground); background-color: var(--syntax-background) } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: var(--syntax-error); background-color: var(--syntax-background) } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: var(--syntax-keyword) } +/* KeywordConstant */ .chroma .kc { color: var(--syntax-keyword) } +/* KeywordDeclaration */ .chroma .kd { color: var(--syntax-keyword) } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: var(--syntax-keyword) } +/* KeywordReserved */ .chroma .kr { color: var(--syntax-keyword) } +/* KeywordType */ .chroma .kt { color: var(--syntax-keyword) } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: var(--syntax-attribute) } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { color: var(--syntax-attribute) } +/* NameConstant */ .chroma .no { color: #93348b } +/* NameDecorator */ .chroma .nd { color: var(--syntax-attribute) } +/* NameEntity */ .chroma .ni { } +/* NameException */ .chroma .ne { color: var(--syntax-attribute) } +/* NameFunction */ .chroma .nf { color: var(--syntax-attribute) } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { color: var(--syntax-foreground) } +/* NameProperty */ .chroma y { } +/* NameTag */ .chroma .nt { color: var(--syntax-tag) } +/* NameVariable */ .chroma .nv { color: var(--syntax-variable) } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { color: var(--syntax-number) } +/* LiteralDate */ .chroma .ld { color: var(--syntax-string) } +/* LiteralString */ .chroma .s { color: var(--syntax-string) } +/* LiteralStringAffix */ .chroma .sa { color: var(--syntax-string) } +/* LiteralStringBacktick */ .chroma .sb { color: var(--syntax-string) } +/* LiteralStringChar */ .chroma .sc { color: var(--syntax-string) } +/* LiteralStringDelimiter */ .chroma .dl { color: var(--syntax-string) } +/* LiteralStringDoc */ .chroma .sd { color: var(--syntax-string) } +/* LiteralStringDouble */ .chroma .s2 { color: var(--syntax-string) } +/* LiteralStringEscape */ .chroma .se { color: var(--syntax-number) } +/* LiteralStringHeredoc */ .chroma .sh { color: var(--syntax-string) } +/* LiteralStringInterpol */ .chroma .si { color: var(--syntax-string) } +/* LiteralStringOther */ .chroma .sx { color: var(--syntax-string) } +/* LiteralStringRegex */ .chroma .sr { color: var(--syntax-string) } +/* LiteralStringSingle */ .chroma .s1 { color: var(--syntax-string) } +/* LiteralStringSymbol */ .chroma .ss { color: var(--syntax-string) } +/* LiteralNumber */ .chroma .m { color: var(--syntax-number) } +/* LiteralNumberBin */ .chroma .mb { color: var(--syntax-number) } +/* LiteralNumberFloat */ .chroma .mf { color: var(--syntax-number) } +/* LiteralNumberHex */ .chroma .mh { color: var(--syntax-number) } +/* LiteralNumberInteger */ .chroma .mi { color: var(--syntax-number) } +/* LiteralNumberIntegerLong */ .chroma .il { color: var(--syntax-number) } +/* LiteralNumberOct */ .chroma .mo { color: var(--syntax-number) } +/* Operator */ .chroma .o { color: var(--syntax-operator) } +/* OperatorWord */ .chroma .ow { color: var(--syntax-operator) } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: var(--syntax-comment) } +/* CommentHashbang */ .chroma .ch { color: var(--syntax-comment) } +/* CommentMultiline */ .chroma .cm { color: var(--syntax-comment) } +/* CommentSingle */ .chroma .c1 { color: var(--syntax-comment) } +/* CommentSpecial */ .chroma .cs { color: var(--syntax-comment) } +/* CommentPreproc */ .chroma .cp { color: var(--syntax-comment) } +/* CommentPreprocFile */ .chroma .cpf { color: var(--syntax-comment) } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: var(--syntax-error) } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: var(--syntax-comment) } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/assets/scss/components/_tables.scss b/assets/scss/components/_tables.scss index 46efcd8..5f10466 100644 --- a/assets/scss/components/_tables.scss +++ b/assets/scss/components/_tables.scss @@ -1,39 +1,56 @@ -/** - * Tables - */ +/* Tables + =============== */ // Table expands to full width of containing element table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - max-width: 100%; + border-collapse: collapse; + border-spacing: 0; + width: 100%; + max-width: 100%; } // Extra border underneath header thead th { - border-bottom: 2px solid $border-color; + border-bottom: 2px solid $border-color; } // Extra border above footer tfoot th { - border-top: 2px solid $border-color; + border-top: 2px solid $border-color; } td { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid $border-color; } th, td { - text-align: left; - padding: 0.5rem; + text-align: left; + padding: .5rem; } caption { - padding: $padding 0; - caption-side: bottom; - color: $caption; + padding: $padding 0; + caption-side: bottom; + color: $caption; +} + +.compact-table { + width: 300px; + margin:0 auto 1.5rem auto; +} + +.compact-table th { + border: 1px solid $border-color; + border-bottom: 2px solid $border-color; +} + +.compact-table td { + border: 1px solid $border-color; +} + +.compact-table tbody tr:nth-child(odd) { + background-color: $stripes; } .striped-table tbody tr:nth-child(odd) { @@ -49,4 +66,4 @@ caption { .contain-table { width: 100%; } -} +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1a8951c..7454694 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,41 +1,76 @@ -/*! - * Primitive UI | MIT License - * - * A minimalist front-end design toolkit built with Sass for developing - * responsive, browser-consistent web apps. - * - * Author: Tania Rascia - * Source: https://github.com/taniarascia/primitive - * Documentation: https://taniarascia.github.io/primitive - */ - -//============================================================================== -// Configuration -//============================================================================== +/*! Primitive CSS Framework Author: Tania Rascia */ -@import 'base/variables'; -@import 'base/mixins'; +// Configuration +@import "base/variables"; +@import "base/mixins"; -//============================================================================== // Reset -//============================================================================== - -@import 'base/normalize'; -@import 'base/reset'; +@import "base/normalize"; +@import "base/reset"; -//============================================================================== // Components -//============================================================================== +@import "components/scaffolding"; +@import "components/flex"; +@import "components/grid"; +@import "components/helpers"; +@import "components/buttons"; +@import "components/forms"; +@import "components/tables"; +@import "components/navigation"; +@import "components/layout"; +@import "components/syntax"; + + +.nav { + display: flex; + flex-direction: row; +} -@import 'components/scaffolding'; -@import 'components/grid'; -@import 'components/helpers'; -@import 'components/highlight'; -@import 'components/buttons'; -@import 'components/forms'; -@import 'components/tables'; -@import 'components/navigation'; -@import 'components/layout'; +.nav-theme { + // margin-left: auto; + margin: auto 0.5rem auto auto; + height: 36px; + user-select: none; /* standard syntax */ + -webkit-user-select: none; /* webkit (safari, chrome) browsers */ + -moz-user-select: none; /* mozilla browsers */ + -khtml-user-select: none; /* webkit (konqueror) browsers */ + -ms-user-select: none; /* IE10+ */ +} + +.theme-controls { + position: relative; + margin-top: -3rem; + padding-top: 3rem; +} + +.nav-theme { + background: #404040; + border: 1.25px solid transparent; + border-radius: 16px; +} + +.nav-theme:hover { + border: 1.25px solid #888888; +} + +.icon-button { + border-radius: 50%; + background-color: #f0f0f0; +} + +.light-theme .nav-theme { + background: #f8f8f8; + border: 1.25px solid #dddddd; + border-radius: 16px; +} + +.light-theme .nav-theme:hover { + border: 1.25px solid #a0a0a0; +} + +.light-theme .icon-button { + background-color: #404040; +} section.copyright { @@ -53,7 +88,7 @@ img.center { } pre.one-line { - background: #f8f8f8; + background: var(--background-darker); margin: 0; padding: 0.5rem 0.75rem; } \ No newline at end of file diff --git a/assets/typescript/examples/meta-svg-syntax.ts b/assets/typescript/examples/meta-svg-syntax.ts index 67502d3..597f601 100644 --- a/assets/typescript/examples/meta-svg-syntax.ts +++ b/assets/typescript/examples/meta-svg-syntax.ts @@ -8,9 +8,9 @@ import { ResponsiveArtboard, Text, TSpan, Group } from '@kurtbruns/vector'; export class MetaSVGSyntaxExample { colors = { - 'tag':'#404040', - 'attribute':'#404040', - 'value':'#404040', + 'tag':'var(--syntax-tag)', + 'attribute':'var(--syntax-attribute)', + 'value':'var(--synatax-string)', } colors2 = { diff --git a/assets/typescript/examples/svg-circle.ts b/assets/typescript/examples/svg-circle.ts index fe4bf62..e2cab82 100644 --- a/assets/typescript/examples/svg-circle.ts +++ b/assets/typescript/examples/svg-circle.ts @@ -48,11 +48,11 @@ export class SVGCircleExample extends SVGExample { // tspan element in our SVG wrapper class. let lt = text.tspan('<'); text.tspan('circle').style.fill = 'purple'; - text.tspan(' cx').style.fill = '#ab6f00'; + text.tspan(' cx').style.fill = 'var(--syntax-attribute)'; let cx = text.tspan(''); - text.tspan(' cy').style.fill = '#ab6f00'; + text.tspan(' cy').style.fill = 'var(--syntax-attribute)'; let cy = text.tspan(''); - text.tspan(' r').style.fill = '#ab6f00'; + text.tspan(' r').style.fill = 'var(--syntax-attribute)'; let r = text.tspan(''); let gt = text.tspan('>'); diff --git a/assets/typescript/examples/svg-clip-path.ts b/assets/typescript/examples/svg-clip-path.ts index 7fc8049..f0271fe 100644 --- a/assets/typescript/examples/svg-clip-path.ts +++ b/assets/typescript/examples/svg-clip-path.ts @@ -22,12 +22,28 @@ export class SVGClipPathExample extends OverflowArtboard { let interactive = this; + // let defs = interactive.defs(); + // let gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient'); + // gradient.setAttribute('id', 'gradient') + + // let stop1 = document.createElement('stop'); + // stop1.setAttribute('stop-color', '#000000'); + // stop1.setAttribute('offset', '0%'); + // gradient.appendChild(stop1) + // let stop2 = document.createElement('stop'); + // stop2.setAttribute('stop-color', '#FFFFFF'); + // stop2.setAttribute('offset', '100%'); + // gradient.appendChild(stop2); + // defs.root.appendChild(gradient); + let clipPath = interactive.clipPath(); - let image = interactive.image('https://source.unsplash.com/ykH6Zx7ZKXQ/1600x900', 720, 405); + + let rect = interactive.rect(0,0, 720, 300); + rect.root.setAttribute('fill', 'url(#gradient)') + // let image = interactive.image('./gradient.jpg', 720, 405); + + let path = clipPath.path(''); - path.classList.add('default'); - path.style.fill = '#dddddd'; - path.style.fillOpacity = '0.5'; let c1 = interactive.control( 50, 50); let c2 = interactive.control( 250, 50); @@ -39,9 +55,9 @@ export class SVGClipPathExample extends OverflowArtboard { } path.update(); path.addDependency(c1, c2, c3, c4); - - (image as any).setAttribute('clip-path', `url(#${clipPath.id})`); + + (rect as any).setAttribute('clip-path', `url(#${clipPath.id})`); } } diff --git a/assets/typescript/examples/svg-ellipse.ts b/assets/typescript/examples/svg-ellipse.ts index 5788699..baf460d 100644 --- a/assets/typescript/examples/svg-ellipse.ts +++ b/assets/typescript/examples/svg-ellipse.ts @@ -83,22 +83,22 @@ export class SVGEllipseExample extends SVGExample { this.xml.x = 20; this.xml.y = this.maxY - 20; - tag.style.fill = 'purple'; - cx.style.fill = '#ab6f00'; - cy.style.fill = '#ab6f00'; - rx.style.fill = '#ab6f00'; - ry.style.fill = '#ab6f00'; + tag.style.fill = 'var(--syntax-tag)'; + cx.style.fill = 'var(--syntax-attribute)'; + cy.style.fill = 'var(--syntax-attribute)'; + rx.style.fill = 'var(--syntax-attribute)'; + ry.style.fill = 'var(--syntax-attribute)'; let cxValue = cx.tspan(''); let cyValue = cy.tspan(''); let rxValue = rx.tspan(''); let ryValue = ry.tspan(''); - cxValue.style.fill = '#333333'; - cyValue.style.fill = '#333333'; - rxValue.style.fill = '#333333'; - ryValue.style.fill = '#333333'; + cxValue.style.fill = 'var(--syntax-string)'; + cyValue.style.fill = 'var(--syntax-string)'; + rxValue.style.fill = 'var(--syntax-string)'; + ryValue.style.fill = 'var(--syntax-string)'; - cxValue.style.fill = '#333333'; + cxValue.style.fill = 'var(--syntax-string)'; cxValue.addDependency(ellipse); cxValue.update = function() { cxValue.text = `"${ellipse.cx.toFixed(0)}" `; diff --git a/assets/typescript/examples/svg-example.ts b/assets/typescript/examples/svg-example.ts index 99e8023..39868fe 100644 --- a/assets/typescript/examples/svg-example.ts +++ b/assets/typescript/examples/svg-example.ts @@ -13,10 +13,6 @@ export class SVGExample extends OverflowArtboard { */ constructor(idOrElment:string|HTMLElement) { - OverflowArtboard.lightStroke = '#f8f8f8'; - OverflowArtboard.mediumStroke = '#f0f0f0'; - OverflowArtboard.darkStroke = '#d8d8d8'; - super(idOrElment, { width:400, height:300, diff --git a/assets/typescript/examples/svg-line.ts b/assets/typescript/examples/svg-line.ts index 3b2256c..58043fc 100644 --- a/assets/typescript/examples/svg-line.ts +++ b/assets/typescript/examples/svg-line.ts @@ -9,27 +9,26 @@ import { SVGExample } from "./svg-example"; export class SVGLineExample extends SVGExample { - constructor(idOrElement) { - super(idOrElement); - let interactive = this; - let text = this.xml; - let line = interactive.line( 0, 0, 0, 0); - line.classList.add('default'); - - let c1 = interactive.control( 75, 75); - let c2 = interactive.control( 225, 175); - - line.update = function() { - this.x1 = c1.x; - this.y1 = c1.y; - this.x2 = c2.x; - this.y2 = c2.y; - } - line.update(); - line.addDependency(c1); - line.addDependency(c2); - - this.xml.tspan('<'); + constructor(idOrElement) { + super(idOrElement); + let interactive = this; + let line = interactive.line(0, 0, 0, 0); + line.classList.add('default'); + + let c1 = interactive.control(75, 75); + let c2 = interactive.control(225, 175); + + line.update = function () { + this.x1 = c1.x; + this.y1 = c1.y; + this.x2 = c2.x; + this.y2 = c2.y; + } + line.update(); + line.addDependency(c1); + line.addDependency(c2); + + this.xml.tspan('<'); let tag = this.xml.tspan('line '); let x1 = this.xml.tspan('x1='); let y1 = this.xml.tspan('y1='); @@ -37,43 +36,44 @@ export class SVGLineExample extends SVGExample { let y2 = this.xml.tspan('y2='); this.xml.tspan('>'); // let close = this.xml.tspan('></ellipse>'); + this.xml.x = 20; this.xml.y = this.maxY - 20; - tag.style.fill = 'purple'; - x1.style.fill = '#ab6f00'; - y1.style.fill = '#ab6f00'; - x2.style.fill = '#ab6f00'; - y2.style.fill = '#ab6f00'; - + tag.style.fill = 'var(--syntax-tag)'; + x1.style.fill = 'var(--syntax-attribute)'; + y1.style.fill = 'var(--syntax-attribute)'; + x2.style.fill = 'var(--syntax-attribute)'; + y2.style.fill = 'var(--syntax-attribute)'; + let x1Value = x1.tspan(''); let y1Value = y1.tspan(''); let x2Value = x2.tspan(''); let y2Value = y2.tspan(''); - x1Value.style.fill = '#333333'; - y1Value.style.fill = '#333333'; - x2Value.style.fill = '#333333'; - y2Value.style.fill = '#333333'; - + x1Value.style.fill = 'var(--syntax-string)'; + y1Value.style.fill = 'var(--syntax-string)'; + x2Value.style.fill = 'var(--syntax-string)'; + y2Value.style.fill = 'var(--syntax-string)'; + x1Value.addDependency(line); - x1Value.update = function() { + x1Value.update = function () { x1Value.text = `"${line.x1.toFixed(0)}" `; - }; - + }; + y1Value.addDependency(line); - y1Value.update = function() { + y1Value.update = function () { y1Value.text = `"${line.y1.toFixed(0)}" `; - }; - + }; + x2Value.addDependency(line); - x2Value.update = function() { + x2Value.update = function () { x2Value.text = `"${line.x2.toFixed(0)}" `; - }; - + }; + y2Value.addDependency(line); - y2Value.update = function() { + y2Value.update = function () { y2Value.text = `"${line.y2.toFixed(0)}"` }; line.updateDependents(); - - } + + } } \ No newline at end of file diff --git a/assets/typescript/examples/svg-path-arc.ts b/assets/typescript/examples/svg-path-arc.ts index e6e6687..917c8fa 100644 --- a/assets/typescript/examples/svg-path-arc.ts +++ b/assets/typescript/examples/svg-path-arc.ts @@ -70,16 +70,6 @@ export class SVGPathArcExample extends SVGExample { // path.addDependency(largeArcFlag); // path.addDependency(sweepFlag); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. - text.update = function() { - let tag = `path`; - let d = `d`; - this.contents = `<${tag} ${d}="M ${start.x.toFixed(0)} ${start.y.toFixed(0)} A ${rx.value} ${ry.value} ${xAxisRotation.value} ${largeArcFlag.checked ? '1' : '0'} ${sweepFlag.checked ? '1' : '0'} ${control.x.toFixed(0)} ${control.y.toFixed(0)}">`; - } - text.update(); - text.addDependency(path); - // Code under this point is additional paths showsing all the different options // for the flags. TODO: move the paths into a group and change the opacity of // the group instead of for each individual p @@ -100,5 +90,27 @@ export class SVGPathArcExample extends SVGExample { let path2 = createPath(xAxisRotation,false, true); let path3 = createPath(xAxisRotation,true, false); let path4 = createPath(xAxisRotation,true, true); + + this.xml.tspan('<'); + let tag = this.xml.tspan('path '); + let d = this.xml.tspan('d='); + d.style.fill = 'var(--syntax-attribute)'; + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + + let dValue = d.tspan(''); + dValue.style.fill = 'var(--syntax-string)'; + + dValue.addDependency(path); + dValue.update = function () { + dValue.text = `"${path.d}" `; + }; + + this.xml.addDependency(path); + path.updateDependents(); } } \ No newline at end of file diff --git a/assets/typescript/examples/svg-path-bezier-cubic.ts b/assets/typescript/examples/svg-path-bezier-cubic.ts index c2352af..2121c39 100644 --- a/assets/typescript/examples/svg-path-bezier-cubic.ts +++ b/assets/typescript/examples/svg-path-bezier-cubic.ts @@ -66,17 +66,27 @@ export class SVGPathBezierCubicExample extends SVGExample { l3.addDependency(c3); l3.addDependency(c4); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. Added toFixed function call for - // tablet and mobile using non-integer numbers, maybe there is a better way? - text.update = function() { - let tag = `path`; - let d = `d`; - this.contents = `<${tag} ${d}="M ${c1.x.toFixed(0)} ${c1.y.toFixed(0)} C ${c2.x.toFixed(0)} ${c2.y.toFixed(0)} ${c3.x.toFixed(0)} ${c3.y.toFixed(0)} ${c4.x.toFixed(0)} ${c4.y.toFixed(0)}">`; - } - text.update(); - text.addDependency(path); + this.xml.tspan('<'); + let tag = this.xml.tspan('path '); + let d = this.xml.tspan('d='); + d.style.fill = 'var(--syntax-attribute)'; + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + + let dValue = d.tspan(''); + dValue.style.fill = 'var(--syntax-string)'; + + dValue.addDependency(path); + dValue.update = function () { + dValue.text = `"${path.d}" `; + }; + + this.xml.addDependency(path); + path.updateDependents(); } } diff --git a/assets/typescript/examples/svg-path-bezier-quadratic.ts b/assets/typescript/examples/svg-path-bezier-quadratic.ts index 6a2ba9a..334f4ae 100644 --- a/assets/typescript/examples/svg-path-bezier-quadratic.ts +++ b/assets/typescript/examples/svg-path-bezier-quadratic.ts @@ -53,15 +53,27 @@ export class SVGPathBezierQuadraticExample extends SVGExample { l2.addDependency(c2); l2.addDependency(c3); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. - text.update = function() { - let tag = `path`; - let d = `d`; - this.contents = `<${tag} ${d}="M ${c1.x.toFixed(0)} ${c1.y.toFixed(0)} Q ${c2.x.toFixed(0)} ${c2.y.toFixed(0)} ${c3.x.toFixed(0)} ${c3.y.toFixed(0)}">`; - } - text.update(); - text.addDependency(path); + this.xml.tspan('<'); + let tag = this.xml.tspan('path '); + let d = this.xml.tspan('d='); + d.style.fill = 'var(--syntax-attribute)'; + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + + let dValue = d.tspan(''); + dValue.style.fill = 'var(--syntax-string)'; + + dValue.addDependency(path); + dValue.update = function () { + dValue.text = `"${path.d}" `; + }; + + this.xml.addDependency(path); + path.updateDependents(); } } \ No newline at end of file diff --git a/assets/typescript/examples/svg-path-close-command.ts b/assets/typescript/examples/svg-path-close-command.ts index 3e9f8a5..8558d73 100644 --- a/assets/typescript/examples/svg-path-close-command.ts +++ b/assets/typescript/examples/svg-path-close-command.ts @@ -20,7 +20,7 @@ export class SVGPathCloseExample extends SVGExample { let path = interactive.path(''); path.classList.add('default'); - path.style.fill = '#dddddd'; + path.style.fill = 'var(--highlight)'; path.style.fillOpacity = '0.5'; let c1 = interactive.control( 50, 50); @@ -33,15 +33,28 @@ export class SVGPathCloseExample extends SVGExample { path.update(); path.addDependency(c1, c2, c3); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. - text.update = function() { - let tag = `path`; - let d = `d`; - this.contents = `<${tag} ${d}="${path.d}">`; - } - text.update(); - text.addDependency(path); + this.xml.tspan('<'); + let tag = this.xml.tspan('path '); + let d = this.xml.tspan('d='); + d.style.fill = 'var(--syntax-attribute)'; + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + + let dValue = d.tspan(''); + dValue.style.fill = 'var(--syntax-string)'; + + dValue.addDependency(path); + dValue.update = function () { + dValue.text = `"${path.d}" `; + }; + + this.xml.addDependency(path); + path.updateDependents(); + } } diff --git a/assets/typescript/examples/svg-path-line.ts b/assets/typescript/examples/svg-path-line.ts index 3fb014f..728320e 100644 --- a/assets/typescript/examples/svg-path-line.ts +++ b/assets/typescript/examples/svg-path-line.ts @@ -42,15 +42,27 @@ export class SVGPathLineExample extends SVGExample { path.addDependency(end); // path.addDependency(toggle); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. - text.update = function() { - let tag = `path`; - let d = `d`; - this.contents = `<${tag} ${d}="${path.d}">`; - } - text.update(); - text.addDependency(path); + this.xml.tspan('<'); + let tag = this.xml.tspan('path '); + let d = this.xml.tspan('d='); + d.style.fill = 'var(--syntax-attribute)'; + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + + let dValue = d.tspan(''); + dValue.style.fill = 'var(--syntax-string)'; + + dValue.addDependency(path); + dValue.update = function () { + dValue.text = `"${path.d}" `; + }; + + this.xml.addDependency(path); + path.updateDependents(); } } diff --git a/assets/typescript/examples/svg-rectangle.ts b/assets/typescript/examples/svg-rectangle.ts index d7a85ae..af00918 100644 --- a/assets/typescript/examples/svg-rectangle.ts +++ b/assets/typescript/examples/svg-rectangle.ts @@ -37,18 +37,53 @@ export class SVGRectangleExample extends SVGExample { rect.addDependency(c1); rect.addDependency(c2); - // TODO: this is rather hacky, and probably best replaced by implementing the - // tspan element in our SVG wrapper class. - text.update = function() { - let tag = `rect`; - let x = `x`; - let y = `y`; - let width = `width`; - let height = `height`; - this.contents = `<${tag} ${x}="${rect.x.toFixed(0)} ${y}="${rect.y.toFixed(0)} ${width}="${rect.width.toFixed(0)} ${height}="${rect.height.toFixed(0)}">`; - } - text.update(); - text.addDependency(rect); + this.xml.tspan('<'); + let tag = this.xml.tspan('rect '); + let x = this.xml.tspan('x='); + let y = this.xml.tspan('y='); + let width = this.xml.tspan('width='); + let height = this.xml.tspan('height='); + this.xml.tspan('>'); + // let close = this.xml.tspan('></ellipse>'); + + this.xml.x = 20; + this.xml.y = this.maxY - 20; + tag.style.fill = 'var(--syntax-tag)'; + x.style.fill = 'var(--syntax-attribute)'; + y.style.fill = 'var(--syntax-attribute)'; + width.style.fill = 'var(--syntax-attribute)'; + height.style.fill = 'var(--syntax-attribute)'; + + let xValue = x.tspan(''); + let yValue = y.tspan(''); + let widthValue = width.tspan(''); + let heightValue = height.tspan(''); + xValue.style.fill = 'var(--syntax-string)'; + yValue.style.fill = 'var(--syntax-string)'; + widthValue.style.fill = 'var(--syntax-string)'; + heightValue.style.fill = 'var(--syntax-string)'; + + xValue.addDependency(rect); + xValue.update = function () { + xValue.text = `"${rect.x.toFixed(0)}" `; + }; + + yValue.addDependency(rect); + yValue.update = function () { + yValue.text = `"${rect.y.toFixed(0)}" `; + }; + + widthValue.addDependency(rect); + widthValue.update = function () { + widthValue.text = `"${rect.width.toFixed(0)}" `; + }; + + heightValue.addDependency(rect); + heightValue.update = function () { + heightValue.text = `"${rect.height.toFixed(0)}"` + }; + rect.updateDependents(); + } diff --git a/assets/typescript/aside.ts b/assets/typescript/main.ts similarity index 65% rename from assets/typescript/aside.ts rename to assets/typescript/main.ts index e22322e..2122d0b 100644 --- a/assets/typescript/aside.ts +++ b/assets/typescript/main.ts @@ -4,11 +4,45 @@ * Author: Kurt Bruns */ + +function updateTheme(isDark:boolean) { + document.documentElement.classList.toggle('light-theme', !isDark); + sessionStorage.setItem('theme', isDark ? 'dark' : 'light'); +} + +function initializeTheme() { + + let theme = sessionStorage.getItem('theme'); + let isDark = true; + if (theme !== null && theme === 'light') { + isDark = false; + } + + // Use user's default theme if one is not specified + if (theme === null && window.matchMedia) { + const darkSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + darkSchemeMediaQuery.addEventListener('change', (e) => updateTheme(e.matches)); + updateTheme(darkSchemeMediaQuery.matches); + } else { + updateTheme(isDark) + } + + let toggle: HTMLDivElement = document.querySelector('.nav-theme'); + toggle.onclick = (event) => { + updateTheme(!(sessionStorage.getItem('theme') === 'dark')); + event.preventDefault(); + event.stopPropagation(); + }; + +} + /* * When the window finishes loading, initialize state and register an event listener to the scroll event. */ window.addEventListener('load', (event) => { + initializeTheme(); + // Initialize nav elements and get a handle on headings let nav = document.querySelectorAll(".aside-li") as unknown as HTMLElement[]; let headings : HTMLElement[] = []; diff --git a/content/_index.md b/content/_index.md index d5faba3..f5a04b7 100644 --- a/content/_index.md +++ b/content/_index.md @@ -20,21 +20,21 @@ aside: # - Scripting --- -This article is an *interactive* tutorial for authoring SVG documents. It introduces the basic syntax, structure and elements of the SVG specification. The tutorial uses the [Vector.js](https://vectorjs.org/) library to make the SVGs on this page interactive. +This article is an *interactive* tutorial for authoring SVG documents. It introduces the basic syntax, structure and elements of the SVG specification. The tutorial uses [this library](https://github.com/kurtbruns/vector) to make the SVGs on this page interactive. ## Introduction -SVG is an acronym for "scalable vector graphics". The SVG file type and specification is an XML based language for creating vector graphics both as stand-alone and embedded documents. SVG is a popular choice among developers and artists for creating vector based images such as logos, patterns and masking effects, because the file size is small and the resulting image is crisp. +SVG is an acronym for "scalable vector graphics". The SVG file type and specification is an XML-based language for creating vector graphics both as stand-alone and embedded documents. SVG is a popular choice among developers and artists for creating vector-based images such as logos, patterns and masking effects because the file size is small and the resulting image is crisp. Elements within an SVG document are defined using XML syntax and make up a tree-like structure called the SVG Document Object Model or SVGDOM for short. For example, the SVG below draws three equally spaced circles. The `svg` tag is the root of the document and defines a drawing area with a width of `200` and a height of `100`. Each circle is described by the tag `circle` which has properties that define the center and radius of the circle. -{{< highlight svg >}} +{{}} -{{< /highlight >}} +{{}} This SVG is rendered below. @@ -42,10 +42,10 @@ This SVG is rendered below. @@ -53,15 +53,15 @@ This SVG is rendered below. -By default, the SVG Coordinate System places the origin in the top-left corner of the drawing area. The positive *x* direction is to the right and the positive *y* direction is **down**. This can be tricky, especially for the uninitiated, however this is common in computer graphics to define the coordinate system with the *y*-direction as down instead of up. +By default, the SVG Coordinate System places the origin in the top-left corner of the drawing area. The positive *x* direction is to the right and the positive *y* direction is **down**. This can be tricky, especially for the uninitiated, however, this is common in computer graphics to define the coordinate system with the *y*-direction as down instead of up. {{}} -Click and drag the blue control point above to see how a point is defined in the coordinate system. +Click and drag the control point above to see how a point is defined in the coordinate system. ## XML Syntax -The XML elements that make up the SVG language are formed by an opening and closing tag. The tag name indicates the element that is being defined. The opening tag contains attributes which describe the properties of the element. +The XML elements that make up the SVG language are formed by an opening and closing tag. The tag name indicates the element that is being defined. The opening tag contains attributes that describe the properties of the element. For example, in the code snippet below, the `circle` tag defines a circle that is centered at the point `(50,50)` with a radius of `15`. The attributes `cx="50"`, `cy="50"` and `r="15"` define the position and radius. @@ -69,7 +69,7 @@ For example, in the code snippet below, the `circle` tag defines a circle that i ``` -In addition to element specific attributes, there are also global attributes that can be defined for any element. For example, the group element below is given the id `example-id` and the class `example-class`. +In addition to element-specific attributes, there are also global attributes that can be defined for any element. For example, the group element below is given the id `example-id` and the class `example-class`. ```html @@ -87,7 +87,7 @@ Global attributes are useful for styling, manipulating and querying elements. In ## Basic Elements -The basic visual elements define shapes and lines. For example, some basic elements are lines, circles and ellipses. The geometric properties of the elements are defined by attributes in their opening tag. **Note**, the elements below are interactive. Click and drag either any of the the blue points around to see how the element is drawn. +The basic visual elements define shapes and lines. For example, some basic elements are lines, circles and ellipses. The geometric properties of the elements are defined by attributes in their opening tag. **Note**, the elements below are interactive. Click and drag either of the points around to see how the element is drawn. ### Line Element @@ -105,7 +105,7 @@ The ellipse element draws an ellipse centered at the point `(cx, cy)` with the h {{}} -The rectangle element draws a rectangle whose top left corner is defined the point `(x,y)` with the dimensions `width` and `height`. If a negative width or height value is supplied, the element is not rendered. The rectangle's path can be styled with the CSS `stroke` and `stroke-width` attributes which control the color and width. The rectangle's fill can be styled with the CSS `fill` attribute. +The rectangle element draws a rectangle whose top left corner is defined by the point `(x,y)` with the dimensions `width` and `height`. If a negative width or height value is supplied, the element is not rendered. The rectangle's path can be styled with the CSS `stroke` and `stroke-width` attributes which control the color and width. The rectangle's fill can be styled with the CSS `fill` attribute. ### Path Element @@ -174,11 +174,11 @@ The close command "completes the loop" and connects the current location of the {{}} -The path element is core to the SVG specification and complicated. See the [MDN paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for more information. +The path element is core to the SVG specification and is complicated. See the [MDN paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for more information. ### Tree Structure -SVG Documents form a tree-like structure because the language is based on XML. Each element contains zero or more child elements placed within the opening and closing tag of the element. Take for example the simple SVG below. +SVG Documents form a tree-like structure because the language is based on XML. Each element contains zero or more child elements placed within the opening and closing tags of the element. Take for example the simple SVG below. ```html @@ -190,9 +190,9 @@ SVG Documents form a tree-like structure because the language is based on XML. E ``` -The corresponding tree like structure is shown below. There are two important things to know about this structure. 1) It is hierarchical and elements inherit the transformations and and styles applied to their parents. For example, if the group element has a transformation applied to it, its two children will also be transformed. 2) The order in which elements are drawn depends on their order in the document. Elements that are drawn first will appear in the background and elements that are drawn last will appear in the foreground. +The corresponding tree-like structure is shown below. There are two important things to know about this structure. 1) It is hierarchical and elements inherit the transformations and styles applied to their parents. For example, if the group element has a transformation applied to it, its two children will also be transformed. 2) The order in which elements are drawn depends on their order in the document. Elements that are drawn first will appear in the background and elements that are drawn last will appear in the foreground. -{{SVG XML Tree Structure}} @@ -210,21 +210,21 @@ The origin of the svg coordinate system is at the top-left corner of the image. {{< /highlight >}} -The view box attribute allows the user to define the internal coordinate system used for drawing. This is useful for two reasons. 1) It allows for the creation of responsive images that leverage the power of SVG. 2) The viewbox can be used to programmatically make sure that all elements are displayed for the user. +The view box attribute allows the user to define the internal coordinate system used for drawing. This is useful for two reasons. 1) It allows for the creation of responsive images that leverage the power of SVG. 2) The view box can be used to programmatically make sure that all elements are displayed for the user. ``` TODO: viewbox example with preserve aspect ratio dropdown ``` -**Note**, as demonstrated in the interactive if the view port dimensions disagrees with the viewbox, the default strategy is to ... This can be changed using the `preserveAspectRatio` attribute +**Note**, as demonstrated in the interactive if the viewport dimensions disagree with the view box, the default strategy is to ... This can be changed using the `preserveAspectRatio` attribute ## Styling -SVG elements are styled using Cascading Style Sheets or CSS for short. Styling can be applied to individual elements as inline style or using a user-define style sheet. There are many presentation attributes that can be styles, but the two most common are the `fill` and `stroke` of a geometric element. +SVG elements are styled using Cascading Style Sheets or CSS for short. Styling can be applied to individual elements as inline style or using a user-defined style sheet. Many presentation attributes can be styled, but the two most common are the `fill` and `stroke` of a geometric element. ### Inline Style -Styling can be applied to individual elements using the style attribute. This is very useful for testing out different styling on an element. In practice, a well constructed stylsheet will be cleaner and reduce the SVGs file size. Shown below are three circles styled using inline style. +Styling can be applied to individual elements using the style attribute. This is very useful for testing out different styling on an element. In practice, a well-constructed stylesheet will be cleaner and reduce the SVGs file size. Shown below are three circles styled using inline style. {{}} @@ -242,22 +242,22 @@ This produces the graphic shown below. -There are many different values that are accepted for color. The colors are shown above using their hexadecimal representation. Color pickers +Many different values are accepted for color. The colors are shown above using their hexadecimal representation. -### Styesheets +### Stylesheets The alternative to inline styling is stylesheets. Stylesheets can either be defined in the SVG `style` element or as an external stylesheet. Stylesheets contain logic selectors which style elements based on their type, class and other attributes. Selectors have priority and can contain complex logic for selecting specific elements. ```css /* style elements by tag name */ circle { - stroke:#dddddd; /* light grey */ + stroke:#d0d0d0; /* light grey */ stroke-width: 4px; } /* style by user interaction */ circle:hover { - stroke:#888888; /* medium grey */ + stroke:#808080; /* medium grey */ } /* style elements by class */ @@ -283,11 +283,11 @@ These style rules applied to the SVG elements above produce the following graphi }} -Click and drag the points which control the shape of the clip path. +Click and drag the points which control the shape of the clip path. {{}} @@ -400,7 +400,7 @@ The clipping path can be applied to many more elements and can be defined using ### Defs Element -The defs element contains a graphical "definition" that can be re-used in the document. For example, an arrow can be defined and then attached to path. +The `defs` element contains a graphical "definition" that can be reused in the document. For example, an arrow can be defined and then attached to a path. ```xml @@ -413,7 +413,7 @@ The defs element contains a graphical "definition" that can be re-used in the do ``` -There are many more advanced elements that are note shown here. See the full list of SVG Elements [documented on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element). +There are many more advanced elements that are not shown here. See the full list of SVG Elements [documented on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element). ## Web Usage @@ -429,7 +429,7 @@ There are two common strategies for embedding SVG docs on the web: using an `img ``` -The `img` tag is useful for SVG documents that appear in multiple places and leverages browser caching which can be useful if the image appears on many pages that the user navigates to. Considurations when using the `img` tag are: external stylesheets will not affect the styling of the SVG and Javascript cannot be used to manipulated the document. +The `img` tag is useful for SVG documents that appear in multiple places and leverages browser caching which can be useful if the image appears on many pages that the user navigates to. Considerations when using the `img` tag are: external stylesheets will not affect the styling of the SVG and Javascript cannot be used to manipulate the document. #### Inline SVG @@ -439,18 +439,18 @@ The `img` tag is useful for SVG documents that appear in multiple places and lev ``` -The **pros** of embedding an inline SVG document is that it saves the browser a resource request, allows for javascript to interact with the document and allows more flexibility for styling SVG elements. This approach is often used for icons and interactivity. +The **pros** of embedding an inline SVG document are that it saves the browser a resource request, allows for javascript to interact with the document and allows more flexibility for styling SVG elements. This approach is often used for icons and interactivity. -The **cons** of inlining SVGs is that it can lead to increased `html` size and since the browser is not able to cache the image, subsequent page loads will not be faster than the first page load. +The **cons** of inlining SVGs are that it can lead to increased `html` size and since the browser is not able to cache the image, subsequent page loads will not be faster than the first-page load. Another downside is that there can by styling conflicts if the inlined SVG both define different selectors in a `style` element. ## References -The SVG specification is a standard implemented by browsers and applications. The current version of the spec is [SVG 1.1](https://www.w3.org/TR/SVG11/) and the next candidate recomendation is [SVG 2.0](https://www.w3.org/TR/SVG2/). For this reason, the language is interpretted slightly differently between environments and definitely used differently due to its versatility. +The SVG specification is a standard implemented by browsers and applications. The current version of the spec is [SVG 1.1](https://www.w3.org/TR/SVG11/) and the next candidate recommendation is [SVG 2.0](https://www.w3.org/TR/SVG2/). For this reason, the language is interpreted slightly differently between environments and definitely used differently due to its versatility. - [SVG 1.1 Specification](https://www.w3.org/TR/SVG11/) - [SVG 2.0 Specification](https://www.w3.org/TR/SVG2/) -There are many web resources available. Personally, I recommend [Mozilla Web Docs](https://developer.mozilla.org/en-US/) as the best place to look-up SVG documentation and other web related documentation. +There are many web resources available. Personally, I recommend [Mozilla Web Docs](https://developer.mozilla.org/en-US/) as the best place to look up SVG documentation and other web-related documentation. - [MDN - SVG Overview](https://developer.mozilla.org/en-US/docs/Web/SVG) - [MDN - SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial) @@ -458,4 +458,4 @@ There are many web resources available. Personally, I recommend [Mozilla Web Doc ## Source -The source code for this article is available on [Github](https://github.com/kurtbruns/svg-tutorial). If you have constructive feedback please submit an issue or pull request. \ No newline at end of file +The source code for this article is available on [GitHub](https://github.com/kurtbruns/svg-tutorial). If you have constructive feedback please submit an issue or pull request. \ No newline at end of file diff --git a/layouts/_default/aside-icon.html b/layouts/_default/aside-icon.html index d2fe4e4..38023b4 100644 --- a/layouts/_default/aside-icon.html +++ b/layouts/_default/aside-icon.html @@ -17,7 +17,12 @@
-

{{.Title}}

+
+

{{.Title}}

+
+ {{- (resources.Get "icons/theme-toggle.svg" | resources.Minify).Content | safeHTML -}} +
+
Author: {{.Site.Params.Author}}
Updated: {{ .Lastmod.Format "Jan 2, 2006"}}
diff --git a/layouts/partials/aside/li-icon.html b/layouts/partials/aside/li-icon.html index 8578525..1ccf614 100644 --- a/layouts/partials/aside/li-icon.html +++ b/layouts/partials/aside/li-icon.html @@ -3,7 +3,7 @@ {{- $title := . -}} {{- $pattern := (print "icons/" (print (urlize .) ".svg")) }} {{- with resources.Get $pattern -}} - {{ . }} + {{- ( . | resources.Minify).Content | safeHTML -}} {{ $title }} {{- else -}} {{ warnf "Unable to match resources with pattern: %q" $pattern }} diff --git a/layouts/partials/aside/li-source.html b/layouts/partials/aside/li-source.html index 25f9005..ecea071 100644 --- a/layouts/partials/aside/li-source.html +++ b/layouts/partials/aside/li-source.html @@ -2,7 +2,7 @@ {{- $pattern := (print "icons/" (print (urlize "source") ".svg")) }} {{- with resources.Get $pattern -}} - {{ . }} + {{- ( . | resources.Minify).Content | safeHTML -}} Source {{- else -}} {{ warnf "Unable to match resources with pattern: %q" $pattern }} diff --git a/layouts/partials/pipes/aside.html b/layouts/partials/pipes/aside.html index d047288..058fbbd 100644 --- a/layouts/partials/pipes/aside.html +++ b/layouts/partials/pipes/aside.html @@ -1,4 +1,4 @@ {{- $defines := dict "process.env.NODE_ENV" `"development"` -}} -{{- $opts := dict "targetPath" "js/aside.js" "defines" $defines "format" "esm" "minify" false -}} -{{- $built := resources.Get "typescript/aside.ts" | js.Build $opts -}} +{{- $opts := dict "targetPath" "js/main.js" "defines" $defines "format" "esm" "minify" false -}} +{{- $built := resources.Get "typescript/main.ts" | js.Build $opts -}} \ No newline at end of file diff --git a/layouts/shortcodes/svg-inline.html b/layouts/shortcodes/svg-inline.html new file mode 100644 index 0000000..5500cf8 --- /dev/null +++ b/layouts/shortcodes/svg-inline.html @@ -0,0 +1 @@ +{{- (resources.Get (.Get "src") | resources.Minify).Content | safeHTML -}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 87cdfdd..0b4d00a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,365 +1,28 @@ { "name": "svg-tutorial", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svg-tutorial", - "version": "1.0.0", + "version": "1.1.0", "license": "MIT", "dependencies": { - "@kurtbruns/vector": "^0.1.2" + "@kurtbruns/vector": "^0.1.14" } }, "node_modules/@kurtbruns/vector": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@kurtbruns/vector/-/vector-0.1.2.tgz", - "integrity": "sha512-QZ7wRYNdD34TRhOLULyv0d3ejtAnJXPU8a0yOoE1aQypXlASHsf6XzUHawrphNHxV5/DMbMlMhUt/Y6J4HwAKg==", - "dependencies": { - "sass": "^1.52.1" - } - }, - "node_modules/anymatch": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", - "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "engines": { - "node": ">=8" - } - }, - "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/immutable": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", - "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" - }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/sass": { - "version": "1.62.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz", - "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@kurtbruns/vector/-/vector-0.1.14.tgz", + "integrity": "sha512-02RvdegXg31GOw1cDR0vr37qTipQX1mFegr6dSpS6XlpCgiHAnwQmWNnTzMI8Uc5j/ZkQYvrtrlvnKvISEA6Dg==" } }, "dependencies": { "@kurtbruns/vector": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@kurtbruns/vector/-/vector-0.1.2.tgz", - "integrity": "sha512-QZ7wRYNdD34TRhOLULyv0d3ejtAnJXPU8a0yOoE1aQypXlASHsf6XzUHawrphNHxV5/DMbMlMhUt/Y6J4HwAKg==", - "requires": { - "sass": "^1.52.1" - } - }, - "anymatch": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", - "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - } - }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" - }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "requires": { - "fill-range": "^7.0.1" - } - }, - "chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "requires": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "fsevents": "~2.3.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - } - }, - "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "requires": { - "to-regex-range": "^5.0.1" - } - }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "optional": true - }, - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "requires": { - "is-glob": "^4.0.1" - } - }, - "immutable": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", - "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" - }, - "is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "requires": { - "binary-extensions": "^2.0.0" - } - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" - }, - "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" - }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" - }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" - }, - "readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "requires": { - "picomatch": "^2.2.1" - } - }, - "sass": { - "version": "1.62.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz", - "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", - "requires": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - } - }, - "source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" - }, - "to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "requires": { - "is-number": "^7.0.0" - } + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@kurtbruns/vector/-/vector-0.1.14.tgz", + "integrity": "sha512-02RvdegXg31GOw1cDR0vr37qTipQX1mFegr6dSpS6XlpCgiHAnwQmWNnTzMI8Uc5j/ZkQYvrtrlvnKvISEA6Dg==" } } } diff --git a/package.json b/package.json index ca5bfa1..b072e12 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,6 @@ "license": "MIT", "homepage": "https://kurtbruns.github.io/svg-tutorial/", "dependencies": { - "@kurtbruns/vector": "^0.1.2" + "@kurtbruns/vector": "^0.1.14" } }