tweak temporal theme

Author: MasonEgger

slides/theme-temporal/components/TemporalLogo.vue

@@ -1,6 +1,7 @@
 <!--
   Temporal "plus" mark. Inline SVG, inherits color via currentColor
-  so layouts can tint it with CSS (default: Temporal mint green).
+  so layouts can tint it with CSS. Brand rule: the mark must be
+  either black or white, never green. Pick based on background.
 -->
 <template>
   <svg

slides/theme-temporal/layouts/cover.vue

@@ -37,7 +37,8 @@ import TemporalLogo from '../components/TemporalLogo.vue'
 .cover-logo {
   width: 44px;
   height: 44px;
-  color: var(--temporal-green);
+  /* Temporal brand rule: the mark is black or white, never green. */
+  color: #ffffff;
 }
 .cover :deep(h1) {
   font-size: 3rem;

slides/theme-temporal/layouts/end.vue

@@ -39,7 +39,8 @@ import TemporalLogo from '../components/TemporalLogo.vue'
 .end-logo {
   width: 38px;
   height: 38px;
-  color: var(--temporal-green);
+  /* Temporal brand rule: the mark is black or white, never green. */
+  color: #ffffff;
 }
 .end-content {
   align-self: flex-start;

slides/theme-temporal/layouts/two-cols.vue

@@ -37,4 +37,15 @@ import TemporalFooter from '../components/TemporalFooter.vue'
   align-items: start;
   overflow: hidden;
 }
+/* Two-cols slides are cramped when the h1 wraps to 2-3 lines. Shrink
+   the h1 here so it fits on 1-2 lines and leaves room for body content. */
+.two-cols :deep(h1) {
+  font-size: 2.2rem;
+  margin-bottom: 0.6rem;
+}
+.two-cols :deep(.col) p,
+.two-cols :deep(.col) li {
+  font-size: 1.3rem;
+  line-height: 1.35;
+}
 </style>

slides/theme-temporal/styles/code.css

@@ -16,11 +16,17 @@
   background: var(--temporal-bg-elev) !important;
   border: 1px solid var(--temporal-border);
   border-radius: 0.4rem;
-  padding: 0.7rem 0.9rem;
+  padding: 0.7rem 1.25rem;
   margin: 0.4rem 0;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
               0 12px 40px -20px rgba(0, 0, 0, 0.8);
 }
+/* Give the last character of a long line breathing room so italic glyphs
+   and descenders don't get clipped by the rounded corner or scrollbar. */
+.slidev-layout pre.shiki code,
+.slidev-layout div[class*="language-"] > pre code {
+  padding-right: 0.5rem;
+}
 
 .slidev-layout :not(pre) > code {
   background: rgba(124, 58, 237, 0.14);