From 656f12e3ce57fc1d3725dcc7591c46fab3d6e6fd Mon Sep 17 00:00:00 2001 From: ronny abraham Date: Tue, 21 Jan 2025 02:10:25 +0200 Subject: [PATCH] updated --- _tables.sass | 5 --- _variables.sass | 10 ++++-- course_listings.sass | 55 +++++++++++++++++-------------- org-mode.sass | 46 ++++++++++++++------------ themes/course_listings/_dark.sass | 4 +-- 5 files changed, 64 insertions(+), 56 deletions(-) diff --git a/_tables.sass b/_tables.sass index 0583d40..f339075 100644 --- a/_tables.sass +++ b/_tables.sass @@ -26,7 +26,6 @@ // Thin Table for Calls/Username with Side Borders Only .thin-table width: auto - border: solid $table-header-bg border-spacing: 0 margin: 15px 0 @@ -39,10 +38,6 @@ padding: 12px 16px /* Increased padding for more width */ text-align: center - border-left: 1px solid $table-border-color - border-right: 1px solid $table-border-color - - @mixin set-table-thin-color($table-border, $table-border-sides) .thin-table border: solid $table-border diff --git a/_variables.sass b/_variables.sass index 163ef78..08f0145 100644 --- a/_variables.sass +++ b/_variables.sass @@ -1,4 +1,5 @@ @use "sass:map" +@use "sass:color" // Import the chosen theme (dark or light) // Or 'themes/light' @@ -15,7 +16,8 @@ $list-padding-left: 20px text-decoration: none &:hover - color: darken($link-color-primary, 10%) + // color: darken($link-color-primary, 10%) + color: color.adjust($link-color-primary, $lightness: -10%) text-decoration: underline @mixin link-secondary @@ -23,7 +25,8 @@ $list-padding-left: 20px text-decoration: underline &:hover - color: lighten($link-color-secondary, 10%) + // color: lighten($link-color-secondary, 10%) + color: color.adjust($link-color-secondary, $lightness: 10%) @mixin link-inverse color: $inverse-link-color @@ -33,6 +36,7 @@ $list-padding-left: 20px border-radius: 3px &:hover - background-color: darken($link-color-primary, 10%) + //background-color: darken($link-color-primary, 10%) + background-color: color.adjust($link-color-primary, $lightness: -10%) color: $inverse-link-hover-color diff --git a/course_listings.sass b/course_listings.sass index 72b0f6e..ed97172 100644 --- a/course_listings.sass +++ b/course_listings.sass @@ -1,41 +1,44 @@ -@import 'themes/course_listings/dark' -@import 'mixins' -@import 'collapsible' +@use "sass:map" +@use "sass:color" -@include toggle-section-numbers(h4, false) -@include remove-section-number(h2) +@use 'themes/course_listings/dark' as theme +@use 'mixins' +@use 'collapsible' + +@include mixins.toggle-section-numbers(h4, false) +@include mixins.remove-section-number(h2) // @include set-header-sizes($default-header-sizes) // @include set-header-color($text-color) // Base body styles body - font-family: $primary-font + font-family: theme.$primary-font font-size: 16px line-height: 1.6 - color: $text-color - background-color: $background-color + color: theme.$text-color + background-color: theme.$background-color // Headers -@each $header, $props in $header-styles +@each $header, $props in theme.$header-styles #{$header} - font-family: $secondary-font + font-family: theme.$secondary-font font-weight: bold - color: map-get($props, color) - font-size: map-get($props, size) + color: map.get($props, color) + font-size: map.get($props, size) margin-top: 20px margin-bottom: 10px div#postamble - border-color: $text-color + border-color: theme.$text-color a - color: $anchor-color + color: theme.$anchor-color text-decoration: none &:hover - color: $anchor-hover-color - border-bottom-color: $anchor-hover-color + color: theme.$anchor-hover-color + border-bottom-color: theme.$anchor-hover-color text-decoration: underline h2 @@ -52,7 +55,7 @@ h3 + .outline-text-3 p h3 + .outline-text-3 p > a:first-of-type font-size: 1em - margin-left: $first-anchor-margin-left + margin-left: theme.$first-anchor-margin-left h4 text-transform: uppercase @@ -107,19 +110,20 @@ ul.explanation li - color: darken($primary-color, 10) + // color: darken(theme.$primary-color, 10) + color: color.adjust(theme.$primary-color, $lightness: -10%) font-weight: bold - font-family: $secondary-font + font-family: theme.$secondary-font text-transform: uppercase font-size: .9rem a text-transform: none font-weight: normal - color: $anchor-secondary-color + color: theme.$anchor-secondary-color &:hover - color: $anchor-secondary-hover-color + color: theme.$anchor-secondary-hover-color /* &:not(a) color: darken($primary-color, 10) @@ -138,12 +142,13 @@ ul.toc text-transform: uppercase font-weight: bold font-size: 1rem - font-family: $secondary-font - color: $tertiary-color - color: lighten($quinary-color, 5) + font-family: theme.$secondary-font + color: theme.$tertiary-color + color: color.adjust(theme.$quinary-color, $lightness: 5%) text-transform: uppercase &:hover - color: lighten($quinary-color, 10) + // color: lighten($quinary-color, 10) + color: color.adjust(theme.$quinary-color, $lightness: 5%) &::after content: " Notes" diff --git a/org-mode.sass b/org-mode.sass index 028f2b2..4a3083f 100644 --- a/org-mode.sass +++ b/org-mode.sass @@ -1,26 +1,29 @@ -@import 'fonts' -@import 'variables' -@import 'themes/light' -@import 'mixins' -@import 'tables' +@use "sass:map" +@use "sass:color" + +@use 'fonts' +@use 'variables' +@use 'themes/light' as theme +@use 'mixins' +@use 'tables' // Base styles body line-height: 1.6 - color: $primary-color - background-color: $background-color + color: theme.$primary-color + background-color: theme.$background-color padding: 1em max-width: 800px margin: 0 auto // Headers -@each $header, $props in $header-styles +@each $header, $props in theme.$header-styles #{$header} - font-family: $secondary-font + font-family: theme.$secondary-font font-weight: bold - color: map_get($props, color) - font-size: map_get($props, size) + color: map.get($props, color) + font-size: map.get($props, size) margin-top: 1.5em margin-bottom: 0.5em @@ -33,20 +36,20 @@ h3 // remember to use toggle! -@include remove-section-number(h3) -@include remove-section-number(h4) +@include mixins.remove-section-number(h3) +@include mixins.remove-section-number(h4) p margin-bottom: 1em a - @include link-primary + @include variables.link-primary a.secondary - @include link-secondary + @include variables.link-secondary a.inverse - @include link-inverse + @include variables.link-inverse ul, ol @@ -57,14 +60,14 @@ li margin-bottom: 0.5em blockquote - border-left: 4px solid $secondary-color + border-left: 4px solid theme.$secondary-color padding-left: 1em - color: $secondary-color + color: theme.$secondary-color margin: 1.5em 0 pre, code font-family: "Courier New", monospace - background-color: $code-bg-color + background-color: theme.$code-bg-color padding: 0.2em 0.4em border-radius: 3px @@ -78,12 +81,13 @@ table margin-bottom: 1em th, td - border: 1px solid $table-border-color + border: 1px solid theme.$table-border-color padding: 0.5em text-align: left th - background-color: lighten($background-color, 10%) + //background-color: lighten(theme.$background-color, 10%) + background-color: color.adjust(theme.$background-color, $lightness: 10%) font-weight: bold diff --git a/themes/course_listings/_dark.sass b/themes/course_listings/_dark.sass index e7318ca..f93987b 100644 --- a/themes/course_listings/_dark.sass +++ b/themes/course_listings/_dark.sass @@ -1,4 +1,5 @@ @use "sass:map" +@use "sass:color" $primary-color: red $secondary-color: blue @@ -26,8 +27,7 @@ $header-styles: map.set($header-styles, h4, (size: 1.0em, color: $quaternary-col // Colors $anchor-color: $primary-color -$anchor-hover-color: lighten($anchor-color, 10) - +$anchor-hover-color: color.adjust($anchor-color, $lightness: 10%) $anchor-secondary-color: #a19581 $anchor-secondary-hover-color: #ffad42 // A warm, light orange that pairs well with the yellow marker