diff --git a/app/assets/stylesheets/partials/_buttons.scss b/app/assets/stylesheets/partials/_buttons.scss index a3181f55..c0e104e0 100644 --- a/app/assets/stylesheets/partials/_buttons.scss +++ b/app/assets/stylesheets/partials/_buttons.scss @@ -11,5 +11,6 @@ &:hover { background-color: $color-blue-25; + color: $color-blue-500; } } \ No newline at end of file diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss index a55e6ae8..79e31b32 100644 --- a/app/assets/stylesheets/partials/_results.scss +++ b/app/assets/stylesheets/partials/_results.scss @@ -47,6 +47,7 @@ .results-list.use { list-style-type: none; padding: 0; + margin-bottom: 0; } // -------------------------------------- @@ -139,10 +140,19 @@ // -------------------------------------- .result.use, .result.primo { - margin-bottom: 48px; - padding: 0; + padding: 48px 0; + margin: 0; + border-bottom: 1px solid $color-gray-400; border-top: none; + + &:first-child { + padding-top: 0; + } + &:last-child { + border-bottom: none; + } + &:hover, &:focus { background-color: transparent; @@ -169,25 +179,71 @@ .pub-info { font-size: $fs-base; - color: $color-text-secondary; - span:first-child:after { - content: " • "; - color: $color-text-disabled; + + span { + &::before, &:last-child::before { + content: " • "; + color: $color-text-disabled; + } + + &:first-child::before { + content: " "; + } + + // Override the default separator + &::after, &:first-child::after { + content: " "; + } + } + margin-bottom: 1em; margin-top: 0; } + .result-subjects, .result-summary, .result-container { + font-size: 1.4rem; + margin-bottom: 8px; + color: $color-text-secondary; + } + + .result-subjects { + color: $color-text-secondary; + + ul { + line-clamp: 1; + -webkit-line-clamp: 1; + + li { + margin-bottom: 0; + + &::after { + content: " • "; + color: $color-text-disabled; + } + + &:last-child::after { + content: " "; + } + + } + } + + } + .result-highlights.use { margin-top: 0; + h4, strong {font-weight: $fw-medium;} + ul { list-style: disc outside; padding-left: 16px; + margin-bottom: 0; li { margin-left: 0.6rem; - font-size: 1.6rem; + font-size: 1.4rem; } } } @@ -196,62 +252,62 @@ background-color: $color-highlight; } - &.use, &.primo { - .result-metadata { - margin-bottom: 16px; - } + .result-metadata { + margin-bottom: 16px; + } - .pub-info { - margin-bottom: 4px; - } + .pub-info { + margin-bottom: 4px; + } - ul.contributors { - li { - font-weight: $fw-normal; + ul.contributors { + line-clamp: 1; + -webkit-line-clamp: 1; + margin-bottom: 12px; - a { - color: $color-text-secondary; - text-decoration: none; + li { + font-weight: $fw-normal; - &:hover { - text-decoration: underline; - } + a { + text-decoration: none; + + &:hover { + text-decoration: underline; } } } + } - .inner-heading { - font-size: 1.6rem; - font-family: $base-font; // Since we're using 16px, override to use body font - } - - .result-get { - display: flex; - align-items: center; - gap: 24px; - } - - // Make result buttons present as underlined links - a.button { - @include underlinedLinks; - font-weight: $fw-medium; - font-size: 1.6rem; - } + .inner-heading { + font-size: 1.6rem; + font-family: $base-font; // Since we're using 16px, override to use body font + } - // Except the first button, which should present as a secondary button - .result-get > a.button:first-child { - @include buttonSecondary; - } + .result-get { + display: flex; + align-items: center; + gap: 24px; + } - // Loading skeleton when a button isn't available - span.skeleton-loader { - @include skeleton-loader(112px); - } + // Make result buttons present as underlined links + a.button { + @include underlinedLinks; + font-weight: $fw-medium; + font-size: 1.6rem; + } - .truncate-list li:last-child {margin-bottom: 0;} + // Except the first button, which should present as a secondary button + .result-get > a.button:first-child { + @include buttonSecondary; + } + // Loading skeleton when a button isn't available + span.skeleton-loader { + @include skeleton-loader(112px); } + .truncate-list li:last-child {margin-bottom: 0;} + .availability { color: $color-text-secondary; @@ -300,7 +356,7 @@ .results-context-description { color: $color-text-secondary; - margin-bottom: 32px; + margin-bottom: 40px; } #results-section { diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss index f5afcba4..36c0dfc0 100644 --- a/app/assets/stylesheets/partials/_search.scss +++ b/app/assets/stylesheets/partials/_search.scss @@ -218,6 +218,11 @@ margin: 0; max-width: 760px; padding: 3.5rem 0 2rem; + + a { + @include underlinedLinks; + font-weight: $fw-medium; + } } /* primo continuation partial */ diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss index a55167eb..0b2e56b0 100644 --- a/app/assets/stylesheets/partials/_variables.scss +++ b/app/assets/stylesheets/partials/_variables.scss @@ -9,7 +9,8 @@ $color-gray-100: #F2F2F2; $color-gray-200: #e6e6e6; $color-gray-300: #ccc; $color-gray-400: #b3b3b3; -$color-gray-500: #999 ; +$color-gray-500: #999; +$color-gray-600: #808080; $color-gray-700: #666; $color-gray-900: #333; $color-gray-950: #1a1a1a; diff --git a/app/views/search/_highlights.html.erb b/app/views/search/_highlights.html.erb index cf928578..50a5c03c 100644 --- a/app/views/search/_highlights.html.erb +++ b/app/views/search/_highlights.html.erb @@ -1,7 +1,7 @@ <% highlights = trim_highlights(result) %> <% return unless highlights&.any? %> -

See full record for all matches to your search terms:

+

Search term found in: