Style scrollbar and top scroll button

2026-03-03 03:17:07 +00:00 · 2020-03-10 09:18:36 +00:00
parent 00c89d770b
commit f9c7175cfa
17 changed files with 183 additions and 118 deletions
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- a/_site/2019/03/06/finished-product.html
+++ b/_site/2019/03/06/finished-product.html
@@ -231,7 +231,9 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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 @@
  </footer>
 </div>
            <a href="javascript:scrollUp()" class="top-scroll-button">
-    <img alt="Scroll to top" src="/images/up-arrow.png">
+    <div class="top-scroll-button-image-container">
+        <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

        </div>
--- 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;
 }
--- 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;
-}