mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
add night mode toggle and autoformat css
This commit is contained in:
Tom
parent
9c056ab755
commit
a4f1d84723
@ -8,6 +8,7 @@ A list of things to check once in a while to make sure I haven't broken them ina
|
|||||||
- Mobile and web layouts looks ok.
|
- Mobile and web layouts looks ok.
|
||||||
- Dark mode and light mode both look ok.
|
- Dark mode and light mode both look ok.
|
||||||
- OG tags render nicely, use https://www.opengraph.xyz/
|
- OG tags render nicely, use https://www.opengraph.xyz/
|
||||||
|
- Check the rss feed https://validator.w3.org/feed/check.cgi?url=https%3A%2F%2Fthomashodson.com%2Ffeed.xml
|
||||||
|
|
||||||
## Todo
|
## Todo
|
||||||
- change the OG image used for the landing page so it's not just my face.
|
- change the OG image used for the landing page so it's not just my face.
|
||||||
|
|||||||
@ -17,6 +17,13 @@
|
|||||||
</p>
|
</p>
|
||||||
{% include sidebar.html%}
|
{% include sidebar.html%}
|
||||||
|
|
||||||
|
<div class="user-toggle">
|
||||||
|
<div role="status" class="visually-hidden js-mode-status"></div>
|
||||||
|
<button class="toggle-button js-mode-toggle">
|
||||||
|
<span class="toggle-button__icon" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ include.extra }}
|
{{ include.extra }}
|
||||||
<hr>
|
<hr>
|
||||||
</header>
|
</header>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html class = "no-js">
|
||||||
<head>
|
<head>
|
||||||
{% include default_head_tags.html%}
|
{% include default_head_tags.html%}
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html class = "no-js">
|
||||||
<head>
|
<head>
|
||||||
{% include default_head_tags.html%}
|
{% include default_head_tags.html%}
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
$font_stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
$font_stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||||||
$title_font_stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
|
$title_font_stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
|
||||||
|
|
||||||
$horizontal_breakpoint: 700px;
|
$horizontal_breakpoint: 900px;
|
||||||
$vertical_breakpoint: 500px;
|
$vertical_breakpoint: 500px;
|
||||||
|
|
||||||
// For the images on the blogroll, projects and highlights pages
|
// For the images on the blogroll, projects and highlights pages
|
||||||
|
|||||||
411
_sass/base.scss
411
_sass/base.scss
@ -8,227 +8,334 @@
|
|||||||
@import "projects"; //Styles for the projects page
|
@import "projects"; //Styles for the projects page
|
||||||
@import "cv"; // the CV page
|
@import "cv"; // the CV page
|
||||||
@import "blogroll"; // the summaries of the blogposts
|
@import "blogroll"; // the summaries of the blogposts
|
||||||
@import "comments"; //the mastodon comments
|
@import "comments"; //the mastodon comments
|
||||||
@import "model_viewer"; //Styles for the 3D model viewer
|
@import "model_viewer"; //Styles for the 3D model viewer
|
||||||
@import "mastodon_timeline";
|
@import "mastodon_timeline";
|
||||||
|
@import "night_mode_toggle";
|
||||||
|
|
||||||
// The syntax highlighting css
|
// The syntax highlighting css
|
||||||
// generated with rougify style bw > code_style_bw.scss
|
// generated with rougify style bw > code_style_bw.scss
|
||||||
// @import "code_style_bw";
|
// @import "code_style_bw";
|
||||||
@import "code_style_github";
|
@import "code_style_github";
|
||||||
|
|
||||||
@import "d2";
|
@import "d2";
|
||||||
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: $font_stack;
|
font-family: $font_stack;
|
||||||
text-rendering: geometricPrecision;
|
text-rendering: geometricPrecision;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--theme-text-color: #222;
|
||||||
|
--theme-bg-color: #fcfcfc;
|
||||||
|
--theme-model-line-color: #222;
|
||||||
|
--theme-model-bg-color: #fcfcfc;
|
||||||
|
--theme-subtle-outline: oklch(90% 0 50);
|
||||||
|
--theme-highlight-color: hsl(338, 75%, 60%);
|
||||||
|
--theme-highlight-color-transparent: hsla(338, 75%, 60%, 33%);
|
||||||
|
|
||||||
|
// constrain width and center
|
||||||
|
--body-max-width: 900px;
|
||||||
|
--body-width: min(100vw, 900px);
|
||||||
|
--body-margin: calc((100vw - var(--body-width)) / 2);
|
||||||
|
|
||||||
|
--color-mode: "light";
|
||||||
|
--color-dark: #141414;
|
||||||
|
--color-dark-alpha: rgba(0, 0, 0, 0.1);
|
||||||
|
--color-light: #efefef;
|
||||||
|
--color-light-alpha: rgba(255, 255, 255, 0.9);
|
||||||
|
--icon-sun: url('data:image/svg+xml,\
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||||
|
<path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
|
||||||
|
</svg>');
|
||||||
|
--icon-sun-filter: invert(0.75);
|
||||||
|
--icon-moon: url('data:image/svg+xml,\
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
|
||||||
|
<path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
|
||||||
|
</svg>');
|
||||||
|
--icon-moon-filter: invert(0);
|
||||||
|
--background: #efefef;
|
||||||
|
--text-color: #141414;
|
||||||
|
--button-icon: var(--icon-moon);
|
||||||
|
--button-icon-filter: var(--icon-moon-filter);
|
||||||
|
--button-background: var(--color-dark);
|
||||||
|
--button-color: var(--color-light);
|
||||||
|
--border-color: var(--color-dark-alpha);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--theme-text-color: #222;
|
background: var(--theme-bg-color);
|
||||||
--theme-bg-color: #fcfcfc;
|
color: var(--theme-text-color);
|
||||||
--theme-model-line-color: #222;
|
|
||||||
--theme-model-bg-color: #fcfcfc;
|
|
||||||
--theme-subtle-outline: oklch(90% 0.0 50);
|
|
||||||
--theme-highlight-color: hsl(338, 75%, 60%);
|
|
||||||
--theme-highlight-color-transparent: hsla(338, 75%, 60%, 33%);
|
|
||||||
|
|
||||||
background: var(--theme-bg-color);
|
max-width: var(--body-max-width);
|
||||||
color: var(--theme-text-color);
|
margin: auto;
|
||||||
|
|
||||||
// constrain width and center
|
|
||||||
max-width: 900px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Padding to keep the keep the content to the right of the header
|
// Padding to keep the keep the content to the right of the header
|
||||||
main {
|
main {
|
||||||
container: main / inline-size;
|
container: main / inline-size;
|
||||||
|
|
||||||
max-width: 560px;
|
--main-margin-left: 240px;
|
||||||
margin-left: 240px;
|
--main-padding-left: 30px;
|
||||||
padding-left: 30px;
|
--main-padding-right: 30px;
|
||||||
padding-right: 30px;
|
--main-max-width: 560px;
|
||||||
padding-top: 10vh;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
display: flex;
|
max-width: var(--main-max-width);
|
||||||
flex-direction: column;
|
margin-left: var(--main-margin-left);
|
||||||
justify-content: center;
|
padding-left: var(--main-padding-left);
|
||||||
|
padding-right: var(--main-padding-right);
|
||||||
|
padding-top: 10vh;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
h1 {
|
display: flex;
|
||||||
font-size: 2em;
|
flex-direction: column;
|
||||||
}
|
justify-content: center;
|
||||||
|
|
||||||
// img that are direct children of p are usually img tags in markdown
|
h1 {
|
||||||
p > img {
|
font-size: 2em;
|
||||||
margin-top: 2em;
|
}
|
||||||
margin-bottom: 1em;
|
|
||||||
width: 90%;
|
|
||||||
|
|
||||||
//hack to center images in p tags
|
// img that are direct children of p are usually img tags in markdown
|
||||||
display: block;
|
p > img {
|
||||||
margin-left: auto;
|
margin-top: 2em;
|
||||||
margin-right: auto;
|
margin-bottom: 1em;
|
||||||
}
|
width: 90%;
|
||||||
|
|
||||||
|
//hack to center images in p tags
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:is(h1, h2, h3, h4, .text-balance) {
|
:is(h1, h2, h3, h4, .text-balance) {
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, figcaption {
|
p,
|
||||||
font-size: 1em;
|
figcaption {
|
||||||
line-height: 1.3em;
|
font-size: 1em;
|
||||||
}
|
line-height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
main :is(p,h1,h2,h3,h4,h5,h6) {
|
main :is(p, h1, h2, h3, h4, h5, h6) {
|
||||||
margin-block-end: 0.2em;
|
margin-block-end: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-underline-offset: 0.25em;
|
text-underline-offset: 0.25em;
|
||||||
text-decoration-thickness: 0.5px;
|
text-decoration-thickness: 0.5px;
|
||||||
color: var(--theme-text-color);
|
color: var(--theme-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
header a, nav a {
|
header a,
|
||||||
text-decoration: none;
|
nav a {
|
||||||
color: var(--theme-text-color);
|
text-decoration: none;
|
||||||
|
color: var(--theme-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.highlight {
|
div.highlight {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 0.7em;
|
margin-top: 0.7em;
|
||||||
margin-bottom: 0.7em;
|
margin-bottom: 0.7em;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
container: fig / inline-size;
|
container: fig / inline-size;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
figure > img, figure > svg, figure > canvas {
|
figure > img,
|
||||||
width: 100%;
|
figure > svg,
|
||||||
margin-bottom: 1em;
|
figure > canvas {
|
||||||
border-radius: 10px;
|
width: 100%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure.centered {
|
figure.centered {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.image-grid-4x4 {
|
section.image-grid-4x4 {
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto;
|
grid-template-columns: auto auto;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
place-items: stretch stretch;
|
place-items: stretch stretch;
|
||||||
|
|
||||||
|
* {
|
||||||
* {
|
margin: 0;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
padding: 0;
|
width: 100%;
|
||||||
width: 100%;
|
aspect-ratio: auto;
|
||||||
aspect-ratio: auto;
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section.note {
|
section.note {
|
||||||
a {color: purple;}
|
a {
|
||||||
p {margin: 0;}
|
color: purple;
|
||||||
padding: 1em;
|
}
|
||||||
margin-top: 1em;
|
p {
|
||||||
margin-bottom: 1em;
|
margin: 0;
|
||||||
background-color: var(--theme-highlight-color-transparent);
|
}
|
||||||
border-radius: 10px;
|
padding: 1em;
|
||||||
color: black;
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
background-color: var(--theme-highlight-color-transparent);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.center {
|
section.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.CodeRay,
|
||||||
|
.wide-outside-parent {
|
||||||
|
// width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
width: calc(
|
||||||
|
100vw - var(--body-margin) - var(--main-margin-left) -
|
||||||
|
var(--main-padding-left) - var(--main-padding-right)
|
||||||
|
);
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.line-numbers {
|
||||||
|
// display: none;
|
||||||
|
margin-right: 1em;
|
||||||
|
opacity: 0.3;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the browser doesn't support web components, hide anything with has-wc class
|
// If the browser doesn't support web components, hide anything with has-wc class
|
||||||
body.has-wc .no-wc {
|
body.has-wc .no-wc {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
// If the browser does support web components, hide anything with no-wc class
|
// If the browser does support web components, hide anything with no-wc class
|
||||||
body:not(.has-wc) .has-wc {
|
body:not(.has-wc) .has-wc {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media
|
@media only screen and (max-width: $horizontal_breakpoint),
|
||||||
only screen and (max-width: $horizontal_breakpoint),
|
only screen and (max-height: $vertical_breakpoint) {
|
||||||
only screen and (max-height: $vertical_breakpoint)
|
main {
|
||||||
{
|
--main-margin-left: 0px;
|
||||||
main {
|
--main-padding-left: 20px;
|
||||||
padding-top: 10px;
|
--main-padding-right: 20px;
|
||||||
padding-left: 20px;
|
padding-top: 10px;
|
||||||
padding-right: 20px;
|
margin: auto;
|
||||||
margin: auto;
|
justify-content: flex-start;
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
margin-left: 0px; }
|
|
||||||
|
|
||||||
h1 {font-size: 1.5em !important;}
|
|
||||||
.MathJax {
|
|
||||||
font-size: 0.8em !important;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// For the 3D model viewer
|
|
||||||
model-viewer {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
@media (prefers-color-scheme: dark) {
|
margin-left: 0px;
|
||||||
body {
|
}
|
||||||
--theme-text-color: #fcfcfc;
|
|
||||||
--theme-bg-color: #222;
|
h1 {
|
||||||
--theme-subtle-outline: oklch(50% 0.0 50);
|
font-size: 1.5em !important;
|
||||||
}
|
}
|
||||||
img {
|
.MathJax {
|
||||||
opacity: .75;
|
font-size: 0.8em !important;
|
||||||
transition: opacity .5s ease-in-out;
|
overflow-x: auto;
|
||||||
}
|
overflow-y: hidden;
|
||||||
svg.invertable, img.invertable{
|
}
|
||||||
opacity: 1;
|
|
||||||
filter: invert(1);
|
// Make code a bit smaller so it doesn't wrap as much
|
||||||
}
|
div.CodeRay {
|
||||||
}
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px 1px 1px 1px);
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
clip-path: inset(1px);
|
||||||
|
white-space: nowrap;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add transitions for things that will be affected by night mode
|
||||||
|
body {
|
||||||
|
transition: background 500ms ease-in-out, color 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
transition: opacity 500ms ease-in-out;
|
||||||
|
}
|
||||||
|
svg.invertable,
|
||||||
|
img.invertable {
|
||||||
|
transition: filter 500ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin night-mode {
|
||||||
|
--background: var(--color-dark);
|
||||||
|
--text-color: var(--color-light);
|
||||||
|
--button-icon: var(--icon-sun);
|
||||||
|
--button-icon-filter: var(--icon-sun-filter);
|
||||||
|
--button-background: var(--color-light);
|
||||||
|
--button-color: var(--color-dark);
|
||||||
|
--border-color: var(--color-light-alpha);
|
||||||
|
|
||||||
|
body {
|
||||||
|
--theme-text-color: #fcfcfc;
|
||||||
|
--theme-bg-color: #222;
|
||||||
|
--theme-subtle-outline: oklch(50% 0 50);
|
||||||
|
}
|
||||||
|
img:not(.invertable) {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
svg.invertable,
|
||||||
|
img.invertable {
|
||||||
|
opacity: 1;
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-mode: "dark";
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([data-user-color-scheme]) {
|
||||||
|
@include night-mode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-user-color-scheme="dark"] {
|
||||||
|
@include night-mode;
|
||||||
|
}
|
||||||
|
|||||||
@ -16,13 +16,22 @@ article.draft {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section.highlights {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a.highlights-more {
|
a.highlights-more {
|
||||||
margin-left: $left_pad;
|
margin-left: $left_pad;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > h2 {
|
h1.highlights {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
margin-left: $left_pad
|
margin-left: $left_pad;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.blogroll {
|
article.blogroll {
|
||||||
@ -65,5 +74,8 @@ article.blogroll {
|
|||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
a.highlights-more {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
141
_sass/cv.scss
141
_sass/cv.scss
@ -1,123 +1,130 @@
|
|||||||
summary.cv {
|
summary.cv {
|
||||||
margin-bottom: 0.7em;
|
margin-bottom: 0.7em;
|
||||||
margin-top: 0.7em;
|
margin-top: 0.7em;
|
||||||
|
|
||||||
padding-left: 2.2rem;
|
padding-left: 2.2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary.cv::-webkit-details-marker {
|
details summary.cv::-webkit-details-marker {
|
||||||
display:none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[open] > summary:before {
|
details[open] > summary:before {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
//A little animation for the details opening
|
//A little animation for the details opening
|
||||||
details[open] summary ~ * {
|
details[open] summary ~ * {
|
||||||
animation: sweep .5s ease-in-out;
|
animation: sweep 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sweep {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
}
|
}
|
||||||
|
100% {
|
||||||
@keyframes sweep {
|
opacity: 1;
|
||||||
0% {opacity: 0; transform: translateX(-10px)}
|
transform: translateX(0);
|
||||||
100% {opacity: 1; transform: translateX(0)}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
summary.cv:before {
|
summary.cv:before {
|
||||||
content: '';
|
content: "";
|
||||||
border-width: .4rem;
|
border-width: 0.4rem;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: transparent transparent transparent black;
|
border-color: transparent transparent transparent var(--theme-text-color);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.2rem;
|
top: 0.2rem;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
transform-origin: .2rem 50%;
|
transform-origin: 0.2rem 50%;
|
||||||
transition: .25s transform ease;
|
transition: 0.25s transform ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary li {
|
summary li {
|
||||||
margin-bottom: 0em;
|
margin-bottom: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary time {
|
summary time {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.details-img {
|
div.details-img {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
div.details-text p {
|
div.details-text p {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.details-img img {
|
div.details-img img {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary h3 {
|
summary h3 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 2em;
|
height: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.details-container {
|
div.details-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 2.2rem;
|
margin-left: 2.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cv-title-container {
|
.cv-title-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items:baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.cv-title-container {
|
div.cv-title-container {
|
||||||
margin-bottom:1em;
|
margin-bottom: 1em;
|
||||||
margin-top:1em;
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
div.cv-title-container h2 {
|
||||||
|
margin: 0px;
|
||||||
}
|
}
|
||||||
div.cv-title-container h2 {margin:0px;}
|
|
||||||
|
|
||||||
div.cv-title-container a {
|
div.cv-title-container a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 3em;
|
margin-left: 3em;
|
||||||
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
offset: None;
|
offset: None;
|
||||||
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.cv-title-container button:hover {
|
div.cv-title-container button:hover {
|
||||||
border-color:black;
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
@media only screen and (max-width: 900px) {
|
||||||
div.details-container {
|
div.details-container {
|
||||||
margin-left:2.2rem;
|
margin-left: 2.2rem;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary.cv {
|
summary.cv {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -3,141 +3,139 @@
|
|||||||
// The header with info about me
|
// The header with info about me
|
||||||
// gets displayed on the left in a wide layout and on the top in a narrow layout
|
// gets displayed on the left in a wide layout and on the top in a narrow layout
|
||||||
header {
|
header {
|
||||||
border-right: 2px solid #eee; //make a nice dividing line
|
border-right: 2px solid #eee; //make a nice dividing line
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
|
|
||||||
flex: 0 0 240px;
|
flex: 0 0 240px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
//a horizontal dividing line to swap in when we switch to mobile layout
|
||||||
|
hr {
|
||||||
|
border: 0px solid #eee;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-pic-name {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
max-width: 175px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid var(--theme-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--theme-highlight-color);
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-family: $title_font_stack;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.professional-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
//a horizontal dividing line to swap in when we switch to mobile layout
|
svg {
|
||||||
hr {
|
height: 1em;
|
||||||
border:0px solid #eee;
|
width: 1em;
|
||||||
width: 100%;
|
margin-left: 0.5em;
|
||||||
margin-top: 1em;
|
flex: 0 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.profile-pic-name {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
max-width: 175px;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid #f2f3f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: var(--theme-highlight-color);
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2 {
|
|
||||||
font-family: $title_font_stack;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin-bottom: 2px;
|
display: flex; //
|
||||||
}
|
align-items: center; // Get the icons centered vertically
|
||||||
|
justify-content: right; //Align right
|
||||||
p.professional-links {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex; //
|
|
||||||
align-items: center; // Get the icons centered vertically
|
|
||||||
justify-content: right; //Align right
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media
|
@media only screen and (max-width: $horizontal_breakpoint),
|
||||||
only screen and (max-width: $horizontal_breakpoint),
|
only screen and (max-height: $vertical_breakpoint) {
|
||||||
only screen and (max-height: $vertical_breakpoint)
|
header {
|
||||||
{
|
position: relative;
|
||||||
header {
|
width: 100%;
|
||||||
position: relative;
|
border: 0px;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
border: 0px;
|
align-items: center;
|
||||||
text-align: center;
|
height: auto;
|
||||||
align-items: center;
|
padding-left: 20px;
|
||||||
height: auto;
|
padding-right: 20px;
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-width:1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bio {
|
.bio {
|
||||||
span {
|
span {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
span:after {
|
span:after {
|
||||||
content: ', ';
|
content: ", ";
|
||||||
}
|
}
|
||||||
span:last-of-type:after {
|
span:last-of-type:after {
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// To squish the text together a bit in the mobile view.
|
// To squish the text together a bit in the mobile view.
|
||||||
p {
|
p {
|
||||||
margin-block: 0.25em;
|
margin-block: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.professional-links {
|
p.professional-links {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin-left: 1em;
|
|
||||||
margin-right: 1em;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
// In the main view, the github/mastodon/rss icons are on the right
|
|
||||||
// for the smaller view switch the to the left
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
// Switch the padding side having switched the order
|
|
||||||
margin-right: 0.5em;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
// In the main view, the github/mastodon/rss icons are on the right
|
||||||
|
// for the smaller view switch the to the left
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
// Switch the padding side having switched the order
|
||||||
|
margin-right: 0.5em;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,84 +1,88 @@
|
|||||||
// For fallback images inside custom outline-model-viewer elements
|
// For fallback images inside custom outline-model-viewer elements
|
||||||
.outline-model-poster {
|
.outline-model-poster {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
outline-model-viewer {
|
outline-model-viewer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: var(--theme-subtle-outline) 1px solid;
|
border: var(--theme-subtle-outline) 1px solid;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Hotspot {
|
.Hotspot {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Hotspot:not([data-visible]) {
|
|
||||||
background: transparent;
|
|
||||||
border: 4px solid #fff;
|
|
||||||
box-shadow: none;
|
|
||||||
height: 32px;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot:focus {
|
|
||||||
border: 4px solid rgb(0, 128, 200);
|
|
||||||
height: 32px;
|
|
||||||
outline: none;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot > * {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.HotspotAnnotation{
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
color: rgba(0, 0, 0, 0.8);
|
|
||||||
display: block;
|
|
||||||
font-family: Futura, Helvetica Neue, sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
left: calc(100% + 2em);
|
|
||||||
max-width: 128px;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left.HotspotAnnotation {
|
.Hotspot:not([data-visible]) {
|
||||||
right: calc(100% + 2em);
|
background: transparent;
|
||||||
left: unset;
|
border: 4px solid #fff;
|
||||||
}
|
box-shadow: none;
|
||||||
|
height: 32px;
|
||||||
.Hotspot:not([data-visible]) > * {
|
pointer-events: none;
|
||||||
opacity: 0;
|
width: 32px;
|
||||||
pointer-events: none;
|
}
|
||||||
transform: translateY(calc(-50% + 4px));
|
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
.Hotspot:focus {
|
||||||
}
|
border: 4px solid rgb(0, 128, 200);
|
||||||
|
height: 32px;
|
||||||
|
outline: none;
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hotspot > * {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.HotspotAnnotation {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
display: block;
|
||||||
|
font-family: Futura, Helvetica Neue, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
left: calc(100% + 2em);
|
||||||
|
max-width: 128px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left.HotspotAnnotation {
|
||||||
|
right: calc(100% + 2em);
|
||||||
|
left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hotspot:not([data-visible]) > * {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translateY(calc(-50% + 4px));
|
||||||
|
transition: transform 0.3s, opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// For the 3D model viewer
|
||||||
|
model-viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,31 +1,24 @@
|
|||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current {
|
.current {
|
||||||
color: darkslategray;
|
color: var(--theme-highlight-color);
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.current {
|
|
||||||
color: lightslategray;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media
|
@media only screen and (max-width: $horizontal_breakpoint),
|
||||||
only screen and (max-width: $horizontal_breakpoint),
|
only screen and (max-height: $vertical_breakpoint) {
|
||||||
only screen and (max-height: $vertical_breakpoint)
|
nav.page-table-of-contents {
|
||||||
{
|
white-space: normal;
|
||||||
nav.page-table-of-contents {
|
justify-content: left;
|
||||||
white-space: normal;
|
text-align: left;
|
||||||
justify-content: left;
|
ul {
|
||||||
text-align: left;
|
padding-left: 0em;
|
||||||
ul {padding-left: 0em;}
|
|
||||||
li li {
|
|
||||||
padding-right: 0em;
|
|
||||||
padding-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
li li {
|
||||||
|
padding-right: 0em;
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
31
_sass/night_mode_toggle.scss
Normal file
31
_sass/night_mode_toggle.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.no-js .user-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-toggle {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-button {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--theme-text-color);
|
||||||
|
background: var(--theme-background-color);
|
||||||
|
border: 1.5px solid var(--theme-text-color);
|
||||||
|
transition: background 500ms ease-in-out, color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-button__icon {
|
||||||
|
background: var(--button-icon);
|
||||||
|
width: 0.9rem;
|
||||||
|
height: 0.9rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
transform: translateY(0px); /* Optical adjustment */
|
||||||
|
transition: filter 200ms ease-in-out;
|
||||||
|
filter: var(--button-icon-filter);
|
||||||
|
}
|
||||||
@ -1,48 +1,27 @@
|
|||||||
article.project {
|
article.project {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
h2 {margin-top: 0;}
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
a.photo {
|
a.photo {
|
||||||
width: $thumbnail_image_size;
|
width: $thumbnail_image_size;
|
||||||
height: $thumbnail_image_size;
|
height: $thumbnail_image_size;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: $thumbnail_image_size;
|
max-height: $thumbnail_image_size;
|
||||||
width: unset;
|
width: unset;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
figure {
|
figure {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// @media
|
|
||||||
// only screen and (max-width: $horizontal_breakpoint),
|
|
||||||
// only screen and (max-height: $vertical_breakpoint)
|
|
||||||
// {
|
|
||||||
// main {
|
|
||||||
// padding-top: 10px;
|
|
||||||
// padding-left: 20px;
|
|
||||||
// padding-right: 20px;
|
|
||||||
// margin: 0px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// article {
|
|
||||||
// margin-left: 0px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// h1 {font-size: 1.5em !important;}
|
|
||||||
// .MathJax {
|
|
||||||
// font-size: 0.8em !important;
|
|
||||||
// overflow-x: auto;
|
|
||||||
// overflow-y: hidden;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@ -1,18 +1,79 @@
|
|||||||
function toggle_summary_by_class(element, topic) {
|
function toggle_summary_by_class(element, topic) {
|
||||||
details = document.querySelectorAll(`details.${topic}`);
|
details = document.querySelectorAll(`details.${topic}`);
|
||||||
|
|
||||||
if(element.textContent === "Expand all") {
|
if (element.textContent === "Expand all") {
|
||||||
element.textContent = "Collapse all";
|
element.textContent = "Collapse all";
|
||||||
details.forEach(e => e.open = true);
|
details.forEach((e) => (e.open = true));
|
||||||
} else {
|
} else {
|
||||||
element.textContent = "Expand all"
|
element.textContent = "Expand all";
|
||||||
details.forEach(e => e.open = false);
|
details.forEach((e) => (e.open = false));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Signal that we have JS enabled
|
||||||
|
document.documentElement.classList.remove("no-js");
|
||||||
|
|
||||||
// This signals to css that we have support for web components
|
// This signals to css that we have support for web components
|
||||||
// Allows us to set elements to act as fallbacks when js/web components are disabled.
|
// Allows us to set elements to act as fallbacks when js/web components are disabled.
|
||||||
if (window.customElements) {
|
if (window.customElements) {
|
||||||
document.querySelector('body').classList.add('has-wc');
|
document.querySelector("body").classList.add("has-wc");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// run the night mode toggle
|
||||||
|
const STORAGE_KEY = "user-color-scheme";
|
||||||
|
const COLOR_MODE_KEY = "--color-mode";
|
||||||
|
|
||||||
|
const modeToggleButton = document.querySelector(".js-mode-toggle");
|
||||||
|
const modeStatusElement = document.querySelector(".js-mode-status");
|
||||||
|
|
||||||
|
const getCSSCustomProp = (propKey) => {
|
||||||
|
let response = getComputedStyle(document.documentElement).getPropertyValue(
|
||||||
|
propKey
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.length) {
|
||||||
|
response = response.replace(/\"/g, "").trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
};
|
||||||
|
|
||||||
|
const applySetting = (passedSetting) => {
|
||||||
|
let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
|
||||||
|
|
||||||
|
if (currentSetting) {
|
||||||
|
document.documentElement.setAttribute(
|
||||||
|
"data-user-color-scheme",
|
||||||
|
currentSetting
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSetting = () => {
|
||||||
|
let currentSetting = localStorage.getItem(STORAGE_KEY);
|
||||||
|
|
||||||
|
switch (currentSetting) {
|
||||||
|
case null:
|
||||||
|
currentSetting =
|
||||||
|
getCSSCustomProp(COLOR_MODE_KEY) === "dark" ? "light" : "dark";
|
||||||
|
break;
|
||||||
|
case "light":
|
||||||
|
currentSetting = "dark";
|
||||||
|
break;
|
||||||
|
case "dark":
|
||||||
|
currentSetting = "light";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem(STORAGE_KEY, currentSetting);
|
||||||
|
|
||||||
|
return currentSetting;
|
||||||
|
};
|
||||||
|
|
||||||
|
modeToggleButton.addEventListener("click", (evt) => {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
applySetting(toggleSetting());
|
||||||
|
});
|
||||||
|
|
||||||
|
applySetting();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user