From 0379080b52533be3e49b390d6136a6673eaf2696 Mon Sep 17 00:00:00 2001 From: Aaron Qian Date: Sun, 13 Nov 2022 23:41:28 -0800 Subject: [PATCH] migrate navbar.css and plyr --- assets/styles/application.template.scss | 12 +- assets/styles/navigators/navbar.css | 302 ++++++++++++++++++++++++ data/toha/styles.yml | 5 + layouts/partials/header.html | 4 +- static/css/navigators/navbar.css | 301 ----------------------- 5 files changed, 317 insertions(+), 307 deletions(-) create mode 100644 assets/styles/navigators/navbar.css delete mode 100644 static/css/navigators/navbar.css diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index ffb3337..3278c8a 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -2,6 +2,10 @@ @import './layouts/main'; +@import './navigators/navbar'; + + + {{ range $feature, $featureDef := site.Params.features }} {{ with $featureDef }} {{ $featureEnabled := or (not (isset . "enable")) .enable }} @@ -14,9 +18,11 @@ {{ range $service, $config := .services }} {{ with (index site.Data.toha.styles $feature) }} - {{ with index $service }} - {{ range .styles }} - @import '{{.}}'; + {{ with .services }} + {{ with (index . $service) }} + {{ range .styles }} + @import '{{ . }}'; + {{ end }} {{ end }} {{ end }} {{ end }} diff --git a/assets/styles/navigators/navbar.css b/assets/styles/navigators/navbar.css new file mode 100644 index 0000000..29284da --- /dev/null +++ b/assets/styles/navigators/navbar.css @@ -0,0 +1,302 @@ +.top-navbar { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 50px; + z-index: 99999; + transition: all 0.4s ease-out; + margin: 0px; + padding-top: 0.4rem; + text-align: center; + } + + /* --- initial state start ------ */ + + .initial-navbar { + background-color: transparent; + } + + .initial-navbar .navbar-brand { + color: #c0ccda; + font-weight: 600; + } + + .initial-navbar li a { + color: #c0ccda; + } + + .initial-navbar .navbar-nav .active, + .initial-navbar li a:hover { + color: #f9fafc; + transition: all 0.3s ease-out; + transform: translateY(-2px); + } + + .navbar-collapse { + margin-top: -5px; + } + + .navbar-collapse.show, + .navbar-collapse.collapsing { + background-color: #f9fafc; + padding-left: 1rem; + } + + /* --- initial state end ------ */ + + /* --- state after scroll start --- */ + + .final-navbar { + background-color: #f9fafc; + color: #1c2d41; + transition: all 0.3s ease-out; + } + + .final-navbar .navbar-brand { + color: #1c2d41; + font-weight: 600; + } + + .final-navbar li a { + color: #1c2d41; + font-weight: 500; + transition: all 0.3s ease-out; + border-bottom: 2px solid#F9FAFC; + } + + .final-navbar .navbar-nav .active, + .final-navbar li a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + border-bottom: 2px solid #2098d1; + background: rgb(2, 0, 36); + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(34, 136, 168, 0.1) 0% + ); + } + + .navbar-collapse.show li a, + .navbar-collapse.collapsing li a { + color: #1c2d41; + font-weight: 500; + transition: all 0.3s ease-out; + } + + .navbar-collapse.show .navbar-nav .active, + .navbar-collapse.show .navbar-nav a:hover { + color: #2098d1; + } + + #top-navbar-divider { + margin-top: 10px; + } + + /* --- state after scroll end --- */ + + #top-navbar-divider { + background: rgba(192, 204, 218, 0.8); + height: 20px; + width: 2px; + } + + .final-navbar #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + } + + #top-navbar-divider { + height: 20px; + width: 2px; + } + + .navbar-brand img { + width: 42px; + padding: 5px; + margin-left: -10px; + } + + .top-navbar .dropdown-menu { + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + border: 1px solid #fff; + max-height: 0vh; + overflow: hidden; + display: block; + visibility: hidden; + transition: all 0.3s ease-out; + } + + .top-navbar .dropdown-menu.show { + max-height: 100vh; + visibility: visible; + transition: all 0.3s ease-in; + } + + .top-navbar .dropdown-menu a { + color: #1c2d41; + border-bottom: none; + } + + .top-navbar .dropdown-menu a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + border-bottom: none; + background: rgb(2, 0, 36); + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(34, 136, 168, 0.2) 0% + ); + } + + /* ============= Device specific fixes ======= */ + + /* Large screens such as TV */ + @media only screen and (min-width: 1824px) { + } + + /* Extra large devices (large desktops, 1200px and up) */ + + @media (max-width: 1400px) { + } + + @media (max-width: 1200px) { + } + + /* IPad Pro */ + @media (max-width: 1024px) { + .top-navbar { + height: -moz-fit-content; + height: fit-content; + padding-bottom: 0px; + padding-top: 0px; + } + + .top-navbar .container { + max-width: 100%; + } + + .initial-navbar .navbar-nav .active, + .initial-navbar li a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + } + + .final-navbar .navbar-nav .active, + .final-navbar li a:hover { + color: #2098d1; + transition: none; + + border-bottom: none; + background: transparent; + } + + .final-navbar li a { + border-bottom: none; + } + + .dropdown-divider { + border-top: 1px solid #c0ccda; + } + #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + height: auto; + width: auto; + margin-right: 15px; + } + .top-navbar .dropdown-menu { + text-align: center; + margin-bottom: 0.5rem; + margin-right: 1rem; + transition: all 0.3s ease-out; + } + } + + /* Large devices (desktops, 992px and up) */ + + @media (max-width: 992px) { + .initial-navbar .navbar-nav .active, + .initial-navbar li a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + } + + .final-navbar .navbar-nav .active, + .final-navbar li a:hover { + color: #2098d1; + transition: none; + + border-bottom: none; + background: transparent; + } + + .final-navbar li a { + border-bottom: none; + } + + .dropdown-divider { + border-top: 1px solid #c0ccda; + } + #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + height: auto; + width: auto; + margin-right: 15px; + } + } + + /* Medium devices (tablets, 768px and up) */ + + @media only screen and (max-width: 768px) { + .initial-navbar .navbar-nav .active, + .initial-navbar li a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + } + + .final-navbar .navbar-nav .active, + .final-navbar li a:hover { + color: #2098d1; + transition: none; + + border-bottom: none; + background: transparent; + } + + .final-navbar li a { + border-bottom: none; + } + + .dropdown-divider { + border-top: 1px solid #c0ccda; + } + #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + height: auto; + width: auto; + margin-right: 15px; + } + } + + /* Small devices (landscape phones, 576px and up) */ + + @media only screen and (max-width: 576px) { + .top-navbar .dropdown-menu { + margin-left: -1rem; + margin-right: 0rem; + } + } + + /* iPhoneX, iPhone 6,7,8 */ + @media only screen and (max-width: 375px) { + } + + /* Galaxy S5, Moto G4 */ + @media only screen and (max-width: 360px) { + } + + /* iPhone 5 or before */ + @media only screen and (max-width: 320px) { + } + \ No newline at end of file diff --git a/data/toha/styles.yml b/data/toha/styles.yml index a3ea9d2..984c8f0 100644 --- a/data/toha/styles.yml +++ b/data/toha/styles.yml @@ -2,3 +2,8 @@ flags: styles: - flag-icon-css/css/flag-icons +videoplayer: + services: + plyr: + styles: + - plyr/dist/plyr \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 35af7ab..bf9dd28 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,10 +2,8 @@ - {{ partial "helpers/style-bundle.html" . }} - - + diff --git a/static/css/navigators/navbar.css b/static/css/navigators/navbar.css deleted file mode 100644 index be06752..0000000 --- a/static/css/navigators/navbar.css +++ /dev/null @@ -1,301 +0,0 @@ -.top-navbar { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 50px; - z-index: 99999; - transition: all 0.4s ease-out; - margin: 0px; - padding-top: 0.4rem; - text-align: center; -} - -/* --- initial state start ------ */ - -.initial-navbar { - background-color: transparent; -} - -.initial-navbar .navbar-brand { - color: #c0ccda; - font-weight: 600; -} - -.initial-navbar li a { - color: #c0ccda; -} - -.initial-navbar .navbar-nav .active, -.initial-navbar li a:hover { - color: #f9fafc; - transition: all 0.3s ease-out; - transform: translateY(-2px); -} - -.navbar-collapse { - margin-top: -5px; -} - -.navbar-collapse.show, -.navbar-collapse.collapsing { - background-color: #f9fafc; - padding-left: 1rem; -} - -/* --- initial state end ------ */ - -/* --- state after scroll start --- */ - -.final-navbar { - background-color: #f9fafc; - color: #1c2d41; - transition: all 0.3s ease-out; -} - -.final-navbar .navbar-brand { - color: #1c2d41; - font-weight: 600; -} - -.final-navbar li a { - color: #1c2d41; - font-weight: 500; - transition: all 0.3s ease-out; - border-bottom: 2px solid#F9FAFC; -} - -.final-navbar .navbar-nav .active, -.final-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - border-bottom: 2px solid #2098d1; - background: rgb(2, 0, 36); - background: linear-gradient( - 90deg, - rgba(2, 0, 36, 1) 0%, - rgba(34, 136, 168, 0.1) 0% - ); -} - -.navbar-collapse.show li a, -.navbar-collapse.collapsing li a { - color: #1c2d41; - font-weight: 500; - transition: all 0.3s ease-out; -} - -.navbar-collapse.show .navbar-nav .active, -.navbar-collapse.show .navbar-nav a:hover { - color: #2098d1; -} - -#top-navbar-divider { - margin-top: 10px; -} - -/* --- state after scroll end --- */ - -#top-navbar-divider { - background: rgba(192, 204, 218, 0.8); - height: 20px; - width: 2px; -} - -.final-navbar #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); -} - -#top-navbar-divider { - height: 20px; - width: 2px; -} - -.navbar-brand img { - width: 42px; - padding: 5px; - margin-left: -10px; -} - -.top-navbar .dropdown-menu { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - max-height: 0vh; - overflow: hidden; - display: block; - visibility: hidden; - transition: all 0.3s ease-out; -} - -.top-navbar .dropdown-menu.show { - max-height: 100vh; - visibility: visible; - transition: all 0.3s ease-in; -} - -.top-navbar .dropdown-menu a { - color: #1c2d41; - border-bottom: none; -} - -.top-navbar .dropdown-menu a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - border-bottom: none; - background: rgb(2, 0, 36); - background: linear-gradient( - 90deg, - rgba(2, 0, 36, 1) 0%, - rgba(34, 136, 168, 0.2) 0% - ); -} - -/* ============= Device specific fixes ======= */ - -/* Large screens such as TV */ -@media only screen and (min-width: 1824px) { -} - -/* Extra large devices (large desktops, 1200px and up) */ - -@media (max-width: 1400px) { -} - -@media (max-width: 1200px) { -} - -/* IPad Pro */ -@media (max-width: 1024px) { - .top-navbar { - height: -moz-fit-content; - height: fit-content; - padding-bottom: 0px; - padding-top: 0px; - } - - .top-navbar .container { - max-width: 100%; - } - - .initial-navbar .navbar-nav .active, - .initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - .final-navbar .navbar-nav .active, - .final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - .final-navbar li a { - border-bottom: none; - } - - .dropdown-divider { - border-top: 1px solid #c0ccda; - } - #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); - height: auto; - width: auto; - margin-right: 15px; - } - .top-navbar .dropdown-menu { - text-align: center; - margin-bottom: 0.5rem; - margin-right: 1rem; - transition: all 0.3s ease-out; - } -} - -/* Large devices (desktops, 992px and up) */ - -@media (max-width: 992px) { - .initial-navbar .navbar-nav .active, - .initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - .final-navbar .navbar-nav .active, - .final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - .final-navbar li a { - border-bottom: none; - } - - .dropdown-divider { - border-top: 1px solid #c0ccda; - } - #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); - height: auto; - width: auto; - margin-right: 15px; - } -} - -/* Medium devices (tablets, 768px and up) */ - -@media only screen and (max-width: 768px) { - .initial-navbar .navbar-nav .active, - .initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - .final-navbar .navbar-nav .active, - .final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - .final-navbar li a { - border-bottom: none; - } - - .dropdown-divider { - border-top: 1px solid #c0ccda; - } - #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); - height: auto; - width: auto; - margin-right: 15px; - } -} - -/* Small devices (landscape phones, 576px and up) */ - -@media only screen and (max-width: 576px) { - .top-navbar .dropdown-menu { - margin-left: -1rem; - margin-right: 0rem; - } -} - -/* iPhoneX, iPhone 6,7,8 */ -@media only screen and (max-width: 375px) { -} - -/* Galaxy S5, Moto G4 */ -@media only screen and (max-width: 360px) { -} - -/* iPhone 5 or before */ -@media only screen and (max-width: 320px) { -}