html: break out most CSS into separate file

The quantity of CSS has grown a lot and bundling in every request
doesn't seem like the correct thing any more.

2 files changed, 234 insertions, 232 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
new file mode 100644
index 0000000..5f63e6c
--- /dev/null
+++ b/fatcat_scholar/static/scholar.css
@@ -0,0 +1,231 @@
+a {
+    /* accessibility/contrast */
+    color: #28629c;
+}
+.ui.basic.blue.label {
+    color: #28629c!important;
+    border-color: #28629c!important;
+}
+.ui.basic.orange.label {
+    color: #c54e00!important;
+    border-color: #c54e00!important;
+}
+.ui.card .meta, .ui.cards>.card .meta {
+    color: rgba(0,0,0,0.55);
+}
+
+/* bnewbold: fix light grey bars in header, and "rounded" header */
+nav.ui.inverted.menu .item:before { background: none; }
+nav.ui.menu { border-radius: 0; }
+
+.ui.button.serp-button {
+    border-radius: 0;
+    margin-bottom: 0.4em;
+    text-align: left;
+}
+
+.ui.blue.button.serp-button {
+    background-color: #6b6ebb;
+}
+
+.ui.labeled.icon.button.serp-button {
+    padding-left: 3.0em!important;
+    padding-right: 1em!important;
+    width: 14em;
+    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
+}
+
+.ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail {
+    left: calc(-100% + 0.3em);
+    margin-top: -2.4em;
+    background-color: black;
+    min-width: 186px;
+    border: 3px solid black;
+    border-bottom: 0;
+    box-shadow: none;
+}
+
+.ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail:after {
+    z-index: -1;
+    background-color: black;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: center;
+    column-gap: 0.3em;
+    min-width: 14em;
+    max-width: 15em;
+}
+
+@media only screen and (max-width: 767px) {
+    .mobile-hide { display: none !important; }
+    .ui.items>.item>.image:not(.ui) { width: auto };
+}
+@media only screen and (min-width: 768px) {
+    .mobile-only { display: none !important; }
+}
+@media only screen and (max-width: 991px) {
+    .tablet-hide { display: none !important; }
+    .ui.items>.item>.image:not(.ui) { width: auto };
+    .ui.grid>[class*="fourteen wide"].column.serp-column {
+    width: 100% !important;
+    box-shadow: none !important;
+    }
+}
+@media only screen and (min-width: 992px) {
+    .tablet-only { display: none !important; }
+}
+@media only screen and (min-width: 1200px) {
+    .ui.container {
+    font-size: 16px;
+    line-height: 20px;
+    }
+    div.fulltext-link {
+    width: 180px;
+    }
+    div.biblio-record {
+    padding-left: 1.1em;
+    }
+}
+
+.ui.serp.card {
+    max-width: 180px;
+    margin-bottom: 0.2em;
+    border-radius: 0;
+}
+.hit-count {
+    font-weight: bold;
+    line-height: 1.28571429em;
+}
+
+.biblio-record .biblio-title {
+    margin-bottom: 0.1em;
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: 1.2em;
+}
+.biblio-record .biblio-title a {
+    color: #2224c7;
+}
+.biblio-record .release-type {
+    text-transform: uppercase;
+    font-weight: bold;
+}
+.biblio-record .original-title {
+    font-style: italic;
+    font-weight: normal;
+}
+.biblio-record .author-row {
+    margin-top: 0;
+    margin-bottom: 0.2em;
+    font-size: 1.1em;
+}
+.biblio-record .release-stage {
+    color: brown;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.biblio-record details > summary {
+    list-style-type: none;
+    color: #28629c;
+    text-decoration: underline;
+    margin-left: 0.3em;
+}
+.biblio-record details > summary::-webkit-details-marker {
+    display: none;
+}
+
+/* for fulltext search result highlighting */
+.search_highlights em {
+    {# yellow #}
+    {# background-color: #FFFFBB; #}
+    font-style: normal;
+    font-weight: bold;
+}
+
+.search_filters summary::marker {
+    display: none;
+}
+.search_filters summary::-webkit-details-marker {
+    display: none;
+}
+
+footer p a {
+    color: rgba(255, 255, 255, 0.5);
+}
+footer p a:hover {
+    color: rgba(255, 255, 255, 1.0);
+    opacity: 1.0;
+}
+
+.ui.label.small {
+    border-radius: 0;
+}
+
+a:hover .ui.card {
+    opacity: 0.75;
+}
+
+.text-button {
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+details.access-options summary {
+    text-decoration: none;
+    color: inherit;
+}
+details.access-options .menu {
+    margin: 0.5em;
+    margin-top: 1.5em;
+    width: auto;
+}
+details.access-options .meta {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+}
+
+details.serp-action-menu[open] > summary .ui.basic.button {
+    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
+    background: #f8f8f8!important;
+}
+details.serp-action-menu > summary {
+    list-style: none;
+}
+details.serp-action-menu > summary::-webkit-details-marker {
+    display: none;
+}
+details.serp-action-menu > .citation-menu {
+    min-width: 50em;
+    height: auto;
+    position: absolute;
+    display: block;
+    background: #fff;
+    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
+    border: 1px solid rgba(34,36,38,.15);
+    z-index: 11;
+    min-width: 30em;
+    border-radius: .28571429rem;
+    right: 50%;
+    margin-top: -2em;
+    margin-right: 1.5em;
+    padding: 1em;
+}
+@media only screen and (max-width: 767px) {
+    details.serp-action-menu > .citation-menu {
+        overflow-x: scroll;
+        width: calc(100vw - 3em);
+        height: auto;
+        min-width: 0;
+        left: 0.5em;
+        margin-top: 0em;
+    }
+}
diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html
index f284cb2..3ccdcdd 100644
--- a/fatcat_scholar/templates/base.html
+++ b/fatcat_scholar/templates/base.html
@@ -14,145 +14,10 @@
   <link rel="stylesheet"
     href="/static/scholar-semantic-ui.v2.4.2.min.css"
     type="text/css">
+  <link rel="stylesheet"
+    href="/static/scholar.css"
+    type="text/css">
   <style>
-    {# bnewbold: accessibility/contrast #}
-    a {
-      color: #28629c;
-    }
-    .ui.basic.blue.label {
-      color: #28629c!important;
-      border-color: #28629c!important;
-    }
-    .ui.basic.orange.label {
-      color: #c54e00!important;
-      border-color: #c54e00!important;
-    }
-    .ui.card .meta, .ui.cards>.card .meta {
-      color: rgba(0,0,0,0.55);
-    }
-
-    {# bnewbold: fix light grey bars in header, and "rounded" header #}
-    nav.ui.inverted.menu .item:before { background: none; }
-    nav.ui.menu { border-radius: 0; }
-
-    .ui.button.serp-button {
-      border-radius: 0;
-      margin-bottom: 0.4em;
-      text-align: left;
-    }
-
-    .ui.blue.button.serp-button {
-      background-color: #6b6ebb;
-    }
-
-    .ui.labeled.icon.button.serp-button {
-      padding-left: 3.0em!important;
-      padding-right: 1em!important;
-      width: 14em;
-      box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
-    }
-
-    .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail {
-        left: calc(-100% + 0.3em);
-        margin-top: -2.4em;
-        background-color: black;
-        min-width: 186px;
-        border: 3px solid black;
-        border-bottom: 0;
-        box-shadow: none;
-    }
-
-    .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail:after {
-        z-index: -1;
-        background-color: black;
-    }
-
-    .action-bar {
-      display: flex;
-      justify-content: center;
-      column-gap: 0.3em;
-      min-width: 14em;
-      max-width: 15em;
-    }
-
-    @media only screen and (max-width: 767px) {
-      .mobile-hide { display: none !important; }
-      .ui.items>.item>.image:not(.ui) { width: auto };
-    }
-    @media only screen and (min-width: 768px) {
-      .mobile-only { display: none !important; }
-    }
-    @media only screen and (max-width: 991px) {
-      .tablet-hide { display: none !important; }
-      .ui.items>.item>.image:not(.ui) { width: auto };
-      .ui.grid>[class*="fourteen wide"].column.serp-column {
-        width: 100% !important;
-        box-shadow: none !important;
-      }
-    }
-    @media only screen and (min-width: 992px) {
-      .tablet-only { display: none !important; }
-    }
-    @media only screen and (min-width: 1200px) {
-      .ui.container {
-        font-size: 16px;
-        line-height: 20px;
-      }
-      div.fulltext-link {
-        width: 180px;
-      }
-      div.biblio-record {
-        padding-left: 1.1em;
-      }
-    }
-
-    .ui.serp.card {
-      max-width: 180px;
-      margin-bottom: 0.2em;
-      border-radius: 0;
-    }
-    .hit-count {
-      font-weight: bold;
-      line-height: 1.28571429em;
-    }
-
-    .biblio-record .biblio-title {
-      margin-bottom: 0.1em;
-      font-size: 1.2em;
-      font-weight: bold;
-      line-height: 1.2em;
-    }
-    .biblio-record .biblio-title a {
-      color: #2224c7;
-    }
-    .biblio-record .release-type {
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-    .biblio-record .original-title {
-      font-style: italic;
-      font-weight: normal;
-    }
-    .biblio-record .author-row {
-      margin-top: 0;
-      margin-bottom: 0.2em;
-      font-size: 1.1em;
-    }
-    .biblio-record .release-stage {
-      color: brown;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-    .biblio-record details > summary {
-      list-style-type: none;
-      color: #28629c;
-      text-decoration: underline;
-      margin-left: 0.3em;
-    }
-    .biblio-record details > summary::-webkit-details-marker {
-      display: none;
-    }
-
     {# fix RTL dividers #}
     {% if locale in ['ar'] %}
     .ui.divided.grid:not([class*="vertically divided"])>.column:not(.row), .ui.divided.grid:not([class*="vertically divided"])>.row>.column {
@@ -165,100 +30,6 @@
       box-shadow: 1px 0 0 0 rgba(255,255,255,.1);
     }
     {% endif %}
-
-    {# for fulltext search result highlighting #}
-    .search_highlights em {
-      {# yellow #}
-      {# background-color: #FFFFBB; #}
-      font-style: normal;
-      font-weight: bold;
-    }
-
-    .search_filters summary::marker {
-      display: none;
-    }
-    .search_filters summary::-webkit-details-marker {
-      display: none;
-    }
-
-    footer p a {
-      color: rgba(255, 255, 255, 0.5);
-    }
-    footer p a:hover {
-      color: rgba(255, 255, 255, 1.0);
-      opacity: 1.0;
-    }
-
-    .ui.label.small {
-      border-radius: 0;
-    }
-
-    a:hover .ui.card {
-      opacity: 0.75;
-    }
-
-    .text-button {
-      border: none;
-      background-color: inherit;
-      padding: 0;
-      font-family: inherit;
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    details.access-options summary {
-        text-decoration: none;
-        color: inherit;
-    }
-    details.access-options .menu {
-        margin: 0.5em;
-        margin-top: 1.5em;
-        width: auto;
-    }
-    details.access-options .meta {
-        width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-decoration: underline;
-    }
-
-    details.serp-action-menu[open] > summary .ui.basic.button {
-        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
-        background: #f8f8f8!important;
-    }
-    details.serp-action-menu > summary {
-      list-style: none;
-    }
-    details.serp-action-menu > summary::-webkit-details-marker {
-      display: none;
-    }
-    details.serp-action-menu > .citation-menu {
-        min-width: 50em;
-        height: auto;
-        position: absolute;
-        display: block;
-        background: #fff;
-        box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
-        border: 1px solid rgba(34,36,38,.15);
-        z-index: 11;
-        min-width: 30em;
-        border-radius: .28571429rem;
-        right: 50%;
-        margin-top: -2em;
-        margin-right: 1.5em;
-        padding: 1em;
-    }
-    @media only screen and (max-width: 767px) {
-        details.serp-action-menu > .citation-menu {
-            overflow-x: scroll;
-            width: calc(100vw - 3em);
-            height: auto;
-            min-width: 0;
-            left: 0.5em;
-            margin-top: 0em;
-        }
-    }
   </style>
   <link rel="icon" 
     type="image/x-icon"