summaryrefslogtreecommitdiff
path: root/themes/hugo-whisper-theme/assets/scss/components
diff options
context:
space:
mode:
authorRoger Gonzalez <roger@rogs.me>2023-01-08 22:12:24 -0300
committerRoger Gonzalez <roger@rogs.me>2023-01-08 22:12:24 -0300
commitb15ab4adb837e43409e5e3cf3a40a83ef4dbf62f (patch)
tree3b7d7e5dc84aabc839dd1d9174c4593cbd6b2f82 /themes/hugo-whisper-theme/assets/scss/components
Initial commit
Diffstat (limited to 'themes/hugo-whisper-theme/assets/scss/components')
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_anchor.scss10
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_buttons.scss23
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_content.scss136
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_docs-menu.scss30
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_footer.scss76
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_hamburger.scss27
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_header.scss26
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_logo.scss32
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_main-menu-mobile.scss92
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_main-menu.scss32
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_overview.scss6
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_page.scss8
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_reset.scss6
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_strip.scss55
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_sub-footer.scss62
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_title.scss23
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_type.scss7
-rw-r--r--themes/hugo-whisper-theme/assets/scss/components/_whitebox.scss10
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();
+}