fixed pickup so it works with variables

This commit is contained in:
ronny abraham 2024-11-29 00:43:13 +02:00
parent 5336cb4f90
commit 1ca31ec033
2 changed files with 77 additions and 215 deletions

View file

@ -1,142 +0,0 @@
@use "sass:map"
@use "sass:color"
@use 'variables' 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)
/* Table of Contents Link */
.toc
font-weight: bold
color: $primary-color
/* Base Styles */
body
font-family: $primary-font
font-size: 1em
line-height: 1.6
color: $text-color
background-color: $background-color
margin: 0 auto
max-width: 900px
padding: 1em
/* Link Styles */
a
color: $anchor-color
text-decoration: underline
text-underline-offset: 2px
&:hover
color: $anchor-hover-color
// Lists
ul, ol
margin: 1em 0 1em 2em
padding-left: $list-padding-left
ul
list-style-type: disc
ol
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: $code-text-color
font-family: $secondary-font
border-radius: 4px
padding: 0.5em
display: block
overflow-x: auto
// Section
section
margin-bottom: 2em
/* Header Styles */
h1, h2, h3, h4, h5, h6
font-family: $secondary-font
font-weight: bold
h2 a
&:hover
text-decoration: none
color: #ca9ca0
// Paragraphs
p
margin-bottom: 1em
// Notes
.note
background-color: $note-background-color
padding: 0.5em
border-left: 3px solid $note-border-color
margin-bottom: 1em
color: $text-color
div#postamble
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
.outline-text-3
margin-left: 1em
p
margin-left: 1em
.outline-text-4
margin-left: 1.5em
p
margin-left: 1.5em
div#table-of-contents
h2
margin-left: 0
text-transform: uppercase

View file

@ -1,79 +1,46 @@
@use "sass:map"
@use "sass:color"
@use 'variables' as *
@use 'fonts' as fonts
@use '../../../../../_share/media/sass/mixins' as mixins-basic
// Colors for the theme
$primary-color: #d10094 // Dark pink for headers
$secondary-color: #5b8ee8 // Rich blue for secondary headers
$tertiary-color: #228b22 // Dark green for subheaders
$text-color: #f8f8f2 // Off-white for body text
$background-color: #282a36 // Dark black-gray background
$link-color: #1e90ff // Dodger blue for links
$link-hover-color: #e0006f// Vibrant pink for link hover
@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)
$table-header-bg: #44475a // Steely blue for table headers
$table-border-color: #6272a4 // Muted blue-gray for borders
$code-bg-color: #1e1f29 // Very dark blue for code blocks
$code-text-color: #f8f8f2 // Off-white for code text
// Fonts
$primary-font: 'Fira Mono', monospace
$secondary-font: 'Roboto', sans-serif
// Base styles
body
font-family: $primary-font
font-size: 16px
line-height: 1.6
color: $text-color
background-color: $background-color
margin: 0 auto
max-width: 800px
padding: 1em
// Headers
h1, h2, h3, h4, h5, h6
font-family: $secondary-font
/* Table of Contents Link */
.toc
font-weight: bold
margin-top: 1.5em
margin-bottom: 0.5em
h1
font-size: 2.5em
color: $primary-color
h2
font-size: 2em
color: $secondary-color
/* Base Styles */
body
font-family: $primary-font
font-size: 1em
line-height: 1.6
h3
font-size: 1.5em
color: $secondary-color
color: $text-color
background-color: $background-color
a
font-size: 1em
text-transform: uppercase
margin: 0 auto
max-width: 900px
padding: 1em
h4, h5, h6
font-size: 1.2em
color: lighten($text-color, 10%)
// Links
/* Link Styles */
a
color: $link-color
color: $anchor-color
text-decoration: underline
text-underline-offset: 2px
&:hover
color: $link-hover-color
// Paragraphs
p
margin-bottom: 1em
&:hover
color: $anchor-hover-color
// Lists
ul, ol
margin: 1em 0
padding-left: 1.5em
list-style-position: inside
margin: 1em 0 1em 2em
padding-left: $list-padding-left
ul
list-style-type: disc
@ -88,9 +55,11 @@ li
blockquote
border-left: 4px solid $secondary-color
padding-left: 1em
color: lighten($text-color, 10%)
color: color.adjust($text-color, $lightness: 10%)
margin: 1.5em 0
font-family: $secondary-font
// Tables
table
width: 100%
@ -108,31 +77,66 @@ th
color: $text-color
tr:nth-child(even)
background-color: lighten($background-color, 5%)
background-color: color.adjust($background-color, $lightness: 5%)
// Code Blocks
/* Code Block Styles */
pre, code
background-color: $code-bg-color
background-color: $code-background-color
color: $code-text-color
font-family: $primary-font
font-family: $secondary-font
border-radius: 4px
padding: 0.5em
display: block
overflow-x: auto
pre
padding: 1em
// Section
section
margin-bottom: 2em
code.inline
display: inline
padding: 0.2em 0.4em
border-radius: 3px
/* Header Styles */
h1, h2, h3, h4, h5, h6
font-family: $secondary-font
font-weight: bold
h2 a
&:hover
text-decoration: none
color: #ca9ca0
// Paragraphs
p
margin-bottom: 1em
// Notes
.note
background-color: $note-background-color
padding: 0.5em
border-left: 3px solid $note-border-color
margin-bottom: 1em
color: $text-color
// Postamble
div#postamble
border-top: 1px dashed $table-border-color
border-top: 1px dashed $note-border-color
margin-top: 2em
padding-top: 1em
color: lighten($text-color, 20%)
color: color.adjust($note-border-color, $lightness: 20%)
font-size: 0.9em
.outline-text-3
margin-left: 1em
p
margin-left: 1em
.outline-text-4
margin-left: 1.5em
p
margin-left: 1.5em
div#table-of-contents
h2
margin-left: 0
text-transform: uppercase