summaryrefslogtreecommitdiff
path: root/css/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'css/main.scss')
-rw-r--r--css/main.scss984
1 files changed, 984 insertions, 0 deletions
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..6d2a126
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,984 @@
+$lbg: #f9f5d7;
+$lbg0: #fbf1c7;
+$lbg0h: #f9f5d7;
+$lbg0s: #f2e5bc;
+$lbg1: #ebdbb2;
+$lbg2: #d5c4a1;
+$lbg3: #bdae93;
+$lbg4: #a89984;
+$lfg: #3c3836;
+$lfg0: #282828;
+$lfg1: #3c3836;
+$lfg2: #504945;
+$lfg3: #665c54;
+$lfg4: #7c6f64;
+$dbg: #282828;
+$dbg0: #282828;
+$dbg0h: #1d2021;
+$dbg0s: #32302f;
+$dbg1: #3c3836;
+$dbg2: #504945;
+$dbg3: #665c54;
+$dbg4: #7c6f64;
+$dfg: #ebdbb2;
+$dfg0: #fbf1c7;
+$dfg1: #ebdbb2;
+$dfg2: #d5c4a1;
+$dfg3: #bdae93;
+$dfg4: #a89984;
+$gray: #928374;
+$gray1: #a89984;
+$red: #cc241d;
+$green: #98971a;
+$yellow: #d79921;
+$blue: #458588;
+$purple: #b16286;
+$aqua: #689d6a;
+$orange: #d65d0e;
+$bred: #fb4934;
+$bgreen: #b8bb26;
+$byellow: #fabd2f;
+$bblue: #83a598;
+$bpurple: #d3869b;
+$baqua: #8ec07c;
+$borange: #fe8019;
+$dred: #9d0006;
+$dgreen: #79740e;
+$dyellow: #b57614;
+$dblue: #076678;
+$dpurple: #8f3f71;
+$daqua: #427b58;
+$dorange: #af3a03;
+$ared: #421e1e;
+$ablue: #2b3c44;
+$aaqua: #36473a;
+$sienna: #dd6f48;
+$slategray: #528b8b;
+$lightblue: #66999d;
+$burlywood: #bbaa97;
+$aquamarine: #83a598;
+$turquoise: #61acbb;
+
+
+
+@import url(https://code.cdn.mozilla.net/fonts/fira.css);
+@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
+
+:root {
+ --purple: #{$purple};
+ --aqua: #{$aqua};
+ --blue: #{$blue};
+ --red: #{$red};
+ --orange: #{$orange};
+ --href-hover: #{$borange};
+ --hr: #{$gray};
+}
+
+:root[color-mode=light] {
+ --html-bg: #{$lbg1};
+ --bg: #{$lbg};
+ --fg: #{$lfg};
+ --href: #{$dorange};
+ --aqua1: #{$daqua};
+ --code-bg: #{$lbg1};
+ --footer-href: #{$dpurple};
+ --footer-href-hover: #{$purple};
+}
+
+:root[color-mode=dark] {
+ --html-bg: #{$dbg0h};
+ --bg: #{$dbg};
+ --fg: #{$dfg};
+ --href: #{$orange};
+ --aqua1: #{$aqua};
+ --code-bg: #{$dbg1};
+ --footer-href: #{$purple};
+ --footer-href-hover: #{$bpurple};
+}
+
+html {
+ font-family: 'Fira Sans', sans-serif;
+ background-color: var(--html-bg);
+ color: var(--fg);
+ margin: 1em;
+}
+
+body {
+ background-color: var(--bg);
+ margin: 0 auto;
+ max-width: 30cm;
+ border: 1pt solid var(--fg);
+ padding: 1em;
+}
+
+a {
+ color: var(--href);
+ text-decoration: underline;
+}
+
+a:hover {
+ color: var(--href-hover);
+ text-decoration: underline;
+}
+
+a:active {
+ outline: 0;
+}
+
+header {
+ clear: both;
+ padding: 0;
+ margin: 0;
+ font-size: 0.9em;
+ width: 100%;
+ text-decoration: none;
+ font-weight: bold;
+}
+header a, header a:hover {
+ text-decoration: none;
+}
+
+#menu {
+ clear: both;
+ display: block;
+ width: 100%;
+ margin: 0 0 1em 0;
+ color: var(--bg);
+ background-color: var(--fg);
+ overflow: hidden;
+}
+#menu a {
+ display: block;
+ float: left;
+ padding: 5px 10px 5px 10px;
+ color: var(--bg);
+}
+#menu a:hover {
+ color: var(--href-hover);
+}
+
+code {
+ font-family: 'Fira Code', monospace;
+ background-color: var(--code-bg);
+ padding: 2px;
+}
+
+button {
+ line-height: normal;
+ font-family: inherit;
+ font-size: 100%;
+ margin: 0;
+ cursor: pointer;
+}
+
+button:active {
+ outline: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 700;
+ margin-bottom: 0.5em;
+ margin-top: 0em;
+}
+
+h1,
+h2,
+h3 {
+ color: var(--purple);
+}
+
+h4,
+h5 {
+ color: var(--aqua);
+}
+
+h6 {
+ color: var(--blue);
+}
+
+h1 {
+ font-size: 2.2em;
+}
+h2 {
+ font-size: 2em;
+}
+h3 {
+ font-size: 1.8em;
+}
+h4 {
+ font-size: 1.4em;
+}
+h5 {
+ font-size: 1.3em;
+}
+h6 {
+ font-size: 1.1em;
+}
+
+hr {
+ border: 0;
+ border-top: 1px solid var(--hr);
+}
+
+img {
+ max-width: 100%;
+ padding: 2px;
+ border: 3px solid var(--fg);
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+table, th, td {
+ border: 1px solid var(--hr);
+ padding: 5px 10px 5px 10px;
+}
+
+blockquote {
+ border-left: 5px solid var(--purple);
+ margin: 20px 20px 10px 10px;
+ padding: 0px 15px 0px 10px;
+}
+blockquote ul {
+ margin-top: -10px;
+ list-style-type: none;
+ padding: 0px 1em 0px 1em;
+}
+
+footer {
+ clear: both;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ font-weight: bold;
+}
+footer hr {
+ border: 0;
+ border-top: 3px double var(--hr);
+}
+footer a {
+ text-decoration: none;
+ color: var(--footer-href);
+}
+footer a:hover {
+ color: var(--footer-href-hover);
+ text-decoration: underline;
+}
+
+.comment {
+ font-size: 0.75em;
+}
+.paper {
+ padding: 0 0 1em 0;
+}
+.paper-title {
+ font-size: 1.2em;
+ font-weight: bold;
+}
+.paper-author {
+ padding: 5px 0px 5px 0px;
+ border-left: 2px solid var(--fg);
+ margin: 0 0 0 1px;
+}
+.paper-author ul {
+ display: flex;
+ list-style-type: none;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+.paper-author ul:before {
+ padding: 0 0 0 0;
+ margin: 0 0 0 0;
+ content: 'with ';
+}
+.paper-author li:not(:last-child)::after {
+ content: ', ';
+}
+.paper-foot {
+ padding: 5px 0 0 0;
+ border-bottom: 2px solid var(--fg);
+ border-left: 2px solid var(--fg);
+ margin: 0 0 0 1px;
+}
+.paper-foot ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+.paper-foot li {
+ float: left;
+ padding: 1px 5px 1px 5px;
+ border-right: 1px solid var(--fg);
+}
+.paper-abstract {
+ padding: 0px 15px 0px 5px;
+ border-left: 2px solid var(--fg);
+ margin: 0 0 0 1px;
+}
+.abstract-button {
+ background-color: var(--fg);
+ //font-weight: bold;
+ color: var(--bg);
+ cursor: pointer;
+ text-decoration: none;
+ border: none;
+}
+.abstract-button:hover {
+ color: var(--href-hover);
+}
+.top-button {
+ background-color: var(--bg);
+ color: var(--fg);
+ margin: 0 0 0 5pt;
+}
+.top-button a {
+ color: var(--fg);
+ text-decoration: none;
+}
+.top-button a:hover {
+ color: var(--href-html-hover);
+}
+.row:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+.column {
+ float: left;
+}
+.left {
+ width: 70%;
+}
+.right {
+ width: 30%;
+}
+.pull-left {
+ float: left;
+}
+.pull-right {
+ float: right;
+}
+
+.bare table {
+ border-collapse: collapse;
+ border: none;
+}
+.bare tr {
+ border: none;
+}
+.bare th, .bare td {
+ border: none;
+ text-align: left;
+ vertical-align: top;
+ padding: 10px;
+}
+.bare th {
+ text-align: right;
+}
+.bare ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+// .schedule table {
+ // width: 100%;
+ // text-align: center;
+
+ // .teaching, .meetings, .seminars, .workshops, .office {
+ // color: $bg;
+ // }
+ // .teaching {
+ // background-color: $purple;
+ // }
+ // .meetings {
+ // background-color: $red;
+ // }
+ // .seminars {
+ // background-color: $green;
+ // }
+ // .workshops {
+ // background-color: $aqua;
+ // }
+ // .office {
+ // background-color: $yellow;
+ // }
+// }
+
+.has-tooltip {
+ position: relative;
+}
+
+.has-tooltip .tooltip {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.has-tooltip:hover .tooltip {
+ opacity: 1;
+ visibility: visible;
+}
+
+.tooltip {
+ background-color: var(--orange);
+ bottom: 130%;
+ color: var(--bg);
+ font-size: 70%;
+ left: 0%;
+ width: 110px;
+ padding: 2px;
+ position: absolute;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: none;
+ word-break: normal;
+ line-break: strict;
+}
+
+// @media screen and (max-width: 500px) {
+ // .schedule {
+ // font-size: 0.7em;
+ // table, th, td {
+ // padding: 1px 2px 2px 1px;
+ // }
+ // }
+// }
+// @media screen and (max-width: 400px) {
+ // .schedule {
+ // font-size: 0.5em;
+ // table, th, td {
+ // padding: 0px 0px 0px 0px;
+ // }
+ // }
+// }
+
+.toggle-color-button {
+ color: var(--fg);
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+
+
+// Change header font based on screen size
+@media screen and (max-width: 500px) {
+ header {
+ font-size: 0.7em;
+ }
+ #menu a {
+ padding: 3px 5px 3px 5px;
+ }
+}
+@media screen and (max-width: 400px) {
+ header {
+ font-size: 0.5em;
+ }
+ #menu a {
+ padding: 2px 5px 2px 5px;
+ }
+}
+/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+ .column {
+ width: 100%;
+ }
+}
+
+
+
+
+
+// article,
+// aside,
+// details,
+// figcaption,
+// figure,
+// footer,
+// header,
+// hgroup,
+// nav,
+// section,
+// summary {
+ // display: block;
+// }
+// audio,
+// canvas,
+// video {
+ // display: inline-block;
+// }
+// audio:not([controls]) {
+ // display: none;
+ // height: 0;
+// }
+// [hidden] {
+ // display: none;
+// }
+// html {
+ // font-family: sans-serif;
+ // -webkit-text-size-adjust: 100%;
+ // -ms-text-size-adjust: 100%;
+// }
+// body {
+ // margin: 0;
+// }
+// a:focus {
+ // outline: thin dotted;
+// }
+// a:active,
+// a:hover {
+ // outline: 0;
+// }
+// abbr[title] {
+ // border-bottom: 1px dotted;
+// }
+// b,
+// strong {
+ // font-weight: bold;
+// }
+// dfn {
+ // font-style: italic;
+// }
+// mark {
+ // background: #ff0;
+ // color: #000;
+// }
+// code,
+// kbd,
+// pre,
+// samp {
+ // font-family: monospace, serif;
+ // font-size: 1em;
+// }
+// pre {
+ // white-space: pre-wrap;
+ // word-wrap: break-word;
+// }
+// q {
+ // quotes: "\201C" "\201D" "\2018" "\2019";
+// }
+// small {
+ // font-size: 80%;
+// }
+// sub,
+// sup {
+ // font-size: 75%;
+ // line-height: 0;
+ // position: relative;
+ // vertical-align: baseline;
+// }
+// sup {
+ // top: -0.5em;
+// }
+// sub {
+ // bottom: -0.25em;
+// }
+// img {
+ // max-width: 100%;
+ // padding: 2px;
+ // border: 3px solid var(--fg);
+// }
+// svg:not(:root) {
+ // overflow: hidden;
+// }
+// figure {
+ // margin: 0;
+// }
+// fieldset {
+ // border: 1px solid $gray;
+ // margin: 0 2px;
+ // padding: 0.35em 0.625em 0.75em;
+// }
+// legend {
+ // border: 0;
+ // padding: 0;
+// }
+// button,
+// input,
+// select,
+// textarea {
+ // font-family: inherit;
+ // font-size: 100%;
+ // margin: 0;
+// }
+// button,
+// input {
+ // line-height: normal;
+// }
+// button {
+ // cursor: pointer;
+// }
+// button[disabled],
+// input[disabled] {
+ // cursor: default;
+// }
+// textarea {
+ // overflow: auto;
+ // vertical-align: top;
+// }
+// table {
+ // border-collapse: collapse;
+ // border-spacing: 0;
+// }
+// table, th, td {
+ // border: 1px solid $gray;
+ // padding: 5px 10px 5px 10px;
+// }
+// html {
+ // font-family: 'Fira Sans', sans-serif;
+// }
+// pre,
+// code {
+ // font-family: 'Fira Code', monospace;
+// }
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6 {
+ // font-family: 'Fira Sans', sans-serif;
+ // font-weight: 700;
+ // margin-bottom: 0.5em;
+ // margin-top: 0em;
+// }
+// html {
+ // background-color: $bg1;
+ // color: $fg;
+ // margin: 1em;
+ // // background-image: repeating-linear-gradient(90deg, $bg2, $bg2 1px, transparent 1px, transparent 7px);
+ // // background-size: 16px;
+// }
+// body {
+ // background-color: $bg;
+ // margin: 0 auto;
+ // max-width: 30cm;
+ // border: 1pt solid $fg;
+ // padding: 1em;
+// }
+// code {
+ // background-color: $bg1;
+ // padding: 2px;
+// }
+// a {
+ // color: $dorange;
+ // text-decoration: underline;
+// }
+// a:hover {
+ // color: $borange;
+ // text-decoration: underline;
+// }
+// h1,
+// h2,
+// h3 {
+ // color: $purple;
+// }
+// h4,
+// h5 {
+ // color: $aqua;
+// }
+// h6 {
+ // color: $blue;
+// }
+// pre {
+ // background-color: $bg;
+ // color: $fg;
+ // border: 1pt solid $gray;
+ // padding: 1em;
+ // box-shadow: 5pt 5pt 8pt $bg1;
+// }
+// pre code {
+ // background-color: $bg;
+// }
+// h1 {
+ // font-size: 2.2em;
+// }
+// h2 {
+ // font-size: 2em;
+// }
+// h3 {
+ // font-size: 1.8em;
+// }
+// h4 {
+ // font-size: 1.4em;
+// }
+// h5 {
+ // font-size: 1.3em;
+// }
+// h6 {
+ // font-size: 1.1em;
+// }
+// header {
+ // clear: both;
+ // padding: 0;
+ // margin: 0;
+ // font-size: 0.9em;
+ // width: 100%;
+ // text-decoration: none;
+ // font-weight: bold;
+// }
+// header a, header a:hover {
+ // text-decoration: none;
+// }
+// #menu {
+ // clear: both;
+ // display: block;
+ // width: 100%;
+ // margin: 0 0 1em 0;
+ // color: $bg;
+ // background-color: $fg;
+ // overflow: hidden;
+// }
+// #menu a {
+ // display: block;
+ // float: left;
+ // padding: 5px 10px 5px 10px;
+ // color: $bg;
+// }
+// #menu a:hover {
+ // color: $borange;
+ // // background-color: $bg;
+// }
+// @media screen and (max-width: 500px) {
+ // header {
+ // font-size: 0.7em;
+ // }
+ // #menu a {
+ // padding: 3px 5px 3px 5px;
+ // }
+// }
+// @media screen and (max-width: 400px) {
+ // header {
+ // font-size: 0.5em;
+ // }
+ // #menu a {
+ // padding: 2px 5px 2px 5px;
+ // }
+// }
+// #main {
+ // margin: 0;
+ // padding: 0;
+// }
+// blockquote {
+ // border-left: 5px solid $purple;
+ // margin: 20px 20px 10px 10px;
+ // padding: 0px 15px 0px 10px;
+// }
+// blockquote ul {
+ // margin-top: -10px;
+ // [>margin-bottom: 0;<]
+ // list-style-type: none;
+ // padding: 0px 1em 0px 1em;
+ // //padding: 0;
+// }
+// hr {
+ // border: 0;
+ // border-top: 1px solid $gray;
+// }
+// footer {
+ // clear: both;
+ // //border-top: 3px double $gray;
+ // padding-top: 10px;
+ // padding-bottom: 15px;
+ // font-weight: bold;
+// }
+// footer hr {
+ // border: 0;
+ // border-top: 3px double $gray;
+// }
+// footer a {
+ // text-decoration: none;
+ // color: $dpurple;
+// }
+// footer a:hover {
+ // color: $purple;
+ // text-decoration: underline;
+// }
+// .comment {
+ // font-size: 0.75em;
+// }
+// .paper {
+ // padding: 0 0 1em 0;
+ // //border-top: 2px solid $gray;
+// }
+// .paper-title {
+ // font-size: 1.2em;
+ // font-weight: bold;
+// }
+// .paper-author {
+ // padding: 5px 5px 5px 5px;
+ // border-left: 2px solid $fg;
+ // margin: 0 0 0 1px;
+// }
+// .paper-foot {
+ // //border-top: 1px solid $gray;
+ // padding: 5px 0 0 0;
+ // border-bottom: 2px solid $fg;
+ // border-left: 2px solid $fg;
+ // margin: 0 0 0 1px;
+// }
+// .paper-foot ul {
+ // list-style-type: none;
+ // margin: 0;
+ // padding: 0;
+ // overflow: hidden;
+// }
+// .paper-foot li {
+ // float: left;
+ // padding: 1px 5px 1px 5px;
+ // border-right: 1px solid $fg;
+ // //border-left: 2px solid $fg;
+// }
+// .paper-abstract {
+ // padding: 0px 15px 0px 5px;
+ // border-left: 2px solid $fg;
+ // margin: 0 0 0 1px;
+// }
+// .abstract-button {
+ // background-color: $fg;
+ // //font-weight: bold;
+ // color: $bg;
+ // cursor: pointer;
+ // text-decoration: none;
+ // border: none;
+ // //padding: 2px 2px 2px 2px;
+// }
+// .abstract-button:hover {
+ // color: $borange;
+// }
+// .top-button {
+ // background-color: $bg;
+ // color: $fg;
+ // margin: 0 0 0 5pt;
+// }
+// .top-button a {
+ // color: $fg;
+ // text-decoration: none;
+// }
+// .top-button a:hover {
+ // color: $purple;
+// }
+// .row:after {
+ // content: "";
+ // display: table;
+ // clear: both;
+// }
+// .column {
+ // float: left;
+// }
+// .left {
+ // width: 70%;
+// }
+// .right {
+ // width: 30%;
+// }
+// .pull-left {
+ // float: left;
+// }
+// .pull-right {
+ // float: right;
+// }
+// [> Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other <]
+// @media screen and (max-width: 600px) {
+ // .column {
+ // width: 100%;
+ // }
+// }
+// .bare table {
+ // border-collapse: collapse;
+ // border: none;
+// }
+// .bare tr {
+ // border: none;
+// }
+// .bare th, .bare td {
+ // border: none;
+ // text-align: left;
+ // vertical-align: top;
+ // padding: 10px;
+// }
+// .bare th {
+ // text-align: right;
+// }
+// .bare ul {
+ // list-style: none;
+ // padding: 0;
+ // margin: 0;
+// }
+
+// .schedule table {
+ // width: 100%;
+ // text-align: center;
+
+ // .teaching, .meetings, .seminars, .workshops, .office {
+ // color: $bg;
+ // }
+ // .teaching {
+ // background-color: $purple;
+ // }
+ // .meetings {
+ // background-color: $red;
+ // }
+ // .seminars {
+ // background-color: $green;
+ // }
+ // .workshops {
+ // background-color: $aqua;
+ // }
+ // .office {
+ // background-color: $yellow;
+ // }
+// }
+
+// .has-tooltip {
+ // position: relative;
+// }
+
+// .has-tooltip .tooltip {
+ // opacity: 0;
+ // visibility: hidden;
+// }
+
+// .has-tooltip:hover .tooltip {
+ // opacity: 1;
+ // visibility: visible;
+// }
+
+// .tooltip {
+ // background-color: $orange;
+ // bottom: 130%;
+ // color: $bg;
+ // font-size: 70%;
+ // left: 0%;
+ // width: 110px;
+ // padding: 2px;
+ // position: absolute;
+ // text-align: center;
+ // text-decoration: none;
+ // text-shadow: none;
+ // word-break: normal;
+ // line-break: strict;
+// }
+
+// @media screen and (max-width: 500px) {
+ // .schedule {
+ // font-size: 0.7em;
+ // table, th, td {
+ // padding: 1px 2px 2px 1px;
+ // }
+ // }
+// }
+// @media screen and (max-width: 400px) {
+ // .schedule {
+ // font-size: 0.5em;
+ // table, th, td {
+ // padding: 0px 0px 0px 0px;
+ // }
+ // }
+// }
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-09 17:55:52 +0000