udt-itf-theme 0.1.0

data/_sass/iiifc-theme/api-spec.scss

@@ -0,0 +1,180 @@
+.api-sidebar-container {
+  background-color: $light-blue;
+  padding-left: 3.5rem;
+  padding-right: 0;
+  margin-bottom: 0.75rem;
+  .menu {
+    padding: 3rem 3.5rem 2.5rem 0;
+  }
+  a {
+  color: $dark-blue;
+  }
+}
+
+#toc-menu {
+  .menu-list {
+    font-family: $family-sans-serif;
+    a {
+      color: $greyish-brown;
+    }
+  }
+}
+
+.toc-sidebar {
+  font-family: $family-serif;
+  font-weight: bold;
+
+  li {
+    font-size: 1.15rem;
+  }
+  a:hover {
+    color: $blue;
+  }
+  a:active {
+    border-left: $blue;
+  }
+  .toc-submenu-2{
+    font-weight: normal;
+  }
+}
+
+.copy-button {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-column-gap: 4px;
+  margin: 1em 1em 0 0;
+  cursor: pointer;
+
+  &::before {
+    content: "Copy";
+  }
+
+  &::after {
+    content: "📋";
+    display: block;
+  }
+
+  // This class will be toggled via JavaScript
+  &.copied {
+    &::before {
+      content: "Copied!";
+    }
+
+    &::after {
+      content: "✔️";
+    }
+  }
+}
+
+.api-content {
+  padding: 3.5rem;
+  max-width: 100% !important;
+  margin: unset !important;
+  p,
+  li,
+  .code-header,
+  .highlight {
+    max-width: $content-max-width;
+    font-size: 1.1rem;
+  }
+  table {
+    border-collapse: collapse;
+    display: block;
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+    overflow-x: auto;
+    td {
+      border: solid 1px $black;
+      border-style: inset;
+      background-color: $white;
+    }
+    thead {
+      background-color: $light-bluer;
+      color: $dark-blue;
+      font-size: 1rem;
+      font-family: $family-serif;
+      th {
+        border: solid 1px $black;
+        border-style: inset;
+      }
+    }
+    tbody tr:last-child td,
+    .content table tbody tr:last-child th {
+      border-bottom-width: 1px;
+    }
+  }
+  .rfc {
+    color: $red;
+    font-variant: small-caps;
+    font-style: normal;
+    font-size: 1.2em;
+    line-height: 0.8333;
+  }
+  .warning {
+    border-left: 4px solid #E05252;
+    background: #fbe9e9;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    padding-right: 24px;
+  }
+
+  .alert, .note {
+    border-left: 4px solid #E0CB52;
+    background: #FCFAEE;
+    padding-top: 5px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    padding-right: 24px;
+  }
+}
+
+code.language-plaintext {
+  padding: 0.2em 0.15em;
+  font-weight: 400;
+  background-color: $grey;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  font-size: 0.8em;
+  line-height: 2;
+  color: $black;
+  font-family: "Courier Prime", monospace;
+}
+
+pre.highlight {
+  background-color: $black;
+  color: $white;
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
+  margin: 0 0 1em 0;
+
+  white-space: pre-wrap;       /* Since CSS 2.1 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+
+  code {
+    font-family: "Courier Prime", monospace;
+    font-size: 1rem;
+  }
+}
+
+.code-header {
+  display: flex;
+  justify-content: flex-end;
+  background-color: $black;
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em;
+}
+
+.anchorClass {
+  content: url("../../assets/images/icons/link.png");
+  width: 0.95em;
+  display: none;
+}
+
+h2:hover .anchorClass, h3:hover .anchorClass, h4:hover .anchorClass, h5:hover .anchorClass  {
+  display: inline-block;
+}

data/_sass/iiifc-theme/base.scss

@@ -0,0 +1,317 @@
+@charset "utf-8";
+
+@import "fonts";
+@import "vars";
+@import "bulma-base";
+
+@import "api-spec";
+@import "carousel";
+@import "helpers";
+@import "syntax";
+@import "typography";
+
+html, body {
+  scroll-behavior: smooth;
+  background-color: $white;
+}
+
+.container {
+  width: 100%;
+  margin: 0px auto;
+}
+
+.content {
+  max-width: $content-max-width;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.brand-title {
+  width: 195px;
+  height: 30px;
+  margin: 0 0 0 1rem;
+  font-family: "Playfair Display";
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1.15;
+  letter-spacing: normal;
+  color: $white;
+  &:hover {
+    background-color: none !important;
+  }
+}
+
+.hero {
+  // margin-bottom: .75rem;
+  .title {
+    font-family: $family-serif;
+    color: $white !important;
+    margin: 1rem auto 2rem auto;
+    max-width: $content-max-width;
+  }
+  .subtitle {
+    text-align: center;
+    color: $white !important;
+    max-width: $content-max-width;
+  }
+  .hero-meta {
+    font-family: $family-serif;
+    font-size: 1rem !important;
+    // margin: 2.5rem auto;
+  }
+  .hero-body {
+    padding: 3.5rem;
+  }
+}
+
+#navbar {
+  font-family: $family-serif;
+  font-weight: bold;
+  font-size: 1.1em;
+  .hero.is-info,
+  .navbar-link,
+  .hero.is-info {
+    color: $white;
+  }
+  a.navbar-item {
+    color: $white;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 5px;
+    text-decoration-color: transparent;
+    &:hover {
+      text-decoration-color: $white;
+    }
+  }
+  .navbar-brand {
+    .navbar-item {
+      text-decoration: none;
+      background-color: unset;
+      &:hover{
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+#main {
+  font-family: $family-sans-serif;
+  min-height: 50vh;
+
+  .container-block {
+    margin: 0 auto;
+    padding: 2.75rem;
+  }
+  .container-block:nth-child(even):not(:only-child) {
+    background-color: $light-blue;
+  }
+  .hover-box {
+    transition: transform .3s;
+    &:hover,
+    &:focus {
+      transform: scale3d(1.05, 1.05, 1);
+    }
+  }
+}
+
+#footer {
+  background-color: $grey;
+  color: $black;
+  .menu-column {
+    font-family: $family-serif;
+    font-size: $size-7;
+    line-height: 24px;
+    font-weight: bold;
+    h4 {
+      color: $dark-blue !important;
+      margin-bottom: 1em;
+      font-weight: bold;
+    }
+    a {
+      color: #006eb0;
+    }
+  }
+}
+
+.button {
+  font-family: "Playfair Display", serif;
+  font-weight: bold;
+}
+
+.breadcrumb {
+  font-family: $family-serif;
+  font-weight: bold;
+  a {
+    border-bottom: 2px solid transparent;
+    padding: 0;
+    &:hover {
+      border-bottom: 2px solid $white;
+    }
+  }
+}
+
+.same-height-column {
+  display: flex;
+  width: 100%;
+}
+
+.iiif-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+
+  .title {
+    @include heading;
+    font-size: 1.25rem;
+  }
+
+  .subtitle {
+    font-size: 1em;
+    margin-top: unset !important;
+  }
+
+  img {
+    display: block;
+    margin: 1rem auto;
+  }
+
+  img.iiif-icon {
+    max-height: 2rem;
+    width: auto;
+  }
+
+  footer {
+    font-family:'Playfair Display';
+    p {
+      margin: 0 auto;
+      font-weight: bold;
+    }
+  }
+}
+
+.lg-icon {
+  height: 3rem;
+  width: auto;
+}
+
+p.inline-icon {
+  display: inline;
+  margin: 0 0.125em;
+  padding: 0;
+  vertical-align: baseline;
+  height: 0.75em;
+}
+
+.event-card {
+  padding: 0;
+  width: 100%;
+
+  .date-block-container {
+    height: 100%;
+    .date-block {
+      background-color: $navy;
+      height:100%;
+      border-radius: unset;
+      border-bottom-left-radius: 8px;
+      border-top-left-radius: 8px;
+      .date-month {
+        text-transform: uppercase;
+        font-family: $family-serif;
+        color: $white;
+      }
+      .date-num {
+        font-family: $family-sans-serif;
+        color: $white;
+      }
+    }
+  }
+  .event-info {
+    font-family: $family-serif-alt;
+    color: $greyish-brown;
+  }
+}
+
+
+.iiif-notification {
+  background-color: $red;
+  margin-bottom: 0 !important;
+  border-radius: 0;
+
+
+  .delete {
+    float:right;
+  }
+
+  .message-header {
+    background-color: $red;
+    padding: 1.5rem 0;
+    max-width: 780px;
+    margin: 0 auto;
+
+    .title {
+      color: $white;
+      font-size: 1.25rem;
+      font-family: $family-serif;
+    }
+
+    .subtitle {
+      color: $white;
+      font-size: 1rem;
+      font-family: $family-sans-serif;
+    }
+  }
+}
+
+.tabs ul {
+  border-bottom: none;
+}
+
+hr {
+  background-color: $grey;
+}
+
+.center-cropped-demo {
+  object-fit: cover;
+  object-position: center;
+  height: 150px;
+  width: 100%;
+}
+
+.logo-grid {
+  .inline-logo {
+    max-width: 175px;
+    max-height: 125px;
+  }
+}
+
+.caption {
+  font-size: .8rem;
+  color: $caption-grey;
+  text-align: left;
+  font-style: normal !important;
+}
+.inline-image {
+  max-width: 42%;
+}
+
+
+.news-title {
+  margin-bottom: unset;
+}
+
+.news-info {
+  padding: .5rem;
+  margin: auto;
+  width: 78%;
+}
+
+.excerpt {
+  margin: 1rem auto .5em auto !important;
+  font-size: .9rem;
+}
+
+
+footer a.navbar-item {
+  padding: 0.5rem 0rem;
+}

data/_sass/iiifc-theme/bulma-base.scss

@@ -0,0 +1,15 @@
+@import "node_modules/bulma/sass/utilities/_all.sass";
+@import "node_modules/bulma/sass/base/_all.sass";
+@import "node_modules/bulma/sass/components/_all.sass";
+@import "node_modules/bulma/sass/grid/_all.sass";
+@import "node_modules/bulma/sass/helpers/_all.sass";
+@import "node_modules/bulma/sass/layout/_all.sass";
+@import "node_modules/bulma/sass/form/_all.sass";
+
+@import "node_modules/bulma/sass/elements/box.sass";
+@import "node_modules/bulma/sass/elements/button.sass";
+@import "node_modules/bulma/sass/elements/container.sass";
+@import "node_modules/bulma/sass/elements/content.sass";
+@import "node_modules/bulma/sass/elements/other.sass";
+@import "node_modules/bulma/sass/elements/notification.sass";
+@import "node_modules/bulma/sass/elements/title.sass";

data/_sass/iiifc-theme/carousel.scss

@@ -0,0 +1,47 @@
+@import "node_modules/slick-carousel-no-fonts/slick/slick.scss";
+@import "node_modules/slick-carousel-no-fonts/slick/slick-theme.scss";
+
+.slick-dots button::before {
+  font-size: 2rem !important;
+  padding-top: 1rem;
+}
+
+div.slick-list {
+  margin: 0 40px;
+}
+
+div.slider-arrow {
+  position: absolute;
+  top: 50%;
+  height: 36px;
+  margin-top: -36px;
+  line-height: 36px;
+  color: $blue;
+  font-size: 2rem;
+  cursor: pointer;
+  z-index: 10;
+}
+div.slider-arrow:hover {
+  color: $dark-blue;
+}
+div.slider-prev {
+  left: 0;
+}
+div.slider-next {
+  right: 0;
+}
+.carousel-resource {
+  width: 100%;
+  height: 60vh;
+  background: #d8d8d8;
+  background-image: linear-gradient(to bottom, #edf0f0, #d8d8d8);
+  border: 1px solid transparent;
+  border-top: none;
+  border-bottom: 1px solid #DDD;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
+}
+.carousel-resource img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}

data/_sass/iiifc-theme/fonts.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap');

data/_sass/iiifc-theme/helpers.scss

@@ -0,0 +1,43 @@
+.float-right {
+  float: right;
+  margin-right: 0 !important;
+}
+
+.float-left {
+  float: left;
+  margin-left: 0 !important;
+}
+
+.has-text-centered {
+  p {
+    text-align: center;
+    margin: .5em auto 2em auto;
+  }
+}
+
+.has-text-justified p {
+  text-align: justify !important;
+}
+
+.has-text-left p {
+  text-align: left !important;
+}
+
+.has-text-right p {
+  text-align: right !important;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.margin-unset {
+  margin: unset !important;
+}
+
+.sticky {
+  max-height: 95vh;
+  overflow-x: scroll;
+	position: sticky;
+  top: 1rem;
+}

data/_sass/iiifc-theme/syntax.scss

@@ -0,0 +1,65 @@
+.highlight pre { background-color: $black; }
+.highlight .hll { background-color: $black; }
+.highlight .c { color: #75715e } /* Comment */
+.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+.highlight .k { color: #66d9ef } /* Keyword */
+.highlight .l { color: #ae81ff } /* Literal */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #f92672 } /* Operator */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .cm { color: #75715e } /* Comment.Multiline */
+.highlight .cp { color: #75715e } /* Comment.Preproc */
+.highlight .c1 { color: #75715e } /* Comment.Single */
+.highlight .cs { color: #75715e } /* Comment.Special */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight .kn { color: #f92672 } /* Keyword.Namespace */
+.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight .kt { color: #66d9ef } /* Keyword.Type */
+.highlight .ld { color: #e6db74 } /* Literal.Date */
+.highlight .m { color: #ae81ff } /* Literal.Number */
+.highlight .s { color: #e6db74 } /* Literal.String */
+.highlight .na { color: #a6e22e } /* Name.Attribute */
+.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight .nc { color: #a6e22e } /* Name.Class */
+.highlight .no { color: #66d9ef } /* Name.Constant */
+.highlight .nd { color: #a6e22e } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #a6e22e } /* Name.Exception */
+.highlight .nf { color: #a6e22e } /* Name.Function */
+.highlight .nl { color: #f8f8f2 } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #a6e22e } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #f92672 } /* Name.Tag */
+.highlight .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight .ow { color: #f92672 } /* Operator.Word */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight .se { color: #ae81ff } /* Literal.String.Escape */
+.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+.highlight .gh { } /* Generic Heading & Diff Header */
+.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */

data/_sass/iiifc-theme/typography.scss

@@ -0,0 +1,41 @@
+@mixin heading {
+  font-family: $family-serif;
+  color: $dark-blue;
+  font-weight: bolder;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  @include heading;
+}
+
+p {
+  max-width: $content-max-width;
+}
+
+h1 {
+  font-size: 2.375rem;
+}
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1.75rem;
+}
+h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.blue-text {
+  color: #006eb0 !important;
+}
+
+.sans-serif {
+  font-family: $family-sans-serif !important;
+}
+
+.serif {
+  font-family: $family-serif !important;
+}