diff --git a/assets/build/convImages.sh b/assets/build/convImages.sh deleted file mode 100755 index 9689030..0000000 --- a/assets/build/convImages.sh +++ /dev/null @@ -1,31 +0,0 @@ -#!/bin/bash - -# Libary needed: ImageMagick - -PARAMS=('-quality 60') - -if [ $# -ne 0 ]; then - PARAMS=$@; -fi - -cd $(pwd) - -shopt -s nullglob nocaseglob extglob -shopt -s globstar - -# Resize -sizes=(320 640 960 1280) -for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do - DIR=$(dirname "$FILE") - NAME=$(basename "$FILE" | cut -d. -f1) - EXTENSION=$(basename "$FILE" | cut -d. -f2) - for size in ${sizes[@]}; do - convert "$FILE" -resize ${size}x${size}\> "${DIR}/${NAME}-${size}.${EXTENSION}" - done -done - -# Web Optimized Formats -for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do - convert $PARAMS "$FILE" "${FILE}".webp; - convert $PARAMS "$FILE" "${FILE}".avif; -done \ No newline at end of file diff --git a/assets/build/genIco.sh b/assets/build/genIco.sh deleted file mode 100644 index e3e9fb0..0000000 --- a/assets/build/genIco.sh +++ /dev/null @@ -1,9 +0,0 @@ -#!/bin/bash - -# Libary needed: ImageMagick -# -# Needs 2 input args: -# 1. The path of the source file -# 2. The output path (with .ico extension) - -convert -density 300 -define icon:auto-resize=96,64,48,32,16 -background none $1 $2 diff --git a/assets/images/notfound.svg b/assets/images/notfound.svg deleted file mode 100644 index f0f35ca..0000000 --- a/assets/images/notfound.svg +++ /dev/null @@ -1 +0,0 @@ -page not found \ No newline at end of file diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index 510bead..3433624 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -1,53 +1,53 @@ .footer { - margin: auto; - padding: 1.5rem 0rem; - width: 100%; - flex-shrink: 0; - text-align: center; - display: block; - background-color: {{ .Site.Params.footer.color | default "#333" }}; - color: #f2f2f2; + margin: auto; + padding: 1.5rem 0rem; + width: 100%; + flex-shrink: 0; + text-align: center; + display: block; + background-color: #333; + color: #f2f2f2; } .social-media-footer { - display: flex; - justify-content: center; - flex-wrap: wrap; - font-size: 2em; - color: {{ .Site.Params.color.primary }}; + display: flex; + justify-content: center; + flex-wrap: wrap; + font-size: 2em; + color: {{ .Site.Params.color.primary }}; } .social-media-footer a { - color: {{ .Site.Params.color.primary }}; + color: {{ .Site.Params.color.primary }}; } .links { - margin-top: 1.5rem; - display: flex; - justify-content: center; - flex-wrap: wrap; - padding: 0; + margin-top: 1.5rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 0; } .link { - display: flex; - justify-content: space-around; - flex-grow: 0; - flex-shrink: 1; - line-height: 32px; - padding: 0px 24px; + display: flex; + justify-content: space-around; + flex-grow: 0; + flex-shrink: 1; + line-height: 32px; + padding: 0px 24px; } .link a { - color: inherit; + color: inherit; } .link:before { - content: none; + content: none; } .copyright { - margin-top: 2rem; - width: 100%; - font-size: small; -} + margin-top: 2rem; + width: 100%; + font-size: small; +} \ No newline at end of file diff --git a/assets/scss/header.scss b/assets/scss/header.scss index 927b4d4..4f5ab11 100644 --- a/assets/scss/header.scss +++ b/assets/scss/header.scss @@ -1,171 +1,170 @@ .header { - margin: auto; - width: 100%; - padding: 0.5rem; - padding-right: 0rem; - display: flex; - font-size: large; - overflow: hidden; - flex-shrink: 0; - background: white; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); - position: fixed; - z-index: 999; - top: 0; + margin: auto; + width: 100%; + padding: 0.5rem; + padding-right: 0rem; + display: flex; + font-size: large; + overflow: hidden; + flex-shrink: 0; + background: white; + box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); + position: fixed; + z-index: 999; + top: 0; } .header-container { - width: 100%; - max-width: 1152px; - display: flex; - margin: auto; + width: 100%; + max-width: 1152px; + display: flex; + margin: auto; } .header-blocker { - width: 100%; - min-height: 4rem; + width: 100%; + min-height: 4rem; } .sticky { - position: fixed; - top: 0; + position: fixed; + top: 0; } .logo { - height: 3rem; - max-width: 10rem; + height: 3rem; + max-width: 10rem; } .small-logo { - height: 2.5rem; - max-width: 10rem; + height: 2.5rem; + max-width: 10rem; } .menu-icon { - display: none; - font-size: larger; - color: inherit; + display: none; + font-size: larger; + color: inherit; } .header-items { - margin: auto; - margin-right: 0px; - padding-right: 24px; - display: flex; - justify-content: center; + margin: auto; + margin-right: 0px; + padding-right: 24px; + display: flex; + justify-content: center; } .header-item { - margin: auto; - margin-inline: 1rem; - color: inherit; + margin: auto; + margin-inline: 1rem; + color: inherit; } .dropdown { - overflow: hidden; + overflow: hidden; } -.dropdown .dropbtn { - border: none; - outline: none; - margin: 0; +.dropdown .dropbtn { + border: none; + outline: none; + margin: 0; } .dropdown-content { - display: none; - position: fixed; - background-color: #ffffff; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; + display: none; + position: fixed; + background-color: #ffffff; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; } .dropdown-content a { - padding: 0.5rem 1rem; - display: block; - color: inherit; + padding: 0.5rem 1rem; + display: block; + color: inherit; } .dropdown-content a:hover { - background-color: #ddd; + background-color: #ddd; } .dropdown:hover .dropdown-content { - display: block; + display: block; } @media screen and (max-width: 600px) { - .header { - padding: 0.5rem; - padding-right: 0.5rem; - } + .header { + padding: 0.5rem; + padding-right: 0.5rem; + } + + .header-container { + display: block; + } + + .home { + width: 100vw; + } + + .menu-icon { + display: block; + position: fixed; + top: 15px; + right: 30px; + } - .header-container { - display: block; - } + .menu-icon .hide { + display: none; + } - .home { - width: 100vw; - } + .small-icon { + top: 15px; + } - .menu-icon { - display: block; - position: fixed; - top: 15px; - right: 30px; - } + .header-items { + display: none; + } - .menu-icon .hide { - display: none; - } + .header-items.responsive { + position: relative; + float: none; + display: block; + text-align: left; + margin-top: 0.5rem; + padding-right: 0rem; + } - .small-icon { - top: 15px; - } + .header-items.responsive .header-item { + display: block; + margin-left: 0rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } - .header-items { - display: none; - } + .header-items.responsive .header-contact-button { + display: block; + margin-left: 0rem; + } - .header-items.responsive { - position: relative; - float: none; - display: block; - text-align: left; - margin-top: 0.5rem; - padding-right: 0rem; - } + .header-items.responsive .icon { + position: absolute; + right: 0; + top: 0; + } - .header-items.responsive .header-item { - display: block; - margin-left: 0rem; - padding-bottom: 0.5rem; - padding-top: 0.5rem; - } + .header-items.responsive .dropdown { + float: none; + } + .header-items.responsive .dropdown-content { + position: relative; + box-shadow: none; + } + .header-items.responsive .dropdown .dropbtn { + display: block; + width: 100vw; + text-align: left; + } - .header-items.responsive .header-contact-button { - display: block; - margin-left: 0rem; - } - - .header-items.responsive .icon { - position: absolute; - right: 0; - top: 0; - } - - .header-items.responsive .dropdown { - float: none; - } - - .header-items.responsive .dropdown-content { - position: relative; - box-shadow: none; - } - - .header-items.responsive .dropdown .dropbtn { - display: block; - width: 100vw; - text-align: left; - } -} +} \ No newline at end of file diff --git a/assets/scss/hero.scss b/assets/scss/hero.scss index 93953dd..1530f57 100644 --- a/assets/scss/hero.scss +++ b/assets/scss/hero.scss @@ -1,9 +1,14 @@ .hero { - min-height: 700px; - {{ with .hero.background }} - background-image: url({{ . }}) !important; - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - {{ end }} + min-height: 700px; + {{ with .hero.background }} + background-image: url({{ . }}) !important; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + {{ end }} +} + +.hero-icon-container { + padding: 1rem; + margin: auto; } diff --git a/assets/scss/index.scss b/assets/scss/index.scss index c1538c5..796baa3 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -1,90 +1,97 @@ $font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; {{ with .Site.Params.font }} - {{ if .name }} - {{ if .url }} - @font-face { - font-family: {{ .name }}; - src: url({{ .url }}) format( {{ .format | default "ttf" }} ); - font-weight: 400; - font-style: normal; - } + + {{ if .name }} + + {{ if .url }} + + @font-face { + font-family: {{ .name }}; + src: url({{ .url }}) format( {{ .format | default "ttf" }} ); + font-weight: 400; + font-style: normal; + } + + {{ end }} + + $font: {{ .name }} !important; + {{ end }} - $font: {{ .name }} !important; - {{ end }} + {{ end }} * { - box-sizing: border-box; - word-break: break-word; + box-sizing: border-box; + word-break: break-word; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } html, body { - height: 100%; + height: 100%; } body { - margin: 0; - display: flex; - flex-direction: column; - color: #333; - font-family: $font; - font-weight: 400; - font-style: normal; -} - -main { - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: center; + margin: 0; + display: flex; + flex-direction: column; + color: #333; + font-family: $font; + font-weight: 400; + font-style: normal; } h1 { - margin: 0rem; - margin-bottom: 0.5rem; - margin-top: 0.5rem; + margin: 0rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; } p { - margin: 0.5rem; + margin: 0.5rem; } a { - text-decoration: none; - color: {{ .Site.Params.color.secondary }}; -} - -img { - max-width: 100%; - height: auto; - margin: auto; - object-fit: contain; - border-radius: 6px; + text-decoration: none; + color: {{ .Site.Params.color.secondary }}; } {{ if .Site.Params.list.image }} - ul { - list-style: none; - padding-left: 1rem; - } - ul li { - display: flex; - } - ul li:before { - content: url({{ .Site.Params.list.image }}); - display: inline-block; - width: 21px; - height: 21px; - margin-right: 10px; - flex-shrink: 0; - } + + ul { + list-style: none; + padding-left: 1rem; + } + + ul li { + display: flex; + } + + ul li:before { + content: url({{ .Site.Params.list.image }}); + display: inline-block; + width: 21px; + height: 21px; + margin-right: 10px; + flex-shrink: 0; + } + {{ end }} +button { + font-family: inherit; + font-size: 100%; + line-height: inherit; + color: inherit; + background-color: transparent; + background-image: none; + text-transform: none; + padding: 0; +} + .col-3 {flex: 25%; width: 25%; max-width: 25%;} .col-4 {flex: 33.33%; width: 33.33%; max-width: 33.33%;} .col-5 {flex: 41.66%; width: 41.66%; max-width: 41.66%;} @@ -97,246 +104,246 @@ img { .col-12 {flex: 100%; width: 100%; max-width: 100%;} [class*="col-"] { - float: left; + float: left; } .row { - display: flex; - flex-wrap: wrap; - flex-flow: column; + display: flex; + flex-wrap: wrap; + flex-flow: column; } .content { - align-self: center; - padding-top: 3rem; - width: 100%; - margin: 0; + align-self: center; + padding-top: 3rem; + width: 100%; + margin: 0; } .content p img { - width: 100%; - // height: 500px; + width: 100%; + // height: 500px; } .divider { - height: 3px; - border-radius: 50px; - background: {{ .Site.Params.color.primary }}; - width: 60px; + height: 3px; + border-radius: 50px; + background: {{ .Site.Params.color.primary }}; + width: 60px; } .title { - font-size: large; - padding-bottom: 1rem; - text-align: start; + font-size: large; + padding-bottom: 1rem; + text-align: start; } .videoWrapper { - position: relative; - padding-bottom: 56.25%; - height: 0; + position: relative; + padding-bottom: 56.25%; + height: 0; } .video { - position: absolute; - margin: 0 auto; - border: 5px dotted {{ .Site.Params.color.primary }}; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + margin: 0 auto; + border: 5px dotted {{ .Site.Params.color.primary }}; + top: 0; + left: 0; + width: 100%; + height: 100%; } .section { - padding-top: 2rem; - padding-bottom: 2.5rem; - padding-right: 1.5rem; - padding-left: 1.5rem; - width: 100%; - margin: 0; - align-self: center; - flex: 1 0 auto; + padding-top: 2rem; + padding-bottom: 2.5rem; + padding-right: 1.5rem; + padding-left: 1.5rem; + width: 100%; + margin: 0; + align-self: center; + flex: 1 0 auto; } .section-even { - background-color: {{ .Site.Params.color.background | default "#eee" }}; + background-color: #eee; } .section-highlight { - background-color: {{ .Site.Params.color.primary }}; + background-color: {{ .Site.Params.color.primary }}; } .section-content { - width: 100%; - max-width: 1152px; - margin: auto; - justify-content: center; + width: 100%; + max-width: 1152px; + margin: auto; + justify-content: center; } .content { - padding-top: 9rem; - padding-bottom: 2rem; - padding-right: 1.5rem; - padding-left: 1.5rem; - width: 100%; - max-width: 1152px; - margin: 0; - align-self: center; - flex-grow: 1; + padding-top: 9rem; + padding-bottom: 2rem; + padding-right: 1.5rem; + padding-left: 1.5rem; + width: 100%; + max-width: 1152px; + margin: 0; + align-self: center; + flex-grow: 1; } .notfound { - display: flex; - padding-right: 1.5rem; - padding-left: 1.5rem; - width: 100%; - max-width: 1152px; - margin: 0; - align-self: center; - justify-content: center; - flex-grow: 1; + display: flex; + padding-right: 1.5rem; + padding-left: 1.5rem; + width: 100%; + max-width: 1152px; + margin: 0; + align-self: center; + justify-content: center; + flex-grow: 1; } -.notfound img { - width: 100%; - max-width: 912px; +.notfoundimage { + width: 100%; + max-width: 912px; } /* Team */ .team { - align-items: center; - text-align: center; + align-items: center; + text-align: center; } .team-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - a { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.team-list a { color: inherit; margin: 0 auto; - } } .teammember { - display: inline-block; - align-items: center; - text-align: center; - padding: 1rem; + display: inline-block; + align-items: center; + text-align: center; + padding: 1rem; } .avatar { - width: 15rem; - height: 15rem; - border-radius: 50%; - border: 2px solid {{ .Site.Params.color.primary }}; - object-fit: cover; - margin: 0 auto; + width: 15rem; + height: 15rem; + border-radius: 50%; + border: 2px solid {{ .Site.Params.color.primary }}; + object-fit: cover; + margin: 0 auto; } .avatar-small { - width: 10rem; - height: 10rem; - border-radius: 50%; - border: 2px solid {{ .Site.Params.color.primary }}; - object-fit: cover; - margin: 0 auto; + width: 10rem; + height: 10rem; + border-radius: 50%; + border: 2px solid {{ .Site.Params.color.primary }}; + object-fit: cover; + margin: 0 auto; } .teammember-title { - font-size: x-large; - padding-bottom: 0.1rem; + font-size: x-large; + padding-bottom: 0.1rem; } .teammember-header { - display: flex; - justify-content: left; - margin-bottom: 2rem; + display: flex; + justify-content: left; + margin-bottom: 2rem; } .teammember-header-avatar { - width: 10rem; - height: 10rem; - border-radius: 50%; - border: 2px solid {{ .Site.Params.color.primary }}; - object-fit: cover; + width: 10rem; + height: 10rem; + border-radius: 50%; + border: 2px solid {{ .Site.Params.color.primary }}; + object-fit: cover; } .teammember-header-title { - font-size: x-large; - padding-bottom: 0.1rem; - margin: auto 1rem; + font-size: x-large; + padding-bottom: 0.1rem; + margin: auto 1rem; } .teammember-header-social-media { - display: flex; - flex-wrap: wrap; - color: #333; - margin-top: -0.5rem; - padding-block-end: 0.25rem; + display: flex; + flex-wrap: wrap; + color: #333; + margin-top: -0.5rem; + padding-block-end: 0.25rem; } .teammember-header-social-media a { - color: inherit; + color: inherit; } .teammember-posts { - margin-top: 2rem; + margin-top: 2rem; } .social-media { - font-size: 1.5em; + font-size: 1.5em; } .author { - width: 100%; - display: inline-block; - align-items: center; - text-align: center; - margin: 0 auto; - padding-top: 2rem; + width: 100%; + display: inline-block; + align-items: center; + text-align: center; + margin: 0 auto; + padding-top: 2rem; } .author a { - color: inherit; + color: inherit; } .author-title { - font-size: x-large; - padding-bottom: 0.1rem; - margin: 0; + font-size: x-large; + padding-bottom: 0.1rem; + margin: 0; } /* Funding */ .funding-logo { - max-width: 11rem; - max-height: 9rem; - padding: 1rem; + max-width: 11rem; + max-height: 9rem; + padding: 1rem; } .services { - display: flex; - align-items: center; - padding: 1.5rem 0rem; + display: flex; + align-items: center; + padding: 1.5rem 0rem; } .services-section-content { - display: flex; - align-items: center; + display: flex; + align-items: center; } -.side-image { - padding: 1rem; - margin: auto; +.service-icon-container { + padding: 1.5rem; + margin: auto; } -.side-image img { - width: 100%; - height: auto; - max-height: 90vh; - object-fit: contain; +.service-icon { + width: 100%; + height: auto; + object-fit: contain; } .quote { @@ -359,258 +366,194 @@ img { margin-inline-end: -0.5rem; } -button { - font-family: inherit; - font-size: 100%; - line-height: inherit; - color: inherit; - background-color: transparent; - background-image: none; - text-transform: none; - padding: 0; +.button-filled { + background-color: {{ .Site.Params.color.primary }}; + color: white; + border: 2px solid {{ .Site.Params.color.primary }}; + border-radius: 4px; + padding: 0.5rem 1.5rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; } -.button:hover { - filter: brightness(60%); +.button-outlined { + background-color: transparent; + color: {{ .Site.Params.color.primary }}; + border: 2px solid {{ .Site.Params.color.primary }}; + border-radius: 4px; + padding: 0.5rem 1.5rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; } -.button.filled { - background-color: {{ .Site.Params.color.primary }}; - color: white; - border: 2px solid {{ .Site.Params.color.primary }}; - border-radius: 4px; - padding: 0.5rem 1.5rem; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1rem; -} - -.button.outlined { - background-color: transparent; - color: {{ .Site.Params.color.primary }}; - border: 2px solid {{ .Site.Params.color.primary }}; - border-radius: 4px; - padding: 0.5rem 1.5rem; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1rem; -} - -.button.outlined:hover { - background-color: {{ .Site.Params.color.primary }}; - color: white; -} - -.button.text { - display: inline-block; - padding: 0.5rem 1.5rem; - text-align: center; - font-size: 1rem; - color: {{ .Site.Params.color.primary }}; -} - -.button.inverted { - background-color: white; - color: {{ .Site.Params.color.primary }}; - border-radius: 4px; - padding: 0.5rem 1.5rem; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1rem; - margin-top: 1rem; -} - -.button.fab { - display: inline-flex; - background-color: {{ .Site.Params.color.primary }}; - color: #f2f2f2; - width: 50px; - height: 50px; - align-items: center; - justify-content: center; - border-radius: 50%; - margin: 30px; - position: fixed; - bottom: 0px; - right: 0px; - transition: background-color .3s; - z-index: 1000; -} - -.button.play { - background: url('/button/google-play-button.svg'); - background-repeat: no-repeat; - background-size: cover; - display: inline-block; - width: 10rem; - height: 3rem; -} - -.button.appstore { - background: url('/button/apple-appstore-button.svg'); - background-repeat: no-repeat; - background-size: cover; - display: inline-block; - width: 10rem; - height: 3rem; -} - -.button.block { - width: 100%; -} - -.show { - visibility: visible; - opacity: 1; -} - -.hide { - visibility: hidden; - opacity: 0; +.button-outlined:hover { + background-color: {{ .Site.Params.color.primary }}; + color: white; } .contact { - justify-content: center; - align-items: center; + justify-content: center; + align-items: center; } .contact-button-container { - text-align: center; - margin-top: 0; - margin-bottom: 0; + text-align: center; + margin-top: 0; + margin-bottom: 0; +} + +.contact-button { + background-color: white; + color: {{ .Site.Params.color.primary }}; + border-radius: 4px; + padding: 0.5rem 1.5rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; + margin-top: 1rem; } .contact-text { - text-align: center; - color: white; + text-align: center; + color: white; } .cardList { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + width: 100%; } .cardList a { - color: inherit; - flex-grow: 1; + color: inherit; + flex-grow: 1; } .smallCard { - display: flex; - flex-direction: column; - border-radius: 5px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - width: 360px; - height: 100px; - margin: 10px; - justify-content: center; + display: flex; + flex-direction: column; + border-radius: 5px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 360px; + height: 100px; + margin: 10px; + justify-content: center; } .mediumCard { - display: flex; - flex-direction: column; - flex: 1 1 300px; - border-radius: 5px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - max-width: 350px; - height: 200px; - margin: 10px; - justify-content: center; + display: flex; + flex-direction: column; + flex: 1 1 300px; + border-radius: 5px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + max-width: 350px; + height: 200px; + margin: 10px; + justify-content: center; } .card { - display: flex; - flex-direction: column; - border-radius: 5px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - max-width: 350px; - height: 400px; - margin: 1rem auto; - justify-content: center; + display: flex; + flex-direction: column; + border-radius: 5px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + max-width: 350px; + height: 400px; + margin: 1rem auto; + justify-content: center; } .cardContent { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; } .cardImage { - display: flex; - width: 100%; - height: 150px; - border-radius: 5px 5px 0px 0px; - object-fit: cover; - i { - margin: auto; - font-size: 8em; - color: {{ .Site.Params.color.secondary }}; - } + display: flex; + width: 100%; + height: 150px; + border-radius: 5px 5px 0px 0px; + object-fit: cover; } .noCover { - object-fit: unset !important; + object-fit: unset !important; +} + +.cardIcon { + margin: auto; + font-size: 8em; + color: {{ .Site.Params.color.secondary }}; } .cardTitle { - text-align: center; - font-size: 18px; - font-weight: 600; - padding-top: 1rem; - padding-bottom: 0.5rem; + text-align: center; + font-size: 18px; + font-weight: 600; + padding-top: 1rem; + padding-bottom: 0.5rem; } .cardDescription { - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - padding: 6px; - padding-top: 0px; - word-wrap: break-word; - height: 100%; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + padding: 6px; + padding-top: 0px; + word-wrap: break-word; + height: 100%; } .cardDetail { - padding: 6px; - font-size: 12px; - text-align: right; + padding: 6px; + font-size: 12px; + text-align: right; } .post-detail { - margin-top: -6px; - padding-bottom: 6px; - font-size: 14px; + margin-top: -6px; + padding-bottom: 6px; + font-size: 14px; } .coverimage { - height: 60vh; - min-width: 100%; - padding-top: 68px; - object-fit: cover; + height: 60vh; + min-width: 100%; + padding-top: 68px; + object-fit: cover; } .image-copyright { - width: 100%; - max-width: 1152px; - align-self: center; - padding-right: 1.5rem; - padding-left: 1.5rem; - font-size: small; + width: 100%; + max-width: 1152px; + align-self: center; + padding-right: 1.5rem; + padding-left: 1.5rem; + font-size: small; +} + +.more-button { + padding-top: 1rem; + text-align: center; + color: {{ .Site.Params.color.primary }}; } @media screen and (max-width: 600px) { - [class*="col-"] { - display: block; - width: 100%; - max-width: 100%; - } - .services { - display: inline-block; - } + [class*="col-"] { + display: block; + width: 100%; + max-width: 100%; + } + + .services { + display: inline-block; + } } diff --git a/assets/scss/progressbar.scss b/assets/scss/progressbar.scss index c5138f4..fbaa42a 100644 --- a/assets/scss/progressbar.scss +++ b/assets/scss/progressbar.scss @@ -1,8 +1,8 @@ .progress { - background: linear-gradient(to right, {{ .Site.Params.color.primary }} var(--scroll), transparent 0); - background-repeat: no-repeat; - position: fixed; - width: 100%; - height: 4px; - z-index: 1000; -} + background: linear-gradient(to right, {{ .Site.Params.color.primary }} var(--scroll), transparent 0); + background-repeat: no-repeat; + position: fixed; + width: 100%; + height: 4px; + z-index: 1000; +} \ No newline at end of file diff --git a/assets/scss/totop.scss b/assets/scss/totop.scss new file mode 100644 index 0000000..ac56da7 --- /dev/null +++ b/assets/scss/totop.scss @@ -0,0 +1,33 @@ +.totop { + display: inline-flex; + background-color: {{ .Site.Params.color.primary }}; + color: #f2f2f2; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + border-radius: 50%; + margin: 30px; + position: fixed; + bottom: 0px; + right: 0px; + transition: background-color .3s; + z-index: 1000; +} + +.show { + visibility: visible; + opacity: 1; +} + +.hide { + visibility: hidden; + opacity: 0; +} + +@media screen and (min-width: 600px) { + .totop:hover { + cursor: pointer; + background-color: black; + } +} \ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html index b039060..98e5238 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,5 +1,5 @@ {{ define "main" }} -
- {{- partial "components/image.html" (dict "type" "svg" "url" "/images/notfound.svg" "alt" "Not Found Image") -}} -
-{{ end }} +
+ Not Found Image +
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html deleted file mode 100644 index c1c940f..0000000 --- a/layouts/_default/_markup/render-image.html +++ /dev/null @@ -1 +0,0 @@ -{{- partial "components/image.html" (dict "url" .Destination "alt" .Text "caption" .Title) -}} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3c754b2..17b1e2f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,52 +1,63 @@ - + + + - - - - - - - - {{ template "_internal/opengraph.html" . }} - - {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} - - {{ with .Site.Params.favIcon }} - {{ if .ico }} - - {{ end }} - {{ if .small }} - - {{ end }} - {{ if .big }} - - {{ end }} - {{ end }} - {{ with .Site.Params.tracking }} - - {{ end }} - - {{ $template := resources.Get "scss/index.scss" }} {{ if $template }} {{ - $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | - resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} - - {{ end }} {{ block "styling" . }} {{ end }} {{ $template := resources.Get - "scss/totop.scss" }} {{ if $template }} {{ $totop := $template | - resources.ExecuteAsTemplate "css/totop.scss" . | resources.ToCSS (dict - "outputStyle" "compressed") | fingerprint }} - - {{ end }} - - - - {{ block "header" . }} {{- partial "header.html" . -}} {{ end }} -
- {{ block "main" . }} - - {{ end }} -
- {{ block "footer" . }} {{- partial "footer.html" . -}} {{ end }} - - - + + + + + + {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} + {{ block "opengraph" . }} + + {{ with .Site.LanguageCode }} + + {{ end }} + + + + {{ if .Params.image }} + + {{ else }} + + {{ end }} + {{ if .Params.summary }} + + {{ else if .Content }} + + {{ else }} + + {{ end }} + {{ end }} + {{- $favIcon := .Site.Params.favIcon }} + + + {{ with .Site.Params.tracking }} + + {{ end }} + + {{ $template := resources.Get "scss/index.scss" }} + {{ if $template }} + {{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + + {{ end }} + {{ block "styling" . }} + {{ end }} + {{ $template := resources.Get "scss/totop.scss" }} + {{ if $template }} + {{ $totop := $template | resources.ExecuteAsTemplate "css/totop.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + + {{ end }} + + + {{ block "header" . }} + {{- partial "header.html" . -}} + {{ end }} + {{ block "main" . }} + + {{ end }} + {{ block "footer" . }} + {{- partial "footer.html" . -}} + {{ end }} + + \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f7c7c39..03d6e8b 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,24 +1,27 @@ {{ define "main" }} {{ with .Params.image }} {{ if .url }} - {{- partial "components/image.html" (dict "style" "coverimage" "url" .url "alt" .alt) -}} + {{ .alt }} {{ else }} - {{- partial "components/image.html" (dict "style" "coverimage" "url" .) -}} + {{ end }} {{ end }} {{ if .Content }}
{{ with .Title }} - {{ partial "components/title.html" . }} +
+

{{ . }}

+
+
{{ end }} {{.Content}}
- {{ else if .Params.header.enabled }} + {{ else }}
{{ end }} {{- range $index, $page := .Pages }} {{ $odd := mod $index 2 }} - {{ $id := .Params.id | default $page.Name }} + {{ $id := .Params.id | default $page.File.ContentBaseName }} {{ if eq .Params.type "slider" }} {{- partial "slider.html" (dict "id" $id "slider" .Params "color" $.Site.Params.color "odd" $odd) -}} {{ else if eq .Params.type "hero" }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 44a6ec4..d39b178 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,15 +1,18 @@ {{ define "main" }} - {{ with .Params.image }} - {{ if .url }} - {{- partial "components/image.html" (dict "style" "coverimage" "url" .url "alt" .alt) -}} - {{ else }} - {{- partial "components/image.html" (dict "style" "coverimage" "url" . "alt" "Cover") -}} + {{ with .Params.image }} + {{ if .url }} + {{ .alt }} + {{ else }} + + {{ end }} {{ end }} - {{ end }} -
- {{ with .Title }} - {{ partial "components/title.html" . }} - {{ end }} - {{ .Content }} -
+
+ {{ with .Title }} +
+

{{ . }}

+
+
+ {{ end }} + {{ .Content }} +
{{ end }} diff --git a/layouts/_default/term.html b/layouts/_default/term.html index e3d9bf0..20b37b0 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -1,7 +1,10 @@ {{ define "main" }}
- {{ partial "components/title.html" .Title }} +
+

{{ .Title }}

+
+
{{.Content}}
@@ -10,9 +13,9 @@
{{ if .Params.image }} - {{- partial "components/image.html" (dict "style" "cardImage" "url" .Params.image.url "alt" .Params.image.alt) -}} + {{ .Params.image.alt }} {{ else }} - {{- partial "components/image.html" (dict "style" "cardImage" "url" .Site.Params.defaultimage "alt" "Placeholder") -}} + Default Image {{ end }}
{{.Title}}
{{ .Summary | safeHTML | truncate 320 }}
@@ -23,4 +26,4 @@ {{ end }}
-{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 0c7bbaa..90d6075 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -1,17 +1,20 @@ {{ define "main" }}
-
- {{ partial "components/title.html" .Title }} -
- -
-{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/components/button.html b/layouts/partials/components/button.html index bca55e4..e52aa2e 100644 --- a/layouts/partials/components/button.html +++ b/layouts/partials/components/button.html @@ -1,6 +1,7 @@ - +{{ $outlined := "outlined"}} + {{ with .icon }} {{ end }} {{ .text }} - + \ No newline at end of file diff --git a/layouts/partials/components/icon.html b/layouts/partials/components/icon.html deleted file mode 100644 index bbea0ec..0000000 --- a/layouts/partials/components/icon.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - {{ if .text }} {{ .text }}{{ end }} - \ No newline at end of file diff --git a/layouts/partials/components/image.html b/layouts/partials/components/image.html deleted file mode 100644 index fcd402c..0000000 --- a/layouts/partials/components/image.html +++ /dev/null @@ -1,90 +0,0 @@ - -{{ $sizes := slice "320" "640" "960" "1280" }} -{{ $mediaWidthControl := "(max-width: 360px) 320px, (max-width: 680px) 640px, (max-width: 1100px) 960px, 1280px" }} - -{{ $id := .id }} -{{ $style := .style }} -{{ $alt := .alt }} -{{ $caption := .caption }} -{{ $width := .width }} -{{ $height := .height }} - -{{ $img := .Page.Resources.GetMatch .url }} -{{ if not $img }} - {{ $img = resources.Get .url }} - {{ if not $img }} - {{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }} - {{ end }} -{{ end }} - -{{ with $img }} - {{ $url := .RelPermalink }} - {{ $type := .MediaType.SubType }} - {{ $ext := path.Ext $url }} - {{ $name := path.Base (replace $url $ext "") }} - {{ $dir := path.Dir $url }} - - {{ if eq $type "svg" }} - {{ $alt }} - {{ else }} - - - - {{ $alt }} - - {{ end }} - {{ if $caption }} -

{{ $caption }}

- {{ end }} -{{ end }} - - -{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}} diff --git a/layouts/partials/components/title.html b/layouts/partials/components/title.html deleted file mode 100644 index f64f9d4..0000000 --- a/layouts/partials/components/title.html +++ /dev/null @@ -1,4 +0,0 @@ -
-

{{ . }}

-
-
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index bb705d1..51c24d4 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -1,19 +1,22 @@ -{{- $contact := .contact }} {{- $content := .content }} {{- $id := "contact"}} -{{if $contact.id}} {{- $id = $contact.id}} {{else if .id}} {{- $id = .id }} +{{- $contact := .contact }} +{{- $content := .content }} +{{- $id := "contact"}} +{{if $contact.id}} + {{- $id = $contact.id}} +{{else if .id}} + {{- $id = .id }} {{end}}
-
-
-

{{ $contact.title }}

- {{ if $contact.subtitle }} -

{{ $contact.subtitle }}

- {{ end }} -

{{ $content }}

+
+
+

{{ $contact.title }}

+ {{ if $contact.subtitle }} +

{{ $contact.subtitle }}

+ {{ end }} +

{{ $content }}

+
+
-
- {{ with $contact.button }} - {{ partial "components/button.html" . }} - {{ end }} -
-
diff --git a/layouts/partials/default.html b/layouts/partials/default.html index 254af1f..d625c62 100644 --- a/layouts/partials/default.html +++ b/layouts/partials/default.html @@ -9,7 +9,10 @@
{{ with $params.title }} - {{ partial "components/title.html" . }} +
+

{{ . }}

+
+
{{ end }} {{ .content }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5b8d9a5..c82ed56 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,4 @@ {{- $footer := .Site.Params.footer }} -{{ if $footer.enabled }} {{- $social := index $footer "social" }} {{- $links := index $footer "links" }} {{ $template := resources.Get "scss/footer.scss" }} @@ -11,11 +10,9 @@
@@ -29,6 +26,5 @@ © {{ dateFormat "2006" now }} {{ $footer.copyright }}
-{{ end }} -{{ partial "components/button.html" (dict "id" "totop" "type" "fab hide" "url" "#" "icon" "angle-up") }} - + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8be479e..cd22901 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,50 +1,44 @@ -{{- $header := .Site.Params.header }} -{{- $links := index $header "links" }} +{{- $header := .Site.Params.header }} +{{- $links := index $header "links" }} +{{ $template := resources.Get "scss/header.scss" }} +{{ if $template }} +{{ $index := $template | resources.ExecuteAsTemplate "css/header.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + +{{ end }} {{ $template := resources.Get "scss/progressbar.scss" }} {{ if $template }} -{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict -"outputStyle" "compressed") | fingerprint }} +{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} {{ end }}
-{{ if $header.enabled }} -{{ $template := resources.Get "scss/header.scss" }} -{{ if $template }} -{{ $index := $template | resources.ExecuteAsTemplate "css/header.scss" . | resources.ToCSS (dict "outputStyle" -"compressed") | fingerprint }} - -{{ end }} -{{ end }} - + \ No newline at end of file diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 7259aa2..9343c5c 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -4,33 +4,32 @@ {{- $odd := .odd }} {{- $id := "hero"}} {{if $hero.id}} -{{- $id := $hero.id}} + {{- $id := $hero.id}} {{else if .id}} -{{- $id := .id }} + {{- $id := .id }} {{end}} {{ $template := resources.Get "scss/hero.scss" }} {{ if $template }} -{{ $index := $template | resources.ExecuteAsTemplate "css/hero.scss" . | resources.ToCSS (dict "outputStyle" -"compressed") | fingerprint }} +{{ $index := $template | resources.ExecuteAsTemplate "css/hero.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} {{ end }}
-
-
- {{ with $hero.logo }} - {{- partial "components/image.html" (dict "type" .type "style" .style "url" .url "alt" .alt "width" .width "height" .height) -}} - {{ end }} - {{ partial "components/title.html" $hero.title }} -

{{ $content }}

-
- {{ with $hero.button }} - {{- range .}} - {{ partial "components/button.html" . }} - {{- end }} - {{ end }} +
+
+
+

{{ $hero.title }}

+
+
+

{{ $content }}

+
+ {{ with $hero.button }} + {{- range .}} + {{ partial "components/button.html" . }} + {{- end }} + {{ end }} +
+
+ {{ $hero.image.alt }} +
-
- {{- partial "components/image.html" $hero.image -}} -
-
-
+
\ No newline at end of file diff --git a/layouts/partials/links.html b/layouts/partials/links.html index dfe419f..6047415 100644 --- a/layouts/partials/links.html +++ b/layouts/partials/links.html @@ -10,7 +10,10 @@ +
\ No newline at end of file diff --git a/layouts/partials/logos.html b/layouts/partials/logos.html index 3e9289e..e60aa28 100644 --- a/layouts/partials/logos.html +++ b/layouts/partials/logos.html @@ -9,14 +9,15 @@ +
\ No newline at end of file diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html index b622ee8..d09905d 100644 --- a/layouts/partials/posts.html +++ b/layouts/partials/posts.html @@ -1,40 +1,37 @@ {{- $posts := .posts }} {{- $pages := .pages }} -{{- $defaultimage := .defaultimage }} -{{- $odd := .odd }} -{{- $id := "posts"}} +{{- $defaultimage := .defaultimage }} +{{- $odd := .odd }} +{{- $id := "posts"}} {{if $posts.id}} - {{- $id = $posts.id}} -{{else if .id}} - {{- $id = .id }} + {{- $id = $posts.id}} +{{else if .id}} + {{- $id = .id }} {{end}}
- +
\ No newline at end of file diff --git a/layouts/partials/service.html b/layouts/partials/service.html index 72e0245..feb8a2e 100644 --- a/layouts/partials/service.html +++ b/layouts/partials/service.html @@ -10,13 +10,16 @@
{{if and ($service.image) (eq $service.image.direction "left")}} -
- {{- partial "components/image.html" $service.image -}} +
+ {{ $service.image.alt }}
{{end}}
{{ with $service.title }} - {{ partial "components/title.html" . }} +
+

{{ . }}

+
+
{{ end }}

{{ $content }}


@@ -27,8 +30,8 @@ {{ end }}
{{if and ($service.image) (eq $service.image.direction "right")}} -
- {{- partial "components/image.html" $service.image -}} +
+ {{ $service.image.alt }}
{{end}}
diff --git a/layouts/partials/slider.html b/layouts/partials/slider.html index ef9a91a..8a7e38d 100644 --- a/layouts/partials/slider.html +++ b/layouts/partials/slider.html @@ -23,7 +23,7 @@
{{- range $index, $slide := $slider.images}}
- {{- partial "components/image.html" (dict "url" $slide "alt" $index) -}} + {{ $index }} {{ if gt $length 1}} @@ -41,4 +41,4 @@ -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/team.html b/layouts/partials/team.html index 402f557..acacb8d 100644 --- a/layouts/partials/team.html +++ b/layouts/partials/team.html @@ -10,15 +10,18 @@ {{end}}
- {{ partial "components/title.html" $team.title }} -
+
+

{{ $team.title }}

+
+
+
{{- range first 4 ((where $pages "Params.leaveDate" "==" nil).ByParam "startDate") }} - - {{ partial "components/button.html" (dict "type" "text block" "url" $team.id "text" ($team.more | default "More")) }} +
-
+
\ No newline at end of file diff --git a/layouts/posts/list.html b/layouts/posts/list.html index 745188d..9dfd199 100644 --- a/layouts/posts/list.html +++ b/layouts/posts/list.html @@ -1,7 +1,11 @@ {{ define "main" }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 5c1b20b..0e0b910 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,7 +1,47 @@ +{{ define "opengraph" }} + + + {{ with .Site.LanguageCode }} + + {{ end }} + + + + + {{ if .Params.image }} + + + {{ else }} + + + {{ end }} + {{ if .Params.summary }} + + + {{ else if .Content }} + + + {{ else }} + + + {{ end }} + + {{ with .Params.author }} + + {{ end }} + + {{ with .Params.tags }} + {{ range . }} + + {{ end }} + {{ end }} + + +{{ end }} + {{ define "main" }} {{ with .Params.image }} - {{ $style := "coverimage {{if ne .Params.image.cover }} noCover {{ end }}" }} - {{- partial "components/image.html" (dict "style" $style "url" .url "alt" .alt) -}} + {{ .alt }} {{ with .copyright }} {{ end }} @@ -27,18 +67,18 @@ -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/team/list.html b/layouts/team/list.html index 27c0ad1..b7f2ebc 100644 --- a/layouts/team/list.html +++ b/layouts/team/list.html @@ -1,7 +1,10 @@ {{ define "main" }}
- {{ partial "components/title.html" .Title }} +
+

{{ .Title }}

+
+
{{.Content}}
-{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/team/single.html b/layouts/team/single.html index c6a4b78..d0054f0 100644 --- a/layouts/team/single.html +++ b/layouts/team/single.html @@ -2,7 +2,7 @@
{{ with .Params.image }} - {{- partial "components/image.html" (dict "style" "teammember-header-avatar" "url" . "alt" "Avatar") -}} + Avatar {{ end }}
-{{ end }} +{{ end }} \ No newline at end of file diff --git a/static/button/apple-appstore-button.svg b/static/button/apple-appstore-button.svg deleted file mode 100644 index c0d7775..0000000 --- a/static/button/apple-appstore-button.svg +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/button/google-play-button.svg b/static/button/google-play-button.svg deleted file mode 100644 index 88fd0de..0000000 --- a/static/button/google-play-button.svg +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/js/totop.js b/static/js/totop.js index 7494ae0..14381e7 100644 --- a/static/js/totop.js +++ b/static/js/totop.js @@ -1,10 +1,10 @@ const scrollToTopButton = document.getElementById('totop'); const scrollToTopListener = () => { if (window.scrollY > 0) { - scrollToTopButton.className = "button fab show"; + scrollToTopButton.className = "totop show"; } else { - scrollToTopButton.className = "button fab hide"; + scrollToTopButton.className = "totop hide"; } }; -window.addEventListener("scroll", scrollToTopListener); +window.addEventListener("scroll", scrollToTopListener); \ No newline at end of file