57 lines
1.9 KiB
Sass
57 lines
1.9 KiB
Sass
@use "sass:map"
|
|
|
|
// Color Variables
|
|
$primary-color: #c0392b // Darker red for main headers
|
|
$secondary-color: #2c3e50 // Darker navy blue for headers
|
|
$tertiary-color: #27ae60 // Darker green for subheaders
|
|
$quaternary-color: #7d3c98 // Darker purple for smaller headers
|
|
$link-color-primary: #d35400 // Darker and more saturated orange for primary links
|
|
$link-color-secondary: #1f618d // Darker and more saturated blue for secondary links
|
|
$background-color: #e5e5e5 // Slightly darker background
|
|
$text-color: #2c3e50 // Darker text color for better contrast
|
|
$table-header-bg: #b9770e // Even darker shade of orange for table headers
|
|
$table-border-color: #aaa // Darker border color
|
|
|
|
// Header Sizes and Colors Map
|
|
$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
|
|
$header-styles: map.set($header-styles, h2, (size: 1.75em, color: $secondary-color, border-size: 2px))
|
|
$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
|
|
$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
|
|
|
|
// Font Variables
|
|
$body-font: 'Fira Mono', monospace
|
|
$header-font: 'Roboto', sans-serif
|
|
|
|
// Table Style Variables
|
|
$table-padding: 10px
|
|
$code-bg-color: #d3d3d3 // Darker code background color
|
|
$code-font-color: $text-color
|
|
$code-border-radius: 5px
|
|
$list-padding-left: 20px
|
|
|
|
// Link Style Mixins
|
|
@mixin link-primary
|
|
color: $link-color-primary
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
color: darken($link-color-primary, 10%)
|
|
text-decoration: underline
|
|
|
|
@mixin link-secondary
|
|
color: $link-color-secondary
|
|
text-decoration: underline
|
|
|
|
&:hover
|
|
color: lighten($link-color-secondary, 10%)
|
|
|
|
@mixin link-inverse
|
|
color: white
|
|
background-color: $link-color-primary
|
|
padding: 2px 4px
|
|
text-decoration: none
|
|
border-radius: 3px
|
|
|
|
&:hover
|
|
background-color: darken($link-color-primary, 10%)
|
|
color: white
|