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
|
||||
|
||||
// Color Variables
|
||||
$primary-color: #61afef // Used for links
|
||||
$header-color: #e06c75 // Default header color (can be overridden)
|
||||
$secondary-color: #98c379 // Used for code blocks
|
||||
$anchor-color: #89bae3 // Used for links (new)
|
||||
$background-color: #282c34 // Background color
|
||||
$text-color: #abb2bf // General text color
|
||||
$code-background-color: #2c313c // Code block background
|
||||
$note-background-color: #333842 // Note background
|
||||
$note-border-color: #c678dd // Note border color
|
||||
$code-background-color: #2c313c // Code block background (updated)
|
||||
$code-text-color: #abb2bf // Text color for code blocks (updated)
|
||||
|
||||
$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-hover-color: color.adjust($primary-color, $lightness: 10%)
|
||||
$toc-anchor-color: color.adjust($secondary-color, $lightness: -5%)
|
||||
$toc-anchor-hover-color: color.adjust($primary-color, $lightness: -5%)
|
||||
|
||||
// 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-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'
|
||||
@import 'fonts'
|
||||
@import 'variables'
|
||||
@use "sass:map"
|
||||
@use "sass:color"
|
||||
@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 */
|
||||
body
|
||||
background-color: $background-color
|
||||
color: $text-color
|
||||
font-family: $primary-font
|
||||
font-size: 1em
|
||||
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 */
|
||||
a
|
||||
color: $anchor-color
|
||||
text-decoration: none
|
||||
|
||||
a:hover
|
||||
text-decoration: underline
|
||||
text-underline-offset: 2px
|
||||
|
||||
/* List Styles */
|
||||
&:hover
|
||||
color: $anchor-hover-color
|
||||
|
||||
// Lists
|
||||
ul, ol
|
||||
margin-left: $list-padding-left
|
||||
margin-bottom: 1em
|
||||
padding-left: $list-padding-left
|
||||
|
||||
ul
|
||||
margin: 1em 0em
|
||||
list-style-type: disc
|
||||
|
||||
ol
|
||||
margin: 1em .5em
|
||||
list-style-type: decimal
|
||||
|
||||
li
|
||||
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 */
|
||||
pre, code
|
||||
background-color: $code-background-color
|
||||
color: $secondary-color
|
||||
padding: 0.5em
|
||||
color: $code-text-color
|
||||
|
||||
font-family: $secondary-font
|
||||
|
||||
border-radius: 4px
|
||||
padding: 0.5em
|
||||
display: block
|
||||
overflow-x: auto
|
||||
|
||||
@include font-family('firamono')
|
||||
|
||||
/* Table of Contents Link */
|
||||
.toc
|
||||
font-weight: bold
|
||||
color: $primary-color
|
||||
|
||||
/* Section Styles */
|
||||
// Section
|
||||
section
|
||||
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
|
||||
background-color: $note-background-color
|
||||
padding: 0.5em
|
||||
|
|
@ -56,46 +119,51 @@ section
|
|||
margin-bottom: 1em
|
||||
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
|
||||
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
|
||||
margin-left: 1em
|
||||
.outline-3
|
||||
margin-left: .5em
|
||||
|
||||
h4
|
||||
margin-left: 1.5em
|
||||
.outline-4
|
||||
margin-left: .5em
|
||||
|
||||
.outline-text-3
|
||||
margin-left: 1em
|
||||
/* Table of Contents Link */
|
||||
.toc
|
||||
font-weight: bold
|
||||
color: $primary-color
|
||||
|
||||
p
|
||||
margin-left: 1em
|
||||
ul.links
|
||||
padding-left: 2em
|
||||
list-style-type: square
|
||||
li
|
||||
margin: 0
|
||||
|
||||
.outline-text-4
|
||||
margin-left: 1.5em
|
||||
|
||||
p
|
||||
margin-left: 1.5em
|
||||
a
|
||||
text-transform: capitalize
|
||||
|
||||
div#table-of-contents
|
||||
h2
|
||||
font-size: 1.5em
|
||||
ul
|
||||
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