unaltraweb 0.3.0

data/_sass/_blog.scss

@@ -0,0 +1,67 @@
+/* =============================================================================
+   Blog archive
+   ============================================================================= */
+
+.blog-archive {
+  display: grid;
+  gap: 1.15rem;
+}
+
+.blog-archive-range {
+  margin: 0;
+  color: var(--global-text-color-light);
+  font-size: 0.9rem;
+}
+
+.blog-archive-item {
+  padding-bottom: 1.15rem;
+  border-bottom: 1px solid var(--global-divider-color);
+}
+
+.blog-archive-item:last-child {
+  border-bottom: 0;
+}
+
+.blog-archive-meta {
+  margin: 0 0 0.2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  color: var(--global-text-color-light);
+  font-size: 0.82rem;
+}
+
+.blog-archive-meta .post-reading-time {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.blog-archive-title {
+  margin: 0;
+  font-size: 1.18rem;
+  line-height: 1.25;
+}
+
+.blog-archive-excerpt {
+  margin: 0.4rem 0 0;
+  color: var(--global-text-color);
+}
+
+.blog-archive-tags {
+  list-style: none;
+  padding: 0;
+  margin: 0.55rem 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.blog-archive-tags li {
+  padding: 0.1rem 0.4rem;
+  border: 1px solid var(--global-divider-color);
+  border-radius: 999px;
+  color: var(--global-text-color-light);
+  font-size: 0.75rem;
+}

data/_sass/_callouts.scss

@@ -0,0 +1,100 @@
+/*******************************************************************************
+ * Callouts
+ ******************************************************************************/
+
+.uw-callout-wrapper {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.uw-callout {
+  --uw-callout-border: var(--global-tip-block);
+  --uw-callout-bg: var(--global-tip-block-bg);
+  --uw-callout-text: var(--global-tip-block-text);
+  --uw-callout-title: var(--global-tip-block-title);
+
+  margin: 1.35rem 0;
+  padding: 0.85rem 1rem 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--uw-callout-border) 42%, transparent);
+  border-left: 0.28rem solid var(--uw-callout-border);
+  border-radius: 0;
+  background: var(--uw-callout-bg);
+  font-size: 1rem;
+
+  p,
+  li,
+  em,
+  strong,
+  code {
+    color: var(--uw-callout-text);
+  }
+
+  a,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--uw-callout-title);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  .uw-callout-title {
+    margin: 0 0 0.45rem;
+    color: var(--uw-callout-title);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+}
+
+.uw-callout-example {
+  --uw-callout-border: var(--global-tip-block);
+  --uw-callout-bg: var(--global-tip-block-bg);
+  --uw-callout-text: var(--global-tip-block-text);
+  --uw-callout-title: var(--global-tip-block-title);
+}
+
+.uw-callout-warning {
+  --uw-callout-border: var(--global-warning-block);
+  --uw-callout-bg: var(--global-warning-block-bg);
+  --uw-callout-text: var(--global-warning-block-text);
+  --uw-callout-title: var(--global-warning-block-title);
+}
+
+.uw-callout-objectives {
+  --uw-callout-border: #2f6fd6;
+  --uw-callout-bg: #edf3ff;
+  --uw-callout-text: #20458b;
+  --uw-callout-title: #2a5fb8;
+}
+
+.uw-callout-danger {
+  --uw-callout-border: var(--global-danger-block);
+  --uw-callout-bg: var(--global-danger-block-bg);
+  --uw-callout-text: var(--global-danger-block-text);
+  --uw-callout-title: var(--global-danger-block-title);
+}
+
+html[data-theme="cafe"] .uw-callout-objectives {
+  --uw-callout-border: #3d5f93;
+  --uw-callout-bg: #e4eaf5;
+  --uw-callout-text: #2d4570;
+  --uw-callout-title: #355784;
+}
+
+html[data-theme="dark"] .uw-callout-objectives {
+  --uw-callout-border: #78b8ff;
+  --uw-callout-bg: #1a2d48;
+  --uw-callout-text: #d6eaff;
+  --uw-callout-title: #9bceff;
+}

data/_sass/_custom.scss

@@ -0,0 +1,437 @@
+/* CUSTOM: all local overrides live here */
+
+/* =============================================================================
+   Custom configuration
+   -----------------------------------------------------------------------------
+   Keep all your site-specific CSS changes in this file so they are easy to
+   locate, review, and port to other instances of the template.
+   ============================================================================= */
+
+/* === Configurable tokens ===================================================== */
+:root {
+    /* Primary link color in light mode */
+    --custom-link-color: #1a73e8;
+  
+    /* Link hover color in light mode */
+    --custom-link-hover-color: #135cbc;
+  
+    /* Accent color used by UI elements (navbar active item, badges, etc.) */
+    --custom-accent-color: var(--custom-link-color);
+    --custom-accent-hover-color: var(--custom-link-hover-color);
+  
+    /* Inline code styling in light mode (this removes the light purple highlight) */
+    --custom-inline-code-bg: rgba(26, 115, 232, 0.10);
+    --custom-inline-code-text: #5a1f5f;
+    --custom-inline-code-border: rgba(26, 115, 232, 0.25);
+  
+    /* Text selection styling in light mode (optional) */
+    --custom-selection-bg: rgba(26, 115, 232, 0.25);
+    --custom-selection-text: inherit;
+  }
+  
+  /* =============================================================================
+     Light mode accent overrides (al-folio theme variables)
+     -----------------------------------------------------------------------------
+     In al-folio, many UI elements (navbar active item, badges, highlights,
+     some icons, etc.) use theme variables instead of inheriting from "a {}".
+     This block updates the accent variables ONLY in light mode.
+     ============================================================================= */
+  
+  html[data-theme="light"] {
+    /* Global theme accent used across the UI */
+    --global-theme-color: var(--custom-accent-color);
+  
+    /* Global hover color used across the UI */
+    --global-hover-color: var(--custom-accent-hover-color);
+  
+    /* Inline code variables used by the theme (names may vary by version, but
+       setting these is usually enough to remove the purple background) */
+    --global-code-bg-color: var(--custom-inline-code-bg);
+    --global-code-text-color: var(--custom-inline-code-text);
+    --global-code-border-color: var(--custom-inline-code-border);
+  }
+  
+  /* =============================================================================
+     Light mode link overrides
+     -----------------------------------------------------------------------------
+     Force link colors ONLY in light mode. Dark mode keeps the theme defaults.
+     ============================================================================= */
+  
+  html[data-theme="light"] a,
+  html[data-theme="light"] table.table a {
+    color: var(--custom-link-color);
+  }
+  
+  html[data-theme="light"] a:hover,
+  html[data-theme="light"] table.table a:hover {
+    color: var(--custom-link-hover-color);
+    text-decoration: underline;
+  }
+
+  html[data-theme="light"] a[rel~="external"],
+  html[data-theme="light"] a[rel~="external"]:hover {
+    color: var(--global-external-link-color);
+  }
+
+  html[data-theme="light"] footer.fixed-bottom .footer-content a,
+  html[data-theme="light"] footer.fixed-bottom .footer-content a:hover {
+    color: var(--global-footer-link-color);
+  }
+
+  html[data-theme="light"] a.citation,
+  html[data-theme="light"] a.citation:hover,
+  html[data-theme="light"] a.citation-number,
+  html[data-theme="light"] a.citation-number:hover {
+    color: var(--global-citation-color);
+  }
+  
+  /* =============================================================================
+     Navbar overrides (light mode)
+     -----------------------------------------------------------------------------
+     Some navbar items can be styled with more specific selectors in the theme.
+     These rules ensure consistent behavior:
+     - Default navbar links use the standard text color
+     - Hover uses the global hover color
+     - Active item uses the global theme color
+     ============================================================================= */
+  
+  html[data-theme="light"] .navbar a,
+  html[data-theme="light"] .navbar .nav-link,
+  html[data-theme="light"] .navbar .dropdown-item {
+    color: var(--global-text-color);
+  }
+  
+  html[data-theme="light"] .navbar a:hover,
+  html[data-theme="light"] .navbar .nav-link:hover,
+  html[data-theme="light"] .navbar .dropdown-item:hover {
+    color: var(--global-hover-color);
+  }
+  
+  /* Active nav item (current page) */
+  html[data-theme="light"] .navbar .nav-link.active,
+  html[data-theme="light"] .navbar .nav-item.active > .nav-link {
+    color: var(--global-theme-color);
+  }
+  
+  /* =============================================================================
+     Inline code overrides (light mode)
+     -----------------------------------------------------------------------------
+     The light purple highlight is the inline <code> styling.
+     These selectors force a consistent inline code background in light mode.
+     ============================================================================= */
+  
+  html[data-theme="light"] code {
+    background: var(--custom-inline-code-bg);
+    border: 1px solid var(--custom-inline-code-border);
+    color: var(--custom-inline-code-text);
+  }
+  
+  /* Avoid affecting fenced code blocks in light mode */
+  html[data-theme="light"] pre code {
+    background: inherit;
+    border: none;
+  }
+  
+  /* =============================================================================
+     Text selection overrides (light mode)
+     -----------------------------------------------------------------------------
+     Optional: highlight color when selecting text with the mouse.
+     ============================================================================= */
+  
+  html[data-theme="light"] ::selection {
+    background: var(--custom-selection-bg);
+    color: var(--custom-selection-text);
+  }
+  
+  /* =============================================================================
+     Notes
+     -----------------------------------------------------------------------------
+     If any remaining purple highlight persists, it may be coming from a more
+     specific class (e.g., .highlight, .kbd, .search-keyword, etc.). In that case,
+     add a targeted rule here, always prefixed with:
+       html[data-theme="light"] ...
+     so coffee and dark modes remain untouched.
+     ============================================================================= */
+  
+/* =============================================================================
+   Page hero
+   ============================================================================= */
+
+.home-hero-fullwidth {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  margin-top: -3rem;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+.home-hero-fullwidth .home-hero-image {
+  display: block;
+  width: 100%;
+  height: clamp(170px, 28vw, 280px);
+  object-fit: cover;
+  object-position: center;
+}
+
+.home-hero-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 18%, rgba(0, 0, 0, 0.64) 100%);
+}
+
+.home-hero-content {
+  width: min(100%, 1140px);
+  margin: 0 auto;
+  padding: 0.95rem 1rem 1.05rem;
+}
+
+.home-hero-title {
+  color: #fff !important;
+  -webkit-text-fill-color: #fff;
+  margin: 0;
+  line-height: 1.1;
+  font-size: clamp(1.45rem, 3vw, 2.5rem);
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+}
+
+.home-hero-subtitle {
+  color: rgba(255, 255, 255, 0.95) !important;
+  -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
+  margin: 0.35rem 0 0;
+  font-size: clamp(0.92rem, 1.45vw, 1.15rem);
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
+}
+
+.home-hero-caption {
+  position: absolute;
+  right: 0.85rem;
+  bottom: 0.75rem;
+  z-index: 3;
+  max-width: min(86vw, 620px);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #fff;
+  text-align: right;
+  font-size: clamp(0.6rem, 0.85vw, 0.74rem);
+  line-height: 1.3;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+  backdrop-filter: none;
+}
+
+.home-hero-caption,
+.home-hero-caption * {
+  color: #fff !important;
+  -webkit-text-fill-color: #fff !important;
+}
+
+.home-hero-caption-text,
+.home-hero-caption-source {
+  display: block;
+}
+
+.home-hero-caption-source {
+  margin-top: 0.08rem;
+  font-size: 0.8em;
+  opacity: 0.9;
+}
+
+.home-hero-caption-source-label {
+  margin-right: 0.16rem;
+  opacity: 0.86;
+}
+
+.home-hero-caption-source-link {
+  font-style: italic;
+  font-weight: 400;
+}
+
+.home-hero-caption a,
+.home-hero-caption a:hover,
+.home-hero-caption a:visited {
+  color: #fff;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.78);
+}
+
+@media (max-width: 575.98px) {
+  .home-hero-caption {
+    right: 0.55rem;
+    bottom: 0.48rem;
+    max-width: 78vw;
+    font-size: 0.66rem;
+  }
+}
+
+html[data-theme='light'] .home-hero-content,
+html[data-theme='light'] .home-hero-content * {
+  color: #fff !important;
+}
+
+@media (min-width: 576px) {
+  .home-hero-content {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.thesis-image-source {
+  display: block;
+  margin-top: 0.12rem;
+  font-size: 0.92em;
+  opacity: 0.9;
+}
+
+/* =============================================================================
+   Publications summary
+   ============================================================================= */
+
+.pub-counts {
+  margin: 0.75rem 0 1.1rem;
+  font-size: 0.96rem;
+}
+
+.pub-metrics-summary {
+  margin: 0.35rem 0 1.25rem;
+}
+
+.pub-metrics-summary .pub-metrics-updated {
+  margin-bottom: 0.45rem;
+  font-size: 0.9rem;
+  color: var(--global-text-color-light);
+}
+
+.pub-summary-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.pub-summary-badges + .pub-summary-badges {
+  margin-top: 0.35rem;
+}
+
+.pub-summary-badges:last-of-type {
+  margin-bottom: 0.9rem;
+}
+
+.pub-metrics-meta {
+  margin: 0.15rem 0 0.95rem;
+  font-size: 0.86rem;
+  color: var(--global-text-color-light);
+}
+
+.metrics-badge {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--global-text-color);
+  border-radius: 0.12rem;
+  background: var(--global-bg-color);
+  color: var(--global-text-color);
+  font-size: 0.82rem;
+  line-height: 1.2;
+  overflow: hidden;
+}
+
+.metrics-badge-label {
+  padding: 0.28rem 0.5rem;
+  border-right: 1px solid var(--global-text-color);
+  text-transform: lowercase;
+}
+
+.metrics-badge-value {
+  padding: 0.28rem 0.5rem;
+  font-weight: 600;
+}
+
+.publications ol.bibliography li .badges a {
+  color: var(--global-text-color);
+}
+
+.publications ol.bibliography li .badges .metrics-badge,
+.publications ol.bibliography li .badges .metrics-badge span {
+  color: inherit;
+}
+
+.publications ol.bibliography li .badges .metrics-badge > span {
+  height: auto;
+  text-decoration: none;
+}
+
+.publications ol.bibliography li .badges .metrics-badge > .metrics-badge-label,
+.publications ol.bibliography li .badges .metrics-badge > .metrics-badge-value {
+  padding: 0.28rem 0.5rem;
+}
+
+.publications ol.bibliography li .badges .metrics-badge > span:hover {
+  text-decoration: none;
+}
+
+.badges a:hover .metrics-badge {
+  border-color: var(--global-theme-color);
+  color: var(--global-theme-color);
+}
+
+.badges a:hover .metrics-badge-label {
+  border-right-color: var(--global-theme-color);
+}
+
+.publications .badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 0.4rem;
+  margin: 0.6rem 0 0.75rem;
+}
+
+.publications .badges .badges-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.35rem;
+  row-gap: 0.45rem;
+}
+
+.publications .badges .badges-row > a,
+.publications .badges .badges-row > span {
+  margin: 0;
+}
+
+.publications .badges > a,
+.publications .badges > span {
+  margin: 0;
+}
+
+.publications div.openalex.hidden,
+.publications div.scimago.hidden {
+  border: dashed 1px var(--global-bg-color);
+}
+
+.publications div.openalex.hidden.open,
+.publications div.scimago.hidden.open {
+  border-color: var(--global-text-color);
+}
+
+.publications div.openalex.hidden ul,
+.publications div.scimago.hidden ul {
+  margin: 0.2rem 1.2rem 0.5rem;
+}
+
+.publications .paper-metrics-meta {
+  margin: 0.2rem 0 0.65rem;
+  font-size: 0.86rem;
+  color: var(--global-text-color-light);
+}
+
+.publications .paper-metrics-meta p {
+  margin: 0.2rem 0;
+  line-height: 1.35;
+}
+