aboutsummaryrefslogtreecommitdiffstats
path: root/fatcat_scholar
diff options
context:
space:
mode:
authorBryan Newbold <bnewbold@archive.org>2021-01-21 13:03:41 -0800
committerBryan Newbold <bnewbold@archive.org>2021-01-21 13:03:44 -0800
commit8c13e045f1e06e4d2b4cfa907427827316374183 (patch)
tree85d17c11530e96baf4dc83cc5730275e9553fb9d /fatcat_scholar
parent4f75995e05f004ab05cbf162e414bcc310eef405 (diff)
downloadfatcat-scholar-8c13e045f1e06e4d2b4cfa907427827316374183.tar.gz
fatcat-scholar-8c13e045f1e06e4d2b4cfa907427827316374183.zip
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.
Diffstat (limited to 'fatcat_scholar')
-rw-r--r--fatcat_scholar/static/scholar.css231
-rw-r--r--fatcat_scholar/templates/base.html235
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"