Browse Source

Avoid duplicating generated CSS by splitting SASS into separate files

margin-rework
Danila Fedorin 2 years ago
parent
commit
8a48a110ff
  1. 3
      assets/scss/gmachine.scss
  2. 3
      assets/scss/stack.scss
  3. 13
      themes/vanilla/assets/scss/mixins.scss
  4. 3
      themes/vanilla/assets/scss/sidenotes.scss
  5. 27
      themes/vanilla/assets/scss/style.scss
  6. 14
      themes/vanilla/assets/scss/variables.scss

3
assets/scss/gmachine.scss

@ -1,4 +1,5 @@
@import "style.scss";
@import "variables.scss";
@import "mixins.scss";
.gmachine-instruction {
display: flex;

3
assets/scss/stack.scss

@ -1,4 +1,5 @@
@import "style.scss";
@import "variables.scss";
@import "mixins.scss";
.stack {
display: flex;

13
themes/vanilla/assets/scss/mixins.scss

@ -0,0 +1,13 @@
@import "variables.scss";
@mixin bordered-block {
border: $standard-border;
border-radius: .2rem;
}
@mixin below-container-width {
@media screen and (max-width: $container-width){
@content;
}
}

3
themes/vanilla/assets/scss/sidenotes.scss

@ -1,4 +1,5 @@
@import "style.scss";
@import "variables.scss";
@import "mixins.scss";
$sidenote-accommodate-shrink: 10rem;
$sidenote-width: 30rem;

27
themes/vanilla/assets/scss/style.scss

@ -1,28 +1,5 @@
$container-width: 45rem;
$standard-border-width: .075rem;
$primary-color: #36e281;
$primary-color-dark: darken($primary-color, 10%);
$code-color: #f0f0f0;
$code-color-dark: darken($code-color, 10%);
$border-color: #bfbfbf;
$font-heading: "Lora", serif;
$font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace;
$standard-border: $standard-border-width solid $border-color;
@mixin bordered-block {
border: $standard-border;
border-radius: .2rem;
}
@mixin below-container-width {
@media screen and (max-width: $container-width){
@content;
}
}
@import "variables.scss";
@import "mixins.scss";
body {
font-family: $font-body;

14
themes/vanilla/assets/scss/variables.scss

@ -0,0 +1,14 @@
$container-width: 45rem;
$standard-border-width: .075rem;
$primary-color: #36e281;
$primary-color-dark: darken($primary-color, 10%);
$code-color: #f0f0f0;
$code-color-dark: darken($code-color, 10%);
$border-color: #bfbfbf;
$font-heading: "Lora", serif;
$font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace;
$standard-border: $standard-border-width solid $border-color;
Loading…
Cancel
Save