From f9c7175cfa6d7925fd355224ccac955de3b4420a Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Tue, 10 Mar 2020 09:18:36 +0000 Subject: [PATCH] Style scrollbar and top scroll button --- _includes/top-scroll-button.html | 4 +- ...n-found-so-what-are-we-doing-about-it.html | 4 +- ...oads-around-your-home-and-school-safe.html | 4 +- ...real-life-issues-inspire-sarah-govett.html | 4 +- ...ould-sky-high-aims-bring-reading-down.html | 4 +- _site/2019/03/06/finished-product.html | 4 +- ...arks-is-most-inspirational-woman-ever.html | 4 +- ...as-redevelopment-plans-are-called-out.html | 4 +- ...s-virtual-fantasy-or-a-virtual-prison.html | 4 +- ...what-is-in-the-patients-best-interest.html | 4 +- .../03/06/whats-next-for-reading-prison.html | 4 +- .../06/young-reporter-team-ready-to-go.html | 4 +- _site/css/article-page.css | 41 +++++++++ _site/css/global.css | 85 +++++++------------ css/article-page.css | 41 +++++++++ css/global.css | 85 +++++++------------ images/.~lock (copy).up-arrow.png# | 1 + 17 files changed, 183 insertions(+), 118 deletions(-) create mode 100644 images/.~lock (copy).up-arrow.png# diff --git a/_includes/top-scroll-button.html b/_includes/top-scroll-button.html index a37a95c..1ea8bd0 100644 --- a/_includes/top-scroll-button.html +++ b/_includes/top-scroll-button.html @@ -1,3 +1,5 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html b/_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html index 19ce161..e52592e 100644 --- a/_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html +++ b/_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html @@ -243,7 +243,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html b/_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html index b39963f..2a44456 100644 --- a/_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html +++ b/_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html @@ -255,7 +255,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html b/_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html index 5a2a199..53de4a4 100644 --- a/_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html +++ b/_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html @@ -250,7 +250,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/could-sky-high-aims-bring-reading-down.html b/_site/2019/03/06/could-sky-high-aims-bring-reading-down.html index c7b8e56..371a218 100644 --- a/_site/2019/03/06/could-sky-high-aims-bring-reading-down.html +++ b/_site/2019/03/06/could-sky-high-aims-bring-reading-down.html @@ -255,7 +255,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/finished-product.html b/_site/2019/03/06/finished-product.html index 7b37a37..339ba4d 100644 --- a/_site/2019/03/06/finished-product.html +++ b/_site/2019/03/06/finished-product.html @@ -231,7 +231,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html b/_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html index 698177b..fe04cf1 100644 --- a/_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html +++ b/_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html @@ -248,7 +248,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html b/_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html index a0e6764..cabead1 100644 --- a/_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html +++ b/_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html @@ -269,7 +269,9 @@ Others objected to the planning application by expressing fears of the damaging - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html b/_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html index 358903b..45a7d40 100644 --- a/_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html +++ b/_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html @@ -271,7 +271,9 @@ Well of course the most effective and most common method experienced by Reading - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/what-is-in-the-patients-best-interest.html b/_site/2019/03/06/what-is-in-the-patients-best-interest.html index 71563ca..0387e3d 100644 --- a/_site/2019/03/06/what-is-in-the-patients-best-interest.html +++ b/_site/2019/03/06/what-is-in-the-patients-best-interest.html @@ -282,7 +282,9 @@ It is standard protocol in the NHS that doctors must consult with the patient an - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/whats-next-for-reading-prison.html b/_site/2019/03/06/whats-next-for-reading-prison.html index 54841e8..b747001 100644 --- a/_site/2019/03/06/whats-next-for-reading-prison.html +++ b/_site/2019/03/06/whats-next-for-reading-prison.html @@ -276,7 +276,9 @@ Under the plan, the main theatre would operate on a commercial basis with the re - Scroll to top +
+ Scroll to top +
diff --git a/_site/2019/03/06/young-reporter-team-ready-to-go.html b/_site/2019/03/06/young-reporter-team-ready-to-go.html index ddb5434..efb3740 100644 --- a/_site/2019/03/06/young-reporter-team-ready-to-go.html +++ b/_site/2019/03/06/young-reporter-team-ready-to-go.html @@ -233,7 +233,9 @@ - Scroll to top +
+ Scroll to top +
diff --git a/_site/css/article-page.css b/_site/css/article-page.css index fbd935f..d30ff25 100644 --- a/_site/css/article-page.css +++ b/_site/css/article-page.css @@ -67,4 +67,45 @@ iframe { iframe { height: calc(93.5vw / 16 * 9); } +} + +/* scroll-to-top button */ +.top-scroll-button { + width: 50px; + height: 50px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + position: fixed; + right: 20px; + bottom: 20px; + background-color: #273967; + display: none; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.top-scroll-button-image-container { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.top-scroll-button img { + width: 35px; + height: auto; + position: relative; + bottom: 2px; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.top-scroll-button:hover, .top-scroll-button:focus { + background-color: #1C2E56; +} +.top-scroll-button:hover img { + bottom: 5px; } \ No newline at end of file diff --git a/_site/css/global.css b/_site/css/global.css index 0ea7721..5f19b23 100644 --- a/_site/css/global.css +++ b/_site/css/global.css @@ -1,19 +1,3 @@ -html { - height: 100%; -} -html, body, .mdc-drawer-app-content { - display: flex; - flex-direction: column; -} -.footer-container, .mdc-drawer-app-content, body { - flex-grow: 1; -} - - - - - - /* change theme */ :root { --mdc-theme-primary: #253a67; @@ -27,7 +11,6 @@ body { background-color: var(--mdc-theme-primary); color: #ffffff; } - .mdc-drawer { background-color: var(--mdc-theme-background); } @@ -47,6 +30,26 @@ body { a { color: var(--mdc-theme-secondary); } + +/* style scrollbars */ +body::-webkit-scrollbar, .mdc-drawer__content::-webkit-scrollbar { + width: 11px; +} +body, .mdc-drawer__content { + --scrollbar-thumb-color: #555555; + --scrollbar-track-color: #262829; + --scrollbar-border-color: #444444; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-track-color) var(--scrollbar-thumb-color); +} +body::-webkit-scrollbar-track, .mdc-drawer__content::-webkit-scrollbar-track { + background: var(--scrollbar-track-color); +} +body::-webkit-scrollbar-thumb, .mdc-drawer__content::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-color); + border: 1px solid var(--scrollbar-border-color); +} + /* navbar buttons */ .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic { color: var(--mdc-theme-secondary); @@ -73,6 +76,18 @@ a { padding-top: 41px; } +/* expand grey bar in footer to bottom of page */ +html { + height: 100%; +} +html, body, .mdc-drawer-app-content { + display: flex; + flex-direction: column; +} +.footer-container, .mdc-drawer-app-content, body { + flex-grow: 1; +} + /* make content display properly */ .mdc-list-group h3 { margin: 20px 16px auto 16px; @@ -180,39 +195,3 @@ footer img { color: var(--mdc-theme-secondary); text-decoration: none; } - -/* scroll-to-top button */ -.top-scroll-button { - width: 50px; - height: 50px; - text-align: center; - font-size: 25px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - position: fixed; - right: 20px; - bottom: 20px; - background-color: #273967; - display: none; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.top-scroll-button img { - position: relative; - top: 7px; - width: 35px; - height: auto; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.top-scroll-button:hover, .top-scroll-button:focus { - background-color: #1C2E56; -} -.top-scroll-button:hover img { - top: 3px; -} diff --git a/css/article-page.css b/css/article-page.css index fbd935f..d30ff25 100644 --- a/css/article-page.css +++ b/css/article-page.css @@ -67,4 +67,45 @@ iframe { iframe { height: calc(93.5vw / 16 * 9); } +} + +/* scroll-to-top button */ +.top-scroll-button { + width: 50px; + height: 50px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + position: fixed; + right: 20px; + bottom: 20px; + background-color: #273967; + display: none; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.top-scroll-button-image-container { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.top-scroll-button img { + width: 35px; + height: auto; + position: relative; + bottom: 2px; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.top-scroll-button:hover, .top-scroll-button:focus { + background-color: #1C2E56; +} +.top-scroll-button:hover img { + bottom: 5px; } \ No newline at end of file diff --git a/css/global.css b/css/global.css index 0ea7721..5f19b23 100644 --- a/css/global.css +++ b/css/global.css @@ -1,19 +1,3 @@ -html { - height: 100%; -} -html, body, .mdc-drawer-app-content { - display: flex; - flex-direction: column; -} -.footer-container, .mdc-drawer-app-content, body { - flex-grow: 1; -} - - - - - - /* change theme */ :root { --mdc-theme-primary: #253a67; @@ -27,7 +11,6 @@ body { background-color: var(--mdc-theme-primary); color: #ffffff; } - .mdc-drawer { background-color: var(--mdc-theme-background); } @@ -47,6 +30,26 @@ body { a { color: var(--mdc-theme-secondary); } + +/* style scrollbars */ +body::-webkit-scrollbar, .mdc-drawer__content::-webkit-scrollbar { + width: 11px; +} +body, .mdc-drawer__content { + --scrollbar-thumb-color: #555555; + --scrollbar-track-color: #262829; + --scrollbar-border-color: #444444; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-track-color) var(--scrollbar-thumb-color); +} +body::-webkit-scrollbar-track, .mdc-drawer__content::-webkit-scrollbar-track { + background: var(--scrollbar-track-color); +} +body::-webkit-scrollbar-thumb, .mdc-drawer__content::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-color); + border: 1px solid var(--scrollbar-border-color); +} + /* navbar buttons */ .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic { color: var(--mdc-theme-secondary); @@ -73,6 +76,18 @@ a { padding-top: 41px; } +/* expand grey bar in footer to bottom of page */ +html { + height: 100%; +} +html, body, .mdc-drawer-app-content { + display: flex; + flex-direction: column; +} +.footer-container, .mdc-drawer-app-content, body { + flex-grow: 1; +} + /* make content display properly */ .mdc-list-group h3 { margin: 20px 16px auto 16px; @@ -180,39 +195,3 @@ footer img { color: var(--mdc-theme-secondary); text-decoration: none; } - -/* scroll-to-top button */ -.top-scroll-button { - width: 50px; - height: 50px; - text-align: center; - font-size: 25px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - position: fixed; - right: 20px; - bottom: 20px; - background-color: #273967; - display: none; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.top-scroll-button img { - position: relative; - top: 7px; - width: 35px; - height: auto; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.top-scroll-button:hover, .top-scroll-button:focus { - background-color: #1C2E56; -} -.top-scroll-button:hover img { - top: 3px; -} diff --git a/images/.~lock (copy).up-arrow.png# b/images/.~lock (copy).up-arrow.png# new file mode 100644 index 0000000..b144b88 --- /dev/null +++ b/images/.~lock (copy).up-arrow.png# @@ -0,0 +1 @@ +,matthew,m36-pavilion,10.03.2020 09:14,file:///home/matthew/.config/libreoffice/4; \ No newline at end of file