diff options
Diffstat (limited to 'themes/hugo-whisper-theme/assets/scss/components')
18 files changed, 661 insertions, 0 deletions
diff --git a/themes/hugo-whisper-theme/assets/scss/components/_anchor.scss b/themes/hugo-whisper-theme/assets/scss/components/_anchor.scss new file mode 100644 index 0000000..8b494e6 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_anchor.scss @@ -0,0 +1,10 @@ +.content { + .header-anchor { + text-decoration: none; + fill: currentColor; + opacity: 0.6; + } + .header-anchor:hover { + opacity: 1; + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_buttons.scss b/themes/hugo-whisper-theme/assets/scss/components/_buttons.scss new file mode 100644 index 0000000..59cfc5b --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_buttons.scss @@ -0,0 +1,23 @@ +.button { + white-space: nowrap; + display: inline-block; + padding: 8px 15px 6px 15px; + background: $primary; + font-weight: normal; + text-transform: uppercase; + color: lighten($primary, 50%); + text-decoration: none; + -webkit-transition: all 0.15s ease; + transition: all 0.15s ease; + border-radius: 3px; + &:hover { + color: #fff; + background-color: lighten($primary, 10%); + text-decoration: none; + } +} +.button-white { + background: none; + color: #fff; + border: 2px solid #fff; +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_content.scss b/themes/hugo-whisper-theme/assets/scss/components/_content.scss new file mode 100644 index 0000000..969bedd --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_content.scss @@ -0,0 +1,136 @@ +.content { + -webkit-font-smoothing: antialiased; + .highlight { + border-radius: 2px; + margin-bottom: 20px; + } + code { + background: #f5f5f5; + padding: 3px 6px; + border-radius: 3px; + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + } + pre { + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + margin: 0; + padding: 10px; + border-radius: 1px; + code { + font-family: $font-family-mono; + font-size: 0.9rem; + line-height: 1.4; + border-radius: none; + padding: 0; + margin: 0; + background: none; + } + } + + strong { + font-weight: bold; + } + em { + font-style: italic; + font-weight: normal; + } + ol { + margin-top: 10px; + margin-bottom: 20px; + list-style-type: decimal; + li { + margin-bottom: 5px; + margin-left: 20px; + } + } + ul { + margin-top: 10px; + margin-bottom: 20px; + list-style-type: disc; + li { + margin-bottom: 5px; + margin-left: 20px; + } + } + a { + text-decoration: underline; + } + p { + font-family: $font-family-base; + font-size: 1rem; + line-height: 1.4; + color: lighten($black, 10%); + font-weight: 400; + } + h1 { + font-family: $font-family-base; + font-size: 2.6rem; + line-height: 1.4; + font-weight: 300; + margin-bottom: 20px; + } + h2 { + font-size: 2.2rem; + line-height: 1.4; + font-weight: 300; + letter-spacing: -0.01em; + font-family: $font-family-base; + margin-bottom: 20px; + } + h3 { + font-size: 1.6rem; + line-height: 1.4; + font-weight: 400; + font-family: $font-family-base; + margin-bottom: 20px; + } + h4 { + font-size: 1.5rem; + line-height: 1.4; + font-weight: 500; + font-family: $font-family-base; + margin-bottom: 20px; + } + h5 { + font-size: 1.4rem; + line-height: 1.4; + font-weight: 600; + font-family: $font-family-base; + margin-bottom: 20px; + } + h6 { + font-size: 1.2rem; + line-height: 1.4; + font-weight: 700; + font-family: $font-family-base; + margin-bottom: 20px; + } + blockquote { + background: #f9f9f9; + border-left: 10px solid #ccc; + margin: 1.5em 10px; + padding: 0.5em 10px; + quotes: '\201C''\201D''\2018''\2019'; + } + blockquote:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; + } + blockquote p { + display: inline; + } + table { + @extend .table; + } + img { + max-width: 100%; + height: auto; + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_docs-menu.scss b/themes/hugo-whisper-theme/assets/scss/components/_docs-menu.scss new file mode 100644 index 0000000..09b0e8a --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_docs-menu.scss @@ -0,0 +1,30 @@ +.docs-menu { + h4 { + font-size: 1rem; + font-weight: bold; + } + ul { + list-style: none; + padding: 0; + margin: 0; + li { + font-size: 0.9rem; + line-height: 1.4; + font-weight: 400; + margin: 0; + padding: 4px 0 4px 0; + &.active { + a { + color: lighten($primary, 10%); + font-weight: 400; + } + } + a { + color: $black; + &:hover { + color: $primary; + } + } + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_footer.scss b/themes/hugo-whisper-theme/assets/scss/components/_footer.scss new file mode 100644 index 0000000..6cd901c --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_footer.scss @@ -0,0 +1,76 @@ +.footer { + background: #eaeaea; + padding-top: 20px; + padding-bottom: 20px; + .footer-inner { + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: flex-start; + @include media-breakpoint-up(sm) { + justify-content: space-between; + flex-direction: row; + align-items: center; + } + } + .footer-title { + color: #ffffff; + font-size: 1.3rem; + font-family: $font-family-serif; + margin-bottom: 10px; + flex: 0; + @include media-breakpoint-up(sm) { + margin: 0; + flex: 0 0 120px; + } + } + ul.footer-menu { + list-style: none; + margin: 0; + padding: 0; + flex: 1; + li { + display: block; + margin-right: 10px; + color: #333; + font-size: 0.9rem; + line-height: 1.8; + &:last-of-type { + margin-right: 0; + } + a { + color: #333; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + &.copyright { + font-weight: bold; + color: #333; + display: none; + @include media-breakpoint-up(md) { + display: inline-block; + } + } + } + @include media-breakpoint-up(sm) { + height: inherit; + display: flex; + list-style: none; + margin: 0; + padding: 0; + align-items: center; + justify-content: flex-end; + li { + list-style: none; + a { + display: inline-block; + height: 40px; + padding: 10px 8px 10px 8px; + font-weight: 300; + } + } + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_hamburger.scss b/themes/hugo-whisper-theme/assets/scss/components/_hamburger.scss new file mode 100644 index 0000000..2400ddc --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_hamburger.scss @@ -0,0 +1,27 @@ +.hamburger { + padding: 10px 0 10px 10px; + outline: none; + z-index: 30; + cursor: pointer; + @include media-breakpoint-up(md) { + display: none; + } + &:focus { + outline: none; + } + .hamburger-inner, + .hamburger-inner::before, + .hamburger-inner::after { + background: $primary; + } + .hamburger-inner::after { + width: 18px; + right: 0; + } + &.is-active { + .hamburger-inner::after { + width: inherit; + right: unset; + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_header.scss b/themes/hugo-whisper-theme/assets/scss/components/_header.scss new file mode 100644 index 0000000..e5fc410 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_header.scss @@ -0,0 +1,26 @@ +.header { + color: $primary; + background-color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0 10px 0; + // box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2); + .container { + display: flex; + justify-content: space-between; + align-items: center; + } + &.header-absolute { + position: absolute; + z-index: 10; + width: 100%; + } +} +.lock-scroll { + .header { + &.header-absolute { + position: static; + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_logo.scss b/themes/hugo-whisper-theme/assets/scss/components/_logo.scss new file mode 100644 index 0000000..50ed25b --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_logo.scss @@ -0,0 +1,32 @@ +.logo { + display: none; + @include media-breakpoint-up(sm) { + display: block; + width: 70px; + } + img { + width: 100%; + height: auto; + } + a { + display: block; + width: 100%; + height: 100%; + } +} +.logo-mobile { + display: block; + width: 54px; + @include media-breakpoint-up(sm) { + display: none; + } + img { + width: 100%; + height: auto; + } + a { + display: block; + width: 100%; + height: 100%; + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss b/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss new file mode 100644 index 0000000..0826118 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss @@ -0,0 +1,92 @@ +.main-menu-mobile { + position: fixed; + background: $primary; + top: 0; + left: 0; + width: 100%; + height: 100vh; + opacity: 0; + visibility: hidden; + transition: opacity 0.35s, visibility 0.35s, height 0.35s; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + &.open { + opacity: 0.9; + visibility: visible; + height: 100%; + z-index: 20; + li { + animation: fadeInRight 0.5s ease forwards; + animation-delay: 0.35s; + &:nth-of-type(2) { + animation-delay: 0.4s; + } + &:nth-of-type(3) { + animation-delay: 0.45s; + } + &:nth-of-type(4) { + animation-delay: 0.5s; + } + &:nth-of-type(5) { + animation-delay: 0.55s; + } + &:nth-of-type(6) { + animation-delay: 0.6s; + } + } + } + ul { + font-size: 2rem; + font-family: $font-family-base; + text-align: center; + list-style: none; + padding: 0; + margin: 0; + flex: 0; + li { + display: block; + position: relative; + opacity: 0; + a { + display: block; + position: relative; + color: #ffffff; + text-decoration: none; + overflow: hidden; + font-weight: lighter; + &:hover::after, + &:focus::after, + &:active::after { + width: 100%; + } + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0%; + transform: translateX(-50%); + height: 3px; + background: #ffffff; + transition: 0.35s; + } + } + } + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + left: 20%; + } + 100% { + opacity: 1; + left: 0; + } +} +.lock-scroll { + overflow: hidden; +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_main-menu.scss b/themes/hugo-whisper-theme/assets/scss/components/_main-menu.scss new file mode 100644 index 0000000..56d7d7f --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_main-menu.scss @@ -0,0 +1,32 @@ +.main-menu { + display: none; + @include media-breakpoint-up(md) { + display: block; + } + > ul { + display: flex; + align-items: center; + justify-content: flex-start; + font-family: $font-family-base; + > li { + list-style: none; + font-size: 14px; + > a { + padding: 10px 14px 10px 14px; + display: inline-block; + font-weight: normal; + text-decoration: none; + color: $primary; + &:hover { + text-decoration: underline; + color: $primary; + } + } + &.active { + > a { + font-weight: bold; + } + } + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_overview.scss b/themes/hugo-whisper-theme/assets/scss/components/_overview.scss new file mode 100644 index 0000000..3c92b54 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_overview.scss @@ -0,0 +1,6 @@ +.overview { + background: lightgoldenrodyellow; + border-radius: 3px; + padding: 4px 10px 4px 10px; + float: right; +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_page.scss b/themes/hugo-whisper-theme/assets/scss/components/_page.scss new file mode 100644 index 0000000..9007af2 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_page.scss @@ -0,0 +1,8 @@ +.page { + display: flex; + min-height: 100vh; + flex-direction: column; + .wrapper { + flex: 1; + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_reset.scss b/themes/hugo-whisper-theme/assets/scss/components/_reset.scss new file mode 100644 index 0000000..4fa2bc1 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_reset.scss @@ -0,0 +1,6 @@ +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_strip.scss b/themes/hugo-whisper-theme/assets/scss/components/_strip.scss new file mode 100644 index 0000000..af09e25 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_strip.scss @@ -0,0 +1,55 @@ +.strip { + background-repeat: no-repeat; +} +.strip-white { + background-color: white; +} +.strip-grey { + background-color: #f4f5fb; +} +.strip-diagonal { + transform: skewY(5deg); + padding-bottom: 50px; + margin-bottom: 65px; + > div { + transform: skewY(-5deg); + } +} +.strip-primary-gradient { + background-image: linear-gradient(to right, $primary, $secondary); +} +.strip-primary-gradient-top-bottom { + background-image: linear-gradient(to bottom, $primary, $secondary); +} +.strip-primary { + background-color: $primary; +} +.strip-secondary { + background-color: $secondary; +} + +.strip-diagonal-right { + margin-top: -100px; + transform: skewY(-5deg); + padding-bottom: 100px; + > div { + transform: skewY(5deg); + } +} + +.strip-diagonal-left { + margin-top: -100px; + transform: skewY(5deg); + padding-bottom: 100px; + > div { + transform: skewY(-5deg); + } +} + +.strip-bg-contain { + background-size: contain; +} + +.strip-bg-cover { + background-size: cover; +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_sub-footer.scss b/themes/hugo-whisper-theme/assets/scss/components/_sub-footer.scss new file mode 100644 index 0000000..986e7dd --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_sub-footer.scss @@ -0,0 +1,62 @@ +.sub-footer { + background: #f4f5fb; + padding-top: 20px; + padding-bottom: 20px; + @include media-breakpoint-up(md) { + padding-top: 10px; + padding-bottom: 10px; + } + .sub-footer-inner { + display: flex; + flex-direction: column; + justify-content: flex-end; + @include media-breakpoint-up(md) { + flex-direction: row; + } + ul { + list-style: none; + margin: 0; + padding: 0; + li { + list-style: none; + display: block; + color: #333; + font-size: 0.9rem; + line-height: 1.8; + font-weight: bold; + strong { + font-weight: bold; + color: #ffffff; + } + a { + color: #333; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + span { + display: inline-block; + height: 40px; + padding: 10px 0 10px 8px; + font-weight: bold; + color: #ffffff; + } + &.zerostatic { + a { + color: #333; + } + } + } + @include media-breakpoint-up(sm) { + li { + display: inline-block; + margin-left: 10px; + &:first-of-type { + margin-left: 0; + } + } + } + } + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_title.scss b/themes/hugo-whisper-theme/assets/scss/components/_title.scss new file mode 100644 index 0000000..07e0016 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_title.scss @@ -0,0 +1,23 @@ +.title { + font-size: 2.7rem; + line-height: 1.1; + font-family: $font-family-base; + letter-spacing: -0.2px; + font-weight: 100; + margin-bottom: 20px; + @include media-breakpoint-up(md) { + font-size: 3rem; + margin-bottom: 30px; + } +} +.title-summary { + font-size: 1.6rem; + line-height: 1.4; + font-family: $font-family-base; + letter-spacing: -0.2px; + font-weight: 200; + margin-bottom: 10px; + @include media-breakpoint-up(md) { + font-size: 1.6rem; + } +} diff --git a/themes/hugo-whisper-theme/assets/scss/components/_type.scss b/themes/hugo-whisper-theme/assets/scss/components/_type.scss new file mode 100644 index 0000000..3910f8d --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_type.scss @@ -0,0 +1,7 @@ +p { +font-family: $font-family-base; +font-size: 1rem; +line-height: 1.4; +color: lighten($black, 10%); +font-weight: 400; +}
\ No newline at end of file diff --git a/themes/hugo-whisper-theme/assets/scss/components/_whitebox.scss b/themes/hugo-whisper-theme/assets/scss/components/_whitebox.scss new file mode 100644 index 0000000..ee1c5d8 --- /dev/null +++ b/themes/hugo-whisper-theme/assets/scss/components/_whitebox.scss @@ -0,0 +1,10 @@ +@mixin whitebox($padding: 10px) { + border: 1px solid #dcdcdc; + border-radius: 3px; + box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); + background: #ffffff; + padding: $padding; +} +.whitebox { + @include whitebox(); +} |