Skip to content

Commit

Permalink
Work on the new style
Browse files Browse the repository at this point in the history
  • Loading branch information
cafour committed Jan 10, 2024
1 parent aa9b2bb commit 618ff48
Show file tree
Hide file tree
Showing 15 changed files with 962 additions and 18 deletions.
4 changes: 1 addition & 3 deletions _config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,6 @@ site
options: {
fleqn: true,
throwOnError: false,
errorColor: "#ff0000",
globalGroup: true,
output: "html",
strict: false
}
Expand All @@ -91,7 +89,7 @@ site
.copy([".svg"])
.copy("fonts")
.copy("icons")
.ignore("readme.md", "contributing.md")
.ignore("readme.md", "contributing.md", "public")
.use(pagefind({
indexing: {
rootSelector: "main"
Expand Down
103 changes: 103 additions & 0 deletions _includes/sass/abstracts/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@use "sass:color";
@use "./variables" as *;

@mixin theme-dark {
$color-link: color.adjust($color-link, $lightness: +10%);

color-scheme: dark;

--color-text: #{$color-paper};
--color-link: #{$color-link};
--color-link-visited: #{color.adjust($color-link, $lightness: -20%)};
--color-link-hover: #{color.adjust($color-link, $lightness: +10%)};
--color-link-disabled: #{color.adjust($color-link, $saturation: -20%)};

--color-front: #{$color-desk};
--color-back: #{$color-dark};
--color-accent: #{$color-accent};

--color-admonition-caution: #{$color-admonition-caution};
--color-admonition-important: #{$color-admonition-important};
--color-admonition-note: #{$color-admonition-note};
--color-admonition-tip: #{$color-admonition-tip};
--color-admonition-warning: #{$color-admonition-warning};

--color-admonition-caution-border: #{color.adjust($color-admonition-caution, $lightness: +10%)};
--color-admonition-important-border: #{color.adjust($color-admonition-important, $lightness: +10%)};
--color-admonition-note-border: #{color.adjust($color-admonition-note, $lightness: +10%)};
--color-admonition-tip-border: #{color.adjust($color-admonition-tip, $lightness: +10%)};
--color-admonition-warning-border: #{color.adjust($color-admonition-warning, $lightness: +10%)};
}

@mixin theme-light {
color-scheme: light;

--color-link: #{$color-link};
--color-link-visited: #{color.adjust($color-link, $lightness: -20%)};
--color-link-hover: #{color.adjust($color-link, $lightness: +10%)};
--color-link-disabled: #{color.adjust($color-link, $saturation: -20%)};

--color-text: #{$color-dark};
--color-front: #{$color-paper};
--color-back: #{$color-desk};
--color-accent: #{$color-accent};

--color-admonition-caution: #{$color-admonition-caution};
--color-admonition-important: #{$color-admonition-important};
--color-admonition-note: #{$color-admonition-note};
--color-admonition-tip: #{$color-admonition-tip};
--color-admonition-warning: #{$color-admonition-warning};

--color-admonition-caution-border: #{color.adjust($color-admonition-caution, $lightness: -10%)};
--color-admonition-important-border: #{color.adjust($color-admonition-important, $lightness: -10%)};
--color-admonition-note-border: #{color.adjust($color-admonition-note, $lightness: -10%)};
--color-admonition-tip-border: #{color.adjust($color-admonition-tip, $lightness: -10%)};
--color-admonition-warning-border: #{color.adjust($color-admonition-warning, $lightness: -10%)};
}

@mixin max-mobile {
@media screen and (max-width: $width-mobile) {
@content;
}
}

@mixin max-tablet {
@media screen and (max-width: $width-tablet) {
@content;
}
}

@mixin min-tablet {
@media screen and (min-width: $width-tablet) {
@content;
}
}

@mixin max-desktop {
@media screen and (max-width: $width-desktop) {
@content;
}
}

@mixin min-desktop {
@media screen and (min-width: $width-desktop) {
@content;
}
}

@mixin print {
@media print {
@content;
}
}

@mixin container {
@include min-desktop {
width: $width-desktop;
}

width: 100%;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
19 changes: 19 additions & 0 deletions _includes/sass/abstracts/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "./functions" as *;

$font-header: "Space Grotesk", sans-serif;
$font-navigation: "Bitter", serif;
$font-text: "Bitter", serif;
Expand All @@ -8,3 +10,20 @@ $color-desk: #3a322b;
$color-dark: #202020;
$color-light: #efefef;
$color-link: #924924;
$color-accent: #ac162c;

$color-mt-blue: #6D92DB;
$color-mt-red: #bb4f4f;
$color-mt-orange: #FFB600;
$color-mt-gray: #B6B6B6;
$color-mt-green: #6DB649;

$color-admonition-caution: adjust-color($color-mt-orange, $lightness: 10%);
$color-admonition-important: adjust-color($color-mt-green, $lightness: 25%);
$color-admonition-note: adjust-color($color-mt-blue, $lightness: 25%);
$color-admonition-tip: adjust-color($color-mt-gray, $lightness: 25%);
$color-admonition-warning: adjust-color($color-mt-red, $lightness: 25%);

$width-desktop: 980px;
$width-tablet: 768px;
$width-mobile: 560px;
10 changes: 10 additions & 0 deletions _includes/sass/base/_fonts.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@use "../fonts/cascadia";
@use "../fonts/lato";
@use "../fonts/gelasio";

// TODO: Replace with local copies
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
2 changes: 1 addition & 1 deletion _includes/sass/base/_index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@forward "./reset";
@forward "./themes";
@forward "./typography";
@forward "./typography";
@forward "./utilities";
@forward "./fonts";
68 changes: 68 additions & 0 deletions _includes/sass/base/_reset.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
margin: 0;
}

/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

/*
5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

/*
6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}

/*
7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}

/*
8. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
40 changes: 26 additions & 14 deletions _includes/sass/base/_themes.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
@use "../abstracts" as *;

:root {
--font-header: $font-header;
--font-text: $font-text;
--font-code: $font-code;
--font-navigation: $font-navigation;

--color-paper: $color-paper;
--color-desk: $color-desk;
--color-dark: $color-dark;
--color-light: $color-light;
--color-link: $color-link;
--font-header: #{$font-header};
--font-text: #{$font-text};
--font-code: #{$font-code};
--font-navigation: #{$font-navigation};
}

--width-desktop: $width-desktop;
--width-tablet: $width-tablet;
--width-mobile: $width-mobile;
// NB: light theme is the default (due to the :not)
html[data-theme=light],
html:not([data-theme=dark]) {
@include theme-light;
}

html[data-theme=dark] {

@include theme-dark;
}

@media (prefers-color-scheme: dark) {

// `data-theme` overrides `prefers-color-scheme`
html:not([data-theme=light]) {
@include theme-dark;
}
}

@media (prefers-color-scheme: light) {

// `data-theme` overrides `prefers-color-scheme`
html:not([data-theme=dark]) {
@include theme-light;
}
}
23 changes: 23 additions & 0 deletions _includes/sass/base/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@use "./themes" as *;

html {
font-family: var(--font-text);
}

* {
scrollbar-width: thin;
}

a {
color: var(--color-link);
text-decoration: none;

&:not(:disabled):hover {
color: var(--color-link-hover);
text-decoration: underline;
}

&:disabled {
color: var(--color-disabled);
}
}
Loading

0 comments on commit 618ff48

Please sign in to comment.