updated godot sass
This commit is contained in:
parent
4d7f3356b7
commit
d5a3c11ce8
4 changed files with 212 additions and 111 deletions
|
|
@ -1,40 +0,0 @@
|
||||||
@use "sass:map"
|
|
||||||
|
|
||||||
// this file contains the mixins
|
|
||||||
|
|
||||||
@mixin toggle-section-numbers($header, $toggle)
|
|
||||||
@if $toggle == true
|
|
||||||
#{$header} > span[class^="section-number"]:first-of-type
|
|
||||||
display: inline // Uses the default display for the header
|
|
||||||
@else
|
|
||||||
#{$header} > span[class^="section-number"]:first-of-type
|
|
||||||
display: none
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@mixin remove-section-number($element)
|
|
||||||
#{$element} > span[class^="section-number"]:first-of-type
|
|
||||||
display: none
|
|
||||||
|
|
||||||
// @mixin set-header-color($header-color)
|
|
||||||
// h1, h2, h3, h4, h5, h6
|
|
||||||
// color: $header-color
|
|
||||||
|
|
||||||
@mixin set-header-colors($header-colors)
|
|
||||||
@each $header, $size in $header-colors
|
|
||||||
#{$header}
|
|
||||||
color: #{$size}
|
|
||||||
|
|
||||||
@mixin set-header-sizes($header-sizes)
|
|
||||||
@each $header, $size in $header-sizes
|
|
||||||
#{$header}
|
|
||||||
font-size: #{$size}
|
|
||||||
|
|
||||||
@mixin adjust-header-size($scale-factor, $header-sizes)
|
|
||||||
@each $header, $size in $header-sizes
|
|
||||||
#{$header}
|
|
||||||
font-size: calc(#{$scale-factor} * #{$size})
|
|
||||||
|
|
||||||
// Function to return the font size from the $header-styles map
|
|
||||||
@function get-header-property($element, $property)
|
|
||||||
$element-styles: map.get($header-styles, $element) // Get the styles for the element
|
|
||||||
@return map.get($element-styles, $property) // Return the requested property value
|
|
||||||
|
|
@ -1,20 +1,63 @@
|
||||||
// _variables.sass
|
// _var2.sass
|
||||||
|
@use "sass:map"
|
||||||
|
@use "sass:color"
|
||||||
|
@use 'fonts' as fonts
|
||||||
|
|
||||||
$list-padding-left: 1.5em
|
$list-padding-left: 1.5em
|
||||||
|
|
||||||
// Color Variables
|
// Color Variables
|
||||||
$primary-color: #61afef // Used for links
|
$code-background-color: #2c313c // Code block background (updated)
|
||||||
$header-color: #e06c75 // Default header color (can be overridden)
|
$code-text-color: #abb2bf // Text color for code blocks (updated)
|
||||||
$secondary-color: #98c379 // Used for code blocks
|
|
||||||
|
$note-background-color: #333842 // Note background (unchanged)
|
||||||
|
$note-border-color: #c678dd // Note border color (unchanged)
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
$primary-color: #61afef // Used for links (updated)
|
||||||
|
$secondary-color: #98c379 // Used for code blocks (updated)
|
||||||
|
$tertiary-color: #abb2bf // General text color (new tertiary role)
|
||||||
|
$quaternary-color: #d19a66 // Highlight color (updated)
|
||||||
|
$quinary-color: #e06c75 // Accent for headers (updated)
|
||||||
|
|
||||||
|
// Text
|
||||||
|
$text-color: #abb2bf // General text color (updated)
|
||||||
|
$background-color: #282c34 // Background color (updated)
|
||||||
|
|
||||||
|
// Links, Anchors
|
||||||
$anchor-color: #89bae3 // Used for links (new)
|
$anchor-color: #89bae3 // Used for links (new)
|
||||||
$background-color: #282c34 // Background color
|
$anchor-hover-color: color.adjust($primary-color, $lightness: 10%)
|
||||||
$text-color: #abb2bf // General text color
|
$toc-anchor-color: color.adjust($secondary-color, $lightness: -5%)
|
||||||
$code-background-color: #2c313c // Code block background
|
$toc-anchor-hover-color: color.adjust($primary-color, $lightness: -5%)
|
||||||
$note-background-color: #333842 // Note background
|
|
||||||
$note-border-color: #c678dd // Note border color
|
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
$table-header-bg: #44475a // Steely blue for table headers (unchanged)
|
||||||
|
$table-border-color: #6272a4 // Muted blue-gray for borders (unchanged)
|
||||||
|
|
||||||
|
// Default Header Sizes and Colors
|
||||||
$default-header-sizes: (h1: 2em, h2: 1.75em, h3: 1.3em, h4: 1.25em, h5: 1.1em, h6: 1em)
|
$default-header-sizes: (h1: 2em, h2: 1.75em, h3: 1.3em, h4: 1.25em, h5: 1.1em, h6: 1em)
|
||||||
$default-header-colors: (h1: #d19a66, h2: $header-color, h3: $primary-color, h4: $secondary-color)
|
$default-header-colors: (h1: $quaternary-color, h2: $quinary-color, h3: $primary-color, h4: $secondary-color)
|
||||||
|
|
||||||
|
// Initialize empty maps
|
||||||
|
$default-header-margins-sides: ()
|
||||||
|
$default-header-margins-vertical: ()
|
||||||
|
|
||||||
|
// Dynamically populate sides map
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h1, (left: 0, right: 0))
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h2, (left: 0, right: 0))
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h3, (left: 0, right: 0))
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h4, (left: 0, right: 0))
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h5, (left: 0, right: 0))
|
||||||
|
$default-header-margins-sides: map.set($default-header-margins-sides, h6, (left: 0, right: 0))
|
||||||
|
|
||||||
|
// Dynamically populate vertical map
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h1, (top: 1em, bottom: 0.5em))
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h2, (top: 1em, bottom: 0.5em))
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h3, (top: 1em, bottom: 0.5em))
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h4, (top: 1em, bottom: 0.5em))
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h5, (top: 1em, bottom: 0.5em))
|
||||||
|
$default-header-margins-vertical: map.set($default-header-margins-vertical, h6, (top: 3.5em, bottom: 0.5em))
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
$primary-font: 'Fira Mono', monospace
|
||||||
|
$secondary-font: 'Roboto', sans-serif
|
||||||
|
|
||||||
$col1: #89bae3
|
|
||||||
|
|
|
||||||
30
_share/media/sass/content-overview.sass
Normal file
30
_share/media/sass/content-overview.sass
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
@use "sass:map"
|
||||||
|
@use 'variables' as *
|
||||||
|
@use '../../../../../../../_share/media/sass/mixins' as mixins-basic
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin-bottom: 0
|
||||||
|
text-transform: uppercase
|
||||||
|
|
||||||
|
ul, ol
|
||||||
|
margin: 0
|
||||||
|
padding-left: 3em
|
||||||
|
margin-top: 0.5em
|
||||||
|
|
||||||
|
ul.contents-overview
|
||||||
|
padding-left: 1em
|
||||||
|
list-style-type: none
|
||||||
|
|
||||||
|
li
|
||||||
|
margin: 0
|
||||||
|
margin-bottom: .5em
|
||||||
|
|
||||||
|
a
|
||||||
|
font-weight: 600
|
||||||
|
text-transform: uppercase
|
||||||
|
text-decoration: none
|
||||||
|
text-underline-offset: 6px
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
|
@ -1,54 +1,117 @@
|
||||||
@import 'mixins'
|
@use "sass:map"
|
||||||
@import 'fonts'
|
@use "sass:color"
|
||||||
@import 'variables'
|
@use 'var2' as *
|
||||||
|
@use 'fonts' as fonts
|
||||||
|
@use '../../../../../../../_share/media/sass/mixins' as mixins-basic
|
||||||
|
|
||||||
|
@include mixins-basic.set-header-sizes($default-header-sizes)
|
||||||
|
@include mixins-basic.set-header-colors($default-header-colors)
|
||||||
|
@include mixins-basic.set-header-margins-sides($default-header-margins-sides)
|
||||||
|
@include mixins-basic.set-header-margins-vertical($default-header-margins-vertical)
|
||||||
|
|
||||||
|
@include mixins-basic.remove-section-number(h2)
|
||||||
|
@include mixins-basic.remove-section-number(h4)
|
||||||
|
|
||||||
@include set-header-sizes($default-header-sizes)
|
|
||||||
@include set-header-colors($default-header-colors)
|
|
||||||
|
|
||||||
/* Base Styles */
|
/* Base Styles */
|
||||||
body
|
body
|
||||||
background-color: $background-color
|
font-family: $primary-font
|
||||||
color: $text-color
|
font-size: 1em
|
||||||
line-height: 1.6
|
line-height: 1.6
|
||||||
|
|
||||||
@include font-family('firamono')
|
color: $text-color
|
||||||
|
background-color: $background-color
|
||||||
|
|
||||||
|
margin: 0 auto
|
||||||
|
max-width: 900px
|
||||||
|
padding: 1em
|
||||||
|
|
||||||
/* Link Styles */
|
/* Link Styles */
|
||||||
a
|
a
|
||||||
color: $anchor-color
|
color: $anchor-color
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
a:hover
|
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
text-underline-offset: 2px
|
||||||
|
|
||||||
/* List Styles */
|
&:hover
|
||||||
|
color: $anchor-hover-color
|
||||||
|
|
||||||
|
// Lists
|
||||||
ul, ol
|
ul, ol
|
||||||
margin-left: $list-padding-left
|
padding-left: $list-padding-left
|
||||||
margin-bottom: 1em
|
|
||||||
|
ul
|
||||||
|
margin: 1em 0em
|
||||||
|
list-style-type: disc
|
||||||
|
|
||||||
|
ol
|
||||||
|
margin: 1em .5em
|
||||||
|
list-style-type: decimal
|
||||||
|
|
||||||
li
|
li
|
||||||
margin-bottom: 0.5em
|
margin-bottom: 0.5em
|
||||||
|
|
||||||
|
// Blockquotes
|
||||||
|
blockquote
|
||||||
|
border-left: 4px solid $secondary-color
|
||||||
|
padding-left: 1em
|
||||||
|
color: color.adjust($text-color, $lightness: 10%)
|
||||||
|
margin: 1.5em 0
|
||||||
|
|
||||||
|
font-family: $secondary-font
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
table
|
||||||
|
width: 100%
|
||||||
|
border-collapse: collapse
|
||||||
|
margin-bottom: 1em
|
||||||
|
color: $text-color
|
||||||
|
|
||||||
|
th, td
|
||||||
|
padding: 0.75em
|
||||||
|
text-align: left
|
||||||
|
border: 1px solid $table-border-color
|
||||||
|
|
||||||
|
th
|
||||||
|
background-color: $table-header-bg
|
||||||
|
color: $text-color
|
||||||
|
|
||||||
|
tr:nth-child(even)
|
||||||
|
background-color: color.adjust($background-color, $lightness: 5%)
|
||||||
|
|
||||||
/* Code Block Styles */
|
/* Code Block Styles */
|
||||||
pre, code
|
pre, code
|
||||||
background-color: $code-background-color
|
background-color: $code-background-color
|
||||||
color: $secondary-color
|
color: $code-text-color
|
||||||
padding: 0.5em
|
|
||||||
|
font-family: $secondary-font
|
||||||
|
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
padding: 0.5em
|
||||||
|
display: block
|
||||||
overflow-x: auto
|
overflow-x: auto
|
||||||
|
|
||||||
@include font-family('firamono')
|
// Section
|
||||||
|
|
||||||
/* Table of Contents Link */
|
|
||||||
.toc
|
|
||||||
font-weight: bold
|
|
||||||
color: $primary-color
|
|
||||||
|
|
||||||
/* Section Styles */
|
|
||||||
section
|
section
|
||||||
margin-bottom: 2em
|
margin-bottom: 2em
|
||||||
|
|
||||||
/* Highlight Specific Notes */
|
/* Header Styles */
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
text-transform: capitalize
|
||||||
|
font-family: $secondary-font
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
h3
|
||||||
|
a
|
||||||
|
color: color.adjust($anchor-color, $lightness: -12%)
|
||||||
|
&:hover
|
||||||
|
text-decoration: none
|
||||||
|
color: color.adjust($anchor-hover-color, $lightness: -12%)
|
||||||
|
|
||||||
|
// Paragraphs
|
||||||
|
p
|
||||||
|
margin-bottom: 1em
|
||||||
|
|
||||||
|
// Notes
|
||||||
.note
|
.note
|
||||||
background-color: $note-background-color
|
background-color: $note-background-color
|
||||||
padding: 0.5em
|
padding: 0.5em
|
||||||
|
|
@ -56,46 +119,51 @@ section
|
||||||
margin-bottom: 1em
|
margin-bottom: 1em
|
||||||
color: $text-color
|
color: $text-color
|
||||||
|
|
||||||
/* Header Styles */
|
|
||||||
h1, h2, h3, h4, h5, h6
|
|
||||||
margin-top: 1em
|
|
||||||
margin-bottom: 0.5em
|
|
||||||
|
|
||||||
h1.title
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
h2 a
|
|
||||||
color: map-get($default-header-colors, h2)
|
|
||||||
&:hover
|
|
||||||
text-decoration: none
|
|
||||||
color: #ca9ca0
|
|
||||||
|
|
||||||
div#table-of-contents h2
|
|
||||||
color: $primary-color
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
div#postamble
|
div#postamble
|
||||||
border-color: $note-border-color
|
border-top: 1px dashed $note-border-color
|
||||||
|
margin-top: 2em
|
||||||
|
padding-top: 1em
|
||||||
|
color: color.adjust($note-border-color, $lightness: 20%)
|
||||||
|
font-size: 0.9em
|
||||||
|
|
||||||
h3
|
.outline-3
|
||||||
margin-left: 1em
|
margin-left: .5em
|
||||||
|
|
||||||
h4
|
.outline-4
|
||||||
margin-left: 1.5em
|
margin-left: .5em
|
||||||
|
|
||||||
.outline-text-3
|
/* Table of Contents Link */
|
||||||
margin-left: 1em
|
.toc
|
||||||
|
font-weight: bold
|
||||||
|
color: $primary-color
|
||||||
|
|
||||||
p
|
ul.links
|
||||||
margin-left: 1em
|
padding-left: 2em
|
||||||
|
list-style-type: square
|
||||||
|
li
|
||||||
|
margin: 0
|
||||||
|
|
||||||
.outline-text-4
|
a
|
||||||
margin-left: 1.5em
|
text-transform: capitalize
|
||||||
|
|
||||||
p
|
|
||||||
margin-left: 1.5em
|
|
||||||
|
|
||||||
div#table-of-contents
|
div#table-of-contents
|
||||||
h2
|
ul
|
||||||
font-size: 1.5em
|
padding-left: 1em
|
||||||
|
margin: 0
|
||||||
|
list-style-type: none
|
||||||
|
|
||||||
|
li
|
||||||
|
margin: .4 0
|
||||||
|
|
||||||
|
a
|
||||||
|
color: $toc-anchor-color
|
||||||
|
text-transform: lowercase
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: $toc-anchor-hover-color
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin-left: 0
|
||||||
|
margin-bottom: .2em
|
||||||
|
text-transform: uppercase
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue