me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style scrollbar and top scroll button

Browse Source
This commit is contained in:
Matthew Grove
2020-03-10 09:18:36 +00:00
parent 00c89d770b
commit f9c7175cfa
17 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/top-scroll-button.html
View File

@@ -1,3 +1,5 @@
<a href="javascript:scrollUp()" class="top-scroll-button">
<div class="top-scroll-button-image-container">
<img alt="Scroll to top" src="/images/up-arrow.png">
</div>
</a>

2
_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html
View File

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

2
_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html
View File

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

2
_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html
View File

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

2
_site/2019/03/06/could-sky-high-aims-bring-reading-down.html
View File

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

2
_site/2019/03/06/finished-product.html
View File

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

2
_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html
View File

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

2
_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html
View File

@@ -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">
<div class="top-scroll-button-image-container">
<img alt="Scroll to top" src="/images/up-arrow.png">
</div>
</a>
</div>

2
_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html
View File

@@ -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">
<div class="top-scroll-button-image-container">
<img alt="Scroll to top" src="/images/up-arrow.png">
</div>
</a>
</div>

2
_site/2019/03/06/what-is-in-the-patients-best-interest.html
View File

@@ -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">
<div class="top-scroll-button-image-container">
<img alt="Scroll to top" src="/images/up-arrow.png">
</div>
</a>
</div>

2
_site/2019/03/06/whats-next-for-reading-prison.html
View File

@@ -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">
<div class="top-scroll-button-image-container">
<img alt="Scroll to top" src="/images/up-arrow.png">
</div>
</a>
</div>

2
_site/2019/03/06/young-reporter-team-ready-to-go.html
View File

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

41
_site/css/article-page.css
View File

@@ -68,3 +68,44 @@ 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;
}

85
_site/css/global.css
View File

@@ -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;
}

41
css/article-page.css
View File

@@ -68,3 +68,44 @@ 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;
}

85
css/global.css
View File

@@ -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;
}

1
images/.~lock (copy).up-arrow.png# Normal file
View File

@@ -0,0 +1 @@
,matthew,m36-pavilion,10.03.2020 09:14,file:///home/matthew/.config/libreoffice/4;