unaltraweb 0.3.0

data/_sass/_team.scss

@@ -0,0 +1,230 @@
+/*******************************************************************************
+ * Team grid
+ ******************************************************************************/
+
+.team-photo {
+  width: 132px;
+  height: 132px;
+  max-width: none;
+  object-fit: cover;
+  object-position: center;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+}
+
+.team-grid figure {
+  width: 132px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+html[data-theme="dark"] .team-photo {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.team-icons {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  gap: 14px;
+  justify-content: center;
+  align-items: center;
+}
+
+.team-icons li {
+  display: inline-flex;
+}
+
+.team-grid {
+  overflow: visible;
+}
+
+.team-grid .col {
+  margin-bottom: 1.25rem;
+  overflow: visible;
+}
+
+.team-grid .card {
+  position: relative;
+  z-index: 1;
+}
+
+.team-grid .card.hoverable:hover {
+  z-index: 10;
+}
+
+.team-grid .card-body {
+  padding-top: 1.25rem;
+  padding-bottom: 2rem;
+  font-size: 0.95rem;
+  line-height: 1.35;
+}
+
+.team-grid .card-title {
+  margin-top: 0.9rem;
+  margin-bottom: 0.35rem;
+  font-size: 1.05rem;
+  line-height: 1.25;
+}
+
+.team-grid .team-position,
+.team-grid .team-org,
+.team-grid .team-dept {
+  font-size: 0.95rem;
+}
+
+.team-grid .team-position {
+  margin-bottom: 0.7rem;
+}
+
+.team-grid .team-org {
+  margin-top: 0.2rem;
+  margin-bottom: 0.15rem;
+}
+
+.team-grid .team-dept {
+  margin-top: 0.15rem;
+  margin-bottom: 0.9rem;
+}
+
+.team-grid .team-icons {
+  margin-top: 0.9rem;
+}
+
+.team-icons a[aria-label="E-mail"] i,
+.team-icons a[aria-label="Web"] i,
+.team-icons a[aria-label="Profile"] i {
+  color: var(--global-theme-color);
+}
+
+.team-icons a[aria-label="ORCID"] i {
+  color: #a6ce39;
+}
+
+.team-icons a[aria-label="Google Scholar"] i {
+  color: #4285f4;
+}
+
+.team-icons a[aria-label="ResearchGate"] i {
+  color: #00ccbb;
+}
+
+.team-icons a[aria-label="GitHub"] i {
+  color: #181717;
+}
+
+.team-icons a[aria-label="LinkedIn"] i {
+  color: #0a66c2;
+}
+
+.team-icons a[aria-label="Bluesky"] i {
+  color: #1185fe;
+}
+
+.team-icons a[aria-label="Mastodon"] i {
+  color: #6364ff;
+}
+
+.team-icons a[aria-label="X"] i {
+  color: #000;
+}
+
+html[data-theme="dark"] .team-icons a[aria-label="GitHub"] i,
+html[data-theme="dark"] .team-icons a[aria-label="X"] i {
+  color: #fff;
+}
+
+.team-icons a:hover i {
+  filter: brightness(0.9);
+}
+
+.team-keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+  align-items: center;
+}
+
+.team-keywords-label {
+  margin-right: 6px;
+  opacity: 0.8;
+}
+
+.team-keyword {
+  padding: 0.15rem 0.35rem;
+  border-radius: 6px;
+}
+
+@media (max-width: 575px) {
+  .team-grid {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .team-grid .col {
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+  }
+
+  .team-grid .card-body {
+    display: grid;
+    grid-template-columns: clamp(4.6rem, 22vw, 5.8rem) minmax(0, 1fr);
+    gap: 0.1rem 0.85rem;
+    align-items: start;
+    padding: 0.9rem 0.95rem 1rem;
+    text-align: left !important;
+  }
+
+  .team-grid figure {
+    grid-column: 1;
+    grid-row: 1 / span 4;
+    justify-self: start;
+    width: clamp(4.6rem, 22vw, 5.8rem);
+    margin: 0;
+  }
+
+  .team-grid .team-photo {
+    width: clamp(4.6rem, 22vw, 5.8rem);
+    height: clamp(4.6rem, 22vw, 5.8rem);
+  }
+
+  .team-grid .card-title,
+  .team-grid .team-position,
+  .team-grid .team-org,
+  .team-grid .team-dept {
+    grid-column: 2;
+  }
+
+  .team-grid .card-title {
+    margin-top: 0.1rem !important;
+    margin-bottom: 0.2rem !important;
+    font-size: 1rem;
+  }
+
+  .team-grid .team-position {
+    margin-bottom: 0.35rem;
+  }
+
+  .team-grid .team-org {
+    margin-top: 0 !important;
+    margin-bottom: 0.1rem;
+  }
+
+  .team-grid .team-dept {
+    margin-top: 0.05rem;
+    margin-bottom: 0.15rem;
+  }
+
+  .team-grid .team-icons {
+    grid-column: 1 / -1;
+    flex-wrap: wrap;
+    gap: 0.55rem 0.8rem;
+    justify-content: flex-start;
+    width: 100%;
+    border-top: 1px solid color-mix(in srgb, var(--global-divider-color) 72%, transparent);
+    margin-top: 0.65rem !important;
+    padding-top: 0.65rem;
+  }
+}

data/_sass/_themes.scss

@@ -0,0 +1,254 @@
+/*******************************************************************************
+ * Themes
+ ******************************************************************************/
+
+@use "sass:color";
+
+:root {
+  color-scheme: light;
+  --global-bg-color: #{$white-color};
+  --global-code-bg-color: #{$code-bg-color-light};
+  --global-code-text-color: #5a1f5f;
+  --global-code-border-color: #d7bfd9;
+  --global-code-row-alt-color: #edf2f7;
+  --global-code-comment-color: #39705a;
+  --global-text-color: #{$black-color};
+  --global-text-color-light: #{$grey-color};
+  --global-theme-color: #{$purple-color};
+  --global-internal-link-color: var(--global-theme-color);
+  --global-external-link-color: #a33a00;
+  --global-citation-color: #c2185b;
+  --global-hover-color: #{$purple-color};
+  --global-hover-text-color: #{$white-color};
+  --global-footer-bg-color: #{$grey-color-dark};
+  --global-footer-text-color: #{$grey-color-light};
+  --global-footer-link-color: #{$white-color};
+  --global-distill-app-color: #{$grey-color};
+  --global-divider-color: rgba(0, 0, 0, 0.1);
+  --global-card-bg-color: #{$white-color};
+  --global-highlight-color: #{$red-color-dark};
+  --global-back-to-top-bg-color: rgba(
+    #{color.channel($black-color, "red", $space: rgb)},
+    #{color.channel($black-color, "green", $space: rgb)},
+    #{color.channel($black-color, "blue", $space: rgb)},
+    0.4
+  );
+  --global-back-to-top-text-color: #{$white-color};
+  --global-newsletter-bg-color: #{$white-color};
+  --global-newsletter-text-color: #{$black-color};
+
+  --global-tip-block: #42b983;
+  --global-tip-block-bg: #e2f5ec;
+  --global-tip-block-text: #215d42;
+  --global-tip-block-title: #359469;
+  --global-warning-block: #e7c000;
+  --global-warning-block-bg: #fff8d8;
+  --global-warning-block-text: #6b5900;
+  --global-warning-block-title: #b29400;
+  --global-danger-block: #c00;
+  --global-danger-block-bg: #ffe0e0;
+  --global-danger-block-text: #600;
+  --global-danger-block-title: #c00;
+
+  #light-toggle-system {
+    padding-left: 10px;
+    padding-top: 12px;
+    display: block;
+  }
+
+  #light-toggle-dark {
+    display: none;
+  }
+
+  #light-toggle-light {
+    display: none;
+  }
+
+  #light-toggle-cafe {
+    display: none;
+  }
+
+  .only-light {
+    display: block;
+  }
+
+  .only-dark {
+    display: none;
+  }
+
+  #back-to-top {
+    color: var(--global-back-to-top-text-color);
+    background: var(--global-back-to-top-bg-color);
+    bottom: $back-to-top-bottom;
+    right: $back-to-top-right;
+    height: $back-to-top-height;
+    width: $back-to-top-width;
+    z-index: $back-to-top-z-index;
+  }
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --global-bg-color: #{$grey-color-dark};
+  --global-code-bg-color: #{$code-bg-color-dark};
+  --global-code-text-color: #f2b8ff;
+  --global-code-border-color: #596169;
+  --global-code-row-alt-color: #303840;
+  --global-code-comment-color: #91c9a9;
+  --global-text-color: #{$grey-color-light};
+  --global-text-color-light: #{$grey-color};
+  --global-theme-color: #{$cyan-color};
+  --global-internal-link-color: var(--global-theme-color);
+  --global-external-link-color: #ffad73;
+  --global-citation-color: #ff77b7;
+  --global-hover-color: #{$cyan-color};
+  --global-hover-text-color: #{$white-color};
+  --global-footer-bg-color: #{$grey-color-light};
+  --global-footer-text-color: #{$grey-color-dark};
+  --global-footer-link-color: #{$black-color};
+  --global-distill-app-color: #{$grey-color-light};
+  --global-divider-color: #424246;
+  --global-card-bg-color: #{$grey-900};
+  --global-back-to-top-bg-color: rgba(
+    #{color.channel($white-color, "red", $space: rgb)},
+    #{color.channel($white-color, "green", $space: rgb)},
+    #{color.channel($white-color, "blue", $space: rgb)},
+    0.5
+  );
+  --global-back-to-top-text-color: #{$black-color};
+  --global-newsletter-bg-color: #{$grey-color-light};
+  --global-newsletter-text-color: #{$grey-color-dark};
+
+  --global-tip-block: #42b983;
+  --global-tip-block-bg: #215d42;
+  --global-tip-block-text: #beffe2;
+  --global-tip-block-title: #e2f5ec;
+  --global-warning-block: #e7c000;
+  --global-warning-block-bg: #6b5900;
+  --global-warning-block-text: #fff2af;
+  --global-warning-block-title: #fff8d8;
+  --global-danger-block: #c00;
+  --global-danger-block-bg: #600;
+  --global-danger-block-text: #ffb9b9;
+  --global-danger-block-title: #ffe0e0;
+
+  .only-light {
+    display: none;
+  }
+
+  .only-dark {
+    display: block;
+  }
+}
+
+html[data-theme="cafe"] {
+  color-scheme: light;
+  --global-bg-color: #f3eacb;
+  --global-code-bg-color: #ede0c2;
+  --global-code-text-color: #6d3d68;
+  --global-code-border-color: #b8a887;
+  --global-code-row-alt-color: #e3d5b6;
+  --global-code-comment-color: #52705d;
+  --global-text-color: #463524;
+  --global-text-color-light: #756349;
+  --global-theme-color: #7a591b;
+  --global-internal-link-color: var(--global-theme-color);
+  --global-external-link-color: #934707;
+  --global-citation-color: #a11858;
+  --global-hover-color: #7a591b;
+  --global-hover-text-color: #fff8e6;
+  --global-footer-bg-color: #4a3724;
+  --global-footer-text-color: #f3eacb;
+  --global-footer-link-color: #fff8e6;
+  --global-distill-app-color: #756349;
+  --global-divider-color: rgba(70, 53, 36, 0.22);
+  --global-card-bg-color: #fbf4df;
+  --global-highlight-color: #9b3f2f;
+  --global-back-to-top-bg-color: rgba(70, 53, 36, 0.45);
+  --global-back-to-top-text-color: #fff8e6;
+  --global-newsletter-bg-color: #fbf4df;
+  --global-newsletter-text-color: #463524;
+
+  --global-tip-block: #3f7a5a;
+  --global-tip-block-bg: #e7efe3;
+  --global-tip-block-text: #2f513d;
+  --global-tip-block-title: #2f684d;
+  --global-warning-block: #a9781f;
+  --global-warning-block-bg: #f5e7c8;
+  --global-warning-block-text: #5f4318;
+  --global-warning-block-title: #7a591b;
+  --global-danger-block: #a14a3f;
+  --global-danger-block-bg: #f3ddd9;
+  --global-danger-block-text: #5a2a24;
+  --global-danger-block-title: #7c352f;
+}
+
+html[data-theme-setting="dark"] {
+  #light-toggle-system {
+    display: none;
+  }
+
+  #light-toggle-dark {
+    padding-left: 10px;
+    padding-top: 12px;
+    display: block;
+  }
+
+  #light-toggle-light {
+    display: none;
+  }
+
+  #light-toggle-cafe {
+    display: none;
+  }
+
+  #back-to-top {
+    color: var(--global-back-to-top-text-color);
+    background: var(--global-back-to-top-bg-color);
+  }
+}
+
+html[data-theme-setting="light"] {
+  #light-toggle-system {
+    display: none;
+  }
+
+  #light-toggle-dark {
+    display: none;
+  }
+
+  #light-toggle-light {
+    padding-left: 10px;
+    padding-top: 12px;
+    display: block;
+  }
+
+  #light-toggle-cafe {
+    display: none;
+  }
+}
+
+html[data-theme-setting="cafe"] {
+  #light-toggle-system {
+    display: none;
+  }
+
+  #light-toggle-dark {
+    display: none;
+  }
+
+  #light-toggle-light {
+    display: none;
+  }
+
+  #light-toggle-cafe {
+    padding-left: 10px;
+    padding-top: 12px;
+    display: block;
+  }
+
+  #back-to-top {
+    color: var(--global-back-to-top-text-color);
+    background: var(--global-back-to-top-bg-color);
+  }
+}

data/_sass/_typograms.scss

@@ -0,0 +1,132 @@
+.typogram {
+  .diagram {
+    display: block;
+  }
+
+  .diagram line,
+  .diagram circle,
+  .diagram rect {
+    stroke: var(--global-text-color);
+  }
+
+  .diagram line {
+    stroke-width: 2;
+  }
+
+  .diagram circle {
+    r: 3.5;
+  }
+
+  .diagram rect {
+    width: 6px;
+    height: 6px;
+  }
+
+  .diagram text,
+  .glyph,
+  .debug text {
+    /** font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; **/
+    font-family:
+      Iosevka Fixed,
+      monospace;
+    font-size: 3em;
+    text-anchor: middle;
+    alignment-baseline: central;
+    white-space: pre;
+    fill: var(--global-text-color);
+  }
+
+  .reserved {
+    fill: transparent;
+    white-space: pre;
+  }
+
+  .debug[debug="true"] .reserved {
+    fill: var(--global-text-color);
+    opacity: 0.5;
+  }
+
+  .debug[debug="true"] line.grid {
+    stroke: var(--global-text-color);
+    stroke-width: 0.2;
+    stroke-linecap: butt;
+    fill: var(--global-text-color);
+    opacity: 1%;
+  }
+
+  polygon {
+    stroke-width: 0;
+  }
+
+  .debug[debug="true"] polygon.inner {
+    fill: var(--global-text-color);
+    stroke: var(--global-text-color);
+    opacity: 5%;
+  }
+
+  polygon {
+    stroke: var(--global-text-color);
+    /** stroke-width: 0.2; **/
+    stroke-linecap: butt;
+    fill: var(--global-text-color);
+  }
+
+  .debug[debug="true"] polygon,
+  .debug[debug="true"] line.grid {
+    opacity: 10%;
+  }
+
+  .debug[debug="true"] polygon,
+  .debug[debug="true"] path,
+  .debug[debug="true"] circle {
+    opacity: 50%;
+  }
+
+  .debug[debug="true"] polygon {
+    fill: red;
+    stroke: red;
+  }
+
+  /**
+  circle {
+    fill: var(--global-text-color);
+  }
+  **/
+
+  .debug[debug="true"] circle,
+  .debug[debug="true"] path {
+    opacity: 50%;
+    fill: red;
+  }
+
+  .debug[debug="true"] circle {
+    stroke: red;
+  }
+
+  .debug[debug="true"] .inner {
+    stroke-width: 0.2;
+  }
+
+  line.part {
+    stroke-width: 6;
+    stroke-linecap: butt;
+    stroke: var(--global-text-color);
+  }
+
+  .debug[debug="true"] line.part {
+    opacity: 50%;
+    stroke: red;
+  }
+
+  .debug[debug="true"] line.center {
+    stroke-width: 3;
+    stroke-linecap: butt;
+    opacity: 10%;
+    stroke: var(--global-text-color);
+  }
+
+  text::selection {
+    fill: HighlightText;
+    background-color: Highlight;
+  }
+}

data/_sass/_variables.scss

@@ -0,0 +1,52 @@
+/*******************************************************************************
+ * Variables used throughout the theme.
+ * To adjust anything, simply edit the variables below and rebuild the theme.
+ ******************************************************************************/
+
+@use "sass:color";
+
+// Colors
+$red-color: #ff3636 !default;
+$red-color-dark: #b71c1c !default;
+$orange-color: #f29105 !default;
+$blue-color: #0076df !default;
+$blue-color-dark: #00369f !default;
+$cyan-color: #2698ba !default;
+$light-cyan-color: color.adjust($cyan-color, $lightness: 25%);
+$green-color: #00ab37 !default;
+$green-color-lime: #b7d12a !default;
+$green-color-dark: #009f06 !default;
+$green-color-light: #ddffdd !default;
+$green-color-bright: #11d68b !default;
+$purple-color: #b509ac !default;
+$light-purple-color: color.adjust($purple-color, $lightness: 25%);
+$pink-color: #f92080 !default;
+$pink-color-light: #ffdddd !default;
+$yellow-color: #efcc00 !default;
+
+$grey-color: #828282 !default;
+$grey-color-light: color.adjust($grey-color, $lightness: 40%);
+$grey-color-dark: #1c1c1d;
+$grey-900: #212529;
+
+$white-color: #ffffff !default;
+$black-color: #000000 !default;
+
+// Theme colors
+
+$code-bg-color-light: rgba($purple-color, 0.05);
+$code-bg-color-dark: #2c3237 !default;
+
+// Font awesome location
+$fa-font-path: "../webfonts";
+
+// Tabler icons location
+$ti-font-path: "../fonts";
+
+// Back To Top button config
+$back-to-top-z-index: 10;
+$back-to-top-bottom: 30px;
+$back-to-top-right: 30px;
+$back-to-top-diameter: 40px;
+$back-to-top-height: $back-to-top-diameter;
+$back-to-top-width: $back-to-top-diameter;