feat: APPS-1780 edits to Iiif guide (#1140)

* sketching out new material

* add more content

* update page

* update page

* update <br> tag

* update colors

* linting colors

* linting erb files

* delete duplicate selectors

* add word wrap

* fix stylelint and erblint

* delete unused styles on static pages and use it to change the h2 font on iiif_guide page

* fix heading size issue

* update with Dawn

* fix caption on Autograph album no. 4

* update photos

* update photos

* change margin

* fix style linting

* fix style linting

* fix style linting

* fix width of image when small

* fix html error in span

* fix steps

* image size

* update images

* linting

* update url

* update link

* update link

* move image

* stylelint

* stylelint

* fix figcaption at small

* fix figcaption at small

* add missing div to ursus_copyright.html.erb

* delete unused style

* delete unused file

* update static-page__subtitle on copyright page

* delete static-page__row--ursus out of all html files

app/assets/stylesheets/base/templates/_static-page.scss

@@ -1,16 +1,37 @@
-.static-page__row--ursus {
+.static-page__row {
   @extend .row;
+
+  padding: 1.5rem 0;
 }
 
-.static-page__subtitle--ursus {
+.static-page__subtitle {
   @extend .col-lg-4;
+
+  font-size: $text-20;
+  letter-spacing: 0.15rem;
+
+  @media (max-width: 991px) {
+    margin-bottom: 1rem;
+  }
 }
 
-.static-page__text--ursus {
+.static-page__text {
   @extend .col-lg-8;
+
+  margin-bottom: 1rem;
+  font-size: $text-18;
+  line-height: 2;
+
+  @media (max-width: 991px) {
+    font-size: $text-16;
+  }
 }
 
-.static-page__list--ursus {
+.static-page__list {
+  margin: 2rem;
+  font-size: $text-18;
+  line-height: 2;
+
   @media (max-width: 991px) {
     font-size: $text-16;
   }
@@ -38,29 +59,6 @@
   }
 }
 
-.static-page__row {
-  padding: 1.5rem 0;
-}
-
-.static-page__subtitle {
-  font-size: $text-20;
-  letter-spacing: 0.15rem;
-
-  @media (max-width: 991px) {
-    margin-bottom: 1rem;
-  }
-}
-
-.static-page__text {
-  margin-bottom: 1rem;
-  font-size: $text-18;
-  line-height: 2;
-
-  @media (max-width: 991px) {
-    font-size: $text-16;
-  }
-}
-
 .static_page__paragraph {
   margin: 2rem 0;
   font-size: $text-18;
@@ -96,13 +94,6 @@
   font-size: $text-14;
 }
 
-.static-page__list {
-  margin: 15px 50px 25px 25px;
-  padding-left: 24px;
-  font-size: $text-18;
-  line-height: 2;
-}
-
 .static-page__steps {
   border: 1px solid $ucla-darker-blue;
   border-radius: 5px;
@@ -116,3 +107,13 @@
 .static-page__image {
   width: 80%;
 }
+
+.static-page__iiif-guide_code {
+  font-size: $text-16;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', monospace;
+  overflow-wrap: break-word;
+
+  @media (max-width: 991px) {
+    font-size: 11px;
+  }
+}

app/assets/stylesheets/theme_ursus/pages/_ur-static-page.scss

@@ -1,106 +1,141 @@
-.static-page__row--ursus {
-  @extend .row;
+.content-container--static-page--ursus {
+  margin: 0 6rem;
+
+  @media (max-width: 991px) {
+    margin: 0;
+  }
 }
 
 .static-page__subtitle--ursus {
-  @extend .col-lg-4;
-}
+  font-size: $text-20;
+  letter-spacing: 0.15rem;
 
-.static-page__text--ursus {
-  @extend .col-lg-8;
+  @media (max-width: 991px) {
+    margin-bottom: 1rem;
+  }
 }
 
 .static-page__list--ursus {
+  font-size: 1.1rem;
+  line-height: 1.5em;
   @media (max-width: 991px) {
     font-size: $text-16;
   }
 }
 
-.content-container--static-page {
-  padding-bottom: 4rem;
-}
-
-.static-page__title-row {
-  display: inline-block;
-  margin-bottom: 1.5rem;
+.static-page__title--ursus {
+  font-size: $text-36;
+  font-weight: $font-bold;
 
   @media (max-width: 767px) {
-    margin-bottom: 1rem;
+    font-size: calc(80% + 0.875rem);
   }
 }
 
-.static-page__title {
-  font-size: $text-36;
-  font-weight: $font-bold;
+.static-page__hr_margins--ursus {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
 
-  @media (max-width: 767px) {
-    font-size: calc(100% + 0.875rem);
-  }
+.static-page_steps-container--ursus {
+  width: 100%;
 }
 
-.static-page__row {
-  padding: 1.5rem 0;
+.static-page__steps--ursus {
+  margin: 1.3rem -1rem 1.3rem 0.5rem;
+  padding: 0;
+  font-size: 1.1rem;
+  line-height: 1.5em;
+
+  @media (max-width: 991px) {
+    margin: 1.3rem;
+  }
 }
 
-.static-page__subtitle {
-  font-size: $text-20;
-  letter-spacing: 0.15rem;
+.static-page__image--ursus {
+  margin-top: -0.5rem;
+  margin-left: 50px;
+  width: 50%;
 
   @media (max-width: 991px) {
-    margin-bottom: 1rem;
+    width: 80%;
   }
 }
 
-.static-page__text {
-  margin-bottom: 1rem;
-  font-size: $text-18;
-  line-height: 2;
+.static-page__image_manifest_code--ursus {
+  width: 80%;
+}
+
+.static-page_fig-caption--ursus {
+  margin-left: 60px;
+  width: 50%;
 
   @media (max-width: 991px) {
-    font-size: $text-16;
+    width: 79%;
   }
 }
 
-.static_page__paragraph {
-  margin: 2rem 0;
-  font-size: $text-18;
-  line-height: 2;
+.static-page__responsive-iframe-container--ursus {
+  position: relative;
+  overflow: hidden;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+  width: 100%;
 
-  @media {
-    font-size: $text-16;
+  @media (max-width: 767px) {
+    margin-left: 20px;
+    width: 90%;
+    height: 600px;
   }
 }
 
-.static-page__list {
-  padding-left: 24px;
-  font-size: $text-18;
+.static-page__responsive-iframe--ursus {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.static-page__italic {
-  font-style: italic;
+.static-page__image_find--ursus {
+  width: 40%;
 }
 
-.static-page__bold {
-  font-weight: bold;
+.static-page__iiif-guide_p {
+  margin: 1.5rem;
+  font-size: 1.1rem;
+  line-height: 1.5em;
 }
 
-.static-page__top_bottom_margin {
-  margin: 2rem 0;
+.static-page__iiif-guide_code_blue--ursus {
+  color: #00f;
 }
 
-.static-page__bottom_margin {
-  margin-bottom: 50px;
+.static-page__iiif-guide_code_red--ursus {
+  color: #f00;
 }
 
-.static-page__hr_margins {
-  margin: 75px 0;
+.static-page__iiif-guide_code_blueviolet--ursus {
+  color: #8a2be2;
 }
 
-.static-page__iiif-guide_p {
-  line-height: 1.7;
-  margin: 1rem;
+.static-page__iiif-guide_code_forestgreen--ursus {
+  color: #228b22;
+}
+
+.static-page__iiif-guide_code_goldenrod--ursus {
+  color: #daa520;
+}
+
+.static-page__iiif-guide_code_hotpink--ursus {
+  color: #ff69b4;
+}
+
+.static-page__iiif-guide_code_coral--ursus {
+  color: #ff7f50;
 }
 
-.static-page__subtitle--iiif-guide {
-  @extend .col-lg-8;
+.static-page__iiif-guide_code_dodgerblue--ursus {
+  color: #1e90ff;
 }

app/views/static/ursus_about.html.erb

@@ -4,8 +4,8 @@
   </div>
 
 <!-- OUR MISSION -->
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.about.mission').upcase %>
     </div>
     <div class='static-page__text static-page__text--ursus'>

app/views/static/ursus_contact.html.erb

@@ -3,8 +3,8 @@
     <h1 class='static-page__title bordered-title bordered-title--ursus'><%= t('static_pages.contact.page_title') %></h1>
   </div>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.contact.collection_inquires').upcase %>
     </div>
     <div class='static-page__text static-page__text--ursus'>
@@ -14,8 +14,8 @@
 
   <hr class='divider divider--ursus'>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.contact.special_collections').upcase %>
     </div>
     <div class='static-page__text static-page__text--ursus'>
@@ -25,8 +25,8 @@
 
   <hr class='divider divider--ursus'>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.contact.not_working').upcase %>
     </div>
     <div class='static-page__text static-page__text--ursus'>

app/views/static/ursus_copyright.html.erb

@@ -3,26 +3,26 @@
     <h1 class='static-page__title bordered-title bordered-title--ursus'><%= t('static_pages.copyright_and_collections.page_title') %></h1>
   </div>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.copyright_and_collections.permission_to_publish').upcase %>
     </div>
       <div class='static-page__text static-page__text--ursus'>
-      The UCLA Digital Library does not handle requests for reproductions or permissions to publish. All requests for reproductions or permissions to publish should be directed to the item's holding repository. In most cases, the owning repository is the UCLA Library Special Collections unit. Users can find information on requesting reproductions, as well as the "Request to Publish Form" on the "<a href="https://www.library.ucla.edu/about/policies/lsc-duplication-and-copyright-policies/ " class="ur-link">Special Collections Reproductions</a>" page, or you can email [email protected].
+        The UCLA Digital Library does not handle requests for reproductions or permissions to publish. All requests for reproductions or permissions to publish should be directed to the item's holding repository. In most cases, the owning repository is the UCLA Library Special Collections unit. Users can find information on requesting reproductions, as well as the "Request to Publish Form" on the "<a href="https://www.library.ucla.edu/about/policies/lsc-duplication-and-copyright-policies/ " class="ur-link">Special Collections Reproductions</a>" page, or you can email [email protected].
       </div>
   </div>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.copyright_and_collections.copyright_statement').upcase %>
     </div>
       <div class='static-page__text static-page__text--ursus'>
         Materials in this collection may be protected by domestic and/or international copyright and property laws. Distribution or reproduction of copyrighted materials beyond that allowed by fair use requires the written permission of the copyright owners. To the extent that restrictions other than copyright apply, permission for distribution or reproduction from the applicable rights holder is also required. Responsibility for obtaining permission, and for any use, rests exclusively with the user.
       </div>
   </div>
 
-  <div class='static-page__row static-page__row--ursus'>
-    <div class='static-page__subtitle static-page__subtitle--ursus'>
+  <div class='static-page__row'>
+    <div class='static-page__subtitle'>
       <%= t('static_pages.copyright_and_collections.opt_out_procedure').upcase %>
     </div>
       <div class='static-page__text static-page__text--ursus'>
@@ -31,3 +31,4 @@
         If your material has been included in our digital collections, you can request that we limit its public access. We ask that you consider this option very carefully. Should you decide that your content should be removed from our pages, we will continue to preserve it. For more information, contact: [email protected].
       </div>
   </div>
+</div>