updated godot sass

This commit is contained in:
ronny abraham 2024-11-29 06:13:49 +02:00
parent 4d7f3356b7
commit d5a3c11ce8
4 changed files with 212 additions and 111 deletions

View file

@ -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

View file

@ -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

View 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

View file

@ -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