first commit

media/templates/site/cassiopeia/scss/blocks/_global.scss

@@ -0,0 +1,254 @@
+// Global
+:root {
+  scroll-behavior: smooth;
+  font-size: $font-size-root;
+
+  // Disable smooth scroll when the user has set "prefers-reduced-motion"
+  @media screen and (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+html {
+  background-color: $white;
+}
+
+body {
+  position: relative;
+  min-height: 100vh;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--cassiopeia-font-family-headings, $font-family-sans-serif);
+  font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
+}
+
+.display-1 {
+  font-size: clamp(2.7rem, 8vw, 5.5rem);
+}
+
+.display-2 {
+  font-size: clamp(2.3rem, 7vw, 4.5rem);
+}
+
+.display-3 {
+  font-size: clamp(1.9rem, 6vw, 3.5rem);
+}
+
+.display-4 {
+  font-size: clamp(1.5rem, 5vw, 2.5rem);
+}
+
+.lead {
+  font-size: clamp(1.1rem, 3vw, 1.25rem);
+}
+
+a {
+  color: var(--#{$prefix}link-color);
+
+  &:not([class]) {
+    text-decoration: underline;
+  }
+
+  &:not(.btn):hover,
+  &:not(.btn):focus {
+    color: var(--cassiopeia-color-hover);
+  }
+
+  &.navbar-brand {
+    color: var(--cassiopeia-color-brand);
+  }
+}
+
+.btn-primary {
+  background-color: var(--cassiopeia-color-primary);
+  border-color: var(--cassiopeia-color-primary);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cassiopeia-color-hover);
+    border-color: var(--cassiopeia-color-hover);
+  }
+}
+
+.btn-group {
+  margin-bottom: $cassiopeia-grid-gutter;
+  > input {
+    padding: $cassiopeia-grid-gutter * .5;
+    border: 1px solid $gray-400;
+    @include border-start-radius($border-radius);
+    @include border-end-radius(0);
+  }
+  > .btn-group {
+    margin-bottom: 0;
+  }
+}
+
+.com-content-article {
+  ol,
+  ul {
+    overflow: hidden;
+  }
+}
+
+.com-content-category__pagination {
+  margin-bottom: $cassiopeia-grid-gutter;
+}
+
+small,
+.small {
+  font-size: $font-size-sm;
+}
+
+dd {
+  padding: 0;
+  word-wrap: break-word;
+}
+
+th dd {
+  font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
+}
+
+.com-contact__thumbnail {
+  text-align: left;
+}
+
+@include media-breakpoint-up(xl) {
+  dl.dl-horizontal {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    dt {
+      grid-column-start: 1;
+      grid-column-end: 2;
+    }
+
+    dd {
+      grid-column-start: 2;
+      grid-column-end: 3;
+      padding: 0 0 0 $cassiopeia-grid-gutter;
+      margin-bottom: 0;
+    }
+  }
+
+  .com-contact__container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, auto);
+    grid-gap: 1rem;
+    margin-bottom: $cassiopeia-grid-gutter;
+
+    h3 {
+      grid-column: 1 / 5;
+    }
+
+    .com-contact__thumbnail {
+      grid-column: 3 / 5;
+      grid-row: 2 / 5;
+      margin-bottom: $cassiopeia-grid-gutter;
+      text-align: right;
+    }
+
+    .com-contact__position {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
+    }
+
+    .com-contact__info {
+      grid-column: 1 / 3;
+      grid-row: 3 / 4;
+    }
+  }
+
+  .com-users-profile {
+    dt {
+      min-width: 180px;
+    }
+  }
+}
+
+figure {
+  margin: 0 0 ($cassiopeia-grid-gutter*2);
+  &.float-start {
+    margin-right: $cassiopeia-grid-gutter;
+  }
+  &.float-end {
+    margin-left: $cassiopeia-grid-gutter;
+  }
+}
+
+figcaption {
+  font-size: .9em;
+  color: $gray-600;
+}
+
+.mod-menu {
+  flex-direction: column;
+}
+
+// meter element
+meter {
+  width: 100%;
+}
+
+.pagenavigation,
+.pager {
+  clear: both;
+  .pagination {
+    justify-content: space-between;
+    padding: 0;
+    margin: $cassiopeia-grid-gutter 0;
+
+    .next:only-child {
+      margin-left: auto;
+    }
+  }
+}
+
+.page-link {
+  color: var(--#{$prefix}link-color);
+  &:hover {
+    color: var(--#{$prefix}link-color);
+  }
+}
+
+.pager {
+  .pagination {
+    justify-content: center;
+  }
+}
+
+[dir="rtl"] li.next .page-link {
+  border-top-left-radius: .25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: .25rem;
+}
+
+[dir="rtl"] li.previous .page-link {
+  border-top-left-radius: 0;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: 0;
+}
+
+.article-index {
+  .toclink.active {
+    color: currentColor;
+  }
+}
+
+// Bootstrap 4 b/c
+.sr-only {
+  @extend .visually-hidden;
+}