borders

css/base/variables.css

@@ -18,7 +18,8 @@
   /* --font-serif: "Lora", "georgia", serif; */
   --font-sans: var(--font-im-fell);
   --font-serif: var(--font-im-fell-sc);
-
+  --border-light: #ddd;
+  --border-dark: #bbb;
   /* Typography helpers. */
   --font-size-base: 1rem;
   --font-size-l: 1.125rem;

css/components/block.css

@@ -29,4 +29,5 @@
   background: #ece8e3;
   padding: 1rem;
   border-radius: 5px;
+  border: 1px solid var(--border-dark);
 }

css/components/form-select.css

@@ -21,7 +21,8 @@ select {
   padding-inline-start: var(--sp);
   padding-inline-end: var(--sp3);
   color: var(--color-text-neutral-loud);
-  border: 1px solid var(--color--gray-60);
+  /* border: 1px solid var(--color--gray-60); */
+  border: 1px solid var(--border-dark);
   border-radius: var(--border-radius);
   background-color: var(--color--white);
   background-image: var(--form-element-select-icon);

css/components/form-text.css

@@ -30,7 +30,8 @@ textarea {
   min-height: var(--sp2);
   padding: 0 var(--sp);
   color: var(--color-text-neutral-loud);
-  border: 1px solid var(--color--gray-60);
+  /* border: 1px solid var(--color--gray-60); */
+  border: 1px solid var(--border-dark);
   border-radius: var(--border-radius);
   background-color: var(--color--white);
   font-family: inherit;
@@ -39,13 +40,45 @@ textarea {
   appearance: none;
 }
 
-:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  ):focus {
   border: solid 2px var(--color--primary-50);
   outline: solid 2px var(--color--primary-50);
 }
 
 @supports (outline-style: double) {
-  :is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+  :is(
+      [type="color"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="email"],
+      [type="file"],
+      [type="month"],
+      [type="number"],
+      [type="password"],
+      [type="search"],
+      [type="tel"],
+      [type="text"],
+      [type="time"],
+      [type="url"],
+      [type="week"],
+      textarea
+    ):focus {
     border-width: 1px;
     outline-width: 6px;
     outline-style: double;
@@ -53,25 +86,107 @@ textarea {
   }
 }
 
-[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+[disabled]:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  ) {
   color: var(--color--gray-60);
   background-color: var(--color--gray-100);
 }
 
-.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+.error:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  ) {
   border: solid 2px var(--color--red);
 }
 
-.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+.error:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  ):focus {
   outline-color: var(--color--red);
   outline-offset: -2px;
 }
 
-.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main {
+.error:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  )
+  + .ck-editor
+  > .ck-editor__main {
   border: solid 2px var(--color--red);
 }
 
-.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+.form-element--small:is(
+    [type="color"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="email"],
+    [type="file"],
+    [type="month"],
+    [type="number"],
+    [type="password"],
+    [type="search"],
+    [type="tel"],
+    [type="text"],
+    [type="time"],
+    [type="url"],
+    [type="week"],
+    textarea
+  ) {
   min-height: var(--sp2-5);
 }
 

css/components/form-textarea.css

@@ -17,5 +17,5 @@ textarea {
   padding: var(--sp);
 }
 .region--sidebar input.form-text {
-    width: 14em;
+  max-width: 12em;
 }

css/components/islandora_mods.css

@@ -94,6 +94,9 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage {
   }
 }
 /* People objects/nodes */
+.views-view-grid__item {
+  display: flex;
+}
 .person--layout {
   float: left;
 }
@@ -121,7 +124,7 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage {
     margin: 0;
   }
   input.form-text {
-    width: 400px;
+    max-width: 400px;
     font-size: 1.2rem;
     padding: 0.5rem;
     /* box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08); */
@@ -138,6 +141,7 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage {
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0px 5px 11px -2px rgb(0 0 0 / 39%);
+  width: 100%;
   .views-field-did-image,
   .field--type-image {
     height: 230px;
@@ -177,3 +181,9 @@ nav.pager {
 .search-result.views-row {
   min-width: 0;
 }
+.social-bar {
+  border-right: 1px solid #ddd;
+}
+div#page {
+  border-right: 1px solid #ddd;
+}

css/components/pager.css

@@ -10,8 +10,9 @@
  * Styles for pagination.
  */
 
-#block-olivesbooks-solrsearchcontentsearchresultspagerforcollectionmembers .pager__group {
+#block-olivesbooks-solrsearchcontentsearchresultspagerforcollectionmembers
-    justify-content: space-around;
+  .pager__group {
+  justify-content: space-around;
 }
 .pager__items {
   display: flex;
@@ -71,7 +72,10 @@
 }
 
 .pager__link:hover {
-  background-color: var(--color--gray-95);
+  /* background-color: var(--color--gray-95); */
+
+  border: solid 2px #39481e;
+  border-radius: 4px;
 }
 
 .pager__link:focus {
@@ -89,3 +93,16 @@
 .pager__item--last svg {
   transform: rotate(180deg);
 }
+/* Pager tweaks */
+.pager__link--is-active {
+  text-decoration: underline !important;
+  border: solid 2px #39481e;
+  border-radius: 4px;
+}
+.pager__item {
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+}
+span#override-default-display-mode {
+  display: none;
+}

css/components/tabs.css

@@ -9,16 +9,24 @@
   --tabs-height: var(--sp3);
   --tabs-padding-inline: var(--sp1-5);
   --tabs-active-border-size: 0.375rem;
-  --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+  --tabs-highlight-color: var(
-  --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+    --color--primary-50
-  --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+  ); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+  --tabs-text-color: var(
+    --color-text-neutral-soft
+  ); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+  --tabs-text-color-active: var(
+    --color--gray-5
+  ); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
   --tabs-letter-spacing: 1px;
   --tabs-font-size: var(--font-size-s);
   --tabs-background-color: var(--color--gray-100);
   --tabs-background-color-hover: var(--color--gray-95);
   --tabs-border-width: 1px;
   --tabs-border-color: var(--color--gray-95);
+  --tabs-border-color: var(--border-light);
   --tabs-transition-duration: 0.2s;
+  font-family: var(--font-serif);
 
   display: flex;
   flex-direction: column;
@@ -107,14 +115,16 @@ html:not(.js) .tabs__tab {
   inset-inline-start: calc(-1 * var(--tabs-border-width));
   height: calc(100% + var(--tabs-border-width) * 2);
   content: "";
-  border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+  border-inline-start: var(--tabs-active-border-size) solid
+    var(--tabs-highlight-color);
 }
 @media (min-width: 43.75rem) {
   .tabs__link.is-active::after {
     inset-block: auto calc(-1 * var(--tabs-border-width));
     width: calc(100% + 2 * var(--tabs-border-width));
     height: 0;
-    border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+    border-block-start: var(--tabs-active-border-size) solid
+      var(--tabs-highlight-color);
     border-inline-start: 0;
   }
 }
@@ -166,26 +176,30 @@ html:not(.js) .tabs__trigger {
   inset-inline-start: 0;
   display: block;
   width: 100%;
-  transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+  transition: transform var(--tabs-transition-duration),
+    opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
   border-block-start: solid 2px var(--tabs-highlight-color);
 }
 .tabs__trigger-icon > span:nth-child(1) {
   inset-block-start: 0;
 }
-.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
+.tabs__trigger[aria-expanded="true"]
+  :is(.tabs__trigger-icon > span:nth-child(1)) {
   inset-block-start: calc(50% + 1px);
   transform: rotate(45deg);
 }
 .tabs__trigger-icon > span:nth-child(2) {
   inset-block-start: calc(50% + 1px);
 }
-.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
+.tabs__trigger[aria-expanded="true"]
+  :is(.tabs__trigger-icon > span:nth-child(2)) {
   opacity: 0;
 }
 .tabs__trigger-icon > span:nth-child(3) {
   inset-block-start: calc(100% + 2px);
 }
-.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
+.tabs__trigger[aria-expanded="true"]
+  :is(.tabs__trigger-icon > span:nth-child(3)) {
   inset-block-start: calc(50% + 1px);
   transform: rotate(-45deg);
 }