sass 'use', netlify CSP, css syntax, min_version (#24)

* sass '@use', netlify CSP, css syntax, min_version * Different Syntax Theme
getzola · May 15, 2023 · 3ee113d · 3ee113d
1 parent 627ec13
commit 3ee113d
Show file tree

Hide file tree

Showing 10 changed files with 764 additions and 46 deletions.
diff --git a/config.toml b/config.toml
@@ -6,6 +6,7 @@ build_search_index = true
 
 [markdown]
 highlight_code = true
+highlight_theme = "css"
 
 [extra]
 book_number_chapters = true
diff --git a/netlify.toml b/netlify.toml
@@ -15,4 +15,4 @@
     X-XSS-Protection = "1; mode=block"
     Referrer-Policy = "strict-origin-when-cross-origin"
     Strict-Transport-Security = "max-age=63072000; includeSubdomains"
-    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
+    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' i.imgur.com data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
diff --git a/sass/_content.scss b/sass/_content.scss
@@ -1,6 +1,7 @@
+@use "variables";
 .page {
   position: absolute;
-  width: calc(100% - #{$sidebar-width});
+  width: calc(100% - #{variables.$sidebar-width});
   height: 100%;
   overflow-y: auto;
   color: #000;
@@ -133,7 +134,7 @@
   }
 
   .previous {
-    left: $sidebar-width;
+    left: variables.$sidebar-width;
     float: left;
     transition: left 0.5s;
   }
@@ -144,7 +145,7 @@
     float: right;
   }
 
-  @include max-screen(1250px) {
+  @include variables.max-screen(1250px) {
     .previous, .next {
       position: static;
       top: auto;
@@ -159,9 +160,9 @@
   }
 }
 
-@include min-screen(600px) {
+@include variables.min-screen(600px) {
   .page {
-    left: $sidebar-width;
+    left: variables.$sidebar-width;
   }
 }
 
@@ -174,7 +175,7 @@
   }
 }
 
-@include max-screen(600px) {
+@include variables.max-screen(600px) {
   .page {
     width: 100%;
     left: calc(100% - 100px);

diff --git a/sass/_document.scss b/sass/_document.scss
@@ -0,0 +1,18 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body, html {
+  height: 100%;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  letter-spacing: 0.2px;
+}
diff --git a/sass/_navigation.scss b/sass/_navigation.scss
@@ -1,3 +1,4 @@
+@use "variables";
 .menu {
   height: 100%;
   position: absolute;
@@ -43,7 +44,7 @@
   width: 0;
 }
 
-@include max-screen(600px) {
+@include variables.max-screen(600px) {
   .menu {
     width: calc(100% - 100px);
     z-index: 1;

diff --git a/sass/_syntax-charcoal.scss b/sass/_syntax-charcoal.scss
@@ -0,0 +1,162 @@
+@mixin dark {
+    .z-code {
+    color: #cccece;
+    background-color: #191919;
+    }
+    .z-comment, .z-punctuation.z-definition.z-comment {
+    color: #7e8384;
+    }
+    .z-variable {
+    color: #cccece;
+    }
+    .z-keyword, .z-storage.z-type, .z-storage.z-modifier {
+    color: #c594c5;
+    }
+    .z-keyword.z-operator, .z-constant.z-other.z-color, .z-punctuation, .z-meta.z-tag, .z-punctuation.z-definition.z-tag, .z-punctuation.z-separator.z-inheritance.z-php, .z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin.z-html, .z-punctuation.z-definition.z-tag.z-end.z-html, .z-punctuation.z-section.z-embedded, .z-keyword.z-other.z-template, .z-keyword.z-other.z-substitution {
+    color: #5fb3b3;
+    }
+    .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml, .z-markup.z-deleted.z-git_gutter {
+    color: #ff7b84;
+    }
+    .z-entity.z-name.z-function, .z-meta.z-function-call, .z-variable.z-function, .z-support.z-function, .z-keyword.z-other.z-special-method, .z-meta.z-block-level {
+    color: #78aade;
+    }
+    .z-support.z-other.z-variable, .z-string.z-other.z-link {
+    color: #fa7e81;
+    }
+    .z-constant.z-numeric, .z-constant.z-language, .z-support.z-constant, .z-constant.z-character, .z-variable.z-parameter, .z-keyword.z-other.z-unit {
+    color: #f99157;
+    }
+    .z-string, .z-constant.z-other.z-symbol, .z-constant.z-other.z-key, .z-entity.z-other.z-inherited-class, .z-markup.z-heading, .z-markup.z-inserted.z-git_gutter, .z-meta.z-group.z-braces.z-curly .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js {
+    color: #99c794;
+    }
+    .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class, .z-support.z-type, .z-support.z-class, .z-support.z-orther.z-namespace.z-use.z-php, .z-meta.z-use.z-php, .z-support.z-other.z-namespace.z-php, .z-markup.z-changed.z-git_gutter {
+    color: #fac863;
+    }
+    .z-entity.z-name.z-module.z-js, .z-variable.z-import.z-parameter.z-js, .z-variable.z-other.z-class.z-js {
+    color: #fe7d83;
+    }
+    .z-variable.z-language {
+    color: #fe7d83;
+    }
+    .z-entity.z-name.z-method.z-js {
+    color: #d8dee9;
+    }
+    .z-meta.z-class-method.z-js .z-entity.z-name.z-function.z-js, .z-variable.z-function.z-constructor {
+    color: #d8dee9;
+    }
+    .z-entity.z-other.z-attribute-name {
+    color: #cd91c4;
+    }
+    .z-markup.z-inserted {
+    color: #99c794;
+    }
+    .z-markup.z-deleted {
+    color: #fe7d83;
+    }
+    .z-markup.z-changed {
+    color: #cd91c4;
+    }
+    .z-string.z-regexp {
+    color: #5fb3b3;
+    }
+    .z-constant.z-character.z-escape {
+    color: #5fb3b3;
+    }
+    .z-*url*, .z-*link*, .z-*uri* {
+    text-decoration: underline;
+    }
+    .z-constant.z-numeric.z-line-number.z-find-in-files {
+    color: #cf9a87;
+    }
+    .z-entity.z-name.z-filename.z-find-in-files {
+    color: #99c794;
+    }
+    .z-tag.z-decorator.z-js .z-entity.z-name.z-tag.z-js, .z-tag.z-decorator.z-js .z-punctuation.z-definition.z-tag.z-js {
+    color: #78aade;
+    }
+    .z-source.z-js .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js {
+    color: #fe7d83;
+    }
+}
+@mixin light {
+    .z-code {
+    color: #727373;
+    background-color: #ffffff;
+    }
+    .z-comment, .z-punctuation.z-definition.z-comment {
+    color: #5f6364;
+    }
+    .z-variable {
+    color: #727373;
+    }
+    .z-keyword, .z-storage.z-type, .z-storage.z-modifier {
+    color: #916392;
+    }
+    .z-keyword.z-operator, .z-constant.z-other.z-color, .z-punctuation, .z-meta.z-tag, .z-punctuation.z-definition.z-tag, .z-punctuation.z-separator.z-inheritance.z-php, .z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin.z-html, .z-punctuation.z-definition.z-tag.z-end.z-html, .z-punctuation.z-section.z-embedded, .z-keyword.z-other.z-template, .z-keyword.z-other.z-substitution {
+    color: #237e7f;
+    }
+    .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml, .z-markup.z-deleted.z-git_gutter {
+    color: #ca4251;
+    }
+    .z-entity.z-name.z-function, .z-meta.z-function-call, .z-variable.z-function, .z-support.z-function, .z-keyword.z-other.z-special-method, .z-meta.z-block-level {
+    color: #4076a7;
+    }
+    .z-support.z-other.z-variable, .z-string.z-other.z-link {
+    color: #c14c52;
+    }
+    .z-constant.z-numeric, .z-constant.z-language, .z-support.z-constant, .z-constant.z-character, .z-variable.z-parameter, .z-keyword.z-other.z-unit {
+    color: #b75922;
+    }
+    .z-string, .z-constant.z-other.z-symbol, .z-constant.z-other.z-key, .z-entity.z-other.z-inherited-class, .z-markup.z-heading, .z-markup.z-inserted.z-git_gutter, .z-meta.z-group.z-braces.z-curly .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js {
+    color: #517c4e;
+    }
+    .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class, .z-support.z-type, .z-support.z-class, .z-support.z-orther.z-namespace.z-use.z-php, .z-meta.z-use.z-php, .z-support.z-other.z-namespace.z-php, .z-markup.z-changed.z-git_gutter {
+    color: #926c00;
+    }
+    .z-entity.z-name.z-module.z-js, .z-variable.z-import.z-parameter.z-js, .z-variable.z-other.z-class.z-js {
+    color: #cb414d;
+    }
+    .z-variable.z-language {
+    color: #cb414d;
+    }
+    .z-entity.z-name.z-method.z-js {
+    color: #6c727c;
+    }
+    .z-meta.z-class-method.z-js .z-entity.z-name.z-function.z-js, .z-variable.z-function.z-constructor {
+    color: #6c727c;
+    }
+    .z-entity.z-other.z-attribute-name {
+    color: #996091;
+    }
+    .z-markup.z-inserted {
+    color: #517c4e;
+    }
+    .z-markup.z-deleted {
+    color: #cb414d;
+    }
+    .z-markup.z-changed {
+    color: #996091;
+    }
+    .z-string.z-regexp {
+    color: #237e7f;
+    }
+    .z-constant.z-character.z-escape {
+    color: #237e7f;
+    }
+    .z-*url*, .z-*link*, .z-*uri* {
+    text-decoration: underline;
+    }
+    .z-constant.z-numeric.z-line-number.z-find-in-files {
+    color: #976756;
+    }
+    .z-entity.z-name.z-filename.z-find-in-files {
+    color: #517c4e;
+    }
+    .z-tag.z-decorator.z-js .z-entity.z-name.z-tag.z-js, .z-tag.z-decorator.z-js .z-punctuation.z-definition.z-tag.z-js {
+    color: #4076a7;
+    }
+    .z-source.z-js .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js {
+    color: #cb414d;
+    }
+}