diff --git a/TODOs.md b/TODOs.md deleted file mode 100644 index ae4bcfe..0000000 --- a/TODOs.md +++ /dev/null @@ -1 +0,0 @@ -1. Refactor ribbon components to be re-usable! \ No newline at end of file diff --git a/assets/logo.png b/assets/logo.png deleted file mode 100644 index 852cf7f..0000000 Binary files a/assets/logo.png and /dev/null differ diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 0000000..8aa924d --- /dev/null +++ b/babel.config.json @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] +} \ No newline at end of file diff --git a/docs/about.png b/docs/about.png deleted file mode 100644 index 9193955..0000000 Binary files a/docs/about.png and /dev/null differ diff --git a/docs/contact.png b/docs/contact.png deleted file mode 100644 index 5a603e9..0000000 Binary files a/docs/contact.png and /dev/null differ diff --git a/docs/detail.png b/docs/detail.png deleted file mode 100644 index 0a98311..0000000 Binary files a/docs/detail.png and /dev/null differ diff --git a/docs/home.png b/docs/home.png deleted file mode 100644 index f2ade05..0000000 Binary files a/docs/home.png and /dev/null differ diff --git a/docs/screenshot.png b/docs/screenshot.png deleted file mode 100644 index ad046b4..0000000 Binary files a/docs/screenshot.png and /dev/null differ diff --git a/experiments.html b/experiments.html deleted file mode 100644 index dd50c53..0000000 --- a/experiments.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - fibonacci | Contact - - - - - - -
- - -
- - -
- - - - - - - -
- being pragmatic... -
-
- - - -
- - -
- - - - -
- - -
-
-

Contact

-
-
- - -
-

Lorem ipsum dolor smit ameit

-

Lorem ipsum dolor smit ameit

-

Lorem ipsum dolor smit ameit

-

Lorem ipsum dolor smit ameit

-
Lorem ipsum dolor smit ameit
-
Lorem ipsum dolor smit ameit
-

- Lorem ipsum dolor smit ameit -

-
-
-
- - - -
- - - - \ No newline at end of file diff --git a/fibonacci.css b/fibonacci.css deleted file mode 100644 index d1e7775..0000000 --- a/fibonacci.css +++ /dev/null @@ -1,4051 +0,0 @@ -@charset "UTF-8"; -@import url("//fonts.googleapis.com/css?family=Source%20Serif%20Pro%3A400%2C400i%2C600|Source%20Sans%20Pro%3A400%2C400i%2C600|Amatic%20SC%3Awght%40700"); -/** - Sizes built with golden ratio (1.618) with the interval of 5. - Font Size Calculator: https://gist.github.com/VJAI/f4240f0353bf992d967f52f74844d963 - - const base = 19; - const ratio = 1.618; - const interval = 5; - - function size(point) { - const s = base * Math.pow(ratio, point/interval); - return [s, `${(s / base).toFixed(3)} rem`]; - } - - for (let i = -20; i < 20; i++) { - console.log(size(i)); - } - - 0.146[20] 0.161[19] 0.177[18] 0.195[17] 0.214[16] 0.236[15] 0.260[14] 0.286[13] 0.315[12] 0.347[11] - 0.382[10] 0.421[09] 0.463[08] 0.510[07] 0.561[06] 0.618[05] 0.680[04] 0.749[03] 0.825[02] 0.908[01] - 1.000[00] 1.101[01] 1.212[02] 1.335[03] 1.470[04] 1.618[05] 1.781[06] 1.961[07] 2.160[08] 2.378[09] - 2.618[10] 2.882[11] 3.174[12] 3.494[13] 3.847[14] 4.236[15] 4.664[16] 5.135[17] 5.654[18] 6.225[19] - */ -:root { - --base-size: 16px; - --xs-size: 0.825rem; - --sm-size: 0.908rem; - --md-size: 1rem; - --lg-size: 1.335rem; - --xl-size: 1.781rem; - --xxl-size: 2.16rem; - font-size: var(--base-size); - --brand-color: #f04875; - --brand-light: #f68faa; - --brand-dark: #da1247; - --brand-bg: #4b555e; - --brand-gray: #bdb5b8; - --dark-gray: #333333; - --medium-gray: #5c5c5c; - --gray: #9a9a9a; - --light-gray: #e6e6e6; - --dim-gray: #f7f7f7; -} - -@media only screen and (min-width: 768px) { - :root { - --base-size: 19px; - --xs-size: 0.749rem; - --sm-size: 0.825rem; - --md-size: 1rem; - --lg-size: 1.335rem; - --xl-size: 1.961rem; - --xxl-size: 2.618rem; - } -} -html, body { - box-sizing: border-box; - margin: 0; - padding: 0; - font-family: "Source Serif Pro", Georgia, serif; - font-size: var(--md-size); - line-height: 1.5; - color: #333333; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -p, .cmp__para { - margin-top: 0; - margin-bottom: var(--md-size); - font-size: var(--md-size); -} - -h1, .cmp__h1, -h2, .cmp__h2, -h3, .cmp__h3, -h4, .cmp__h4, -h5, .cmp__h5, -h6, .cmp__h6 { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - line-height: 1; - letter-spacing: -0.5px; - color: #5c5c5c; -} -h1 a:link, -h1 a:visited, -h1 a:hover, -h1 a:focus, -h1 a:active, .cmp__h1 a:link, -.cmp__h1 a:visited, -.cmp__h1 a:hover, -.cmp__h1 a:focus, -.cmp__h1 a:active, -h2 a:link, -h2 a:visited, -h2 a:hover, -h2 a:focus, -h2 a:active, .cmp__h2 a:link, -.cmp__h2 a:visited, -.cmp__h2 a:hover, -.cmp__h2 a:focus, -.cmp__h2 a:active, -h3 a:link, -h3 a:visited, -h3 a:hover, -h3 a:focus, -h3 a:active, .cmp__h3 a:link, -.cmp__h3 a:visited, -.cmp__h3 a:hover, -.cmp__h3 a:focus, -.cmp__h3 a:active, -h4 a:link, -h4 a:visited, -h4 a:hover, -h4 a:focus, -h4 a:active, .cmp__h4 a:link, -.cmp__h4 a:visited, -.cmp__h4 a:hover, -.cmp__h4 a:focus, -.cmp__h4 a:active, -h5 a:link, -h5 a:visited, -h5 a:hover, -h5 a:focus, -h5 a:active, .cmp__h5 a:link, -.cmp__h5 a:visited, -.cmp__h5 a:hover, -.cmp__h5 a:focus, -.cmp__h5 a:active, -h6 a:link, -h6 a:visited, -h6 a:hover, -h6 a:focus, -h6 a:active, .cmp__h6 a:link, -.cmp__h6 a:visited, -.cmp__h6 a:hover, -.cmp__h6 a:focus, -.cmp__h6 a:active { - border-bottom: none; -} - -h1, .cmp__h1 { - margin-top: var(--xl-size); - margin-bottom: var(--lg-size); - font-size: var(--xxl-size); -} - -h2, .cmp__h2 { - margin-top: 1.781rem; - margin-bottom: var(--md-size); - font-size: var(--xl-size); -} - -h3, .cmp__h3 { - margin-top: var(--lg-size); - margin-bottom: var(--sm-size); - font-size: 1.618rem; -} - -h4, .cmp__h4 { - margin-top: var(--lg-size); - margin-bottom: var(--xs-size); - font-size: var(--lg-size); -} - -h5, .cmp__h5 { - margin-top: var(--lg-size); - margin-bottom: var(--xs-size); - font-size: var(--md-size); - text-transform: uppercase; - letter-spacing: 0.5px; - color: #9a9a9a; -} - -h6, .cmp__h6 { - margin-top: var(--lg-size); - margin-bottom: var(--xs-size); - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 0.5px; - color: #9a9a9a; -} - -a:link, -a:visited, -a:hover, -a:focus, -a:active { - color: inherit; - border-bottom: dotted 1px; - text-decoration: none; - transition: all 0.5s; -} - -a:hover, -a:focus, -a:active { - color: #f04875; - text-shadow: #fcd5e0 0 0 6px; -} - -a:focus-visible { - outline-color: #f04875; -} - -ul, -ol, -menu { - position: relative; - padding-left: var(--md-size); - margin-top: 0; - margin-bottom: var(--md-size); - list-style: none; - color: inherit; -} -ul ul, ul ol, ul menu, -ol ul, -ol ol, -ol menu, -menu ul, -menu ol, -menu menu { - margin-bottom: 0.421rem; -} - -ul li:before, menu li:before { - content: "■"; - position: absolute; - display: inline-block; - width: 1em; - margin-left: -1em; - font-weight: bold; - color: #f04875; -} - -ol { - counter-reset: li; -} - -ol li:before { - display: inline-block; - position: absolute; - width: 1.47em; - margin-left: -1.961em; - text-align: right; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - content: counter(li) "."; - counter-increment: li; - counter-reset: revert; - color: inherit; -} - -ol li li:before { - content: counters(li, ".") " "; -} - -dl dt { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--md-size); - text-transform: uppercase; - letter-spacing: 1px; - color: #5c5c5c; -} -dl dd { - margin-bottom: var(--xs-size); - margin-inline-start: var(--md-size); -} - -blockquote, .cmp__quote { - --bg-color: #f7f7f7; - --bg-color-dark: #eaeaea; - margin-top: var(--lg-size); - margin-bottom: var(--lg-size); - padding-top: var(--lg-size); - padding-right: var(--lg-size); - padding-bottom: var(--sm-size); - padding-left: var(--lg-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - color: #5c5c5c; - background: url("assets/background.png") #f7f7f7; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -blockquote.cmp__icon-float, .cmp__quote.cmp__icon-float { - position: relative; - margin-top: var(--xl-size); - padding-top: var(--xl-size); -} -blockquote h4, .cmp__quote h4 { - display: inline-block; - margin-top: 0; - font-family: "Source Serif Pro", Georgia, serif; - border-bottom: solid 2px; -} -blockquote p, .cmp__quote p { - hanging-punctuation: first; -} -blockquote cite, .cmp__quote cite { - display: block; - font-size: var(--xs-size); - text-align: right; -} -blockquote cite::before, .cmp__quote cite::before { - content: "—"; - margin-right: 0.26rem; -} - -figure, .cmp__figure { - margin-block-start: var(--md-size); - margin-block-end: var(--lg-size); - margin-inline-start: 0; - margin-inline-end: 0; - max-width: 100%; -} -figure img, figure iframe, .cmp__figure img, .cmp__figure iframe { - display: block; - max-width: 100%; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -figure table, .cmp__figure table { - margin: 0; -} -figure iframe, .cmp__figure iframe { - width: 100%; - min-height: 400px; - border: none; -} -figure figcaption, figure .cmp__figcaption, .cmp__figure figcaption, .cmp__figure .cmp__figcaption { - margin-top: 0.26rem; - font-size: var(--xs-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - color: #9a9a9a; -} -figure figcaption code, figure .cmp__figcaption code, .cmp__figure figcaption code, .cmp__figure .cmp__figcaption code { - font-size: var(--xs-size); - font-family: "JetBrains Mono", Courier, monospace; -} -figure .cmp__table-wrapper, .cmp__figure .cmp__table-wrapper { - padding: var(--sm-size) var(--lg-size); - background: url("assets/background.png") #f1f7ea; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - overflow-x: auto; -} -figure pre, .cmp__figure pre { - padding: var(--sm-size) var(--lg-size); -} - -table { - width: 100%; - margin-top: var(--md-size); - margin-bottom: var(--lg-size); - font-size: var(--sm-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - border-collapse: collapse; - caption-side: bottom; -} -table caption { - font-size: var(--xs-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - color: #9a9a9a; -} -table td, table th { - line-height: 1.4; -} -table thead tr th { - border-bottom: solid 1px #9a9a9a; - text-align: left; -} - -pre { - margin: 0; - position: relative; - color: #5c5c5c; - background: url("assets/background.png") rgba(247, 247, 247, 0.7); - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -pre code { - overflow-x: auto; - overflow-y: hidden; - font-size: var(--xs-size); - font-family: "JetBrains Mono", Courier, monospace; - line-height: 1.2; - letter-spacing: normal; -} -pre code.hljs { - padding: 0; - background: inherit; - color: inherit; -} -pre code::after { - display: flex; - justify-content: center; - align-items: center; - height: 1rem; - position: absolute; - top: -0.51rem; - right: 0.51rem; - padding: 0 0.26rem; - content: attr(data-language); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: 0.68rem; - text-transform: uppercase; - color: white; - background-color: #cdcdcd; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} - -.hljs-comment { - color: #9a9a9a; -} - -.hljs-punctuation, -.hljs-tag { - color: #444a; -} - -.hljs-tag .hljs-attr, -.hljs-tag .hljs-name { - color: #444; -} - -.hljs-attribute, -.hljs-doctag, -.hljs-keyword, -.hljs-meta .hljs-keyword, -.hljs-name, -.hljs-selector-tag { - font-weight: 700; -} - -.hljs-deletion, -.hljs-number, -.hljs-quote, -.hljs-selector-class, -.hljs-selector-id, -.hljs-string, -.hljs-template-tag, -.hljs-type { - color: #ce65ab; -} - -.hljs-section, -.hljs-title { - color: #7c71ba; - font-weight: 700; -} - -.hljs-link, -.hljs-operator, -.hljs-regexp, -.hljs-selector-attr, -.hljs-selector-pseudo, -.hljs-symbol, -.hljs-template-variable, -.hljs-variable { - color: #ce65ab; -} - -.hljs-literal { - color: #78a960; -} - -.hljs-addition, -.hljs-built_in, -.hljs-bullet, -.hljs-code { - color: #5c5c5c; -} - -.hljs-meta { - color: #5c5c5c; -} - -.hljs-meta .hljs-string { - color: #4d99bf; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: 700; -} - -var, kbd, .cmp__code { - padding: 0 0.146rem; - font-family: "JetBrains Mono", Courier, monospace; - font-size: 0.9em; - font-style: normal; - letter-spacing: -0.5px; - color: #5c5c5c; - background-color: #fff3bf; - border-radius: 3px; -} - -abbr, acronym, .cmp__acronym { - letter-spacing: 1px; - text-transform: uppercase; - text-decoration: none; -} -abbr:after, acronym:after, .cmp__acronym:after { - content: "†"; - position: relative; - top: -0.618em; - font-size: 0.618em; -} - -dfn { - font-style: italic; -} - -sup, sub { - font-size: 0.618em; -} - -small, .cmp__small { - font-size: 0.825rem; -} - -.cmp__big-text { - text-align: center; - font-size: 6.225rem; - color: #5c5c5c; -} - -time, .cmp__time { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: 0.8em; - letter-spacing: 1px; - text-transform: uppercase; -} - -strong, data, .cmp__strong { - font-weight: bold; -} - -i, .cmp__italic { - font-style: italic; -} - -mark, .cmp__mark { - background-color: #ffff73; -} - -address { - font-style: italic; -} - -hr { - height: 1px; - margin: var(--xxl-size) 0; - position: relative; - overflow: visible; - border: 0; - background: #e6e6e6; -} - -hr:before { - content: ""; - position: absolute; - left: calc(50% - 5px); - top: -5px; - width: 10px; - height: 10px; - background-color: #f04875; - transform: rotate(50deg); -} - -label { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; - color: #5c5c5c; -} - -input[type=text], input[type=email], input[type=search], input[type=number], textarea { - width: 100%; - padding: 0.51rem; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--sm-size); - line-height: 1.2; - border: solid 2px #e6e6e6; - border-radius: 3px; - color: #5c5c5c; - outline: none; - transition: all 0.5s; - -webkit-appearance: textfield; -} -input[type=text]:focus, input[type=text]:active, input[type=email]:focus, input[type=email]:active, input[type=search]:focus, input[type=search]:active, input[type=number]:focus, input[type=number]:active, textarea:focus, textarea:active { - outline: none; - border-color: #f04875; -} - -button, [type=button], [type=submit] { - display: flex; - justify-content: center; - align-items: center; - padding: 0.51rem 0.749rem; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - border-radius: 3px; - background-image: linear-gradient(45deg, #f04875, #da1247); - color: white; - border: none; - cursor: pointer; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - transition: all 0.5s; -} -button:focus, button:active, button:hover, [type=button]:focus, [type=button]:active, [type=button]:hover, [type=submit]:focus, [type=submit]:active, [type=submit]:hover { - outline: none; -} -button cmp-icon, [type=button] cmp-icon, [type=submit] cmp-icon { - margin-right: 0.26rem; -} -button.cmp__icon-button, [type=button].cmp__icon-button, [type=submit].cmp__icon-button { - padding: 0; - background: none; - box-shadow: none; - border-radius: 0; - color: inherit; -} -button.cmp__icon-button cmp-icon, [type=button].cmp__icon-button cmp-icon, [type=submit].cmp__icon-button cmp-icon { - margin-right: 0; -} -button.cmp__icon-button i, [type=button].cmp__icon-button i, [type=submit].cmp__icon-button i { - display: block; - align-self: flex-end; - margin-left: 0.177rem; - font-style: normal; - font-size: 0.618rem; - letter-spacing: -0.5px; -} - -::placeholder { - color: #9a9a9a; - font-style: italic; -} - -.cmp__form-control { - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: var(--lg-size); - border-radius: 3px; -} -.cmp__form-control label { - display: flex; - align-items: center; - justify-content: flex-end; -} - -.cmp__sub { - --bg-color: #f1f7ea; - --bg-color-dark: #e5f0d8; - margin-top: var(--md-size); - margin-bottom: var(--lg-size); - padding-top: var(--lg-size); - padding-right: var(--lg-size); - padding-bottom: var(--sm-size); - padding-left: var(--lg-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - background: url("assets/background.png") #f1f7ea; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -.cmp__sub.cmp__icon-float { - position: relative; - margin-top: var(--xl-size); - padding-top: var(--xl-size); -} -.cmp__sub h4, .cmp__sub h5 { - font-family: "Source Serif Pro", Georgia, serif; -} -.cmp__sub h4 { - margin-top: 0; -} -.cmp__sub pre { - background-color: white; -} - -cmp-icon { - display: flex; - justify-content: center; - align-items: center; - width: 16px; - height: 16px; -} -cmp-icon svg { - fill: currentColor; - width: inherit; - height: inherit; -} -cmp-icon svg * { - pointer-events: none; -} -cmp-icon svg:hover *[data-hover-behavior=color] { - fill: currentColor; -} -cmp-icon svg:hover *[data-hover-behavior=white] { - fill: white; -} - -.cmp__icon-text { - display: flex; - justify-content: center; - align-items: center; - color: inherit; -} -.cmp__icon-text cmp-icon { - margin-right: 0; -} -.cmp__icon-text i { - display: block; - align-self: flex-end; - margin-left: 0.177rem; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-style: normal; - font-size: 0.618rem; - letter-spacing: -0.5px; -} - -.cmp__icon-container { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - left: 0.561rem; - top: calc(-1 * 1.212rem / 2 - 0.561rem); - padding: 0.561rem; - background: url("assets/background.png") var(--bg-color-dark); - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - border-radius: 50%; - color: #767676; -} -.cmp__icon-container cmp-icon { - width: 1.212rem; - height: 1.212rem; -} - -cmp-content-scale { - position: relative; - overflow: hidden; - height: 2px; - z-index: 500; -} -cmp-content-scale .cmp__scroll-progress { - position: absolute; - top: 0; - width: 0; - height: 2px; - background-color: #f04875; - transition: width 0.5s; -} - -cmp-image { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-color: #f7f7f7; - min-height: 180px; -} -cmp-image.cmp__image-loaded cmp-progress, cmp-image.cmp__image-loaded .cmp__image-info { - display: none !important; -} -cmp-image.cmp__image-error cmp-progress { - display: none !important; -} -cmp-image .cmp__image-info { - --image-icon-size: 48px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} -cmp-image .cmp__image-info cmp-icon[name=image] { - color: silver; - width: var(--image-icon-size); - height: var(--image-icon-size); -} -cmp-image .cmp__image-info .cmp__status-text { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - color: silver; -} -cmp-image cmp-progress { - position: absolute; -} -cmp-image cmp-progress.cmp__first { - top: var(--xxl-size); -} -cmp-image cmp-progress.cmp__last { - display: none; -} -cmp-image img { - transition: filter 2s; -} - -cmp-progress .cmp__squares-container { - --square-size: 0.68rem; - display: flex; - align-items: center; -} -cmp-progress .cmp__squares-container .cmp__square { - width: var(--square-size); - height: var(--square-size); - background-color: #f68faa; - border-radius: 2px; - animation: color_change 1s linear infinite; -} -cmp-progress .cmp__squares-container .cmp__square:first-child { - animation-delay: 200ms; -} -cmp-progress .cmp__squares-container .cmp__square:nth-child(2) { - animation-delay: 400ms; -} -cmp-progress .cmp__squares-container .cmp__square:nth-child(3) { - animation-delay: 600ms; -} -cmp-progress .cmp__squares-container .cmp__square:nth-child(4) { - animation-delay: 800ms; -} -cmp-progress .cmp__squares-container .cmp__square:last-child { - animation-delay: 1s; -} -cmp-progress .cmp__squares-container .cmp__square:not(:last-child) { - margin-right: 0.26rem; -} - -.cmp__widget { - --widget-body-padding: var(--sm-size) var(--lg-size); - margin-bottom: var(--xl-size); - background: url("assets/background.png") #f7f7f7; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -.cmp__widget .cmp__widget-header { - padding-top: var(--md-size); -} -.cmp__widget .cmp__widget-body { - padding: var(--widget-body-padding); -} -.cmp__widget .cmp__widget-body ul, .cmp__widget .cmp__widget-body ol, .cmp__widget .cmp__widget-body menu { - margin-bottom: 0; -} -.cmp__widget .cmp__widget-body ul li, .cmp__widget .cmp__widget-body ol li, .cmp__widget .cmp__widget-body menu li { - margin-bottom: 0.51rem; -} -.cmp__widget .cmp__widget-body ul.cmp__inline-list, .cmp__widget .cmp__widget-body ol.cmp__inline-list, .cmp__widget .cmp__widget-body menu.cmp__inline-list { - padding-left: 0; -} -.cmp__widget .cmp__widget-body ul.cmp__inline-list li, .cmp__widget .cmp__widget-body ol.cmp__inline-list li, .cmp__widget .cmp__widget-body menu.cmp__inline-list li { - display: inline-block; - margin-right: 0.236rem; -} -.cmp__widget .cmp__widget-body ul.cmp__inline-list li:before, .cmp__widget .cmp__widget-body ol.cmp__inline-list li:before, .cmp__widget .cmp__widget-body menu.cmp__inline-list li:before { - display: none; -} - -.cmp__widget-ribbon { - display: inline-block; - min-width: 9.147rem; -} -.cmp__widget-ribbon .cmp__widget-ribbon-content { - display: flex; - width: 100%; - position: relative; - left: -6px; - height: var(--xl-size); - line-height: var(--xl-size); - padding-left: var(--md-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - font-weight: bold; - background-color: #e6e6e6; - color: #5c5c5c; -} -.cmp__widget-ribbon .cmp__widget-ribbon-content::before { - content: ""; - position: absolute; - top: -6px; - left: 0; - height: 3px; - border: solid 3px #b3b3b3; - border-left-color: transparent; - border-top-color: transparent; -} -.cmp__widget-ribbon .cmp__widget-ribbon-content::after { - content: ""; - position: relative; - right: calc(-1 * var(--xl-size)); - height: var(--xl-size); - border: calc(var(--xl-size) / 2) solid #e6e6e6; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; -} -.cmp__widget-ribbon .cmp__widget-ribbon-content span { - flex-grow: 1; - background-color: #5c5c5c; - color: transparent; - text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5); - -webkit-background-clip: text; - -moz-background-clip: text; - background-clip: text; -} - -.cmp__cards-list { - display: flex; - flex-wrap: wrap; - margin-bottom: var(--xxl-size); -} -.cmp__cards-list .cmp__card { - margin-bottom: var(--xxl-size); -} - -.cmp__card { - display: flex; - flex-direction: column; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - transition: rgba(0, 0, 0, 0.1) 0 1px 2px 0 0.5s; - text-shadow: none; - background: url("assets/background.png"), linear-gradient(135deg, #f7f7f7, #efefef); -} -.cmp__card:hover { - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; -} -.cmp__card:hover .cmp__card-header .cmp__card-image:after { - background-color: transparent; -} -.cmp__card:hover .cmp__card-header .cmp__card-image img { - transform: scale(1.1); -} -.cmp__card .cmp__card-header { - position: relative; - display: block; -} -.cmp__card .cmp__card-header .cmp__card-title { - margin-top: var(--sm-size); - position: relative; - left: calc(-2 * 3px); - width: calc(100% + 4 * 3px); - overflow: visible; - text-shadow: none; -} -.cmp__card .cmp__card-header .cmp__card-title h5 { - margin: 0; - padding-top: 0.382rem; - padding-bottom: 0.382rem; - padding-left: 1rem; - padding-right: 1rem; - font-size: var(--sm-size); - color: #f7f7f7; - background: url("assets/background.png") rgba(0, 0, 0, 0.6); -} -.cmp__card .cmp__card-header .cmp__card-title::before, .cmp__card .cmp__card-header .cmp__card-title::after { - display: none; - content: ""; - position: absolute; - top: calc(-2 * 3px); - height: 3px; - border: solid 3px #333333; - border-top-color: transparent; -} -.cmp__card .cmp__card-header .cmp__card-title::before { - left: 0; - border-left-color: transparent; -} -.cmp__card .cmp__card-header .cmp__card-title::after { - right: 0; - border-right-color: transparent; -} -.cmp__card .cmp__card-header .cmp__card-image { - position: relative; - overflow: hidden; -} -.cmp__card .cmp__card-header .cmp__card-image img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.5s; -} -.cmp__card .cmp__card-header .cmp__card-image:after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.2); - transition: background-color 0.5s; -} -.cmp__card .cmp__card-footer { - padding: var(--sm-size); - display: flex; - flex-direction: column; -} -.cmp__card .cmp__card-footer p { - text-shadow: none; - margin: 0; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--sm-size); - color: #9a9a9a; -} -.cmp__card .cmp__card-footer .cmp__card-actions { - display: flex; - margin-top: var(--sm-size); -} -.cmp__card .cmp__card-footer .cmp__card-actions > * { - flex-grow: 1; - text-shadow: none; - color: #9a9a9a; -} - -.cmp__status-info { - --bg-color: #f7f7f7; - --bg-color-dark: #eaeaea; - background-color: var(--bg-color); -} - -.cmp__status-success { - --bg-color: #f1f7ea; - --bg-color-dark: #e5f0d8; - background-color: var(--bg-color); -} - -.cmp__status-warn { - --bg-color: #fcf8dc; - --bg-color-dark: #faf3c5; - background-color: var(--bg-color); -} - -.cmp__status-error { - --bg-color: #ffeeeb; - --bg-color-dark: #ffd8d2; - background-color: var(--bg-color); -} - -::selection { - text-shadow: none; - color: white; - background: #f04875; -} - -.cmp__right { - text-align: right; -} - -.cmp__center { - text-align: center; -} - -.cmp__sticky { - position: fixed; - top: 0; - width: 100%; -} - -.cmp__no-transition { - transition: none !important; -} - -.cmp__float-left { - float: left; -} - -.cmp__float-right { - float: right; -} - -.cmp__float-left:after, .cmp__float-right:after { - content: ""; - display: block; - height: 0; - width: 100%; - clear: both; -} - -.cmp__clear { - clear: both; -} - -@media only screen and (min-width: 576px) { - .cmp__mob-float-left { - float: left; - } - - .cmp__mob-float-right { - float: right; - } - - .cmp__mob-float-left:after, .cmp__mob-float-right:after { - content: ""; - display: block; - height: 0; - width: 100%; - clear: both; - } - - .cmp__mob-clear { - clear: both; - } -} -@media only screen and (min-width: 768px) { - .cmp__tab-float-left { - float: left; - } - - .cmp__tab-float-right { - float: right; - } - - .cmp__tab-float-left:after, .cmp__tab-float-right:after { - content: ""; - display: block; - height: 0; - width: 100%; - clear: both; - } - - .cmp__tab-clear { - clear: both; - } -} -@media only screen and (min-width: 992px) { - .cmp__desk-float-left { - float: left; - } - - .cmp__desk-float-right { - float: right; - } - - .cmp__desk-float-left:after, .cmp__desk-float-right:after { - content: ""; - display: block; - height: 0; - width: 100%; - clear: both; - } - - .cmp__desk-clear { - clear: both; - } -} -.cmp__no-margin { - margin: 0; -} - -.cmp__no-pad { - padding: 0; -} - -.cmp__pad-xs { - padding: var(--xs-size); -} - -.cmp__pad-hor-xs { - padding-left: var(--xs-size); - padding-right: var(--xs-size); -} - -.cmp__pad-ver-xs { - padding-top: var(--xs-size); - padding-bottom: var(--xs-size); -} - -.cmp__pad-left-xs { - padding-left: var(--xs-size); -} - -.cmp__pad-right-xs { - padding-right: var(--xs-size); -} - -.cmp__pad-top-xs { - padding-top: var(--xs-size); -} - -.cmp__pad-bottom-xs { - padding-bottom: var(--xs-size); -} - -.cmp__mar-xs { - margin: var(--xs-size); -} - -.cmp__mar-hor-xs { - margin-left: var(--xs-size); - margin-right: var(--xs-size); -} - -.cmp__mar-ver-xs { - margin-top: var(--xs-size); - margin-bottom: var(--xs-size); -} - -.cmp__mar-left-xs { - margin-left: var(--xs-size); -} - -.cmp__mar-right-xs { - margin-right: var(--xs-size); -} - -.cmp__mar-top-xs { - margin-top: var(--xs-size); -} - -.cmp__mar-bottom-xs { - margin-bottom: var(--xs-size); -} - -.cmp__pad-sm { - padding: var(--sm-size); -} - -.cmp__pad-hor-sm { - padding-left: var(--sm-size); - padding-right: var(--sm-size); -} - -.cmp__pad-ver-sm { - padding-top: var(--sm-size); - padding-bottom: var(--sm-size); -} - -.cmp__pad-left-sm { - padding-left: var(--sm-size); -} - -.cmp__pad-right-sm { - padding-right: var(--sm-size); -} - -.cmp__pad-top-sm { - padding-top: var(--sm-size); -} - -.cmp__pad-bottom-sm { - padding-bottom: var(--sm-size); -} - -.cmp__mar-sm { - margin: var(--sm-size); -} - -.cmp__mar-hor-sm { - margin-left: var(--sm-size); - margin-right: var(--sm-size); -} - -.cmp__mar-ver-sm { - margin-top: var(--sm-size); - margin-bottom: var(--sm-size); -} - -.cmp__mar-left-sm { - margin-left: var(--sm-size); -} - -.cmp__mar-right-sm { - margin-right: var(--sm-size); -} - -.cmp__mar-top-sm { - margin-top: var(--sm-size); -} - -.cmp__mar-bottom-sm { - margin-bottom: var(--sm-size); -} - -.cmp__pad-md { - padding: var(--md-size); -} - -.cmp__pad-hor-md { - padding-left: var(--md-size); - padding-right: var(--md-size); -} - -.cmp__pad-ver-md { - padding-top: var(--md-size); - padding-bottom: var(--md-size); -} - -.cmp__pad-left-md { - padding-left: var(--md-size); -} - -.cmp__pad-right-md { - padding-right: var(--md-size); -} - -.cmp__pad-top-md { - padding-top: var(--md-size); -} - -.cmp__pad-bottom-md { - padding-bottom: var(--md-size); -} - -.cmp__mar-md { - margin: var(--md-size); -} - -.cmp__mar-hor-md { - margin-left: var(--md-size); - margin-right: var(--md-size); -} - -.cmp__mar-ver-md { - margin-top: var(--md-size); - margin-bottom: var(--md-size); -} - -.cmp__mar-left-md { - margin-left: var(--md-size); -} - -.cmp__mar-right-md { - margin-right: var(--md-size); -} - -.cmp__mar-top-md { - margin-top: var(--md-size); -} - -.cmp__mar-bottom-md { - margin-bottom: var(--md-size); -} - -.cmp__pad-lg { - padding: var(--lg-size); -} - -.cmp__pad-hor-lg { - padding-left: var(--lg-size); - padding-right: var(--lg-size); -} - -.cmp__pad-ver-lg { - padding-top: var(--lg-size); - padding-bottom: var(--lg-size); -} - -.cmp__pad-left-lg { - padding-left: var(--lg-size); -} - -.cmp__pad-right-lg { - padding-right: var(--lg-size); -} - -.cmp__pad-top-lg { - padding-top: var(--lg-size); -} - -.cmp__pad-bottom-lg { - padding-bottom: var(--lg-size); -} - -.cmp__mar-lg { - margin: var(--lg-size); -} - -.cmp__mar-hor-lg { - margin-left: var(--lg-size); - margin-right: var(--lg-size); -} - -.cmp__mar-ver-lg { - margin-top: var(--lg-size); - margin-bottom: var(--lg-size); -} - -.cmp__mar-left-lg { - margin-left: var(--lg-size); -} - -.cmp__mar-right-lg { - margin-right: var(--lg-size); -} - -.cmp__mar-top-lg { - margin-top: var(--lg-size); -} - -.cmp__mar-bottom-lg { - margin-bottom: var(--lg-size); -} - -.cmp__pad-xl { - padding: var(--xl-size); -} - -.cmp__pad-hor-xl { - padding-left: var(--xl-size); - padding-right: var(--xl-size); -} - -.cmp__pad-ver-xl { - padding-top: var(--xl-size); - padding-bottom: var(--xl-size); -} - -.cmp__pad-left-xl { - padding-left: var(--xl-size); -} - -.cmp__pad-right-xl { - padding-right: var(--xl-size); -} - -.cmp__pad-top-xl { - padding-top: var(--xl-size); -} - -.cmp__pad-bottom-xl { - padding-bottom: var(--xl-size); -} - -.cmp__mar-xl { - margin: var(--xl-size); -} - -.cmp__mar-hor-xl { - margin-left: var(--xl-size); - margin-right: var(--xl-size); -} - -.cmp__mar-ver-xl { - margin-top: var(--xl-size); - margin-bottom: var(--xl-size); -} - -.cmp__mar-left-xl { - margin-left: var(--xl-size); -} - -.cmp__mar-right-xl { - margin-right: var(--xl-size); -} - -.cmp__mar-top-xl { - margin-top: var(--xl-size); -} - -.cmp__mar-bottom-xl { - margin-bottom: var(--xl-size); -} - -.cmp__pad-xxl { - padding: var(--xxl-size); -} - -.cmp__pad-hor-xxl { - padding-left: var(--xxl-size); - padding-right: var(--xxl-size); -} - -.cmp__pad-ver-xxl { - padding-top: var(--xxl-size); - padding-bottom: var(--xxl-size); -} - -.cmp__pad-left-xxl { - padding-left: var(--xxl-size); -} - -.cmp__pad-right-xxl { - padding-right: var(--xxl-size); -} - -.cmp__pad-top-xxl { - padding-top: var(--xxl-size); -} - -.cmp__pad-bottom-xxl { - padding-bottom: var(--xxl-size); -} - -.cmp__mar-xxl { - margin: var(--xxl-size); -} - -.cmp__mar-hor-xxl { - margin-left: var(--xxl-size); - margin-right: var(--xxl-size); -} - -.cmp__mar-ver-xxl { - margin-top: var(--xxl-size); - margin-bottom: var(--xxl-size); -} - -.cmp__mar-left-xxl { - margin-left: var(--xxl-size); -} - -.cmp__mar-right-xxl { - margin-right: var(--xxl-size); -} - -.cmp__mar-top-xxl { - margin-top: var(--xxl-size); -} - -.cmp__mar-bottom-xxl { - margin-bottom: var(--xxl-size); -} - -@media only screen and (min-width: 576px) { - .cmp__mob-no-margin { - margin: 0; - } - - .cmp__mob-no-pad { - padding: 0; - } - - .cmp__mob-pad-xs { - padding: var(--xs-size); - } - - .cmp__mob-pad-hor-xs { - padding-left: var(--xs-size); - padding-right: var(--xs-size); - } - - .cmp__mob-pad-ver-xs { - padding-top: var(--xs-size); - padding-bottom: var(--xs-size); - } - - .cmp__mob-pad-left-xs { - padding-left: var(--xs-size); - } - - .cmp__mob-pad-right-xs { - padding-right: var(--xs-size); - } - - .cmp__mob-pad-top-xs { - padding-top: var(--xs-size); - } - - .cmp__mob-pad-bottom-xs { - padding-bottom: var(--xs-size); - } - - .cmp__mob-mar-xs { - margin: var(--xs-size); - } - - .cmp__mob-mar-hor-xs { - margin-left: var(--xs-size); - margin-right: var(--xs-size); - } - - .cmp__mob-mar-ver-xs { - margin-top: var(--xs-size); - margin-bottom: var(--xs-size); - } - - .cmp__mob-mar-left-xs { - margin-left: var(--xs-size); - } - - .cmp__mob-mar-right-xs { - margin-right: var(--xs-size); - } - - .cmp__mob-mar-top-xs { - margin-top: var(--xs-size); - } - - .cmp__mob-mar-bottom-xs { - margin-bottom: var(--xs-size); - } - - .cmp__mob-pad-sm { - padding: var(--sm-size); - } - - .cmp__mob-pad-hor-sm { - padding-left: var(--sm-size); - padding-right: var(--sm-size); - } - - .cmp__mob-pad-ver-sm { - padding-top: var(--sm-size); - padding-bottom: var(--sm-size); - } - - .cmp__mob-pad-left-sm { - padding-left: var(--sm-size); - } - - .cmp__mob-pad-right-sm { - padding-right: var(--sm-size); - } - - .cmp__mob-pad-top-sm { - padding-top: var(--sm-size); - } - - .cmp__mob-pad-bottom-sm { - padding-bottom: var(--sm-size); - } - - .cmp__mob-mar-sm { - margin: var(--sm-size); - } - - .cmp__mob-mar-hor-sm { - margin-left: var(--sm-size); - margin-right: var(--sm-size); - } - - .cmp__mob-mar-ver-sm { - margin-top: var(--sm-size); - margin-bottom: var(--sm-size); - } - - .cmp__mob-mar-left-sm { - margin-left: var(--sm-size); - } - - .cmp__mob-mar-right-sm { - margin-right: var(--sm-size); - } - - .cmp__mob-mar-top-sm { - margin-top: var(--sm-size); - } - - .cmp__mob-mar-bottom-sm { - margin-bottom: var(--sm-size); - } - - .cmp__mob-pad-md { - padding: var(--md-size); - } - - .cmp__mob-pad-hor-md { - padding-left: var(--md-size); - padding-right: var(--md-size); - } - - .cmp__mob-pad-ver-md { - padding-top: var(--md-size); - padding-bottom: var(--md-size); - } - - .cmp__mob-pad-left-md { - padding-left: var(--md-size); - } - - .cmp__mob-pad-right-md { - padding-right: var(--md-size); - } - - .cmp__mob-pad-top-md { - padding-top: var(--md-size); - } - - .cmp__mob-pad-bottom-md { - padding-bottom: var(--md-size); - } - - .cmp__mob-mar-md { - margin: var(--md-size); - } - - .cmp__mob-mar-hor-md { - margin-left: var(--md-size); - margin-right: var(--md-size); - } - - .cmp__mob-mar-ver-md { - margin-top: var(--md-size); - margin-bottom: var(--md-size); - } - - .cmp__mob-mar-left-md { - margin-left: var(--md-size); - } - - .cmp__mob-mar-right-md { - margin-right: var(--md-size); - } - - .cmp__mob-mar-top-md { - margin-top: var(--md-size); - } - - .cmp__mob-mar-bottom-md { - margin-bottom: var(--md-size); - } - - .cmp__mob-pad-lg { - padding: var(--lg-size); - } - - .cmp__mob-pad-hor-lg { - padding-left: var(--lg-size); - padding-right: var(--lg-size); - } - - .cmp__mob-pad-ver-lg { - padding-top: var(--lg-size); - padding-bottom: var(--lg-size); - } - - .cmp__mob-pad-left-lg { - padding-left: var(--lg-size); - } - - .cmp__mob-pad-right-lg { - padding-right: var(--lg-size); - } - - .cmp__mob-pad-top-lg { - padding-top: var(--lg-size); - } - - .cmp__mob-pad-bottom-lg { - padding-bottom: var(--lg-size); - } - - .cmp__mob-mar-lg { - margin: var(--lg-size); - } - - .cmp__mob-mar-hor-lg { - margin-left: var(--lg-size); - margin-right: var(--lg-size); - } - - .cmp__mob-mar-ver-lg { - margin-top: var(--lg-size); - margin-bottom: var(--lg-size); - } - - .cmp__mob-mar-left-lg { - margin-left: var(--lg-size); - } - - .cmp__mob-mar-right-lg { - margin-right: var(--lg-size); - } - - .cmp__mob-mar-top-lg { - margin-top: var(--lg-size); - } - - .cmp__mob-mar-bottom-lg { - margin-bottom: var(--lg-size); - } - - .cmp__mob-pad-xl { - padding: var(--xl-size); - } - - .cmp__mob-pad-hor-xl { - padding-left: var(--xl-size); - padding-right: var(--xl-size); - } - - .cmp__mob-pad-ver-xl { - padding-top: var(--xl-size); - padding-bottom: var(--xl-size); - } - - .cmp__mob-pad-left-xl { - padding-left: var(--xl-size); - } - - .cmp__mob-pad-right-xl { - padding-right: var(--xl-size); - } - - .cmp__mob-pad-top-xl { - padding-top: var(--xl-size); - } - - .cmp__mob-pad-bottom-xl { - padding-bottom: var(--xl-size); - } - - .cmp__mob-mar-xl { - margin: var(--xl-size); - } - - .cmp__mob-mar-hor-xl { - margin-left: var(--xl-size); - margin-right: var(--xl-size); - } - - .cmp__mob-mar-ver-xl { - margin-top: var(--xl-size); - margin-bottom: var(--xl-size); - } - - .cmp__mob-mar-left-xl { - margin-left: var(--xl-size); - } - - .cmp__mob-mar-right-xl { - margin-right: var(--xl-size); - } - - .cmp__mob-mar-top-xl { - margin-top: var(--xl-size); - } - - .cmp__mob-mar-bottom-xl { - margin-bottom: var(--xl-size); - } - - .cmp__mob-pad-xxl { - padding: var(--xxl-size); - } - - .cmp__mob-pad-hor-xxl { - padding-left: var(--xxl-size); - padding-right: var(--xxl-size); - } - - .cmp__mob-pad-ver-xxl { - padding-top: var(--xxl-size); - padding-bottom: var(--xxl-size); - } - - .cmp__mob-pad-left-xxl { - padding-left: var(--xxl-size); - } - - .cmp__mob-pad-right-xxl { - padding-right: var(--xxl-size); - } - - .cmp__mob-pad-top-xxl { - padding-top: var(--xxl-size); - } - - .cmp__mob-pad-bottom-xxl { - padding-bottom: var(--xxl-size); - } - - .cmp__mob-mar-xxl { - margin: var(--xxl-size); - } - - .cmp__mob-mar-hor-xxl { - margin-left: var(--xxl-size); - margin-right: var(--xxl-size); - } - - .cmp__mob-mar-ver-xxl { - margin-top: var(--xxl-size); - margin-bottom: var(--xxl-size); - } - - .cmp__mob-mar-left-xxl { - margin-left: var(--xxl-size); - } - - .cmp__mob-mar-right-xxl { - margin-right: var(--xxl-size); - } - - .cmp__mob-mar-top-xxl { - margin-top: var(--xxl-size); - } - - .cmp__mob-mar-bottom-xxl { - margin-bottom: var(--xxl-size); - } -} -@media only screen and (min-width: 768px) { - .cmp__tab-no-margin { - margin: 0; - } - - .cmp__tab-no-pad { - padding: 0; - } - - .cmp__tab-pad-xs { - padding: var(--xs-size); - } - - .cmp__tab-pad-hor-xs { - padding-left: var(--xs-size); - padding-right: var(--xs-size); - } - - .cmp__tab-pad-ver-xs { - padding-top: var(--xs-size); - padding-bottom: var(--xs-size); - } - - .cmp__tab-pad-left-xs { - padding-left: var(--xs-size); - } - - .cmp__tab-pad-right-xs { - padding-right: var(--xs-size); - } - - .cmp__tab-pad-top-xs { - padding-top: var(--xs-size); - } - - .cmp__tab-pad-bottom-xs { - padding-bottom: var(--xs-size); - } - - .cmp__tab-mar-xs { - margin: var(--xs-size); - } - - .cmp__tab-mar-hor-xs { - margin-left: var(--xs-size); - margin-right: var(--xs-size); - } - - .cmp__tab-mar-ver-xs { - margin-top: var(--xs-size); - margin-bottom: var(--xs-size); - } - - .cmp__tab-mar-left-xs { - margin-left: var(--xs-size); - } - - .cmp__tab-mar-right-xs { - margin-right: var(--xs-size); - } - - .cmp__tab-mar-top-xs { - margin-top: var(--xs-size); - } - - .cmp__tab-mar-bottom-xs { - margin-bottom: var(--xs-size); - } - - .cmp__tab-pad-sm { - padding: var(--sm-size); - } - - .cmp__tab-pad-hor-sm { - padding-left: var(--sm-size); - padding-right: var(--sm-size); - } - - .cmp__tab-pad-ver-sm { - padding-top: var(--sm-size); - padding-bottom: var(--sm-size); - } - - .cmp__tab-pad-left-sm { - padding-left: var(--sm-size); - } - - .cmp__tab-pad-right-sm { - padding-right: var(--sm-size); - } - - .cmp__tab-pad-top-sm { - padding-top: var(--sm-size); - } - - .cmp__tab-pad-bottom-sm { - padding-bottom: var(--sm-size); - } - - .cmp__tab-mar-sm { - margin: var(--sm-size); - } - - .cmp__tab-mar-hor-sm { - margin-left: var(--sm-size); - margin-right: var(--sm-size); - } - - .cmp__tab-mar-ver-sm { - margin-top: var(--sm-size); - margin-bottom: var(--sm-size); - } - - .cmp__tab-mar-left-sm { - margin-left: var(--sm-size); - } - - .cmp__tab-mar-right-sm { - margin-right: var(--sm-size); - } - - .cmp__tab-mar-top-sm { - margin-top: var(--sm-size); - } - - .cmp__tab-mar-bottom-sm { - margin-bottom: var(--sm-size); - } - - .cmp__tab-pad-md { - padding: var(--md-size); - } - - .cmp__tab-pad-hor-md { - padding-left: var(--md-size); - padding-right: var(--md-size); - } - - .cmp__tab-pad-ver-md { - padding-top: var(--md-size); - padding-bottom: var(--md-size); - } - - .cmp__tab-pad-left-md { - padding-left: var(--md-size); - } - - .cmp__tab-pad-right-md { - padding-right: var(--md-size); - } - - .cmp__tab-pad-top-md { - padding-top: var(--md-size); - } - - .cmp__tab-pad-bottom-md { - padding-bottom: var(--md-size); - } - - .cmp__tab-mar-md { - margin: var(--md-size); - } - - .cmp__tab-mar-hor-md { - margin-left: var(--md-size); - margin-right: var(--md-size); - } - - .cmp__tab-mar-ver-md { - margin-top: var(--md-size); - margin-bottom: var(--md-size); - } - - .cmp__tab-mar-left-md { - margin-left: var(--md-size); - } - - .cmp__tab-mar-right-md { - margin-right: var(--md-size); - } - - .cmp__tab-mar-top-md { - margin-top: var(--md-size); - } - - .cmp__tab-mar-bottom-md { - margin-bottom: var(--md-size); - } - - .cmp__tab-pad-lg { - padding: var(--lg-size); - } - - .cmp__tab-pad-hor-lg { - padding-left: var(--lg-size); - padding-right: var(--lg-size); - } - - .cmp__tab-pad-ver-lg { - padding-top: var(--lg-size); - padding-bottom: var(--lg-size); - } - - .cmp__tab-pad-left-lg { - padding-left: var(--lg-size); - } - - .cmp__tab-pad-right-lg { - padding-right: var(--lg-size); - } - - .cmp__tab-pad-top-lg { - padding-top: var(--lg-size); - } - - .cmp__tab-pad-bottom-lg { - padding-bottom: var(--lg-size); - } - - .cmp__tab-mar-lg { - margin: var(--lg-size); - } - - .cmp__tab-mar-hor-lg { - margin-left: var(--lg-size); - margin-right: var(--lg-size); - } - - .cmp__tab-mar-ver-lg { - margin-top: var(--lg-size); - margin-bottom: var(--lg-size); - } - - .cmp__tab-mar-left-lg { - margin-left: var(--lg-size); - } - - .cmp__tab-mar-right-lg { - margin-right: var(--lg-size); - } - - .cmp__tab-mar-top-lg { - margin-top: var(--lg-size); - } - - .cmp__tab-mar-bottom-lg { - margin-bottom: var(--lg-size); - } - - .cmp__tab-pad-xl { - padding: var(--xl-size); - } - - .cmp__tab-pad-hor-xl { - padding-left: var(--xl-size); - padding-right: var(--xl-size); - } - - .cmp__tab-pad-ver-xl { - padding-top: var(--xl-size); - padding-bottom: var(--xl-size); - } - - .cmp__tab-pad-left-xl { - padding-left: var(--xl-size); - } - - .cmp__tab-pad-right-xl { - padding-right: var(--xl-size); - } - - .cmp__tab-pad-top-xl { - padding-top: var(--xl-size); - } - - .cmp__tab-pad-bottom-xl { - padding-bottom: var(--xl-size); - } - - .cmp__tab-mar-xl { - margin: var(--xl-size); - } - - .cmp__tab-mar-hor-xl { - margin-left: var(--xl-size); - margin-right: var(--xl-size); - } - - .cmp__tab-mar-ver-xl { - margin-top: var(--xl-size); - margin-bottom: var(--xl-size); - } - - .cmp__tab-mar-left-xl { - margin-left: var(--xl-size); - } - - .cmp__tab-mar-right-xl { - margin-right: var(--xl-size); - } - - .cmp__tab-mar-top-xl { - margin-top: var(--xl-size); - } - - .cmp__tab-mar-bottom-xl { - margin-bottom: var(--xl-size); - } - - .cmp__tab-pad-xxl { - padding: var(--xxl-size); - } - - .cmp__tab-pad-hor-xxl { - padding-left: var(--xxl-size); - padding-right: var(--xxl-size); - } - - .cmp__tab-pad-ver-xxl { - padding-top: var(--xxl-size); - padding-bottom: var(--xxl-size); - } - - .cmp__tab-pad-left-xxl { - padding-left: var(--xxl-size); - } - - .cmp__tab-pad-right-xxl { - padding-right: var(--xxl-size); - } - - .cmp__tab-pad-top-xxl { - padding-top: var(--xxl-size); - } - - .cmp__tab-pad-bottom-xxl { - padding-bottom: var(--xxl-size); - } - - .cmp__tab-mar-xxl { - margin: var(--xxl-size); - } - - .cmp__tab-mar-hor-xxl { - margin-left: var(--xxl-size); - margin-right: var(--xxl-size); - } - - .cmp__tab-mar-ver-xxl { - margin-top: var(--xxl-size); - margin-bottom: var(--xxl-size); - } - - .cmp__tab-mar-left-xxl { - margin-left: var(--xxl-size); - } - - .cmp__tab-mar-right-xxl { - margin-right: var(--xxl-size); - } - - .cmp__tab-mar-top-xxl { - margin-top: var(--xxl-size); - } - - .cmp__tab-mar-bottom-xxl { - margin-bottom: var(--xxl-size); - } -} -@media only screen and (min-width: 992px) { - .cmp__desk-no-margin { - margin: 0; - } - - .cmp__desk-no-pad { - padding: 0; - } - - .cmp__desk-pad-xs { - padding: var(--xs-size); - } - - .cmp__desk-pad-hor-xs { - padding-left: var(--xs-size); - padding-right: var(--xs-size); - } - - .cmp__desk-pad-ver-xs { - padding-top: var(--xs-size); - padding-bottom: var(--xs-size); - } - - .cmp__desk-pad-left-xs { - padding-left: var(--xs-size); - } - - .cmp__desk-pad-right-xs { - padding-right: var(--xs-size); - } - - .cmp__desk-pad-top-xs { - padding-top: var(--xs-size); - } - - .cmp__desk-pad-bottom-xs { - padding-bottom: var(--xs-size); - } - - .cmp__desk-mar-xs { - margin: var(--xs-size); - } - - .cmp__desk-mar-hor-xs { - margin-left: var(--xs-size); - margin-right: var(--xs-size); - } - - .cmp__desk-mar-ver-xs { - margin-top: var(--xs-size); - margin-bottom: var(--xs-size); - } - - .cmp__desk-mar-left-xs { - margin-left: var(--xs-size); - } - - .cmp__desk-mar-right-xs { - margin-right: var(--xs-size); - } - - .cmp__desk-mar-top-xs { - margin-top: var(--xs-size); - } - - .cmp__desk-mar-bottom-xs { - margin-bottom: var(--xs-size); - } - - .cmp__desk-pad-sm { - padding: var(--sm-size); - } - - .cmp__desk-pad-hor-sm { - padding-left: var(--sm-size); - padding-right: var(--sm-size); - } - - .cmp__desk-pad-ver-sm { - padding-top: var(--sm-size); - padding-bottom: var(--sm-size); - } - - .cmp__desk-pad-left-sm { - padding-left: var(--sm-size); - } - - .cmp__desk-pad-right-sm { - padding-right: var(--sm-size); - } - - .cmp__desk-pad-top-sm { - padding-top: var(--sm-size); - } - - .cmp__desk-pad-bottom-sm { - padding-bottom: var(--sm-size); - } - - .cmp__desk-mar-sm { - margin: var(--sm-size); - } - - .cmp__desk-mar-hor-sm { - margin-left: var(--sm-size); - margin-right: var(--sm-size); - } - - .cmp__desk-mar-ver-sm { - margin-top: var(--sm-size); - margin-bottom: var(--sm-size); - } - - .cmp__desk-mar-left-sm { - margin-left: var(--sm-size); - } - - .cmp__desk-mar-right-sm { - margin-right: var(--sm-size); - } - - .cmp__desk-mar-top-sm { - margin-top: var(--sm-size); - } - - .cmp__desk-mar-bottom-sm { - margin-bottom: var(--sm-size); - } - - .cmp__desk-pad-md { - padding: var(--md-size); - } - - .cmp__desk-pad-hor-md { - padding-left: var(--md-size); - padding-right: var(--md-size); - } - - .cmp__desk-pad-ver-md { - padding-top: var(--md-size); - padding-bottom: var(--md-size); - } - - .cmp__desk-pad-left-md { - padding-left: var(--md-size); - } - - .cmp__desk-pad-right-md { - padding-right: var(--md-size); - } - - .cmp__desk-pad-top-md { - padding-top: var(--md-size); - } - - .cmp__desk-pad-bottom-md { - padding-bottom: var(--md-size); - } - - .cmp__desk-mar-md { - margin: var(--md-size); - } - - .cmp__desk-mar-hor-md { - margin-left: var(--md-size); - margin-right: var(--md-size); - } - - .cmp__desk-mar-ver-md { - margin-top: var(--md-size); - margin-bottom: var(--md-size); - } - - .cmp__desk-mar-left-md { - margin-left: var(--md-size); - } - - .cmp__desk-mar-right-md { - margin-right: var(--md-size); - } - - .cmp__desk-mar-top-md { - margin-top: var(--md-size); - } - - .cmp__desk-mar-bottom-md { - margin-bottom: var(--md-size); - } - - .cmp__desk-pad-lg { - padding: var(--lg-size); - } - - .cmp__desk-pad-hor-lg { - padding-left: var(--lg-size); - padding-right: var(--lg-size); - } - - .cmp__desk-pad-ver-lg { - padding-top: var(--lg-size); - padding-bottom: var(--lg-size); - } - - .cmp__desk-pad-left-lg { - padding-left: var(--lg-size); - } - - .cmp__desk-pad-right-lg { - padding-right: var(--lg-size); - } - - .cmp__desk-pad-top-lg { - padding-top: var(--lg-size); - } - - .cmp__desk-pad-bottom-lg { - padding-bottom: var(--lg-size); - } - - .cmp__desk-mar-lg { - margin: var(--lg-size); - } - - .cmp__desk-mar-hor-lg { - margin-left: var(--lg-size); - margin-right: var(--lg-size); - } - - .cmp__desk-mar-ver-lg { - margin-top: var(--lg-size); - margin-bottom: var(--lg-size); - } - - .cmp__desk-mar-left-lg { - margin-left: var(--lg-size); - } - - .cmp__desk-mar-right-lg { - margin-right: var(--lg-size); - } - - .cmp__desk-mar-top-lg { - margin-top: var(--lg-size); - } - - .cmp__desk-mar-bottom-lg { - margin-bottom: var(--lg-size); - } - - .cmp__desk-pad-xl { - padding: var(--xl-size); - } - - .cmp__desk-pad-hor-xl { - padding-left: var(--xl-size); - padding-right: var(--xl-size); - } - - .cmp__desk-pad-ver-xl { - padding-top: var(--xl-size); - padding-bottom: var(--xl-size); - } - - .cmp__desk-pad-left-xl { - padding-left: var(--xl-size); - } - - .cmp__desk-pad-right-xl { - padding-right: var(--xl-size); - } - - .cmp__desk-pad-top-xl { - padding-top: var(--xl-size); - } - - .cmp__desk-pad-bottom-xl { - padding-bottom: var(--xl-size); - } - - .cmp__desk-mar-xl { - margin: var(--xl-size); - } - - .cmp__desk-mar-hor-xl { - margin-left: var(--xl-size); - margin-right: var(--xl-size); - } - - .cmp__desk-mar-ver-xl { - margin-top: var(--xl-size); - margin-bottom: var(--xl-size); - } - - .cmp__desk-mar-left-xl { - margin-left: var(--xl-size); - } - - .cmp__desk-mar-right-xl { - margin-right: var(--xl-size); - } - - .cmp__desk-mar-top-xl { - margin-top: var(--xl-size); - } - - .cmp__desk-mar-bottom-xl { - margin-bottom: var(--xl-size); - } - - .cmp__desk-pad-xxl { - padding: var(--xxl-size); - } - - .cmp__desk-pad-hor-xxl { - padding-left: var(--xxl-size); - padding-right: var(--xxl-size); - } - - .cmp__desk-pad-ver-xxl { - padding-top: var(--xxl-size); - padding-bottom: var(--xxl-size); - } - - .cmp__desk-pad-left-xxl { - padding-left: var(--xxl-size); - } - - .cmp__desk-pad-right-xxl { - padding-right: var(--xxl-size); - } - - .cmp__desk-pad-top-xxl { - padding-top: var(--xxl-size); - } - - .cmp__desk-pad-bottom-xxl { - padding-bottom: var(--xxl-size); - } - - .cmp__desk-mar-xxl { - margin: var(--xxl-size); - } - - .cmp__desk-mar-hor-xxl { - margin-left: var(--xxl-size); - margin-right: var(--xxl-size); - } - - .cmp__desk-mar-ver-xxl { - margin-top: var(--xxl-size); - margin-bottom: var(--xxl-size); - } - - .cmp__desk-mar-left-xxl { - margin-left: var(--xxl-size); - } - - .cmp__desk-mar-right-xxl { - margin-right: var(--xxl-size); - } - - .cmp__desk-mar-top-xxl { - margin-top: var(--xxl-size); - } - - .cmp__desk-mar-bottom-xxl { - margin-bottom: var(--xxl-size); - } -} -.cmp__xs-color { - color: var(--xs-size); -} - -.cmp__xs-color-bg { - background-color: var(--xs-size); -} - -.cmp__sm-color { - color: var(--sm-size); -} - -.cmp__sm-color-bg { - background-color: var(--sm-size); -} - -.cmp__md-color { - color: var(--md-size); -} - -.cmp__md-color-bg { - background-color: var(--md-size); -} - -.cmp__lg-color { - color: var(--lg-size); -} - -.cmp__lg-color-bg { - background-color: var(--lg-size); -} - -.cmp__xl-color { - color: var(--xl-size); -} - -.cmp__xl-color-bg { - background-color: var(--xl-size); -} - -.cmp__xxl-color { - color: var(--xxl-size); -} - -.cmp__xxl-color-bg { - background-color: var(--xxl-size); -} - -@media only screen and (min-width: 768px) { - ul, -ol, -menu { - padding-left: 0; - } - ul ul, -ul ol, -ul menu, -ol ul, -ol ol, -ol menu, -menu ul, -menu ol, -menu menu { - padding-left: var(--md-size); - } - - .cmp__form-control { - flex-direction: row; - align-items: center; - background-color: #e6e6e6; - } - .cmp__form-control label { - min-width: 6.225rem; - margin-right: var(--sm-size); - } - - cmp-image cmp-progress.cmp__last { - display: block; - } - cmp-image .cmp__image-info { - --image-icon-size: 80px; - } - cmp-image cmp-progress.cmp__first { - top: 20%; - } - cmp-image cmp-progress.cmp__last { - bottom: 20%; - } - - cmp-progress .cmp__squares-container { - --square-size: var(--sm-size); - } - - .cmp__widget { - --widget-body-padding: var(--lg-size) var(--xl-size); - } - - .cmp__widget-ribbon { - min-width: 11.089rem; - } - - .cmp__cards-list { - padding: 0 var(--sm-size); - justify-content: space-between; - } - .cmp__cards-list .cmp__card { - width: calc(50% - var(--xxl-size) / 2); - } - .cmp__cards-list .cmp__card .cmp__card-header .cmp__card-title::before, .cmp__cards-list .cmp__card .cmp__card-header .cmp__card-title::after { - display: block; - } - .cmp__cards-list .cmp__card .cmp__card-header .cmp__card-title h5 { - padding-left: 0.825rem; - padding-right: 0.825rem; - } -} -@keyframes color_change { - 0% { - background-color: #f68faa; - } - 10% { - background-color: #f04875; - } - 20% { - background-color: #f68faa; - } - 100% { - background-color: #f68faa; - } -} -html, body { - min-height: 100vh; -} - -.cmp__blog { - transition: filter 0.25s; - background: url("assets/background2.png") #4b555e; -} -.cmp__blog.cmp__site-loading { - filter: blur(5px); -} - -.cmp__site-container { - display: flex; - flex-direction: column; - flex: 1 1 auto; - min-height: 100vh; -} - -.cmp__blog-header { - display: flex; - align-items: center; - height: 2.882rem; - padding: 0 var(--md-size); - color: #e8e8e8; -} - -.cmp__blog-info { - display: flex; - flex-direction: column; - align-items: center; -} -.cmp__blog-info .cmp__separator { - display: none; - margin: 0 var(--sm-size); - height: 1.618rem; - border-right: solid 1px; -} - -a.cmp__blog-logo { - display: flex; - align-items: center; - border-bottom: none; - color: #e8e8e8; -} -a.cmp__blog-logo:hover .cmp__blog-name { - letter-spacing: 3px; -} -a.cmp__blog-logo .cmp__blog-name { - position: relative; - width: 4.664rem; - margin-left: 0.26rem; - top: -5px; - font-family: "Amatic SC", "Brush Script MT", cursive; - font-size: var(--lg-size); - line-height: 1; - letter-spacing: 2px; - transition: all 0.5s; -} - -.cmp__blog-tag-line { - position: absolute; - top: 1.781rem; - left: 3.494rem; - font-size: 0.618rem; -} - -.cmp__blog-nav { - display: flex; - align-items: center; - justify-content: flex-end; - flex-grow: 1; - height: 100%; - margin-left: var(--lg-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; -} -.cmp__blog-nav ul { - height: 100%; - display: flex; - align-items: center; - margin: 0; - padding: 0; - list-style: none; -} -.cmp__blog-nav ul li { - height: 100%; - position: relative; -} -.cmp__blog-nav ul li:before { - display: none; -} -.cmp__blog-nav ul li:last-child { - margin-right: 0; -} -.cmp__blog-nav ul li.cmp__nav-active a::before { - content: ""; - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - border-top: solid 4px #e8e8e8; -} -.cmp__blog-nav ul li:not(.cmp__hamburger-link) { - display: none; -} -.cmp__blog-nav ul li.cmp__hamburger-link { - padding: 0; -} -.cmp__blog-nav ul li.cmp__hamburger-link .cmp__nav-link { - position: relative; -} -.cmp__blog-nav ul li.cmp__hamburger-link .cmp__nav-link .cmp__hidden-menu { - position: absolute; - cursor: pointer; - width: var(--lg-size); - height: var(--lg-size); - opacity: 0; -} -.cmp__blog-nav ul li a { - position: relative; - z-index: 1; - display: flex; - align-items: center; - height: 100%; - padding: 0 0.68rem; - font-size: 0.749rem; - line-height: 1; - letter-spacing: 2px; - border-bottom: none; - transition: all 0.5s; -} -.cmp__blog-nav ul li a:hover { - background-color: #404850; - color: #f7f7f7; -} -.cmp__blog-nav ul li a cmp-icon { - margin-right: 0.146rem; -} -.cmp__blog-nav ul li a .cmp__nav-link-text { - display: none; - line-height: 1; -} -.cmp__blog-nav ul li .cmp__search-form { - display: flex; - align-items: center; - height: 100%; -} -.cmp__blog-nav ul li .cmp__search-form input { - display: none; - padding: 0 0 0.26rem; - font-size: var(--xs-size); - line-height: 1; - border: none; - border-radius: 0; - border-bottom: solid 1px #e8e8e8; - color: #e8e8e8; - background: transparent; -} -.cmp__blog-nav ul li .cmp__search-form input:focus, .cmp__blog-nav ul li .cmp__search-form input:active { - outline: none; - border-color: #e8e8e8; -} -.cmp__blog-nav ul li .cmp__search-form input::placeholder { - color: #e8e8e8; -} -.cmp__blog-nav.cmp__search-active .cmp__search-link { - display: flex; -} -.cmp__blog-nav.cmp__search-active .cmp__search-link .cmp__search-form input { - display: block; -} -.cmp__blog-nav.cmp__search-active ul li:not(:first-child) { - display: none; -} -.cmp__blog-nav.cmp__search-active ul li:first-child { - width: 100%; -} - -.cmp__blog-main { - --border-radius: 1.618rem; - position: relative; - flex: 1 1 auto; - min-height: 700px; - padding-top: 3.847rem; - padding-bottom: 6.225rem; - background: url("assets/background.png"), url("assets/svgbg.svg") no-repeat left top, url("assets/coffee-stain.png") no-repeat right bottom white; - background-size: auto, 50%; - border-radius: var(--border-radius); - box-shadow: #292f33 -20px -5px 10px, #292f33 5px -5px 10px, #292f33 -20px 0 100px -20px, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; -} -.cmp__blog-main:before, .cmp__blog-main:after { - content: ""; - position: absolute; - z-index: 1; - width: 6px; - top: calc(var(--border-radius) - 8px); - height: calc(100% - 2 * var(--border-radius) + 16px); -} -.cmp__blog-main:before { - left: 0; - background: linear-gradient(to right, rgba(204, 204, 204, 0.4), transparent); -} -.cmp__blog-main:after { - right: 0; - background: linear-gradient(to left, rgba(204, 204, 204, 0.4), transparent); -} - -.cmp__spiral { - display: none; - height: calc(100% - 2 * 4.664rem); - width: 60px; - position: absolute; - top: 4.664rem; - left: -27px; - background-image: url("assets/spiral.png"); - background-size: 60px auto; - background-repeat: repeat-y; - z-index: 100; -} - -.cmp__color-bars { - --bar-height: 0.825rem; - --bar-width: 0.382rem; - display: flex; - position: absolute; - top: 0; - left: var(--lg-size); - height: var(--bar-height); -} -.cmp__color-bars .cmp__color-bar { - width: var(--bar-width); - height: 100%; - position: relative; - margin-right: 1px; - background-color: #e6e6e6; -} -.cmp__color-bars .cmp__color-bar:after { - position: absolute; - content: ""; - bottom: calc(-1 * var(--bar-width) - 1px); - left: 0; - width: var(--bar-width); - height: var(--bar-width); - background-color: inherit; - transform: rotate(45deg); -} - -a.cmp__subscribe { - --ribbon-offset: 4px; - position: absolute; - right: calc(0.68rem + var(--md-size) - 4px); - top: calc(-1 * var(--ribbon-offset)); - padding: 0 0 var(--md-size) 0; - width: var(--xl-size); - border-bottom: none; - z-index: 10; -} -a.cmp__subscribe:before { - content: ""; - position: absolute; - top: 0; - left: calc(-1 * var(--ribbon-offset)); - height: calc(var(--ribbon-offset) / 2); - border: solid calc(var(--ribbon-offset) / 2) #9a9a9a; - border-left-color: transparent; - border-top-color: transparent; -} -a.cmp__subscribe div { - display: block; - padding: 0.26rem 0; - line-height: 0.8; - text-align: center; - background-image: url("assets/background.png"), linear-gradient(#d4d4d4 0%, #e6e6e6 100%); -} -a.cmp__subscribe div span { - font-size: var(--sm-size); - background-color: #9a9a9a; - color: transparent; - text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5); - -webkit-background-clip: text; - -moz-background-clip: text; - background-clip: text; -} -a.cmp__subscribe span:after { - content: ""; - width: 0; - height: 0; - position: absolute; - bottom: 0; - left: 0; - border-left: calc(var(--xl-size) / 2) solid #e6e6e6; - border-right: calc(var(--xl-size) / 2) solid #e6e6e6; - border-bottom: var(--md-size) solid transparent; -} - -a.cmp__go-top { - --border-width: 1rem; - --border-color: #e6e6e6; - position: absolute; - bottom: 0; - left: calc(50% - var(--border-width)); - border: solid var(--border-width) var(--border-color); - border-left-color: transparent; - border-right-color: transparent; - border-top: none; -} - -.cmp__ribbon { - --ribbon-height: 1.47rem; - --ribbon-bend-height: calc(var(--ribbon-height) / 3.75); - display: inline-block; - position: relative; - height: var(--ribbon-height); - line-height: var(--ribbon-height); - padding: 0 var(--xl-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: 0.68rem; - text-transform: uppercase; - letter-spacing: 1px; - text-align: center; - background: #ba89b6; - color: white; - box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; -} -.cmp__ribbon::before, .cmp__ribbon::after { - content: ""; - position: absolute; - border: solid calc(var(--ribbon-height) / 2) #a769a2; - z-index: -1; - bottom: calc(-1 * var(--ribbon-bend-height)); -} -.cmp__ribbon::before { - left: calc(-1 * (var(--ribbon-height) - var(--ribbon-bend-height))); - border-left-color: transparent; -} -.cmp__ribbon::after { - right: calc(-1 * (var(--ribbon-height) - var(--ribbon-bend-height))); - border-right-color: transparent; -} -.cmp__ribbon .cmp__ribbon-content { - text-shadow: 0 0 2px #7b4877; -} -.cmp__ribbon .cmp__ribbon-content::before, .cmp__ribbon .cmp__ribbon-content::after { - content: ""; - position: absolute; - display: block; - bottom: calc(-1 * var(--ribbon-bend-height)); - border-style: solid; - border-color: #7b4877 transparent transparent transparent; -} -.cmp__ribbon .cmp__ribbon-content::before { - left: 0; - border-width: var(--ribbon-bend-height) 0 0 var(--ribbon-bend-height); -} -.cmp__ribbon .cmp__ribbon-content::after { - right: 0; - border-width: var(--ribbon-bend-height) var(--ribbon-bend-height) 0 0; -} - -.cmp__section-heading { - position: relative; - display: flex; - justify-content: center; - align-items: center; - margin-top: var(--xxl-size); - margin-bottom: var(--xl-size); - color: #9a9a9a; -} -.cmp__section-heading span { - display: flex; - justify-content: center; - align-items: center; - position: relative; - height: var(--xl-size); - line-height: var(--xl-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - font-weight: bold; - background-color: #e6e6e6; - color: #5c5c5c; - z-index: 1; -} -.cmp__section-heading span::before, .cmp__section-heading span::after { - content: ""; - position: absolute; - top: 0; - height: 100%; - border: calc(var(--xl-size) / 2) solid #e6e6e6; - border-top-color: transparent; - border-bottom-color: transparent; -} -.cmp__section-heading span::before { - left: calc(-1 * var(--xl-size)); - border-left-color: transparent; -} -.cmp__section-heading span::after { - right: calc(-1 * var(--xl-size)); - border-right-color: transparent; -} -.cmp__section-heading:after { - position: absolute; - left: 0; - top: 50%; - content: ""; - width: 100%; - border-bottom: solid 1px #dedede; -} - -.cmp__blog-content { - margin-bottom: var(--xl-size); -} - -.cmp__article-meta { - position: relative; - display: flex; - flex-direction: column; - flex-wrap: wrap; - font-size: var(--xs-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - color: #9a9a9a; -} -.cmp__article-meta ul, .cmp__article-meta li { - margin: 0; - padding: 0; - list-style: none; - display: inline; -} -.cmp__article-meta a { - border-bottom: none; -} -.cmp__article-meta > * { - display: flex; - align-items: center; - margin-bottom: 5px; - margin-right: 0; -} -.cmp__article-meta > * cmp-icon { - margin-right: 0.26rem; -} - -.cmp__page-title { - margin-top: var(--xl-size); - margin-bottom: 5.135rem; -} -.cmp__page-title h1, .cmp__page-title h2, .cmp__page-title h3, .cmp__page-title h4, .cmp__page-title h5, .cmp__page-title h6 { - margin-top: 0; - margin-bottom: 0; -} -.cmp__page-title h1 { - position: relative; - font-size: var(--xxl-size); - text-transform: uppercase; - letter-spacing: 0.5px; - word-spacing: 0.382rem; - color: #bdb5b8; -} -.cmp__page-title h1::after { - display: block; - content: ""; - width: 36%; - height: 5px; - margin-top: var(--xl-size); - background-color: #bdb5b8; -} -.cmp__page-title h1:hover::before { - left: calc(36% + 10px); -} -.cmp__page-title h4 { - display: inline; - padding-bottom: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - color: #bdb5b8; -} - -.cmp__article-author a { - display: flex; - align-items: center; - align-items: flex-end; -} -.cmp__article-author a .cmp__article-author-pic { - border-radius: 50%; - opacity: 0.8; - width: 30px; -} -.cmp__article-author a span { - margin-left: 0.26rem; -} -.cmp__article-author a span.cmp__article-author-role { - position: relative; - top: -3px; - margin-top: 0; - padding: 1px 5px; - font-size: 0.561rem; - text-transform: uppercase; - letter-spacing: 1px; - color: white; - background-color: #b5db56; - border-radius: 3px; -} -.cmp__article-author a span.cmp__article-author-role.cmp__article-author-guest { - background-color: #9a9a9a; -} - -.cmp__article-date span { - font-variant: small-caps; -} - -.cmp__article-total-comments a { - display: flex; - align-items: center; -} - -.cmp__article-share > div { - display: flex; - align-items: center; -} - -.cmp__article-tags { - font-style: italic; -} -.cmp__article-tags li { - margin-right: 0.12rem; -} -.cmp__article-tags li:before { - display: none; -} - -.cmp__article-content { - --link-icon-width: 14px; - --link-offset: var(--md-size); - --link-image: url("assets/link.svg"); -} -.cmp__article-content a:link, -.cmp__article-content a:visited, -.cmp__article-content a:hover, -.cmp__article-content a:focus, -.cmp__article-content a:active { - border-bottom: none; - text-decoration: none; - transition: all 0.5s; -} -.cmp__article-content a:link, -.cmp__article-content a:visited { - color: #f04875; -} -.cmp__article-content a:hover, -.cmp__article-content a:focus, -.cmp__article-content a:active { - color: #da1247; -} -.cmp__article-content h2:hover a::before, .cmp__article-content h3:hover a::before, .cmp__article-content h4:hover a::before, .cmp__article-content h5:hover a::before, .cmp__article-content h6:hover a::before { - opacity: 1; -} -.cmp__article-content h2 a, .cmp__article-content h3 a, .cmp__article-content h4 a, .cmp__article-content h5 a, .cmp__article-content h6 a { - position: relative; - display: inline-flex; - align-items: center; -} -.cmp__article-content h2 a::before, .cmp__article-content h3 a::before, .cmp__article-content h4 a::before, .cmp__article-content h5 a::before, .cmp__article-content h6 a::before { - content: ""; - position: absolute; - left: calc(-1 * var(--link-offset)); - width: var(--link-icon-width); - height: var(--link-icon-width); - opacity: 0; - background: var(--link-image) no-repeat; - transition: opacity 0.5s; -} -.cmp__article-content h2 a:link, -.cmp__article-content h2 a:visited, .cmp__article-content h3 a:link, -.cmp__article-content h3 a:visited, .cmp__article-content h4 a:link, -.cmp__article-content h4 a:visited, .cmp__article-content h5 a:link, -.cmp__article-content h5 a:visited, .cmp__article-content h6 a:link, -.cmp__article-content h6 a:visited { - color: inherit; -} -.cmp__article-content h2 a:hover, -.cmp__article-content h2 a:focus, -.cmp__article-content h2 a:active, .cmp__article-content h3 a:hover, -.cmp__article-content h3 a:focus, -.cmp__article-content h3 a:active, .cmp__article-content h4 a:hover, -.cmp__article-content h4 a:focus, -.cmp__article-content h4 a:active, .cmp__article-content h5 a:hover, -.cmp__article-content h5 a:focus, -.cmp__article-content h5 a:active, .cmp__article-content h6 a:hover, -.cmp__article-content h6 a:focus, -.cmp__article-content h6 a:active { - color: #f04875; -} -.cmp__article-content figure.cmp__figure-full { - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.cmp__article-content figure.cmp__figure-full figcaption, .cmp__article-content figure.cmp__figure-full caption { - margin-left: var(--lg-size); - margin-right: var(--lg-size); -} -.cmp__article-content figure.cmp__figure-full img, .cmp__article-content figure.cmp__figure-full .cmp__table-wrapper, .cmp__article-content figure.cmp__figure-full cmp-image, .cmp__article-content figure.cmp__figure-full iframe { - border-radius: 0; -} -.cmp__article-content .cmp__toc { - color: #9a9a9a; -} -.cmp__article-content .cmp__toc ol li a { - color: inherit; - transition: color 0.5s; -} -.cmp__article-content .cmp__toc ol li a:hover { - color: #f04875; -} -.cmp__article-content > p:first-of-type { - font-size: 1.212rem; - margin-top: var(--md-size); -} -.cmp__article-content .cmp__article-poster { - margin-left: 0; - margin-right: 0; - margin-top: 0.26rem; -} -.cmp__article-content .cmp__page-element { - margin-top: var(--md-size); - margin-bottom: var(--lg-size); -} - -.cmp__article-footer { - display: flex; - justify-content: flex-end; -} - -a.cmp__article-continue-reading { - display: inline-flex; - align-items: center; - text-align: right; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - letter-spacing: 1px; - text-transform: uppercase; - color: #9a9a9a; -} -a.cmp__article-continue-reading:after { - position: relative; - content: "→"; - margin-left: 0.146rem; -} -a.cmp__article-continue-reading:hover { - color: #f04875; -} -a.cmp__article-continue-reading:hover:after { - animation: arrow-move-right 0.5s linear infinite; -} - -.cmp__toc { - padding: var(--lg-size) var(--xl-size); - margin-bottom: var(--xl-size); - background: url("assets/background.png") #f7f7f7; - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; -} -.cmp__toc h5 { - padding-bottom: var(--xs-size); - margin-bottom: var(--sm-size); - text-align: center; - letter-spacing: 0.5px; - text-transform: uppercase; - color: #f04875; - border-bottom: solid 1px #e6e6e6; -} -.cmp__toc ol { - padding-left: var(--md-size); - font-size: var(--sm-size); - letter-spacing: 1px; - text-transform: uppercase; -} -.cmp__toc ol a { - color: #9a9a9a; -} -.cmp__toc ol a:hover { - color: #f04875; -} -.cmp__toc ol ol { - font-size: var(--xs-size); -} - -.cmp__ribbon-container { - display: flex; - justify-content: center; - align-items: center; - position: relative; - z-index: 1; - margin-top: 1rem; - margin-bottom: 2.618rem; -} - -button.cmp__share-it-btn { - padding: 0.146rem; - margin-left: 0.315rem; - font-size: 0.618rem; - background: none; - color: #9a9a9a; -} -button.cmp__share-it-btn:focus, button.cmp__share-it-btn:active, button.cmp__share-it-btn:hover { - background-color: transparent; - color: #f04875; -} - -.cmp__auto-layout > * { - margin-left: var(--lg-size); - margin-right: var(--lg-size); -} -.cmp__auto-layout .cmp__sub .cmp__responsive { - margin-left: 0; - margin-right: 0; -} -.cmp__auto-layout .cmp__sub figure figcaption, .cmp__auto-layout .cmp__sub figure caption { - margin-left: 0; - margin-right: 0; -} - -blockquote.cmp__responsive { - border-radius: 0; - box-shadow: none; -} - -.cmp__responsive { - max-width: 100%; - margin-left: 0; - margin-right: 0; -} -.cmp__responsive.cmp__toc, .cmp__responsive.cmp__widget, .cmp__responsive.cmp__sub { - border-radius: 0; - box-shadow: none; -} -.cmp__responsive figcaption, .cmp__responsive caption { - margin-left: var(--lg-size); - margin-right: var(--lg-size); -} -.cmp__responsive img, .cmp__responsive .cmp__table-wrapper, .cmp__responsive pre, .cmp__responsive .cmp__widget, .cmp__responsive .cmp__card { - border-radius: 0; - box-shadow: none; -} - -.cmp__drop-cap:first-letter { - float: left; - padding: 0.51rem; - margin-top: 0.382rem; - margin-right: 0.382rem; - font-size: 300%; - font-weight: bold; - line-height: 1; - background-color: #f04875; - color: white; - border-radius: 3px; - box-shadow: -1px -1px 10px #da1247 inset; -} - -.cmp__pagination { - display: flex; - align-items: center; - margin-top: var(--lg-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - color: #9a9a9a; -} -.cmp__pagination > * { - flex-grow: 1; -} -.cmp__pagination > * a { - display: inline-flex; - align-items: center; -} -.cmp__pagination :first-child a:before { - position: relative; - content: "≪"; - margin-right: 0.146rem; -} -.cmp__pagination :first-child a:hover:before { - animation: arrow-move-left 0.5s linear infinite; -} -.cmp__pagination :last-child { - text-align: right; -} -.cmp__pagination :last-child a:after { - position: relative; - content: "≫"; - margin-left: 0.146rem; -} -.cmp__pagination :last-child a:hover:after { - animation: arrow-move-right 0.5s linear infinite; -} - -.cmp__blog-footer { - position: relative; - height: 4.664rem; - display: flex; - flex-direction: column; - padding: var(--xs-size) var(--md-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - letter-spacing: 2px; - text-transform: uppercase; - color: #bdb5b8; -} -.cmp__blog-footer section.cmp__footer-left { - display: flex; - font-size: 0.421rem; -} -.cmp__blog-footer section.cmp__footer-left > div { - flex-grow: 1; -} -.cmp__blog-footer section.cmp__footer-left > div:last-child { - margin-left: 0.26rem; - text-align: right; -} -.cmp__blog-footer section.cmp__footer-right { - display: flex; - justify-content: center; - align-items: center; - margin-top: var(--sm-size); - font-size: 0.618rem; -} - -@media only screen and (min-width: 576px) { - .cmp__blog-nav ul li:not(.cmp__hamburger-link) { - display: flex; - } - .cmp__blog-nav ul li.cmp__hamburger-link { - display: none; - } - .cmp__blog-nav ul li a { - font-size: var(--xs-size); - } - - blockquote.cmp__responsive { - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - } - - .cmp__responsive { - margin-left: var(--lg-size); - margin-right: var(--lg-size); - } - .cmp__responsive.cmp__toc, .cmp__responsive.cmp__widget, .cmp__responsive.cmp__sub { - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - } - .cmp__responsive figcaption, .cmp__responsive caption { - margin-left: 0; - margin-right: 0; - } - .cmp__responsive img, .cmp__responsive .cmp__table-wrapper, .cmp__responsive pre, .cmp__responsive .cmp__widget, .cmp__responsive .cmp__card { - border-radius: 3px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - } -} -@media only screen and (min-width: 768px) { - .cmp__blog-info { - flex-direction: row; - } - .cmp__blog-info .cmp__separator { - display: block; - } - - a.cmp__blog-logo .cmp__blog-name { - position: static; - } - - .cmp__blog-tag-line { - font-size: var(--xs-size); - position: relative; - left: 0; - top: 3px; - } - - .cmp__blog-nav ul li .cmp__search-form input { - display: block; - } - - .cmp__blog-main { - --border-radius: 2.618rem; - } - - .cmp__page-title h1::after { - height: 6px; - } - - .cmp__article-meta { - flex-direction: row; - } - .cmp__article-meta > * { - min-height: 30px; - margin-bottom: 0; - } - .cmp__article-meta > *:not(:last-child):after { - content: "|"; - margin-left: var(--xs-size); - margin-right: var(--xs-size); - color: #e6e6e6; - } - - .cmp__article-author a { - align-items: center; - } - .cmp__article-author a span.cmp__article-author-role { - position: static; - } - .cmp__article-author:after { - content: "|"; - color: #e6e6e6; - margin-left: var(--xs-size); - margin-right: var(--xs-size); - } - - a.cmp__subscribe { - --ribbon-offset: 6px; - padding-bottom: var(--lg-size); - width: var(--xxl-size); - right: 5%; - } - a.cmp__subscribe div { - line-height: 1.2; - } - a.cmp__subscribe div span { - font-size: var(--md-size); - } - a.cmp__subscribe div span:after { - border-left: calc(var(--xxl-size) / 2) solid #e6e6e6; - border-right: calc(var(--xxl-size) / 2) solid #e6e6e6; - border-bottom: var(--lg-size) solid transparent; - } - - .cmp__ribbon { - --ribbon-height: 1.618rem; - font-size: var(--xs-size); - } - - .cmp__auto-layout > *, .cmp__responsive { - margin-left: var(--xl-size); - margin-right: var(--xl-size); - } - - .cmp__responsive-flex { - display: flex; - justify-content: space-between; - } - .cmp__responsive-flex > * { - flex-grow: 1; - width: 47%; - max-width: 47%; - } - - .cmp__blog-footer { - flex-direction: row; - } - .cmp__blog-footer > section { - flex-grow: 1; - } - .cmp__blog-footer section.cmp__footer-left { - flex-direction: column; - } - .cmp__blog-footer section.cmp__footer-left > div { - flex-grow: unset; - } - .cmp__blog-footer section.cmp__footer-left > div:last-child { - margin-left: 0; - text-align: left; - } - .cmp__blog-footer section.cmp__footer-right { - justify-content: flex-end; - margin-top: 0; - font-size: 0.618rem; - } - - .cmp__ribbon-container .cmp__ribbon { - width: 40%; - } - - a.cmp__go-top { - --border-width: 1.335rem; - } - - .cmp__color-bars { - --bar-height: 1rem; - --bar-width: 0.51rem; - left: 5.654rem; - } -} -@media only screen and (min-width: 878px) { - .cmp__auto-layout > *, .cmp__responsive { - max-width: 42rem; - margin-left: auto; - margin-right: auto; - } -} -@media only screen and (min-width: 992px) { - .cmp__blog-nav ul li a .cmp__nav-link-text { - display: block; - } - - .cmp__blog-main { - margin: 0 var(--xl-size); - } - - .cmp__article-content { - --link-icon-width: 24px; - --link-offset: var(--xl-size); - --link-image: url("assets/link-big.svg"); - } - - .cmp__spiral { - display: block; - } -} -@media only screen and (min-width: 1260px) { - .cmp__article-author { - position: absolute; - top: -2.16rem; - left: -7.546rem; - } - .cmp__article-author:after { - display: none; - } - .cmp__article-author a { - flex-direction: column; - } - .cmp__article-author a .cmp__article-author-pic { - width: 4.236rem; - } - .cmp__article-author a span { - margin-top: 0.26rem; - margin-left: 0; - } -} -@keyframes arrow-move-left { - 0% { - left: 0; - } - 50% { - left: -3px; - } - 100% { - left: 0; - } -} -@keyframes arrow-move-right { - 0% { - right: 0; - } - 50% { - right: -3px; - } - 100% { - right: 0; - } -} -.cmp__tab-hide { - display: none; -} - -@media only screen and (min-width: 768px) { - .cmp__tab-hide { - display: flex; - } -} -#cmp__blog_detail .cmp__article-header .cmp__page-title { - margin-bottom: var(--xl-size); -} -#cmp__blog_detail .cmp__article-header .cmp__article-meta { - position: relative; -} -#cmp__blog_detail .cmp__article-footer { - display: block; -} - -.cmp__article-actions { - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: var(--md-size); - margin-bottom: var(--md-size); -} -.cmp__article-actions > *:not(:last-child) { - margin-right: var(--sm-size); -} - -.cmp__comments .cmp__comment-by { - margin-right: 0.51rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} -.cmp__comments .cmp__comment-by img { - border-radius: 50%; -} -.cmp__comments .cmp__comment-by span { - padding: 1px 5px; - margin-top: 0.26rem; - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: 0.618rem; - text-transform: uppercase; - letter-spacing: 1px; - text-align: center; - color: #9a9a9a; - background-color: #f7f7f7; - border-radius: 3px; -} -.cmp__comments .cmp__comments-form { - margin-top: var(--md-size); - margin-bottom: var(--md-size); -} -.cmp__comments .cmp__comments-form .cmp__form-container { - display: flex; -} -.cmp__comments .cmp__comments-form .cmp__form-container .cmp__form-control { - flex: 1; -} -.cmp__comments .cmp__comments-form .cmp__form-container .cmp__form-control textarea { - min-height: 75px; -} -.cmp__comments .cmp__comments-list { - margin: 1.47rem 0 0 0; - padding: 0; - list-style: none; -} -.cmp__comments .cmp__comments-list li { - padding-bottom: var(--md-size); -} -.cmp__comments .cmp__comments-list li .cmp__comment { - display: flex; - align-items: flex-start; -} -.cmp__comments .cmp__comments-list li .cmp__comment .cmp__comment-by { - margin-top: var(--lg-size); -} -.cmp__comments .cmp__comments-list li .cmp__comment .cmp__comment-detail .cmp__commented-date { - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: 0.618rem; - text-transform: uppercase; - letter-spacing: 1px; - text-align: right; - color: #9a9a9a; -} -.cmp__comments .cmp__comments-list li .cmp__comment .cmp__comment-actions { - display: flex; - align-items: center; - justify-content: flex-start; - margin-top: 0.382rem; - margin-left: 0.382rem; -} -.cmp__comments .cmp__comments-list li .cmp__comment .cmp__comment-actions .cmp__icon-button { - color: #9a9a9a; - margin-right: 1rem; -} -.cmp__comments .cmp__comments-list li .cmp__comment .cmp__comment-actions .cmp__icon-button.cmp__button-clicked { - color: #5c5c5c; -} -.cmp__comments .cmp__comments-list li:before { - display: none; -} - -.cmp__archives ul li a span, .cmp__tags ul li a span { - font-size: var(--xs-size); - color: #9a9a9a; - transition: color 0.5s; -} -.cmp__archives ul li a:hover span, .cmp__tags ul li a:hover span { - color: #f04875; -} - -@media only screen and (min-width: 1260px) { - #cmp__blog_detail .cmp__article-author { - top: -5.654rem; - } -} -.cmp__social-widget { - display: flex; - flex-direction: column; - align-items: center; - margin: 0 auto; - padding-top: var(--md-size); - padding-bottom: var(--md-size); - font-family: "Source Sans Pro", Arial, Tahoma, sans-serif; - font-size: var(--xs-size); - text-transform: uppercase; - letter-spacing: 1px; - color: #9a9a9a; -} -.cmp__social-widget a { - display: flex; - align-items: center; - margin-bottom: var(--xs-size); - border-bottom: none; -} -.cmp__social-widget a:hover cmp-icon { - transform: scale(1.5); -} -.cmp__social-widget a cmp-icon { - margin-right: 0.382rem; - transition: transform 0.25s; -} -.cmp__social-widget a .cmp__social-text { - line-height: 1; -} -.cmp__social-widget .separator { - display: none; - margin: 0 0.51rem; -} - -.cmp__project-card .cmp__card-image { - height: 240px; -} - -.cmp__person-card .cmp__card-image { - height: 360px; -} - -.cmp__project-card .cmp__card-footer .cmp__card-actions .cmp__icon-text:first-child, .cmp__person-card .cmp__card-footer .cmp__card-actions .cmp__icon-text:first-child { - justify-content: flex-start; -} -.cmp__project-card .cmp__card-footer .cmp__card-actions .cmp__icon-text:last-child, .cmp__person-card .cmp__card-footer .cmp__card-actions .cmp__icon-text:last-child { - justify-content: flex-end; -} - -@media only screen and (min-width: 576px) { - .cmp__social-widget { - flex-direction: row; - border-top: solid 1px #f7f7f7; - border-bottom: solid 1px #f7f7f7; - } - .cmp__social-widget a { - margin-bottom: 0; - } - .cmp__social-widget .separator { - display: block; - } -} -.cmp__contact-form .cmp__bottom-row { - display: flex; -} -.cmp__contact-form .cmp__bottom-row p { - display: flex; - align-items: center; - align-self: flex-start; - flex-grow: 1; - font-size: var(--xs-size); - color: #9a9a9a; - line-height: 1; - margin-right: var(--md-size); -} -.cmp__contact-form .cmp__bottom-row p cmp-icon { - display: block; - margin-right: 0.236rem; -} -.cmp__contact-form .cmp__bottom-row button { - margin-left: auto; -} -.cmp__contact-form .cmp__bottom-row button:hover cmp-icon { - animation: arrow-move-up-right 0.5s linear infinite; -} -.cmp__contact-form .cmp__bottom-row button cmp-icon { - position: relative; -} - -@keyframes arrow-move-up-right { - 0% { - top: 0; - right: 0; - } - 50% { - top: -3px; - right: -3px; - } - 100% { - top: 0; - right: 0; - } -} \ No newline at end of file diff --git a/fibonacci.js b/fibonacci.js deleted file mode 100644 index 5a9c129..0000000 --- a/fibonacci.js +++ /dev/null @@ -1,373 +0,0 @@ -(function () { - - //***** Re-usable web components *****// - - // Icon Web Component. - class IconElement extends HTMLElement { - - get name() { - return this.getAttribute('name'); - } - - set name(value) { - this.setAttribute('name', value); - } - - get size() { - return this.getAttribute('size'); - } - - set size(value) { - this.setAttribute('size', value); - } - - static get observedAttributes() { - return ['name', 'size']; - } - - _setIcon() { - const useElement = this.querySelector('use'); - useElement.setAttribute('xlink:href', `./assets/bootstrap-icons.svg#${this.name}`); - useElement.setAttribute('href', `./assets/bootstrap-icons.svg#${this.name}`); - } - - _setSize() { - if (this.size) { - this.style.width = `${this.size}px`; - this.style.height = `${this.size}px`; - } else { - delete this.style.width; - delete this.style.height; - } - } - - connectedCallback() { - if (!this._rendered) { - const iconTemplate = document.createElement('template'); - iconTemplate.innerHTML = ` - - `; - this.appendChild(iconTemplate.content.cloneNode(true)); - this._rendered = true; - } - - this._setIcon(); - this._setSize(); - } - - attributeChangedCallback(attrName) { - if (!this._rendered) { - return; - } - - if (attrName === 'size') { - this._setSize(); - } - - if (attrName === 'name') { - this._setIcon(); - } - } - } - - window.customElements.define('cmp-icon', IconElement); - - // Content scroll indicator web component. - class ContentScaleElement extends HTMLElement { - - constructor() { - super(); - this._handleScroll = this._handleScroll.bind(this); - this._handleResize = this._handleResize.bind(this); - this._winHeight = window.innerHeight; - } - - _setScrollProgress() { - const winScrollTop = window.scrollY, - computedRect = this._articleContent.getBoundingClientRect(), - amountScrolled = this._winHeight - computedRect.top, - pctScrolled = amountScrolled / computedRect.height * 100, - delta = 100; - - let adjustedPctScrolled; - if (winScrollTop <= delta || pctScrolled < 1) { - adjustedPctScrolled = 0; - } else if (amountScrolled > computedRect.height + delta) { - adjustedPctScrolled = 105; - } else { - adjustedPctScrolled = Math.floor(pctScrolled); - } - - if (adjustedPctScrolled === 0) { - this._scrollProgress.style.display = 'none'; - this._scrollProgress.style.width = '0%'; - return; - } - - this._scrollProgress.style.display = 'block'; - this._scrollProgress.style.width = `${adjustedPctScrolled}%`; - } - - _handleResize() { - this._winHeight = window.innerHeight; - this._setScrollProgress(); - } - - _handleScroll() { - this._setScrollProgress(); - } - - connectedCallback() { - if (!this._rendered) { - const contentScaleTemplate = document.createElement('template'); - contentScaleTemplate.innerHTML = ` -
-
`; - this.appendChild(contentScaleTemplate.content.cloneNode(true)); - this._scrollProgress = this.querySelector('.cmp__scroll-progress'); - this._rendered = true; - } - - window.addEventListener('resize', this._handleResize); - window.addEventListener('scroll', this._handleScroll); - } - - disconnectedCallback() { - window.removeEventListener('resize', this._handleResize); - window.removeEventListener('scroll', this._handleScroll); - } - - setContent(contentEl) { - this._articleContent = contentEl; - this._scrollProgress.classList.add('cmp__no-transition'); - setTimeout(() => { - this._setScrollProgress(); - this._scrollProgress.classList.remove('cmp__no-transition'); - }); - } - } - - window.customElements.define('cmp-content-scale', ContentScaleElement); - - // Gracefully renders images. - class ImageElement extends HTMLElement { - - get src() { - return this.getAttribute('src'); - } - - set src(value) { - this.setAttribute('src', value); - } - - get alt() { - return this.getAttribute('alt'); - } - - set alt(value) { - this.setAttribute('alt', value); - } - - get width() { - return this.getAttribute('width'); - } - - set width(value) { - this.setAttribute('width', value); - } - - get height() { - return this.getAttribute('height'); - } - - set height(value) { - this.setAttribute('height', value); - } - - get responsive() { - return this.getAttribute('responsive'); - } - - set responsive(value) { - this.setAttribute('responsive', value); - } - - static get observedAttributes() { - return ['src', 'alt', 'width', 'height', 'responsive']; - } - - connectedCallback() { - if (this._rendered) { - return; - } - - const imageElementTemplate = document.createElement('template'); - imageElementTemplate.innerHTML = ` -
- - -
- - `; - this.appendChild(imageElementTemplate.content.cloneNode(true)); - - this.style.aspectRatio = this.width / this.height; - - const statusElement = document.querySelector('.cmp__status-text'); - statusElement.innerHTML = this.alt; - - const img = document.createElement('img'); - img.style.filter = 'blur(4px)'; - img.addEventListener('load', () => { - this.classList.add('cmp__image-loaded'); - this.appendChild(img); - setTimeout(() => { - img.style.filter = 'blur(0)'; - }, 500); - }); - img.addEventListener('error', () => { - this.classList.add('cmp__image-error'); - statusElement.innerHTML = 'Failed to load image'; - }); - img.src = this.src; - this._rendered = true; - } - - attributeChangedCallback() { - // Not handled! - } - } - - window.customElements.define('cmp-image', ImageElement); - - // Progress element. - class SquaresProgressElement extends HTMLElement { - - connectedCallback() { - if (this._rendered) { - return; - } - - const progressTemplate = document.createElement('template'); - progressTemplate.innerHTML = `
-
-
-
-
-
-
`; - this.appendChild(progressTemplate.content.cloneNode(true)); - this._rendered = true; - } - } - - window.customElements.define('cmp-progress', SquaresProgressElement); - - //**** Boot function ****/ - function init() { - const header = document.querySelector('.cmp__blog-header'), - nav = document.querySelector('.cmp__blog-nav'), - selectControl = document.querySelector('.cmp__hidden-menu'), - searchInput = document.querySelector('.cmp__search-form input'), - searchIcon = document.querySelector('.cmp__search-form a'), - hamburger = document.querySelector('.cmp__hamburger-link a'), - contentScale = document.querySelector('cmp-content-scale'), - blogContent = document.querySelector('.cmp__blog-content'), - goTop = document.querySelector('.cmp__go-top'), - startTime = performance.now(); - - if (goTop) { - goTop.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - - window.scroll({ - top: 0, - behavior: 'smooth' - }); - }); - } - - const mediaQuery = window.matchMedia('screen and (min-width: 768px)'); - mediaQuery.addListener(mediaChangeHandler); - - function mediaChangeHandler(queryList) { - if (queryList.matches) { - searchIcon.removeEventListener('click', searchIconClickHandler); - } else { - searchIcon.addEventListener('click', searchIconClickHandler); - } - } - - function searchIconClickHandler(e) { - nav.classList.add('cmp__search-active'); - document.body.addEventListener('click', documentClickHandler); - searchInput.focus(); - e.stopPropagation(); - } - - function documentClickHandler(e) { - if (e.currentTarget === searchInput || e.currentTarget === searchIcon) { - return; - } - - nav.classList.remove('cmp__search-active'); - selectControl.value = null; - document.body.removeEventListener('click', documentClickHandler); - } - - function handleSelectChange() { - const page = selectControl.value; - - if (!page) { - return; - } - - if (page === 'search') { - nav.classList.add('cmp__search-active'); - document.body.addEventListener('click', documentClickHandler); - searchInput.focus(); - return; - } - - window.location.href = selectControl.value; - } - - function handleWindowScroll() { - if (contentScale) { - if (window.pageYOffset >= header.offsetHeight) { - contentScale.classList.add('cmp__sticky') - } else { - contentScale.classList.remove('cmp__sticky'); - } - } - } - - function handeOnLoad() { - const endTime = performance.now(), - diff = (endTime - startTime) / 1000; - - if (diff > 2) { - document.body.classList.remove('cmp__site-loading', 'cmp__no-transition'); - return; - } - - setTimeout(() => { - document.body.classList.remove('cmp__site-loading', 'cmp__no-transition'); - }, 100); - } - - hamburger.addEventListener('click', () => selectControl.click()); - hamburger.addEventListener('change', handleSelectChange); - window.addEventListener('scroll', handleWindowScroll); - document.addEventListener('DOMContentLoaded', handeOnLoad); - - if (contentScale) { - contentScale.setContent(document.querySelector('.cmp__article-content')); - } - - mediaChangeHandler(mediaQuery); - } - - init(); -})(); diff --git a/gulpfile.js b/gulpfile.js index e65ca60..67c71b0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,33 +1,52 @@ const gulp = require('gulp'), sass = require('gulp-sass')(require('sass')), + babel = require('gulp-babel'), concat = require('gulp-concat'), webserver = require('gulp-webserver'); const { src, dest, watch, series, parallel } = gulp; -const scssFiles = './scss/*.scss'; +const scssFiles = './src/scss/fibonacci.scss'; +const jsFiles = './src/js/export.js'; /** * Compiles and concatenates SCSS files to a single CSS file. */ -function compile() { +function compileScss() { return src([scssFiles].join('/')) .pipe(sass().on('error', sass.logError)) .pipe(concat('fibonacci.css')) - .pipe(dest('.')); + .pipe(dest('./src')); } /** * Watch for any changes in SCSS files. */ function watchScss() { - return watch(scssFiles, series(compile)); + return watch(scssFiles, compileScss); +} + +/** + * Transpiles JS files with Babel. + */ +function transpileJs() { + return src([jsFiles].join('/')) + .pipe(babel()) + .pipe(concat('fibonacci.js')) + .pipe(dest('./src')); +} + +/** + * Watch for any changes in JS files. + */ +function watchJs() { + return watch(jsFiles, transpileJs); } /** * Starts a simple server to launch the app. */ function kickServer() { - return src('.').pipe( + return src('./src').pipe( webserver( { port: 4200, @@ -39,5 +58,5 @@ function kickServer() { ); } -exports.compile = compile; -exports.default = parallel(series(compile, kickServer), watchScss); \ No newline at end of file +exports.compile = parallel(compileScss, transpileJs); +exports.default = parallel(series(parallel(compileScss, transpileJs), kickServer), watchScss, watchJs); \ No newline at end of file diff --git a/package.json b/package.json index 6321a08..601844f 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,7 @@ "version": "3.0.4", "description": "A simplistic read-friendly blog template built with golden ratio", "scripts": { - "start": "gulp", - "build": "gulp compile" + "start": "webpack-dev-server --config webpack.config.js" }, "keywords": [ "template", @@ -24,11 +23,21 @@ }, "homepage": "https://github.com/VJAI/fibonacci#readme", "devDependencies": { + "@babel/preset-env": "^7.16.11", + "babel-loader": "^8.2.3", + "css-loader": "^6.6.0", "gulp": "^4.0.2", + "gulp-babel": "^8.0.0", "gulp-concat": "^2.6.1", "gulp-sass": "^5.0.0", "gulp-webserver": "^0.9.1", - "sass": "^1.44.0" + "mini-css-extract-plugin": "^2.5.3", + "sass": "^1.44.0", + "sass-loader": "^12.4.0", + "style-loader": "^3.3.1", + "webpack": "^5.68.0", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.7.4" }, "dependencies": { "bootstrap-icons": "^1.7.2" diff --git a/scss/_foundation.scss b/scss/_foundation.scss deleted file mode 100644 index 8b3242c..0000000 --- a/scss/_foundation.scss +++ /dev/null @@ -1,1567 +0,0 @@ -@use 'sass:color'; -@use 'sass:math'; -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; -@use 'mixins' as fibMixins; - -@include fibMixins.load_google_font($fonts: - (('Source Serif Pro': ('400', '400i', '600')), - ('Source Sans Pro': ('400', '400i', '600')), - ('Amatic SC': ('wght@700'))) -); - -// Sizes for Mobile Devices. -:root { - --base-size: #{fibVars.$small-screen-font-size}; - --xs-size: #{fibFuncs.font_size(-2)}; - --sm-size: #{fibFuncs.font_size(-1)}; - --md-size: #{fibFuncs.font_size(0)}; - --lg-size: #{fibFuncs.font_size(3)}; - --xl-size: #{fibFuncs.font_size(6)}; - --xxl-size: #{fibFuncs.font_size(8)}; - font-size: var(--base-size); - - --brand-color: #{fibVars.$brand-color}; - --brand-light: #{fibVars.$brand-light}; - --brand-dark: #{fibVars.$brand-dark}; - --brand-bg: #{fibVars.$brand-bg}; - --brand-gray: #{fibVars.$brand-gray}; - --dark-gray: #{fibVars.$dark-gray}; - --medium-gray: #{fibVars.$medium-gray}; - --gray: #{fibVars.$gray}; - --light-gray: #{fibVars.$light-gray}; - --dim-gray: #{fibVars.$dim-gray}; -} - -// Sizes for Tablet, Desktop and Large Devices. -@media only screen and (min-width: fibVars.$tablet) { - :root { - --base-size: #{fibVars.$large-screen-font-size}; - --xs-size: #{fibFuncs.font_size(-3)}; - --sm-size: #{fibFuncs.font_size(-2)}; - --md-size: #{fibFuncs.font_size(0)}; - --lg-size: #{fibFuncs.font_size(3)}; - --xl-size: #{fibFuncs.font_size(7)}; - --xxl-size: #{fibFuncs.font_size(10)}; - } -} - -// Global Overrides. -html, body { - box-sizing: border-box; - @include fibMixins.no_spacing; - - font: { - family: fibVars.$body-font-family; - size: fibVars.$body-font-size; - } - line-height: fibVars.$base-line-height; - - color: fibVars.$dark-gray; -} - -// CSS Resets. -*, *:before, *:after { - box-sizing: inherit; -} - -// Paragraphs. -p, .cmp__para { - margin: { - top: 0; - bottom: fibVars.$md-size; - } - - font-size: fibVars.$body-font-size; -} - -// Headings. -h1, .cmp__h1, -h2, .cmp__h2, -h3, .cmp__h3, -h4, .cmp__h4, -h5, .cmp__h5, -h6, .cmp__h6 { - font-family: fibVars.$heading-font-family; - line-height: fibVars.$heading-line-height; - letter-spacing: fibVars.$heading-spacing; - - color: fibVars.$heading-color; - - a:link, - a:visited, - a:hover, - a:focus, - a:active { - border-bottom: none; - } -} - -h1, .cmp__h1 { - margin: { - top: fibVars.$xl-size; - bottom: fibVars.$lg-size; - } - - font-size: fibVars.$h1-font-size; -} - -h2, .cmp__h2 { - margin: { - top: fibFuncs.font_size(6); - bottom: fibVars.$md-size; - } - - font-size: fibVars.$h2-font-size; -} - -h3, .cmp__h3 { - margin: { - top: fibVars.$lg-size; - bottom: fibVars.$sm-size; - } - - font-size: fibVars.$h3-font-size; -} - -h4, .cmp__h4 { - margin: { - top: fibVars.$lg-size; - bottom: fibVars.$xs-size; - } - - font-size: fibVars.$h4-font-size; -} - -h5, .cmp__h5 { - margin: { - top: fibVars.$lg-size; - bottom: fibVars.$xs-size; - } - - font-size: fibVars.$h5-font-size; - text-transform: uppercase; - letter-spacing: fibVars.$small-letter-spacing; - - color: fibVars.$gray; -} - -h6, .cmp__h6 { - margin: { - top: fibVars.$lg-size; - bottom: fibVars.$xs-size; - } - - font-size: fibVars.$h6-font-size; - text-transform: uppercase; - letter-spacing: fibVars.$small-letter-spacing; - - color: fibVars.$gray; -} - -// Links. -a:link, -a:visited, -a:hover, -a:focus, -a:active { - color: inherit; - border-bottom: dotted 1px; - text-decoration: none; - transition: all fibVars.$medium-speed; -} - -a:hover, -a:focus, -a:active { - color: fibVars.$brand-color; - text-shadow: color.adjust(fibVars.$brand-color, $lightness: 30%) 0 0 6px; -} - -a:focus-visible { - outline-color: fibVars.$brand-color; -} - -// Lists. -ul, -ol, -menu { - position: relative; - - padding-left: fibVars.$md-size; - margin: { - top: 0; - bottom: fibVars.$md-size; - } - - list-style: none; - - color: inherit; - - ul, ol, menu { - margin-bottom: fibFuncs.font_size(-9); - } -} - -// Un-ordered lists. -ul li:before, menu li:before { - content: "\25A0"; - position: absolute; - display: inline-block; - width: 1em; - margin-left: -1em; - - font-weight: bold; - - color: fibVars.$brand-color; -} - -// Ordered lists. -ol { - counter-reset: li; -} - -ol li:before { - display: inline-block; - position: absolute; - width: fibFuncs.font_size(4, false, em); - margin-left: fibFuncs.font_size(7, true, em); - text-align: right; - - font-family: fibVars.$heading-font-family; - - content: counter(li) "."; - counter-increment: li; - counter-reset: revert; - - color: inherit; -} - -ol li li:before { - content: counters(li, ".") " "; -} - -// Detail Lists. -dl { - // Title. - dt { - @include fibMixins.set_heading_font($font_size: fibVars.$h5-font-size); - color: fibVars.$medium-gray; - } - - // Description. - dd { - margin-bottom: fibVars.$xs-size; - margin-inline-start: fibVars.$md-size; - } -} - -// Blockquotes. -blockquote, .cmp__quote { - --bg-color: #{fibVars.$bquote-bg-color}; - --bg-color-dark: #{darken(fibVars.$bquote-bg-color, 5%)}; - - margin: { - top: fibVars.$lg-size; - bottom: fibVars.$lg-size; - } - padding: { - top: fibVars.$lg-size; - right: fibVars.$lg-size; - bottom: fibVars.$sm-size; - left: fibVars.$lg-size; - }; - - font-family: fibVars.$bquote-content-font-family; - - color: fibVars.$bquote-color; - @include fibMixins.config_container(fibVars.$bquote-bg-color); - - &.cmp__icon-float { - position: relative; - margin-top: fibVars.$xl-size; - padding-top: fibVars.$xl-size; - } - - h4 { - display: inline-block; - margin-top: 0; - font-family: fibVars.$bquote-title-font-family; - border-bottom: solid 2px; - } - - p { - hanging-punctuation: first; - } - - cite { - display: block; - font-size: fibVars.$cite-font-size; - text-align: right; - - &::before { - content: '—'; - margin-right: fibFuncs.font_size(-14); - } - } -} - -// Figures. -figure, .cmp__figure { - margin-block-start: fibVars.$md-size; - margin-block-end: fibVars.$lg-size; - margin-inline-start: 0; - margin-inline-end: 0; - max-width: 100%; - - img, iframe { - display: block; - max-width: 100%; - @include fibMixins.set_shadow_radius; - } - - table { - margin: 0; - } - - iframe { - width: 100%; - min-height: fibVars.$iframe-min-height; - border: none; - } - - figcaption, .cmp__figcaption { - margin-top: fibFuncs.font_size(-14); - - font: { - size: fibVars.$figure-caption-font-size; - family: fibVars.$figure-caption-font-family; - } - - color: fibVars.$figure-caption-color; - - code { - font: { - size: fibVars.$code-font-size; - family: fibVars.$code-font-family; - } - } - } - - .cmp__table-wrapper { - padding: fibVars.$small-padding; - @include fibMixins.config_container(fibVars.$success); - overflow-x: auto; - } - - pre { - padding: fibVars.$small-padding; - } -} - -// Tables. -table { - width: 100%; - margin: { - top: fibVars.$md-size; - bottom: fibVars.$lg-size; - } - - font: { - size: fibVars.$table-font-size; - family: fibVars.$table-font-family; - } - - border-collapse: collapse; - caption-side: bottom; - - caption { - font: { - size: fibVars.$table-caption-font-size; - family: fibVars.$table-caption-font-family; - } - - color: fibVars.$table-caption-color; - } - - td, th { - line-height: fibVars.$table-line-height; - } - - thead { - tr { - th { - border-bottom: solid 1px fibVars.$gray; - text-align: left; - } - } - } -} - -// Pre, Code & Var elements -pre { - margin: 0; - position: relative; - - color: fibVars.$medium-gray; - @include fibMixins.config_container(fibVars.$code-bg-color); - - code { - overflow: { - x: auto; - y: hidden; - }; - - font: { - size: fibVars.$code-font-size; - family: fibVars.$code-font-family; - } - - line-height: fibVars.$code-line-height; - letter-spacing: normal; - - &.hljs { - padding: 0; - background: inherit; - color: inherit; - } - - &::after { - @include fibMixins.flex_init($center: true); - height: fibFuncs.font_size(0); - position: absolute; - top: fibFuncs.font_size(-7, true, 'rem'); - right: fibFuncs.font_size(-7); - padding: 0 fibFuncs.font_size(-14); - content: attr(data-language); - - font: { - family: fibVars.$heading-font-family; - size: fibFuncs.font_size(-4); - } - text-transform: uppercase; - - color: fibVars.$white; - background-color: darken(fibVars.$light-gray, 10%); - border-radius: fibVars.$border-radius; - box-shadow: fibVars.$box-shadow; - } - } -} - -// Highlight.js -.hljs-comment { - color: fibVars.$hightlight-comment-color; -} - -.hljs-punctuation, -.hljs-tag { - color: fibVars.$hightlight-punc-color; -} - -.hljs-tag .hljs-attr, -.hljs-tag .hljs-name { - color: fibVars.$hightlight-tag-color; -} - -.hljs-attribute, -.hljs-doctag, -.hljs-keyword, -.hljs-meta .hljs-keyword, -.hljs-name, -.hljs-selector-tag { - font-weight: 700; -} - -.hljs-deletion, -.hljs-number, -.hljs-quote, -.hljs-selector-class, -.hljs-selector-id, -.hljs-string, -.hljs-template-tag, -.hljs-type { - color: fibVars.$hightlight-selector-color; -} - -.hljs-section, -.hljs-title { - color: fibVars.$hightlight-section-title-color; - font-weight: 700; -} - -.hljs-link, -.hljs-operator, -.hljs-regexp, -.hljs-selector-attr, -.hljs-selector-pseudo, -.hljs-symbol, -.hljs-template-variable, -.hljs-variable { - color: fibVars.$hightlight-selector-color; -} - -.hljs-literal { - color: fibVars.$hightlight-literal-color; -} - -.hljs-addition, -.hljs-built_in, -.hljs-bullet, -.hljs-code { - color: fibVars.$hightlight-code-color; -} - -.hljs-meta { - color: fibVars.$hightlight-code-color; -} - -.hljs-meta .hljs-string { - color: fibVars.$hightlight-meta-string-color; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: 700; -} - -// Variable and keyboard input. -var, kbd, .cmp__code { - padding: 0 fibFuncs.font_size(-20); - - font: { - family: fibVars.$code-font-family; - size: fibVars.$var-font-size; - style: normal; - } - letter-spacing: fibVars.$extra-small-letter-spacing; - - color: fibVars.$var-color; - background-color: fibVars.$var-bg-color; - border-radius: fibVars.$border-radius; -} - -// Abbr, Acronym. -abbr, acronym, .cmp__acronym { - letter-spacing: fibVars.$medium-letter-spacing; - text-transform: uppercase; - text-decoration: none; - - &:after { - content: '†'; - position: relative; - top: fibFuncs.font_size(-5, true, em); - font-size: fibVars.$special-char-font-size; - } -} - -// Definition. -dfn { - font-style: italic; -} - -// Superscript & Subscript. -sup, sub { - font-size: fibVars.$special-char-font-size; -} - -// Small. -small, .cmp__small { - font-size: fibFuncs.font_size(-2); -} - -// Very Large text. -.cmp__big-text { - text-align: center; - font-size: fibFuncs.font_size(19); - color: fibVars.$medium-gray; -} - -// Datetimes. -time, .cmp__time { - font: { - family: fibVars.$time-font-family; - size: fibVars.$time-font-size; - } - letter-spacing: fibVars.$medium-letter-spacing; - text-transform: uppercase; -} - -// Strong, data etc. -strong, data, .cmp__strong { - font-weight: bold; -} - -// Italic. -i, .cmp__italic { - font-style: italic; -} - -// Highlight. -mark, .cmp__mark { - background-color: fibVars.$mark-bg-color; -} - -// Address element. -address { - font-style: italic; -} - -// Horizontal line. -hr { - height: 1px; - margin: fibVars.$xxl-size 0; - position: relative; - overflow: visible; - border: 0; - background: fibVars.$hr-bg; -} - -hr:before { - content: ''; - position: absolute; - left: calc(50% - #{math.div(fibVars.$hr-separator-size, 2)}); - top: -1 * math.div(fibVars.$hr-separator-size, 2); - width: fibVars.$hr-separator-size; - height: fibVars.$hr-separator-size; - background-color: fibVars.$hr-separator-color; - transform: rotate(50deg); -} - -// Form elements. -// Labels. -label { - font: { - family: fibVars.$label-font-family; - size: fibVars.$label-font-size; - weight: bold; - } - text-transform: uppercase; - letter-spacing: fibVars.$label-letter-spacing; - color: fibVars.$label-color; -} - -// Input Textboxes and Textareas. -input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea { - width: 100%; - padding: fibVars.$input-padding; - - font: { - family: fibVars.$input-font-family; - size: fibVars.$input-font-size; - } - line-height: fibVars.$input-line-height; - - border: solid 2px fibVars.$input-border-color; - border-radius: fibVars.$border-radius; - color: fibVars.$input-text-color; - outline: none; - - transition: all fibVars.$medium-speed; - -webkit-appearance: textfield; - - &:focus, &:active { - outline: none; - border-color: fibVars.$brand-color; - } -} - -// Buttons. -button, [type="button"], [type="submit"] { - @include fibMixins.flex_init($center: true); - padding: fibVars.$button-padding; - - font: { - family: fibVars.$button-font-family; - size: fibVars.$button-font-size; - } - text-transform: uppercase; - letter-spacing: fibVars.$medium-letter-spacing; - - border-radius: fibVars.$border-radius; - background-image: linear-gradient(45deg, fibVars.$brand-color, fibVars.$brand-dark); - color: fibVars.$button-text-color; - border: none; - cursor: pointer; - box-shadow: fibVars.$box-shadow; - - transition: all fibVars.$medium-speed; - - &:focus, &:active, &:hover { - outline: none; - } - - cmp-icon { - margin-right: fibFuncs.font_size(-14); - } - - // Icon buttons. - &.cmp__icon-button { - padding: 0; - background: none; - box-shadow: none; - border-radius: 0; - color: inherit; - - cmp-icon { - margin-right: 0; - } - - i { - display: block; - align-self: flex-end; - margin-left: fibFuncs.font_size(-18); - font-style: normal; - font-size: fibFuncs.font_size(-5); - letter-spacing: fibVars.$extra-small-letter-spacing; - } - } -} - -// Placeholder. -::placeholder { - color: fibVars.$gray; - font-style: italic; -} - -// Form controls with labels. -.cmp__form-control { - position: relative; - @include fibMixins.flex_init($column: true, $align: flex-start); - margin-bottom: fibVars.$lg-size; - border-radius: fibVars.$border-radius; - - label { - @include fibMixins.flex_init($ver: true, $justify: flex-end); - } -} - -// Sub sections. -.cmp__sub { - --bg-color: #{fibVars.$sub-bg-color}; - --bg-color-dark: #{darken(fibVars.$sub-bg-color, 5%)}; - - margin: { - top: fibVars.$md-size; - bottom: fibVars.$lg-size; - }; - padding: { - top: fibVars.$lg-size; - right: fibVars.$lg-size; - bottom: fibVars.$sm-size; - left: fibVars.$lg-size; - }; - - font-family: fibVars.$sub-content-font-family; - - @include fibMixins.config_container(fibVars.$sub-bg-color); - - &.cmp__icon-float { - position: relative; - margin-top: fibVars.$xl-size; - padding-top: fibVars.$xl-size; - } - - h4, h5 { - font-family: fibVars.$sub-title-font-family; - } - - h4 { - margin-top: 0; - } - - pre { - background-color: fibVars.$white; - } -} - -// Icons. -cmp-icon { - @include fibMixins.flex_init($center: true); - width: fibVars.$icon-size; - height: fibVars.$icon-size; - - svg { - fill: currentColor; - width: inherit; - height: inherit; - - * { - pointer-events: none; - } - } - - svg:hover *[data-hover-behavior=color] { - fill: currentColor; - } - - svg:hover *[data-hover-behavior=white] { - fill: white; - } -} - -// Icon with text. -.cmp__icon-text { - @include fibMixins.flex_init($center: true); - color: inherit; - - cmp-icon { - margin-right: 0; - } - - i { - display: block; - align-self: flex-end; - margin-left: fibFuncs.font_size(-18); - font-family: fibVars.$heading-font-family; - font-style: normal; - font-size: fibFuncs.font_size(-5); - letter-spacing: fibVars.$extra-small-letter-spacing; - } -} - -// Floating icon. -.cmp__icon-container { - @include fibMixins.flex_init($center: true); - position: absolute; - left: fibFuncs.font_size(-6); - top: calc(-1 * #{fibFuncs.font_size(2)} / 2 - #{fibFuncs.font_size(-6)}); - padding: fibFuncs.font_size(-6); - @include fibMixins.config_container(var(--bg-color-dark)); - box-shadow: fibVars.$box-shadow; - border-radius: 50%; - color: lighten(fibVars.$medium-gray, 10%); - - cmp-icon { - width: fibFuncs.font_size(2); - height: fibFuncs.font_size(2); - } -} - -// Content scale. -cmp-content-scale { - position: relative; - overflow: hidden; - height: fibVars.$content-scale-height; - z-index: fibVars.$content-scale-index; - - .cmp__scroll-progress { - position: absolute; - top: 0; - width: 0; - height: fibVars.$content-scale-height; - background-color: fibVars.$scale-progress-bg; - transition: width fibVars.$medium-speed; - } -} - -// Image Progress. -cmp-image { - position: relative; - @include fibMixins.flex_init($center: true); - background-color: fibVars.$image-bg-color; - min-height: fibVars.$image-min-height; - - &.cmp__image-loaded { - cmp-progress, .cmp__image-info { - display: none !important; - } - } - - &.cmp__image-error { - cmp-progress { - display: none !important; - } - } - - .cmp__image-info { - --image-icon-size: 48px; - - @include fibMixins.flex_init($column: true, $center: true); - - cmp-icon[name="image"] { - color: fibVars.$image-icon-color; - width: var(--image-icon-size); - height: var(--image-icon-size); - } - - .cmp__status-text { - font: { - family: fibVars.$image-text-font-family; - size: fibVars.$image-text-font-size; - } - color: fibVars.$image-text-color; - } - } - - cmp-progress { - position: absolute; - - &.cmp__first { - top: fibVars.$xxl-size; - } - - &.cmp__last { - display: none; - } - } - - img { - transition: filter fibVars.$snail-speed; - } -} - -// Progress. -cmp-progress { - .cmp__squares-container { - --square-size: #{fibVars.$progress-square-small-width}; - - @include fibMixins.flex_init($ver: true); - - .cmp__square { - width: var(--square-size); - height: var(--square-size); - background-color: fibVars.$progress-square-bg-color; - border-radius: fibVars.$progress-square-border-radius; - animation: color_change 1s linear infinite; - - &:first-child { - animation-delay: 200ms; - } - - &:nth-child(2) { - animation-delay: 400ms; - } - - &:nth-child(3) { - animation-delay: 600ms; - } - - &:nth-child(4) { - animation-delay: 800ms; - } - - &:last-child { - animation-delay: 1s; - } - - &:not(:last-child) { - margin-right: fibFuncs.font_size(-14); - } - } - } -} - -// Widgets. -.cmp__widget { - --widget-body-padding: #{fibVars.$small-padding}; - - margin-bottom: fibVars.$xl-size; - @include fibMixins.config_container(fibVars.$widget-bg-color); - - .cmp__widget-header { - padding-top: fibVars.$md-size; - } - - .cmp__widget-body { - padding: var(--widget-body-padding); - - ul, ol, menu { - margin-bottom: 0; - - li { - margin-bottom: fibFuncs.font_size(-7); - } - - &.cmp__inline-list { - padding-left: 0; - - li { - display: inline-block; - margin-right: fibFuncs.font_size(-15); - - &:before { - display: none; - } - } - } - } - } -} - -// Widget Ribbon. -.cmp__widget-ribbon { - display: inline-block; - min-width: fibFuncs.font_size(23); - - .cmp__widget-ribbon-content { - @include fibMixins.flex_init; - width: 100%; - position: relative; - left: -6px; - height: fibVars.$widget-ribbon-height; - line-height: fibVars.$widget-ribbon-height; - padding-left: fibVars.$md-size; - - @include fibMixins.set_heading_font(); - font-weight: bold; - - background-color: fibVars.$widget-ribbon-bg; - color: fibVars.$widget-ribbon-color; - - &::before { - content: ''; - position: absolute; - top: -6px; - left: 0; - height: 3px; - - border: solid 3px darken(fibVars.$widget-ribbon-bg, 20%); - border-left-color: transparent; - border-top-color: transparent; - } - - &::after { - content: ''; - position: relative; - right: calc(-1 * #{fibVars.$xl-size}); - height: fibVars.$xl-size; - - border: calc(#{fibVars.$xl-size} / 2) solid fibVars.$widget-ribbon-bg; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - } - - span { - flex-grow: 1; - background-color: fibVars.$medium-gray; - @include fibMixins.inset_text_shadow(); - } - } -} - -// Cards list. -.cmp__cards-list { - @include fibMixins.flex_init($wrap: true); - margin-bottom: fibVars.$card-spacing; - - .cmp__card { - margin-bottom: fibVars.$card-spacing; - } -} - -// Cards. -.cmp__card { - @include fibMixins.flex_init($column: true); - @include fibMixins.set_shadow_radius; - transition: fibVars.$box-shadow fibVars.$medium-speed; - text-shadow: none; - background: url('#{fibVars.$assets-path}/background.png'), linear-gradient(135deg, fibVars.$dim-gray, darken(fibVars.$dim-gray, 3%)); - - &:hover { - box-shadow: fibVars.$box-shadow-hover; - - .cmp__card-header { - .cmp__card-image { - &:after { - background-color: transparent; - } - - img { - transform: scale(1.1); - } - } - } - } - - .cmp__card-header { - position: relative; - display: block; - - .cmp__card-title { - $card-ribbon-offset-height: 3px; - - margin-top: fibVars.$sm-size; - position: relative; - left: calc(-2 * #{$card-ribbon-offset-height}); - width: calc(100% + 4 * #{$card-ribbon-offset-height}); - overflow: visible; - text-shadow: none; - - h5 { - margin: 0; - padding: { - top: fibFuncs.font_size(-10); - bottom: fibFuncs.font_size(-10); - left: fibFuncs.font_size(0); - right: fibFuncs.font_size(0); - }; - font-size: fibVars.$card-title-font-size; - color: fibVars.$card-title-color; - @include fibMixins.noisy_bg(rgba(0, 0, 0, 0.6)); - } - - &::before, &::after { - display: none; - content: ''; - position: absolute; - top: calc(-2 * #{$card-ribbon-offset-height}); - height: $card-ribbon-offset-height; - - border: solid $card-ribbon-offset-height fibVars.$dark-gray; - border-top-color: transparent; - } - - &::before { - left: 0; - border-left-color: transparent; - } - - &::after { - right: 0; - border-right-color: transparent; - } - } - - .cmp__card-image { - position: relative; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform fibVars.$medium-speed; - } - - &:after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.2); - transition: background-color fibVars.$medium-speed; - } - } - } - - .cmp__card-footer { - padding: fibVars.$sm-size; - @include fibMixins.flex_init($column: true); - - p { - text-shadow: none; - margin: 0; - - font: { - family: fibVars.$card-footer-font-family; - size: fibVars.$card-footer-font-size; - } - - color: fibVars.$card-footer-color; - } - - .cmp__card-actions { - @include fibMixins.flex_init(); - margin-top: fibVars.$sm-size; - - > * { - flex-grow: 1; - text-shadow: none; - color: fibVars.$card-footer-color; - } - } - } -} - -// Status Colors. -$statuses: ("info": fibVars.$dim-gray, "success": fibVars.$success, "warn": fibVars.$warn, "error": fibVars.$error); - -@each $name, $color in $statuses { - .cmp__status-#{$name} { - --bg-color: #{$color}; - --bg-color-dark: #{darken($color, 5%)}; - background-color: var(--bg-color); - } -} - -// Selection Color. -::selection { - text-shadow: none; - color: fibVars.$white; - background: fibVars.$brand-color; -} - -// Alignment classes. -.cmp__right { - text-align: right; -} - -.cmp__center { - text-align: center; -} - -// Sticky. -.cmp__sticky { - position: fixed; - top: 0; - width: 100%; -} - -// Other Classes. -.cmp__no-transition { - transition: none !important; -} - -// Constants. -$breakpoints: ( - "mob": fibVars.$mobile, - "tab": fibVars.$tablet, - "desk": fibVars.$desktop -); - -$sizes: ( - "xs": fibVars.$xs-size, - "sm": fibVars.$sm-size, - "md": fibVars.$md-size, - "lg": fibVars.$lg-size, - "xl": fibVars.$xl-size, - "xxl": fibVars.$xxl-size -); - -$colors: ( - "brand": fibVars.$brand-color, - "brand-dark": fibVars.$brand-dark, - "brand-light": fibVars.$brand-light, - "brand-bg": fibVars.$brand-bg, - "dark-gray": fibVars.$dark-gray, - "medium-gray": fibVars.$medium-gray, - "light-gray": fibVars.$gray, - "dim-gray": fibVars.$dim-gray, - "brand-gray": fibVars.$brand-gray, - "white-color": fibVars.$white, - "black-color": fibVars.$black, - "success-color": fibVars.$success, - "warn-color": fibVars.$warn, - "error-color": fibVars.$error -); - -// Floats & Responsive Floats. -.cmp__float-left { - float: left; -} - -.cmp__float-right { - float: right; -} - -.cmp__float-left:after, .cmp__float-right:after { - content: ''; - display: block; - height: 0; - width: 100%; - clear: both; -} - -.cmp__clear { - clear: both; -} - -@each $name, $breakpoint in $breakpoints { - @media only screen and (min-width: $breakpoint) { - .cmp__#{$name}-float-left { - float: left; - } - - .cmp__#{$name}-float-right { - float: right; - } - - .cmp__#{$name}-float-left:after, .cmp__#{$name}-float-right:after { - content: ''; - display: block; - height: 0; - width: 100%; - clear: both; - } - - .cmp__#{$name}-clear { - clear: both; - } - } -} - -// Responsive paddings and margins. -.cmp__no-margin { - margin: 0; -} - -.cmp__no-pad { - padding: 0; -} - -@each $name, $size in $sizes { - - // Paddings. - .cmp__pad-#{$name} { - padding: #{$size}; - } - - .cmp__pad-hor-#{$name} { - padding-left: #{$size}; - padding-right: #{$size}; - } - - .cmp__pad-ver-#{$name} { - padding-top: #{$size}; - padding-bottom: #{$size}; - } - - .cmp__pad-left-#{$name} { - padding-left: #{$size}; - } - - .cmp__pad-right-#{$name} { - padding-right: #{$size}; - } - - .cmp__pad-top-#{$name} { - padding-top: #{$size}; - } - - .cmp__pad-bottom-#{$name} { - padding-bottom: #{$size}; - } - - // Margins. - .cmp__mar-#{$name} { - margin: #{$size}; - } - - .cmp__mar-hor-#{$name} { - margin-left: #{$size}; - margin-right: #{$size}; - } - - .cmp__mar-ver-#{$name} { - margin-top: #{$size}; - margin-bottom: #{$size}; - } - - .cmp__mar-left-#{$name} { - margin-left: #{$size}; - } - - .cmp__mar-right-#{$name} { - margin-right: #{$size}; - } - - .cmp__mar-top-#{$name} { - margin-top: #{$size}; - } - - .cmp__mar-bottom-#{$name} { - margin-bottom: #{$size}; - } -} - -@each $breakpointname, $breakpoint in $breakpoints { - @media only screen and (min-width: $breakpoint) { - .cmp__#{$breakpointname}-no-margin { - margin: 0; - } - - .cmp__#{$breakpointname}-no-pad { - padding: 0; - } - - @each $name, $size in $sizes { - - // Paddings. - .cmp__#{$breakpointname}-pad-#{$name} { - padding: #{$size}; - } - - .cmp__#{$breakpointname}-pad-hor-#{$name} { - padding-left: #{$size}; - padding-right: #{$size}; - } - - .cmp__#{$breakpointname}-pad-ver-#{$name} { - padding-top: #{$size}; - padding-bottom: #{$size}; - } - - .cmp__#{$breakpointname}-pad-left-#{$name} { - padding-left: #{$size}; - } - - .cmp__#{$breakpointname}-pad-right-#{$name} { - padding-right: #{$size}; - } - - .cmp__#{$breakpointname}-pad-top-#{$name} { - padding-top: #{$size}; - } - - .cmp__#{$breakpointname}-pad-bottom-#{$name} { - padding-bottom: #{$size}; - } - - // Margins. - .cmp__#{$breakpointname}-mar-#{$name} { - margin: #{$size}; - } - - .cmp__#{$breakpointname}-mar-hor-#{$name} { - margin-left: #{$size}; - margin-right: #{$size}; - } - - .cmp__#{$breakpointname}-mar-ver-#{$name} { - margin-top: #{$size}; - margin-bottom: #{$size}; - } - - .cmp__#{$breakpointname}-mar-left-#{$name} { - margin-left: #{$size}; - } - - .cmp__#{$breakpointname}-mar-right-#{$name} { - margin-right: #{$size}; - } - - .cmp__#{$breakpointname}-mar-top-#{$name} { - margin-top: #{$size}; - } - - .cmp__#{$breakpointname}-mar-bottom-#{$name} { - margin-bottom: #{$size}; - } - } - } -} - -// Color Classes. -@each $name, $color in $sizes { - .cmp__#{$name}-color { - color: $color; - } - - .cmp__#{$name}-color-bg { - background-color: $color; - } -} - -// Media Queries. -@media only screen and (min-width: fibVars.$tablet) { - // Lists. - ul, - ol, - menu { - padding-left: 0; - - ul, - ol, - menu { - padding-left: fibVars.$md-size; - } - } - - // Form Controls. - .cmp__form-control { - @include fibMixins.flex_update($column: false, $align: center); - background-color: fibVars.$form-control-bg-color; - - label { - min-width: fibFuncs.font_size(19); - margin-right: fibVars.$sm-size; - } - } - - // Lazy Loading Images. - cmp-image { - cmp-progress { - &.cmp__last { - display: block; - } - } - - .cmp__image-info { - --image-icon-size: 80px; - } - - cmp-progress { - &.cmp__first { - top: 20%; - } - - &.cmp__last { - bottom: 20%; - } - } - } - - // Progress bars. - cmp-progress { - .cmp__squares-container { - --square-size: #{fibVars.$progress-square-large-width}; - } - } - - // Widget. - .cmp__widget { - --widget-body-padding: #{fibVars.$medium-padding}; - } - - // Widget Ribbon. - .cmp__widget-ribbon { - min-width: fibFuncs.font_size(25); - } - - // Cards List. - .cmp__cards-list { - padding: 0 fibVars.$sm-size; - justify-content: space-between; - - .cmp__card { - width: calc(50% - #{fibVars.$card-spacing} / 2); - - .cmp__card-header { - .cmp__card-title { - &::before, &::after { - display: block; - } - - h5 { - padding: { - left: fibFuncs.font_size(-2); - right: fibFuncs.font_size(-2); - }; - } - } - } - } - } -} - -@keyframes color_change { - 0% { - background-color: fibVars.$progress-square-bg-color; - } - 10% { - background-color: fibVars.$progress-square-bg-color2; - } - 20% { - background-color: fibVars.$progress-square-bg-color; - } - 100% { - background-color: fibVars.$progress-square-bg-color; - } -} \ No newline at end of file diff --git a/scss/_site.scss b/scss/_site.scss deleted file mode 100644 index e97a6ba..0000000 --- a/scss/_site.scss +++ /dev/null @@ -1,1364 +0,0 @@ -@use 'sass:math'; -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; -@use 'mixins' as fibMixins; - -// Makes the page take full viewport height. -html, body { - min-height: 100vh; -} - -// Site Body. -.cmp__blog { - transition: filter fibVars.$fast-speed; - background: url('#{fibVars.$assets-path}/background2.png') fibVars.$brand-bg; - - &.cmp__site-loading { - filter: blur(fibVars.$blur); - } -} - -// Site Main Container. -.cmp__site-container { - @include fibMixins.flex_init($column: true); - flex: 1 1 auto; - min-height: 100vh; -} - -// Page Header. -.cmp__blog-header { - @include fibMixins.flex_init($ver: true); - - height: fibVars.$header-height; - padding: 0 fibVars.$md-size; - - color: fibVars.$header-color; -} - -// Blog Info. -.cmp__blog-info { - @include fibMixins.flex_init($column: true, $hor: true); - - // Separator. - .cmp__separator { - display: none; - margin: 0 fibVars.$sm-size; - height: fibFuncs.font_size(5); - border-right: solid 1px; - } -} - -// Logo Component. -a.cmp__blog-logo { - @include fibMixins.flex_init($ver: true); - border-bottom: none; - color: fibVars.$header-color; - - &:hover { - .cmp__blog-name { - letter-spacing: fibVars.$extra-large-letter-spacing; - } - } - - // Logo Name. - .cmp__blog-name { - position: relative; - width: fibVars.$logo-name-width; - margin-left: fibFuncs.font_size(-14); - top: -5px; - - font: { - family: fibVars.$logo-font-family; - size: fibVars.$logo-font-size; - } - line-height: fibVars.$xs-line-height; - letter-spacing: fibVars.$large-letter-spacing; - - transition: all fibVars.$medium-speed; - } -} - -// Tag Line. -.cmp__blog-tag-line { - position: absolute; - top: fibFuncs.font_size(6); - left: fibFuncs.font_size(13); - font-size: fibFuncs.font_size(-5); -} - -// Page Navigation Component. -.cmp__blog-nav { - @include fibMixins.flex_init($ver: true, $justify: flex-end); - flex-grow: 1; - height: 100%; - margin-left: var(--lg-size); - - font-family: fibVars.$nav-font-family; - - // Nav List. - ul { - height: 100%; - @include fibMixins.flex_init($ver: true); - @include fibMixins.no_spacing; - - list-style: none; - - // Nav List Item. - li { - height: 100%; - position: relative; - - &:before { - display: none; - } - - &:last-child { - margin-right: 0; - } - - // Active State. - &.cmp__nav-active { - a::before { - content: ''; - - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - - border-top: solid fibVars.$nav-active-border-width fibVars.$header-color; - } - } - - &:not(.cmp__hamburger-link) { - display: none; - } - - &.cmp__hamburger-link { - padding: 0; - - .cmp__nav-link { - position: relative; - - .cmp__hidden-menu { - position: absolute; - cursor: pointer; - width: fibVars.$lg-size; - height: fibVars.$lg-size; - opacity: 0; - } - } - } - - // Nav Link. - a { - position: relative; - z-index: 1; - @include fibMixins.flex_init($ver: true); - height: 100%; - padding: 0 fibVars.$nav-link-spacing; - - font-size: fibVars.$nav-font-size; - line-height: fibVars.$xs-line-height; - letter-spacing: fibVars.$large-letter-spacing; - - border-bottom: none; - transition: all fibVars.$medium-speed; - - &:hover { - background-color: darken(fibVars.$brand-bg, 5%); - color: fibVars.$dim-gray; - } - - cmp-icon { - margin-right: fibVars.$nav-link-icon-spacing; - } - - .cmp__nav-link-text { - display: none; - line-height: fibVars.$xs-line-height; - } - } - - // Search form. - .cmp__search-form { - @include fibMixins.flex_init($ver: true); - height: 100%; - - input { - display: none; - padding: 0 0 fibFuncs.font_size(-14); - - font-size: fibVars.$small-font-size; - line-height: fibVars.$xs-line-height; - - border: none; - border-radius: 0; - border-bottom: solid 1px fibVars.$header-color; - color: fibVars.$header-color; - background: transparent; - - &:focus, &:active { - outline: none; - border-color: fibVars.$header-color; - } - - &::placeholder { - color: fibVars.$header-color; - } - } - } - } - } - - // When the search is active show the search textbox. - &.cmp__search-active { - .cmp__search-link { - display: flex; - - .cmp__search-form { - input { - display: block; - } - } - } - - ul li:not(:first-child) { - display: none; - } - - ul li:first-child { - width: 100%; - } - } -} - -// Page Main Content Container. -.cmp__blog-main { - $outside-shadow-dark: darken(fibVars.$brand-bg, 15%); - $inner-shadow-width: 6px; - $inner-shadow-adjustment: 8px; - $grad-color-0: rgba(204, 204, 204, 0.4); - $grad-color-1: transparent; - - --border-radius: #{fibFuncs.font_size(5)}; - - position: relative; - flex: 1 1 auto; - min-height: fibVars.$app-main-min-height; // Added after introducing spiral! - padding: { - top: fibVars.$page-content-top; - bottom: fibVars.$page-content-bottom; - }; - - background: url('#{fibVars.$assets-path}/background.png'), - url('#{fibVars.$assets-path}/svgbg.svg') no-repeat left top, - url('#{fibVars.$assets-path}/coffee-stain.png') no-repeat right bottom fibVars.$white; - - background-size: auto, 50%; - - border-radius: var(--border-radius); - box-shadow: $outside-shadow-dark -20px -5px 10px, - $outside-shadow-dark 5px -5px 10px, - $outside-shadow-dark -20px 0 100px -20px, - rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, - rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; - - &:before, &:after { - content: ''; - position: absolute; - z-index: 1; - width: $inner-shadow-width; - top: calc(var(--border-radius) - #{$inner-shadow-adjustment}); - height: calc(100% - 2 * var(--border-radius) + #{$inner-shadow-adjustment * 2}); - } - - &:before { - left: 0; - background: linear-gradient(to right, $grad-color-0, $grad-color-1); - } - - &:after { - right: 0; - background: linear-gradient(to left, $grad-color-0, $grad-color-1); - } -} - -// Spiral. -.cmp__spiral { - $spiral-width: 60px; - $spiral-offset: 27px; - - display: none; - height: calc(100% - 2 * #{fibFuncs.font_size(16)}); - width: $spiral-width; - position: absolute; - top: fibFuncs.font_size(16); - left: -1 * $spiral-offset; - background-image: url("#{fibVars.$assets-path}/spiral.png"); - background-size: $spiral-width auto; - background-repeat: repeat-y; - z-index: 100; -} - -// Color bars. -.cmp__color-bars { - --bar-height: #{fibFuncs.font_size(-2)}; - --bar-width: #{fibFuncs.font_size(-10)}; - - display: flex; - position: absolute; - top: 0; - left: fibVars.$lg-size; - height: var(--bar-height); - - .cmp__color-bar { - width: var(--bar-width); - height: 100%; - position: relative; - margin-right: 1px; - background-color: fibVars.$light-gray; - - &:after { - position: absolute; - content: ''; - bottom: calc(-1 * var(--bar-width) - 1px); - left: 0; - width: var(--bar-width); - height: var(--bar-width); - background-color: inherit; - transform: rotate(45deg); - } - } -} - -// RSS subscription. -a.cmp__subscribe { - --ribbon-offset: 4px; - position: absolute; - right: calc(#{fibFuncs.font_size(-4)} + #{fibVars.$md-size} - 4px); - top: calc(-1 * var(--ribbon-offset)); - padding: 0 0 fibVars.$md-size 0; - width: fibVars.$xl-size; - - border-bottom: none; - - z-index: 10; - - &:before { - content: ''; - position: absolute; - top: 0; - left: calc(-1 * var(--ribbon-offset)); - height: calc(var(--ribbon-offset) / 2); - border: solid calc(var(--ribbon-offset) / 2) fibVars.$gray; - border-left-color: transparent; - border-top-color: transparent; - } - - div { - display: block; - padding: fibFuncs.font_size(-14) 0; - line-height: 0.8; - text-align: center; - - background-image: url('#{fibVars.$assets-path}/background.png'), linear-gradient(darken(fibVars.$rss-ribbon-bg, 7%) 0%, fibVars.$rss-ribbon-bg 100%); - - span { - font-size: fibVars.$sm-size; - background-color: fibVars.$rss-ribbon-color; - @include fibMixins.inset_text_shadow(); - } - } - - span:after { - content: ''; - width: 0; - height: 0; - position: absolute; - bottom: 0; - left: 0; - border-left: calc(#{fibVars.$xl-size} / 2) solid fibVars.$rss-ribbon-bg; - border-right: calc(#{fibVars.$xl-size} / 2) solid fibVars.$rss-ribbon-bg; - border-bottom: fibVars.$md-size solid transparent; - } -} - -// Go top. -a.cmp__go-top { - --border-width: #{fibFuncs.font_size(0)}; - --border-color: #{fibVars.$light-gray}; - - position: absolute; - bottom: 0; - left: calc(50% - var(--border-width)); - border: solid var(--border-width) var(--border-color); - border-left-color: transparent; - border-right-color: transparent; - border-top: none; -} - -// Ribbon. -.cmp__ribbon { - --ribbon-height: #{fibVars.$ribbon-small-screen-height}; - --ribbon-bend-height: calc(var(--ribbon-height) / 3.75); - display: inline-block; - position: relative; - height: var(--ribbon-height); - line-height: var(--ribbon-height); - padding: 0 fibVars.$xl-size; - - @include fibMixins.set_heading_font($font_size: fibFuncs.font_size(-4)); - text-align: center; - - background: fibVars.$ribbon-bg; - color: fibVars.$ribbon-color; - box-shadow: fibVars.$ribbon-shadow; - - &::before, &::after { - content: ""; - position: absolute; - border: solid calc(var(--ribbon-height) / 2) darken(fibVars.$ribbon-bg, 10%); - z-index: -1; - bottom: calc(-1 * var(--ribbon-bend-height)); - } - - &::before { - left: calc(-1 * calc(var(--ribbon-height) - var(--ribbon-bend-height))); - border-left-color: transparent; - } - - &::after { - right: calc(-1 * calc(var(--ribbon-height) - var(--ribbon-bend-height))); - border-right-color: transparent; - } - - .cmp__ribbon-content { - text-shadow: 0 0 2px darken(fibVars.$ribbon-bg, 25%); - - &::before, &::after { - content: ""; - position: absolute; - display: block; - bottom: calc(-1 * var(--ribbon-bend-height)); - border: { - style: solid; - color: darken(fibVars.$ribbon-bg, 25%) transparent transparent transparent; - } - } - - &::before { - left: 0; - border-width: var(--ribbon-bend-height) 0 0 var(--ribbon-bend-height); - } - - &::after { - right: 0; - border-width: var(--ribbon-bend-height) var(--ribbon-bend-height) 0 0; - } - } -} - -// Page custom heading. -.cmp__section-heading { - $border-color: darken(fibVars.$dim-gray, 10%); - - position: relative; - @include fibMixins.flex_init($center: true); - margin: { - top: fibVars.$xxl-size; - bottom: fibVars.$xl-size; - }; - - color: fibVars.$gray; - - span { - @include fibMixins.flex_init($center: true); - position: relative; - height: fibVars.$widget-ribbon-height; - line-height: fibVars.$widget-ribbon-height; - @include fibMixins.set_heading_font(); - font-weight: bold; - - background-color: fibVars.$widget-ribbon-bg; - color: fibVars.$widget-ribbon-color; - z-index: 1; - - &::before, &::after { - content: ''; - position: absolute; - top: 0; - height: 100%; - - border: calc(#{fibVars.$xl-size} / 2) solid fibVars.$widget-ribbon-bg; - border-top-color: transparent; - border-bottom-color: transparent; - } - - &::before { - left: calc(-1 * #{fibVars.$xl-size}); - border-left-color: transparent; - } - - &::after { - right: calc(-1 * #{fibVars.$xl-size}); - border-right-color: transparent; - } - } - - &:after { - position: absolute; - left: 0; - top: 50%; - content: ''; - width: 100%; - border-bottom: solid 1px $border-color; - } -} - -// Page Content. -.cmp__blog-content { - margin-bottom: fibVars.$xl-size; -} - -// Article Meta Info. -.cmp__article-meta { - position: relative; - @include fibMixins.flex_init($column: true, $wrap: true); - - font: { - size: fibVars.$article-meta-font-size; - family: fibVars.$article-meta-font-family; - } - - color: fibVars.$article-meta-color; - - ul, li { - @include fibMixins.no_spacing; - list-style: none; - display: inline; - } - - a { - border-bottom: none; - } - - > * { - @include fibMixins.flex_init($ver: true); - margin-bottom: 5px; - margin-right: 0; - - cmp-icon { - margin-right: fibFuncs.font_size(-14); - } - } -} - -// Page title. -.cmp__page-title { - margin: { - top: fibVars.$xl-size; - bottom: fibFuncs.font_size(17); - }; - - h1, h2, h3, h4, h5, h6 { - margin: { - top: 0; - bottom: 0; - }; - } - - h1 { - position: relative; - - font-size: fibVars.$xxl-size; - text-transform: uppercase; - letter-spacing: 0.5px; - word-spacing: fibFuncs.font_size(-10); - - color: fibVars.$brand-gray; - - &::after { - display: block; - content: ''; - width: fibVars.$h1-border-width; - height: 5px; - margin-top: fibVars.$xl-size; - background-color: fibVars.$brand-gray; - } - - &:hover::before { - left: calc(#{fibVars.$h1-border-width} + 10px); - } - } - - h4 { - display: inline; - padding-bottom: fibVars.$xs-size; - - text-transform: uppercase; - letter-spacing: fibVars.$medium-letter-spacing; - - color: fibVars.$brand-gray; - } -} - -// Author Info. -.cmp__article-author { - a { - @include fibMixins.flex_init($ver: true, $align: flex-end); - - // Author Photo. - .cmp__article-author-pic { - border-radius: 50%; - opacity: fibVars.$article-author-pic-opacity; - width: fibVars.$author-pic-default-width; - } - - span { - margin-left: fibFuncs.font_size(-14); - - &.cmp__article-author-role { - position: relative; - top: -3px; - margin-top: 0; - padding: 1px 5px; - - font-size: fibVars.$article-author-role-font-size; - text-transform: uppercase; - letter-spacing: fibVars.$medium-letter-spacing; - - color: fibVars.$white; - background-color: fibVars.$article-author-admin-badge-color; - border-radius: fibVars.$border-radius; - - &.cmp__article-author-guest { - background-color: fibVars.$article-author-guest-badge-color; - } - } - } - } -} - -// Posted Date. -.cmp__article-date { - span { - font-variant: small-caps; - } -} - -// Total comments. -.cmp__article-total-comments { - a { - @include fibMixins.flex_init($ver: true); - } -} - -// Share controls. -.cmp__article-share { - > div { - @include fibMixins.flex_init($ver: true); - } -} - -// Tags. -.cmp__article-tags { - font-style: italic; - - li { - margin-right: fibFuncs.font_size(-22); - - &:before { - display: none; - } - } -} - -// Article Content. -.cmp__article-content { - --link-icon-width: 14px; - --link-offset: #{fibVars.$md-size}; - --link-image: url('#{fibVars.$assets-path}/link.svg'); - - // Links. - a:link, - a:visited, - a:hover, - a:focus, - a:active { - border-bottom: none; - text-decoration: none; - transition: all fibVars.$medium-speed; - } - - a:link, - a:visited { - color: fibVars.$link-color; - } - - a:hover, - a:focus, - a:active { - color: fibVars.$link-hover-color; - } - - h2, h3, h4, h5, h6 { - - &:hover { - a::before { - opacity: 1; - } - } - - a { - position: relative; - display: inline-flex; - align-items: center; - - &::before { - content: ''; - position: absolute; - left: calc(-1 * var(--link-offset)); - width: var(--link-icon-width); - height: var(--link-icon-width); - opacity: 0; - background: var(--link-image) no-repeat; - transition: opacity fibVars.$medium-speed; - } - } - - a:link, - a:visited { - color: inherit; - } - - - a:hover, - a:focus, - a:active { - color: fibVars.$brand-color; - } - } - - // Figure element. - figure { - // Full width. - &.cmp__figure-full { - max-width: 100%; - @include fibMixins.horizontal-center(); - - figcaption, caption { - @include fibMixins.set_hor_margin(fibVars.$lg-size); - } - - img, .cmp__table-wrapper, cmp-image, iframe { - border-radius: 0; - } - } - } - - // Table of contents. - .cmp__toc { - color: fibVars.$gray; - - ol li a { - color: inherit; - transition: color fibVars.$medium-speed; - - &:hover { - color: fibVars.$brand-color; - } - } - } - - // Lead Para styles. - > p:first-of-type { - font-size: fibVars.$lead-para-font-size; - margin-top: fibVars.$md-size; - } - - // Article Main Poster Image. - .cmp__article-poster { - @include fibMixins.set_hor_margin(0); - margin-top: fibFuncs.font_size(-14); - } - - // Article element. - .cmp__page-element { - margin: { - top: fibVars.$md-size; - bottom: fibVars.$lg-size; - }; - } -} - -// Article Footer. -.cmp__article-footer { - @include fibMixins.flex_init($justify: flex-end); -} - -// Contine reading link. -a.cmp__article-continue-reading { - @include fibMixins.flex_init($inline: true, $ver: true); - text-align: right; - - font: { - family: fibVars.$continue-reading-font-family; - size: fibVars.$continue-reading-font-size; - } - letter-spacing: fibVars.$medium-letter-spacing; - text-transform: uppercase; - - color: fibVars.$continue-reading-color; - - &:after { - position: relative; - content: '→'; - margin-left: fibFuncs.font_size(-20); - } - - &:hover { - color: fibVars.$brand-color; - } - - &:hover:after { - animation: arrow-move-right fibVars.$medium-speed linear infinite; - } -} - -// Table of contents. -.cmp__toc { - padding: fibVars.$medium-padding; - margin-bottom: fibVars.$xl-size; - - @include fibMixins.config_container(fibVars.$dim-gray); - - h5 { - padding-bottom: fibVars.$xs-size; - margin-bottom: fibVars.$sm-size; - text-align: center; - - letter-spacing: fibVars.$small-letter-spacing; - text-transform: uppercase; - - color: fibVars.$brand-color; - border-bottom: solid 1px fibVars.$light-gray; - } - - ol { - padding-left: fibVars.$md-size; - - font-size: fibVars.$sm-size; - letter-spacing: fibVars.$medium-letter-spacing; - text-transform: uppercase; - - a { - color: fibVars.$gray; - - &:hover { - color: fibVars.$brand-color; - } - } - - ol { - font-size: fibVars.$xs-size; - } - } -} - -// Ribbon. -.cmp__ribbon-container { - @include fibMixins.flex_init($center: true); - position: relative; - z-index: 1; - margin: { - top: 1rem; - bottom: fibFuncs.font_size(10); - }; -} - -// Share Button -button.cmp__share-it-btn { - padding: fibFuncs.font_size(-20); - margin-left: fibFuncs.font_size(-12); - font-size: fibFuncs.font_size(-5); - background: none; - color: fibVars.$article-meta-color; - - &:focus, &:active, &:hover { - background-color: transparent; - color: fibVars.$brand-color; - } -} - -// In small screens, make the content fluid and fixed in large. -.cmp__auto-layout { - > * { - @include fibMixins.set_hor_margin(fibVars.$lg-size); - } - - .cmp__sub { - .cmp__responsive { - @include fibMixins.set_hor_margin(0); - } - - figure { - figcaption, caption { - @include fibMixins.set_hor_margin(0); - } - } - } -} - -// In small screens blockquote, cmp__responsive applied elements should not have -// either border radius or shadow. -blockquote { - &.cmp__responsive { - @include fibMixins.no_shadow_radius; - } -} - -.cmp__responsive { - max-width: 100%; - @include fibMixins.set_hor_margin(0); - - &.cmp__toc, - &.cmp__widget, - &.cmp__sub { - @include fibMixins.no_shadow_radius; - } - - figcaption, caption { - @include fibMixins.set_hor_margin(fibVars.$lg-size); - } - - img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card { - @include fibMixins.no_shadow_radius; - } -} - -// Makes the first big and stand out. -.cmp__drop-cap:first-letter { - float: left; - - padding: fibFuncs.font_size(-7); - margin: { - top: fibFuncs.font_size(-10); - right: fibFuncs.font_size(-10); - }; - - font: { - size: fibVars.$drop-cap-font-size; - weight: bold; - } - line-height: fibVars.$xs-line-height; - - background-color: fibVars.$drop-cap-bg-color; - color: fibVars.$drop-cap-color; - border-radius: fibVars.$border-radius; - box-shadow: -1px -1px 10px fibVars.$brand-dark inset; -} - -// Page navigation. -.cmp__pagination { - @include fibMixins.flex_init($ver: true); - margin-top: fibVars.$lg-size; - @include fibMixins.set_heading_font(); - color: fibVars.$gray; - - > * { - flex-grow: 1; - - a { - @include fibMixins.flex_init($inline: true, $ver: true); - } - } - - :first-child { - a { - &:before { - position: relative; - content: '≪'; - margin-right: fibFuncs.font_size(-20); - } - - &:hover:before { - animation: arrow-move-left fibVars.$medium-speed linear infinite; - } - } - } - - :last-child { - text-align: right; - - a { - &:after { - position: relative; - content: '≫'; - margin-left: fibFuncs.font_size(-20); - } - - &:hover:after { - animation: arrow-move-right fibVars.$medium-speed linear infinite; - } - } - } -} - -// Page Footer Component. -.cmp__blog-footer { - position: relative; - height: fibVars.$footer-height; - @include fibMixins.flex_init($column: true); - padding: fibVars.$xs-size fibVars.$md-size; - - font-family: fibVars.$footer-font-family; - letter-spacing: fibVars.$large-letter-spacing; - text-transform: uppercase; - - color: fibVars.$footer-color; - - section { - &.cmp__footer-left { - @include fibMixins.flex_init(); - font-size: fibVars.$footer-credits-font-size; - - > div { - flex-grow: 1; - - &:last-child { - margin-left: fibFuncs.font_size(-14); - text-align: right; - } - } - } - - &.cmp__footer-right { - @include fibMixins.flex_init($center: true); - margin-top: fibVars.$sm-size; - font-size: fibVars.$footer-font-size; - } - } -} - -// Media Queries. -@media only screen and (min-width: fibVars.$mobile) { - - // Navigation. - .cmp__blog-nav { - ul { - li { - &:not(.cmp__hamburger-link) { - display: flex; - } - - &.cmp__hamburger-link { - display: none; - } - - a { - font-size: fibVars.$xs-size; - } - } - } - } - - // Responsive Article Content. - blockquote { - &.cmp__responsive { - @include fibMixins.set_shadow_radius; - } - } - - .cmp__responsive { - @include fibMixins.set_hor_margin(fibVars.$lg-size); - - &.cmp__toc, - &.cmp__widget, - &.cmp__sub { - @include fibMixins.set_shadow_radius; - } - - figcaption, caption { - @include fibMixins.set_hor_margin(0); - } - - img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card { - @include fibMixins.set_shadow_radius; - } - } -} - -@media only screen and (min-width: fibVars.$tablet) { - - // Blog Logo. - .cmp__blog-info { - @include fibMixins.flex_update($column: false); - - .cmp__separator { - display: block; - } - } - - // Logo changes. - a.cmp__blog-logo { - .cmp__blog-name { - position: static; - } - } - - // Tag line changes. - .cmp__blog-tag-line { - font-size: fibVars.$xs-size; - position: relative; - left: 0; - top: 3px; - } - - // Navigation. - .cmp__blog-nav { - ul li .cmp__search-form input { - display: block; - } - } - - // Article Meta Changes. - .cmp__blog-main { - --border-radius: #{fibFuncs.font_size(10)}; - } - - // Page title. - .cmp__page-title { - h1 { - &::after { - height: 6px; - } - } - } - - // Article Meta. - .cmp__article-meta { - @include fibMixins.flex_update($column: false); - - > * { - min-height: 30px; - margin-bottom: 0; - } - - > *:not(:last-child):after { - content: '|'; - @include fibMixins.set_hor_margin(fibVars.$xs-size); - color: fibVars.$light-gray; - } - } - - // Author. - .cmp__article-author { - a { - align-items: center; - - span { - &.cmp__article-author-role { - position: static; - } - } - } - - &:after { - content: '|'; - color: fibVars.$light-gray; - @include fibMixins.set_hor_margin(fibVars.$xs-size); - } - } - - // Subscribe link changes. - a.cmp__subscribe { - --ribbon-offset: 6px; - padding-bottom: fibVars.$lg-size; - width: fibVars.$xxl-size; - right: 5%; - - div { - line-height: fibVars.$small-line-height; - - span { - font-size: fibVars.$md-size; - - &:after { - $border: calc(#{fibVars.$xxl-size} / 2) solid fibVars.$rss-ribbon-bg; - - border: { - left: $border; - right: $border; - bottom: fibVars.$lg-size solid transparent; - } - } - } - } - } - - // TOC Ribbon. - .cmp__ribbon { - --ribbon-height: #{fibVars.$ribbon-height}; - font-size: fibVars.$small-font-size; - } - - // Responsive Article Content. - .cmp__auto-layout > *, .cmp__responsive { - @include fibMixins.set_hor_margin(fibVars.$xl-size); - } - - .cmp__responsive-flex { - @include fibMixins.flex_init($justify: space-between); - - > * { - flex-grow: 1; - width: 47%; - max-width: 47%; - } - } - - // Footer. - .cmp__blog-footer { - @include fibMixins.flex_update($column: false); - - > section { - flex-grow: 1; - } - - section { - &.cmp__footer-left { - @include fibMixins.flex_update($column: true); - - > div { - flex-grow: unset; - - &:last-child { - margin-left: 0; - text-align: left; - } - } - } - - &.cmp__footer-right { - justify-content: flex-end; - margin-top: 0; - font-size: fibVars.$footer-font-size; - } - } - } - - // Ribbon. - .cmp__ribbon-container { - .cmp__ribbon { - width: 40%; - } - } - - // Go top. - a.cmp__go-top { - --border-width: #{fibFuncs.font_size(3)}; - } - - // Color bars. - .cmp__color-bars { - --bar-height: #{fibFuncs.font_size(0)}; - --bar-width: #{fibFuncs.font_size(-7)}; - left: fibFuncs.font_size(18); - } -} - -@media only screen and (min-width: fibVars.$breakpoint1) { - - // Responsive Article Content. - .cmp__auto-layout > *, .cmp__responsive { - max-width: fibVars.$container-width; - @include fibMixins.horizontal-center; - } -} - -@media only screen and (min-width: fibVars.$desktop) { - - // Navigation. - .cmp__blog-nav { - ul { - li { - a { - .cmp__nav-link-text { - display: block; - } - } - } - } - } - - // Blog content. - .cmp__blog-main { - margin: 0 fibVars.$xl-size; - } - - // Article Content. - .cmp__article-content { - --link-icon-width: 24px; - --link-offset: #{fibVars.$xl-size}; - --link-image: url('#{fibVars.$assets-path}/link-big.svg'); - } - - // Display spiral. - .cmp__spiral { - display: block; - } -} - -@media only screen and (min-width: fibVars.$breakpoint2) { - .cmp__article-author { - position: absolute; - top: fibFuncs.font_size(8, true); - left: fibVars.$article-author-left-offset; - - &:after { - display: none; - } - - a { - flex-direction: column; - - .cmp__article-author-pic { - width: fibVars.$author-pic-large-screen-width; - } - - span { - margin: { - top: fibFuncs.font_size(-14); - left: 0; - }; - } - } - } -} - -// Animations. -@keyframes arrow-move-left { - 0% { - left: 0; - } - 50% { - left: -3px; - } - 100% { - left: 0; - } -} - -@keyframes arrow-move-right { - 0% { - right: 0; - } - 50% { - right: -3px; - } - 100% { - right: 0; - } -} \ No newline at end of file diff --git a/scss/fibonacci.scss b/scss/fibonacci.scss deleted file mode 100644 index 2888e1c..0000000 --- a/scss/fibonacci.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'functions'; -@use 'variables'; -@use 'mixins'; -@use 'foundation'; -@use 'site'; -@use 'index'; -@use 'detail'; -@use 'about'; -@use 'contact'; \ No newline at end of file diff --git a/404.html b/src/404.html similarity index 93% rename from 404.html rename to src/404.html index 0b9ceb0..446f2a2 100644 --- a/404.html +++ b/src/404.html @@ -9,7 +9,7 @@ fibonacci | Home - +
@@ -47,12 +47,18 @@ -
  • +
  • home
    • +
  • + + + posts + +
  • diff --git a/about-us.html b/src/about-us.html similarity index 89% rename from about-us.html rename to src/about-us.html index 89c3e09..058d2f8 100644 --- a/about-us.html +++ b/src/about-us.html @@ -9,7 +9,34 @@ - + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + +
    @@ -53,6 +80,12 @@ home
    • +
  • + + + posts + +
  • @@ -105,7 +138,9 @@
    -

    About Us

    +

    + About Us +

    @@ -135,7 +170,7 @@

    Triton Maxwell
    • - +
    @@ -162,7 +197,7 @@
    Triton Maxwell
    Martin Trowler
    - +
    @@ -189,7 +224,7 @@
    Martin Trowler
    Julie Anand
    - +
    @@ -216,7 +251,7 @@
    Julie Anand
    Tanny Herbert
    - +
    diff --git a/about.html b/src/about.html similarity index 88% rename from about.html rename to src/about.html index 41d4dc1..115f459 100644 --- a/about.html +++ b/src/about.html @@ -9,7 +9,34 @@ - + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + +
    @@ -53,6 +80,12 @@ home +
  • + + + posts + +
  • @@ -105,7 +138,9 @@
    -

    About Me

    +

    + About Me +

    @@ -114,7 +149,7 @@

    About Me

    - + Author Triton Maxwell
    @@ -141,7 +176,7 @@

    Lorem ipsum
    • - +
    @@ -171,7 +206,7 @@
    Lorem ipsum
    Lorem ipsum
    - +
    @@ -201,7 +236,7 @@
    Lorem ipsum
    Lorem ipsum
    - +
    @@ -231,7 +266,7 @@
    Lorem ipsum
    Lorem ipsum
    - +
    diff --git a/assets/background2.png b/src/assets/background-dark.png similarity index 100% rename from assets/background2.png rename to src/assets/background-dark.png diff --git a/assets/background.png b/src/assets/background.png similarity index 100% rename from assets/background.png rename to src/assets/background.png diff --git a/assets/bootstrap-icons.svg b/src/assets/bootstrap-icons.svg similarity index 100% rename from assets/bootstrap-icons.svg rename to src/assets/bootstrap-icons.svg diff --git a/assets/coffee-stain.png b/src/assets/coffee-stain.png similarity index 100% rename from assets/coffee-stain.png rename to src/assets/coffee-stain.png diff --git a/assets/link-big.svg b/src/assets/link-big.svg similarity index 100% rename from assets/link-big.svg rename to src/assets/link-big.svg diff --git a/assets/link.svg b/src/assets/link.svg similarity index 100% rename from assets/link.svg rename to src/assets/link.svg diff --git a/assets/logo.svg b/src/assets/logo.svg similarity index 100% rename from assets/logo.svg rename to src/assets/logo.svg diff --git a/assets/spiral.png b/src/assets/spiral.png similarity index 100% rename from assets/spiral.png rename to src/assets/spiral.png diff --git a/assets/svgbg.svg b/src/assets/svgbg.svg similarity index 100% rename from assets/svgbg.svg rename to src/assets/svgbg.svg diff --git a/assets/blog_resources/agriculture-apple-blur-narrow.png b/src/blog_resources/agriculture-apple-blur-narrow.png similarity index 100% rename from assets/blog_resources/agriculture-apple-blur-narrow.png rename to src/blog_resources/agriculture-apple-blur-narrow.png diff --git a/assets/blog_resources/agriculture-apple-blur-wide.jpeg b/src/blog_resources/agriculture-apple-blur-wide.jpeg similarity index 100% rename from assets/blog_resources/agriculture-apple-blur-wide.jpeg rename to src/blog_resources/agriculture-apple-blur-wide.jpeg diff --git a/assets/blog_resources/agriculture-apple-blur.jpeg b/src/blog_resources/agriculture-apple-blur.jpeg similarity index 100% rename from assets/blog_resources/agriculture-apple-blur.jpeg rename to src/blog_resources/agriculture-apple-blur.jpeg diff --git a/assets/blog_resources/agriculture-apple-small.jpeg b/src/blog_resources/agriculture-apple-small.jpeg similarity index 100% rename from assets/blog_resources/agriculture-apple-small.jpeg rename to src/blog_resources/agriculture-apple-small.jpeg diff --git a/assets/julie.jpeg b/src/blog_resources/julie.jpeg similarity index 100% rename from assets/julie.jpeg rename to src/blog_resources/julie.jpeg diff --git a/assets/julie_mini.png b/src/blog_resources/julie_mini.png similarity index 100% rename from assets/julie_mini.png rename to src/blog_resources/julie_mini.png diff --git a/assets/martin.jpeg b/src/blog_resources/martin.jpeg similarity index 100% rename from assets/martin.jpeg rename to src/blog_resources/martin.jpeg diff --git a/assets/martin_mini.png b/src/blog_resources/martin_mini.png similarity index 100% rename from assets/martin_mini.png rename to src/blog_resources/martin_mini.png diff --git a/assets/tanny.jpeg b/src/blog_resources/tanny.jpeg similarity index 100% rename from assets/tanny.jpeg rename to src/blog_resources/tanny.jpeg diff --git a/assets/tanny_mini.jpg b/src/blog_resources/tanny_mini.jpg similarity index 100% rename from assets/tanny_mini.jpg rename to src/blog_resources/tanny_mini.jpg diff --git a/assets/triton.jpeg b/src/blog_resources/triton.jpeg similarity index 100% rename from assets/triton.jpeg rename to src/blog_resources/triton.jpeg diff --git a/assets/triton_mini.png b/src/blog_resources/triton_mini.png similarity index 100% rename from assets/triton_mini.png rename to src/blog_resources/triton_mini.png diff --git a/contact.html b/src/contact.html similarity index 86% rename from contact.html rename to src/contact.html index 787a2af..5ef08c1 100644 --- a/contact.html +++ b/src/contact.html @@ -9,7 +9,34 @@ - + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + +
    @@ -53,6 +80,12 @@ home +
  • + + + posts + +
  • @@ -105,7 +138,9 @@
    -

    Contact

    +

    + Contact +

    diff --git a/detail.html b/src/detail.html similarity index 96% rename from detail.html rename to src/detail.html index 539807b..adbd083 100644 --- a/detail.html +++ b/src/detail.html @@ -10,7 +10,34 @@ - + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + +
    @@ -48,12 +75,18 @@
    • -
  • +
  • home
    • +
  • + + + posts + +
  • @@ -122,7 +155,7 @@

    Lorem ipsum dolor sit amet consectetur

    - Author + Author Triton Maxwell Admin @@ -179,8 +212,7 @@

    Lorem ipsum dolor sit amet consectetur

    - + A beautiful photo of an apple
    Fig 1. A beautiful photo of an apple taken from the beautiful place Kashmir. Source: https://unsplash.com
    @@ -462,8 +494,7 @@

    Duis euismod luctus

    - + A beautiful photo of an apple
    Fig 2. The apple of the eden garden. Credits Source: https://unsplash.com.
    @@ -477,8 +508,7 @@

    Duis euismod luctus

    - + A beautiful photo of an apple
    Fig 3. The apple of the eden garden. Credits Source: https://unsplash.com.
    @@ -507,8 +537,7 @@

    Duis euismod luctus

    - + A beautiful photo of an apple
    Fig 4. The apple of the eden garden. Credits Source: https://unsplash.com.
    @@ -821,8 +850,7 @@
    Lorem ipsum dolor smit ameit
    - + A beautiful photo of an apple
    Fig 5. The apple of the eden garden. Credits Source: https://unsplash.com.
    @@ -925,7 +953,7 @@

    Lorem ipsum dolor sit amet

    - You + You You
    @@ -948,7 +976,7 @@

    Lorem ipsum dolor sit amet

  • - Martin + Martin Martin
    @@ -979,7 +1007,7 @@

    Lorem ipsum dolor sit amet

  • - Tanny + Tanny Tanny
    diff --git a/src/fibonacci.js b/src/fibonacci.js new file mode 100644 index 0000000..9204983 --- /dev/null +++ b/src/fibonacci.js @@ -0,0 +1,5 @@ +export * from './js/export'; + +import './scss/export.scss'; +import { init } from './js/boot'; +init(); \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f8775b3 --- /dev/null +++ b/src/index.html @@ -0,0 +1,215 @@ + + + + + + + fibonacci | Home + + + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + + + + +
    + + +
    + + +
    + + + + + + + +
    + being pragmatic... +
    +
    + + + +
    + + +
    + + +
    + + +
    +
    +
    +
    +
    + + + + + +
    + + +
    +
    +

    + Fibonacci +

    +
    +
    + + +
    +
    + Popular Posts +
    +
    +
    +
    +

    + Lorem ipsum dolor sit amet consectetur +

    +
    + Apple +
    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo + consequat. +

    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    Quote Of Day
    +
    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + +
    + + + + + \ No newline at end of file diff --git a/src/js/boot.js b/src/js/boot.js new file mode 100644 index 0000000..ff76a9c --- /dev/null +++ b/src/js/boot.js @@ -0,0 +1,89 @@ +export function init() { + const header = document.querySelector('.cmp__blog-header'), + nav = document.querySelector('.cmp__blog-nav'), + selectControl = document.querySelector('.cmp__hidden-menu'), + searchInput = document.querySelector('.cmp__search-form input'), + searchIcon = document.querySelector('.cmp__search-form a'), + hamburger = document.querySelector('.cmp__hamburger-link a'), + contentScale = document.querySelector('cmp-content-scale'), + blogContent = document.querySelector('.cmp__blog-content'), + goTop = document.querySelector('.cmp__go-top'), + startTime = performance.now(); + + if (goTop) { + goTop.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + window.scroll({ + top: 0, + behavior: 'smooth' + }); + }); + } + + const mediaQuery = window.matchMedia('screen and (min-width: 768px)'); + mediaQuery.addListener(mediaChangeHandler); + + function mediaChangeHandler(queryList) { + if (queryList.matches) { + searchIcon.removeEventListener('click', searchIconClickHandler); + } else { + searchIcon.addEventListener('click', searchIconClickHandler); + } + } + + function searchIconClickHandler(e) { + nav.classList.add('cmp__search-active'); + document.body.addEventListener('click', documentClickHandler); + searchInput.focus(); + e.stopPropagation(); + } + + function documentClickHandler(e) { + if (e.currentTarget === searchInput || e.currentTarget === searchIcon) { + return; + } + + nav.classList.remove('cmp__search-active'); + selectControl.value = null; + document.body.removeEventListener('click', documentClickHandler); + } + + function handleSelectChange() { + const page = selectControl.value; + + if (!page) { + return; + } + + if (page === 'search') { + nav.classList.add('cmp__search-active'); + document.body.addEventListener('click', documentClickHandler); + searchInput.focus(); + return; + } + + window.location.href = selectControl.value; + } + + function handleWindowScroll() { + if (contentScale) { + if (window.pageYOffset >= header.offsetHeight) { + contentScale.classList.add('cmp__sticky') + } else { + contentScale.classList.remove('cmp__sticky'); + } + } + } + + hamburger.addEventListener('click', () => selectControl.click()); + hamburger.addEventListener('change', handleSelectChange); + window.addEventListener('scroll', handleWindowScroll); + + if (contentScale) { + contentScale.setContent(document.querySelector('.cmp__article-content')); + } + + mediaChangeHandler(mediaQuery); +} \ No newline at end of file diff --git a/src/js/carousel.js b/src/js/carousel.js new file mode 100644 index 0000000..f5470a2 --- /dev/null +++ b/src/js/carousel.js @@ -0,0 +1,5 @@ +export class Carousel extends HTMLElement { + +} + +window.customElements.define('cmp-carousel', Carousel); \ No newline at end of file diff --git a/src/js/content-scale.js b/src/js/content-scale.js new file mode 100644 index 0000000..c54bdf0 --- /dev/null +++ b/src/js/content-scale.js @@ -0,0 +1,75 @@ +export class ContentScaleElement extends HTMLElement { + + constructor() { + super(); + this._handleScroll = this._handleScroll.bind(this); + this._handleResize = this._handleResize.bind(this); + this._winHeight = window.innerHeight; + } + + _setScrollProgress() { + const winScrollTop = window.scrollY, + computedRect = this._articleContent.getBoundingClientRect(), + amountScrolled = this._winHeight - computedRect.top, + pctScrolled = amountScrolled / computedRect.height * 100, + delta = 100; + + let adjustedPctScrolled; + if (winScrollTop <= delta || pctScrolled < 1) { + adjustedPctScrolled = 0; + } else if (amountScrolled > computedRect.height + delta) { + adjustedPctScrolled = 105; + } else { + adjustedPctScrolled = Math.floor(pctScrolled); + } + + if (adjustedPctScrolled === 0) { + this._scrollProgress.style.display = 'none'; + this._scrollProgress.style.width = '0%'; + return; + } + + this._scrollProgress.style.display = 'block'; + this._scrollProgress.style.width = `${adjustedPctScrolled}%`; + } + + _handleResize() { + this._winHeight = window.innerHeight; + this._setScrollProgress(); + } + + _handleScroll() { + this._setScrollProgress(); + } + + connectedCallback() { + if (!this._rendered) { + const contentScaleTemplate = document.createElement('template'); + contentScaleTemplate.innerHTML = ` +
    +
    `; + this.appendChild(contentScaleTemplate.content.cloneNode(true)); + this._scrollProgress = this.querySelector('.cmp__scroll-progress'); + this._rendered = true; + } + + window.addEventListener('resize', this._handleResize); + window.addEventListener('scroll', this._handleScroll); + } + + disconnectedCallback() { + window.removeEventListener('resize', this._handleResize); + window.removeEventListener('scroll', this._handleScroll); + } + + setContent(contentEl) { + this._articleContent = contentEl; + this._scrollProgress.classList.add('cmp__no-transition'); + setTimeout(() => { + this._setScrollProgress(); + this._scrollProgress.classList.remove('cmp__no-transition'); + }); + } +} + +window.customElements.define('cmp-content-scale', ContentScaleElement); \ No newline at end of file diff --git a/src/js/export.js b/src/js/export.js new file mode 100644 index 0000000..fb2be80 --- /dev/null +++ b/src/js/export.js @@ -0,0 +1,3 @@ +export * from './icon'; +export * from './carousel'; +export * from './content-scale'; \ No newline at end of file diff --git a/src/js/icon.js b/src/js/icon.js new file mode 100644 index 0000000..1426c16 --- /dev/null +++ b/src/js/icon.js @@ -0,0 +1,68 @@ +export class IconElement extends HTMLElement { + + get name() { + return this.getAttribute('name'); + } + + set name(value) { + this.setAttribute('name', value); + } + + get size() { + return this.getAttribute('size'); + } + + set size(value) { + this.setAttribute('size', value); + } + + static get observedAttributes() { + return ['name', 'size']; + } + + _setIcon() { + const useElement = this.querySelector('use'); + useElement.setAttribute('xlink:href', `./assets/bootstrap-icons.svg#${this.name}`); + useElement.setAttribute('href', `./assets/bootstrap-icons.svg#${this.name}`); + } + + _setSize() { + if (this.size) { + this.style.width = `${this.size}px`; + this.style.height = `${this.size}px`; + } else { + delete this.style.width; + delete this.style.height; + } + } + + connectedCallback() { + if (!this._rendered) { + const iconTemplate = document.createElement('template'); + iconTemplate.innerHTML = ` + + `; + this.appendChild(iconTemplate.content.cloneNode(true)); + this._rendered = true; + } + + this._setIcon(); + this._setSize(); + } + + attributeChangedCallback(attrName) { + if (!this._rendered) { + return; + } + + if (attrName === 'size') { + this._setSize(); + } + + if (attrName === 'name') { + this._setIcon(); + } + } +} + +window.customElements.define('cmp-icon', IconElement); \ No newline at end of file diff --git a/no-results.html b/src/no-results.html similarity index 94% rename from no-results.html rename to src/no-results.html index f00ad94..44a775f 100644 --- a/no-results.html +++ b/src/no-results.html @@ -9,7 +9,7 @@ fibonacci | Home - +
    @@ -47,12 +47,18 @@
    • -
  • +
  • home
    • +
  • + + + posts + +
  • diff --git a/index.html b/src/posts.html similarity index 93% rename from index.html rename to src/posts.html index d7093e9..9685268 100644 --- a/index.html +++ b/src/posts.html @@ -6,10 +6,37 @@ - fibonacci | Home + fibonacci | Latest Posts - + + +
    +
    +
    +
    +
    + Fibonacci +
    +
    +
    + +
    @@ -47,12 +74,18 @@
    • -
  • +
  • home
    • +
  • + + + posts + +
  • @@ -105,7 +138,9 @@
    -

    Latest Posts

    +

    + Latest Posts +

    @@ -125,7 +160,7 @@

    - Author + Author Triton Maxwell Admin @@ -183,8 +218,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -220,7 +254,7 @@

    - Author + Author Martin Wiegen Guest @@ -265,8 +299,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -301,7 +334,7 @@

    - Author + Author Julie Anand Guest @@ -346,8 +379,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -382,7 +414,7 @@

    - Author + Author Triton Maxwell Admin @@ -427,8 +459,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -463,7 +494,7 @@

    - Author + Author Triton Maxwell Admin @@ -508,8 +539,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    diff --git a/src/scss/base/_blockquote.scss b/src/scss/base/_blockquote.scss new file mode 100644 index 0000000..ca1dbd4 --- /dev/null +++ b/src/scss/base/_blockquote.scss @@ -0,0 +1,55 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +blockquote, .cmp__quote { + --cmp-bg-color: #{fibVars.$bquote-bg-color}; + --cmp-bg-color-dark: #{darken(fibVars.$bquote-bg-color, 5%)}; + + margin: { + top: fibVars.$lg-size; + bottom: fibVars.$lg-size; + } + padding: { + top: fibVars.$lg-size; + right: fibVars.$lg-size; + bottom: fibVars.$sm-size; + left: fibVars.$lg-size; + }; + + font-family: fibVars.$bquote-content-font-family; + + color: fibVars.$bquote-color; + @include fibMixins.config_container(fibVars.$bquote-bg-color); + + &.cmp__icon-float { + position: relative; + margin-top: fibVars.$xl-size; + padding-top: fibVars.$xl-size; + } + + h4 { + display: inline-block; + margin-top: 0; + font-family: fibVars.$bquote-title-font-family; + border-bottom: solid 2px; + } + + p { + hanging-punctuation: first; + } + + cite { + display: block; + font: { + family: fibVars.$cite-font-family; + size: fibVars.$cite-font-size; + } + text-align: right; + + &::before { + content: '—'; + margin-right: fibFuncs.size(-14); + } + } +} \ No newline at end of file diff --git a/src/scss/base/_button.scss b/src/scss/base/_button.scss new file mode 100644 index 0000000..507aa35 --- /dev/null +++ b/src/scss/base/_button.scss @@ -0,0 +1,54 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +button, [type="button"], [type="submit"] { + @include fibMixins.flex_init($center: true); + padding: fibVars.$button-padding; + + font: { + family: fibVars.$button-font-family; + size: fibVars.$button-font-size; + } + text-transform: uppercase; + letter-spacing: fibVars.$medium-letter-spacing; + + border-radius: fibVars.$border-radius; + background-image: linear-gradient(45deg, fibVars.$brand-color, fibVars.$brand-dark); + color: fibVars.$button-text-color; + border: none; + cursor: pointer; + box-shadow: fibVars.$box-shadow; + + transition: all fibVars.$medium-speed; + + &:focus, &:active, &:hover { + outline: none; + } + + cmp-icon { + margin-right: fibFuncs.size(-14); + } + + // Icon buttons. + &.cmp__icon-button { + padding: 0; + background: none; + box-shadow: none; + border-radius: 0; + color: inherit; + + cmp-icon { + margin-right: 0; + } + + i { + display: block; + align-self: flex-end; + margin-left: fibFuncs.size(-18); + font-style: normal; + font-size: fibFuncs.size(-5); + letter-spacing: fibVars.$extra-small-letter-spacing; + } + } +} \ No newline at end of file diff --git a/src/scss/base/_card.scss b/src/scss/base/_card.scss new file mode 100644 index 0000000..44d7b08 --- /dev/null +++ b/src/scss/base/_card.scss @@ -0,0 +1,141 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Cards list. +.cmp__cards-list { + @include fibMixins.flex_init($wrap: true); + margin-bottom: fibVars.$card-spacing; + + .cmp__card { + margin-bottom: fibVars.$card-spacing; + } +} + +// Cards. +.cmp__card { + @include fibMixins.flex_init($column: true); + @include fibMixins.set_shadow_radius; + transition: fibVars.$box-shadow fibVars.$medium-speed; + text-shadow: none; + background: url('#{fibVars.$assets-path}/background.png'), linear-gradient(135deg, fibVars.$dim-gray, darken(fibVars.$dim-gray, 3%)); + + &:hover { + box-shadow: fibVars.$box-shadow-hover; + + .cmp__card-header { + .cmp__card-image { + &:after { + background-color: transparent; + } + + img { + transform: scale(1.1); + } + } + } + } + + .cmp__card-header { + position: relative; + display: block; + + .cmp__card-title { + $card-ribbon-offset-height: 3px; + + margin-top: fibVars.$sm-size; + position: relative; + left: calc(-2 * #{$card-ribbon-offset-height}); + width: calc(100% + 4 * #{$card-ribbon-offset-height}); + overflow: visible; + text-shadow: none; + + h5 { + margin: 0; + padding: { + top: fibFuncs.size(-10); + bottom: fibFuncs.size(-10); + left: fibFuncs.size(0); + right: fibFuncs.size(0); + }; + font-size: fibVars.$card-title-font-size; + font-family: fibVars.$card-title-font-family; + letter-spacing: fibVars.$medium-letter-spacing; + color: fibVars.$card-title-color; + @include fibMixins.noisy_bg(rgba(0, 0, 0, 0.6)); + } + + &::before, &::after { + display: none; + content: ''; + position: absolute; + top: calc(-2 * #{$card-ribbon-offset-height}); + height: $card-ribbon-offset-height; + + border: solid $card-ribbon-offset-height fibVars.$dark-gray; + border-top-color: transparent; + } + + &::before { + left: 0; + border-left-color: transparent; + } + + &::after { + right: 0; + border-right-color: transparent; + } + } + + .cmp__card-image { + position: relative; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform fibVars.$medium-speed; + } + + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + transition: background-color fibVars.$medium-speed; + } + } + } + + .cmp__card-footer { + padding: fibVars.$sm-size; + @include fibMixins.flex_init($column: true); + + p { + text-shadow: none; + margin: 0; + + font: { + family: fibVars.$card-footer-font-family; + size: fibVars.$card-footer-font-size; + } + + color: fibVars.$card-footer-color; + } + + .cmp__card-actions { + @include fibMixins.flex_init(); + margin-top: fibVars.$sm-size; + + > * { + flex-grow: 1; + text-shadow: none; + color: fibVars.$card-footer-color; + } + } + } +} \ No newline at end of file diff --git a/src/scss/base/_carousel.scss b/src/scss/base/_carousel.scss new file mode 100644 index 0000000..91b3075 --- /dev/null +++ b/src/scss/base/_carousel.scss @@ -0,0 +1,49 @@ +@use 'variables' as fibVars; +@use 'mixins' as fibMixins; + +.cmp__carousel { + display: flex; + + .cmp__carousel-tabs { + position: absolute; + top: calc(-1 * #{fibVars.$widget-ribbon-height} / 2); + left: calc(50% - 90px); + width: 180px; + height: fibVars.$widget-ribbon-height; + + span { + @include fibMixins.flex_init($center: true); + position: absolute; + width: 100%; + height: fibVars.$widget-ribbon-height; + line-height: fibVars.$widget-ribbon-height; + @include fibMixins.set_text_font(); + font-weight: bold; + + background-color: fibVars.$widget-ribbon-bg; + color: fibVars.$widget-ribbon-color; + z-index: 1; + + &::before, &::after { + content: ''; + position: absolute; + top: 0; + height: 100%; + + border: calc(#{fibVars.$xl-size} / 2) solid fibVars.$widget-ribbon-bg; + border-top-color: transparent; + border-bottom-color: transparent; + } + + &::before { + left: calc(-1 * #{fibVars.$xl-size}); + border-left-color: transparent; + } + + &::after { + right: calc(-1 * #{fibVars.$xl-size}); + border-right-color: transparent; + } + } + } +} \ No newline at end of file diff --git a/src/scss/base/_code.scss b/src/scss/base/_code.scss new file mode 100644 index 0000000..5d779dd --- /dev/null +++ b/src/scss/base/_code.scss @@ -0,0 +1,149 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Pre, Code & Var elements +pre { + margin: 0; + position: relative; + + color: fibVars.$medium-gray; + @include fibMixins.config_container(fibVars.$code-bg-color); + + code { + overflow: { + x: auto; + y: hidden; + }; + + font: { + size: fibVars.$code-font-size; + family: fibVars.$code-font-family; + } + + line-height: fibVars.$code-line-height; + letter-spacing: normal; + + &.hljs { + padding: 0; + background: inherit; + color: inherit; + } + + &::after { + @include fibMixins.flex_init($center: true); + height: fibFuncs.size(0); + position: absolute; + top: fibFuncs.size(-7, true, 'rem'); + right: fibFuncs.size(-7); + padding: 0 fibFuncs.size(-14); + content: attr(data-language); + + font: { + family: fibVars.$small-text-font-family; + size: fibFuncs.size(-4); + } + text-transform: uppercase; + + color: fibVars.$white; + background-color: darken(fibVars.$light-gray, 10%); + border-radius: fibVars.$border-radius; + box-shadow: fibVars.$box-shadow; + } + } +} + +// Highlight.js +.hljs-comment { + color: fibVars.$hightlight-comment-color; +} + +.hljs-punctuation, +.hljs-tag { + color: fibVars.$hightlight-punc-color; +} + +.hljs-tag .hljs-attr, +.hljs-tag .hljs-name { + color: fibVars.$hightlight-tag-color; +} + +.hljs-attribute, +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-name, +.hljs-selector-tag { + font-weight: 700; +} + +.hljs-deletion, +.hljs-number, +.hljs-quote, +.hljs-selector-class, +.hljs-selector-id, +.hljs-string, +.hljs-template-tag, +.hljs-type { + color: fibVars.$hightlight-selector-color; +} + +.hljs-section, +.hljs-title { + color: fibVars.$hightlight-section-title-color; + font-weight: 700; +} + +.hljs-link, +.hljs-operator, +.hljs-regexp, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-symbol, +.hljs-template-variable, +.hljs-variable { + color: fibVars.$hightlight-selector-color; +} + +.hljs-literal { + color: fibVars.$hightlight-literal-color; +} + +.hljs-addition, +.hljs-built_in, +.hljs-bullet, +.hljs-code { + color: fibVars.$hightlight-code-color; +} + +.hljs-meta { + color: fibVars.$hightlight-code-color; +} + +.hljs-meta .hljs-string { + color: fibVars.$hightlight-meta-string-color; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: 700; +} + +// Variable and keyboard input. +var, kbd, .cmp__code { + padding: 0 fibFuncs.size(-20); + + font: { + family: fibVars.$code-font-family; + size: fibVars.$var-font-size; + style: normal; + } + letter-spacing: fibVars.$extra-small-letter-spacing; + + color: fibVars.$var-color; + background-color: fibVars.$var-bg-color; + border-radius: fibVars.$border-radius; +} \ No newline at end of file diff --git a/src/scss/base/_content-scale.scss b/src/scss/base/_content-scale.scss new file mode 100644 index 0000000..1d085f2 --- /dev/null +++ b/src/scss/base/_content-scale.scss @@ -0,0 +1,17 @@ +@use 'variables' as fibVars; + +cmp-content-scale { + position: relative; + overflow: hidden; + height: fibVars.$content-scale-height; + z-index: fibVars.$content-scale-index; + + .cmp__scroll-progress { + position: absolute; + top: 0; + width: 0; + height: fibVars.$content-scale-height; + background-color: fibVars.$scale-progress-bg; + transition: width fibVars.$medium-speed; + } +} \ No newline at end of file diff --git a/src/scss/base/_export.scss b/src/scss/base/_export.scss new file mode 100644 index 0000000..305058e --- /dev/null +++ b/src/scss/base/_export.scss @@ -0,0 +1,20 @@ +@use 'mixins' as fibMixins; + +@use 'root'; +@use 'typography'; +@use 'lists'; +@use 'blockquote'; +@use 'figure'; +@use 'table'; +@use 'code'; +@use 'hr'; +@use 'icon'; +@use 'form'; +@use 'button'; +@use 'content-scale'; +@use 'sub'; +@use 'widget'; +@use 'card'; +@use 'carousel'; +@use 'misc'; +@use 'media'; \ No newline at end of file diff --git a/src/scss/base/_figure.scss b/src/scss/base/_figure.scss new file mode 100644 index 0000000..a799229 --- /dev/null +++ b/src/scss/base/_figure.scss @@ -0,0 +1,55 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +figure, .cmp__figure { + margin-block-start: fibVars.$md-size; + margin-block-end: fibVars.$lg-size; + margin-inline-start: 0; + margin-inline-end: 0; + max-width: 100%; + + img, iframe { + display: block; + max-width: 100%; + @include fibMixins.set_shadow_radius; + } + + table { + margin: 0; + } + + iframe { + width: 100%; + min-height: fibVars.$iframe-min-height; + border: none; + } + + figcaption, .cmp__figcaption { + margin-top: fibFuncs.size(-14); + + font: { + size: fibVars.$figure-caption-font-size; + family: fibVars.$figure-caption-font-family; + } + + color: fibVars.$figure-caption-color; + + code { + font: { + size: fibVars.$code-font-size; + family: fibVars.$code-font-family; + } + } + } + + .cmp__table-wrapper { + padding: fibVars.$small-padding; + @include fibMixins.config_container(fibVars.$success); + overflow-x: auto; + } + + pre { + padding: fibVars.$small-padding; + } +} \ No newline at end of file diff --git a/src/scss/base/_form.scss b/src/scss/base/_form.scss new file mode 100644 index 0000000..e84f825 --- /dev/null +++ b/src/scss/base/_form.scss @@ -0,0 +1,59 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Form elements. +// Labels. +label { + font: { + family: fibVars.$label-font-family; + size: fibVars.$label-font-size; + weight: bold; + } + text-transform: uppercase; + letter-spacing: fibVars.$label-letter-spacing; + color: fibVars.$label-color; +} + +// Input Textboxes and Textareas. +input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea { + width: 100%; + padding: fibVars.$input-padding; + + font: { + family: fibVars.$input-font-family; + size: fibVars.$input-font-size; + } + line-height: fibVars.$input-line-height; + + border: solid 2px fibVars.$input-border-color; + border-radius: fibVars.$border-radius; + color: fibVars.$input-text-color; + outline: none; + + transition: all fibVars.$medium-speed; + -webkit-appearance: textfield; + + &:focus, &:active { + outline: none; + border-color: fibVars.$brand-color; + } +} + +// Form controls with labels. +.cmp__form-control { + position: relative; + @include fibMixins.flex_init($column: true, $align: flex-start); + margin-bottom: fibVars.$lg-size; + border-radius: fibVars.$border-radius; + + label { + @include fibMixins.flex_init($ver: true, $justify: flex-end); + } +} + +// Placeholder. +::placeholder { + color: fibVars.$gray; + font-style: italic; +} \ No newline at end of file diff --git a/scss/_functions.scss b/src/scss/base/_funcs.scss similarity index 94% rename from scss/_functions.scss rename to src/scss/base/_funcs.scss index e9a98c8..a73c422 100644 --- a/scss/_functions.scss +++ b/src/scss/base/_funcs.scss @@ -27,7 +27,7 @@ $ratio: 1.618; $interval: 5; -@function font_size($point, $negative: false, $unit: 'rem') { +@function size($point, $negative: false, $unit: 'rem') { $val: math.div(math.round(math.pow($ratio, math.div($point, $interval)) * 1000), 1000); @if $negative { diff --git a/src/scss/base/_hr.scss b/src/scss/base/_hr.scss new file mode 100644 index 0000000..b1b53f1 --- /dev/null +++ b/src/scss/base/_hr.scss @@ -0,0 +1,22 @@ +@use 'sass:math'; +@use 'variables' as fibVars; + +hr { + height: 1px; + margin: fibVars.$xxl-size 0; + position: relative; + overflow: visible; + border: 0; + background: fibVars.$hr-bg; +} + +hr:before { + content: ''; + position: absolute; + left: calc(50% - #{math.div(fibVars.$hr-separator-size, 2)}); + top: -1 * math.div(fibVars.$hr-separator-size, 2); + width: fibVars.$hr-separator-size; + height: fibVars.$hr-separator-size; + background-color: fibVars.$hr-separator-color; + transform: rotate(50deg); +} \ No newline at end of file diff --git a/src/scss/base/_icon.scss b/src/scss/base/_icon.scss new file mode 100644 index 0000000..4ec219e --- /dev/null +++ b/src/scss/base/_icon.scss @@ -0,0 +1,66 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Icon. +cmp-icon { + @include fibMixins.flex_init($center: true); + width: fibVars.$icon-size; + height: fibVars.$icon-size; + + svg { + fill: currentColor; + width: inherit; + height: inherit; + + * { + pointer-events: none; + } + } + + svg:hover *[data-hover-behavior=color] { + fill: currentColor; + } + + svg:hover *[data-hover-behavior=white] { + fill: white; + } +} + +// Icon with text. +.cmp__icon-text { + @include fibMixins.flex_init($center: true); + color: inherit; + + cmp-icon { + margin-right: 0; + } + + i { + display: block; + align-self: flex-end; + margin-left: fibFuncs.size(-18); + font-family: fibVars.$small-text-font-family; + font-style: normal; + font-size: fibFuncs.size(-5); + letter-spacing: fibVars.$extra-small-letter-spacing; + } +} + +// Floating icon. +.cmp__icon-container { + @include fibMixins.flex_init($center: true); + position: absolute; + left: fibFuncs.size(-6); + top: calc(-1 * #{fibFuncs.size(2)} / 2 - #{fibFuncs.size(-6)}); + padding: fibFuncs.size(-6); + @include fibMixins.config_container(var(--cmp-bg-color-dark)); + box-shadow: fibVars.$box-shadow; + border-radius: 50%; + color: lighten(fibVars.$medium-gray, 10%); + + cmp-icon { + width: fibFuncs.size(2); + height: fibFuncs.size(2); + } +} \ No newline at end of file diff --git a/src/scss/base/_lists.scss b/src/scss/base/_lists.scss new file mode 100644 index 0000000..ea5a7b6 --- /dev/null +++ b/src/scss/base/_lists.scss @@ -0,0 +1,75 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Ordered, Un-ordered lists and menus. +ul, +ol, +menu { + position: relative; + + padding-left: fibVars.$md-size; + margin: { + top: 0; + bottom: fibVars.$md-size; + } + + list-style: none; + + color: inherit; + + ul, ol, menu { + margin-bottom: fibFuncs.size(-9); + } +} + +ul li:before, menu li:before { + content: "\25A0"; + position: absolute; + display: inline-block; + width: 1em; + margin-left: -1em; + + font-weight: bold; + + color: fibVars.$brand-color; +} + +ol { + counter-reset: li; +} + +ol li:before { + display: inline-block; + position: absolute; + width: fibFuncs.size(4, false, em); + margin-left: fibFuncs.size(7, true, em); + text-align: right; + + font-family: fibVars.$small-text-font-family; + + content: counter(li) "."; + counter-increment: li; + counter-reset: revert; + + color: inherit; +} + +ol li li:before { + content: counters(li, ".") " "; +} + +// Detail Lists. +dl { + // Title. + dt { + @include fibMixins.set_text_font($font_size: fibVars.$h5-font-size); + color: fibVars.$medium-gray; + } + + // Description. + dd { + margin-bottom: fibVars.$xs-size; + margin-inline-start: fibVars.$md-size; + } +} \ No newline at end of file diff --git a/src/scss/base/_media.scss b/src/scss/base/_media.scss new file mode 100644 index 0000000..1251701 --- /dev/null +++ b/src/scss/base/_media.scss @@ -0,0 +1,74 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +@media only screen and (min-width: fibVars.$tablet) { + :root { + --cmp-base-size: #{fibVars.$large-screen-font-size}; + --cmp-xs-size: #{fibFuncs.size(-3)}; + --cmp-sm-size: #{fibFuncs.size(-2)}; + --cmp-md-size: #{fibFuncs.size(0)}; + --cmp-lg-size: #{fibFuncs.size(3)}; + --cmp-xl-size: #{fibFuncs.size(7)}; + --cmp-xxl-size: #{fibFuncs.size(10)}; + } + + // Lists. + ul, + ol, + menu { + padding-left: 0; + + ul, + ol, + menu { + padding-left: fibVars.$md-size; + } + } + + // Form Controls. + .cmp__form-control { + @include fibMixins.flex_update($column: false, $align: center); + background-color: fibVars.$form-control-bg-color; + + label { + min-width: fibFuncs.size(19); + margin-right: fibVars.$sm-size; + } + } + + // Widget. + .cmp__widget { + --cmp-widget-body-padding: #{fibVars.$medium-padding}; + } + + // Widget Ribbon. + .cmp__widget-ribbon { + min-width: fibFuncs.size(25); + } + + // Cards List. + .cmp__cards-list { + padding: 0 fibVars.$sm-size; + justify-content: space-between; + + .cmp__card { + width: calc(50% - #{fibVars.$card-spacing} / 2); + + .cmp__card-header { + .cmp__card-title { + &::before, &::after { + display: block; + } + + h5 { + padding: { + left: fibFuncs.size(-2); + right: fibFuncs.size(-2); + }; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/scss/base/_misc.scss b/src/scss/base/_misc.scss new file mode 100644 index 0000000..6a0d990 --- /dev/null +++ b/src/scss/base/_misc.scss @@ -0,0 +1,342 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; + +// Abbr, Acronym. +abbr, acronym, .cmp__acronym { + letter-spacing: fibVars.$medium-letter-spacing; + text-transform: uppercase; + text-decoration: none; + + &:after { + content: '†'; + position: relative; + top: fibFuncs.size(-5, true, em); + font-size: fibVars.$special-char-font-size; + } +} + +// Definition. +dfn { + font-style: italic; +} + +// Superscript & Subscript. +sup, sub { + font-size: fibVars.$special-char-font-size; +} + +// Small. +small, .cmp__small { + font-size: fibFuncs.size(-2); +} + +// Very Large text. +.cmp__big-text { + text-align: center; + font-size: fibFuncs.size(19); + color: fibVars.$medium-gray; +} + +// Datetimes. +time, .cmp__time { + font: { + family: fibVars.$time-font-family; + size: fibVars.$time-font-size; + } + letter-spacing: fibVars.$medium-letter-spacing; + text-transform: uppercase; +} + +// Strong, data etc. +strong, data, .cmp__strong { + font-weight: bold; +} + +// Italic. +i, .cmp__italic { + font-style: italic; +} + +// Highlight. +mark, .cmp__mark { + background-color: fibVars.$mark-bg-color; +} + +// Address element. +address { + font-style: italic; +} + +// Selection Color. +::selection { + text-shadow: none; + color: fibVars.$white; + background: fibVars.$brand-color; +} + +// Alignment classes. +.cmp__right { + text-align: right; +} + +.cmp__center { + text-align: center; +} + +// Sticky. +.cmp__sticky { + position: fixed; + top: 0; + width: 100%; +} + +// Status Colors. +$statuses: ("info": fibVars.$dim-gray, "success": fibVars.$success, "warn": fibVars.$warn, "error": fibVars.$error); + +@each $name, $color in $statuses { + .cmp__status-#{$name} { + --cmp-bg-color: #{$color}; + --cmp-bg-color-dark: #{darken($color, 5%)}; + background-color: var(--cmp-bg-color); + } +} + +// Constants. +$breakpoints: ( + "mob": fibVars.$mobile, + "tab": fibVars.$tablet, + "desk": fibVars.$desktop +); + +$sizes: ( + "xs": fibVars.$xs-size, + "sm": fibVars.$sm-size, + "md": fibVars.$md-size, + "lg": fibVars.$lg-size, + "xl": fibVars.$xl-size, + "xxl": fibVars.$xxl-size +); + +$colors: ( + "brand": fibVars.$brand-color, + "brand-dark": fibVars.$brand-dark, + "brand-light": fibVars.$brand-light, + "brand-bg": fibVars.$brand-bg, + "dark-gray": fibVars.$dark-gray, + "medium-gray": fibVars.$medium-gray, + "light-gray": fibVars.$gray, + "dim-gray": fibVars.$dim-gray, + "brand-gray": fibVars.$brand-gray, + "white-color": fibVars.$white, + "black-color": fibVars.$black, + "success-color": fibVars.$success, + "warn-color": fibVars.$warn, + "error-color": fibVars.$error +); + +// Floats & Responsive Floats. +.cmp__float-left { + float: left; +} + +.cmp__float-right { + float: right; +} + +.cmp__float-left:after, .cmp__float-right:after { + content: ''; + display: block; + height: 0; + width: 100%; + clear: both; +} + +.cmp__clear { + clear: both; +} + +@each $name, $breakpoint in $breakpoints { + @media only screen and (min-width: $breakpoint) { + .cmp__#{$name}-float-left { + float: left; + } + + .cmp__#{$name}-float-right { + float: right; + } + + .cmp__#{$name}-float-left:after, .cmp__#{$name}-float-right:after { + content: ''; + display: block; + height: 0; + width: 100%; + clear: both; + } + + .cmp__#{$name}-clear { + clear: both; + } + } +} + +// Responsive paddings and margins. +.cmp__no-margin { + margin: 0; +} + +.cmp__no-pad { + padding: 0; +} + +@each $name, $size in $sizes { + + // Paddings. + .cmp__pad-#{$name} { + padding: #{$size}; + } + + .cmp__pad-hor-#{$name} { + padding-left: #{$size}; + padding-right: #{$size}; + } + + .cmp__pad-ver-#{$name} { + padding-top: #{$size}; + padding-bottom: #{$size}; + } + + .cmp__pad-left-#{$name} { + padding-left: #{$size}; + } + + .cmp__pad-right-#{$name} { + padding-right: #{$size}; + } + + .cmp__pad-top-#{$name} { + padding-top: #{$size}; + } + + .cmp__pad-bottom-#{$name} { + padding-bottom: #{$size}; + } + + // Margins. + .cmp__mar-#{$name} { + margin: #{$size}; + } + + .cmp__mar-hor-#{$name} { + margin-left: #{$size}; + margin-right: #{$size}; + } + + .cmp__mar-ver-#{$name} { + margin-top: #{$size}; + margin-bottom: #{$size}; + } + + .cmp__mar-left-#{$name} { + margin-left: #{$size}; + } + + .cmp__mar-right-#{$name} { + margin-right: #{$size}; + } + + .cmp__mar-top-#{$name} { + margin-top: #{$size}; + } + + .cmp__mar-bottom-#{$name} { + margin-bottom: #{$size}; + } +} + +@each $breakpointname, $breakpoint in $breakpoints { + @media only screen and (min-width: $breakpoint) { + .cmp__#{$breakpointname}-no-margin { + margin: 0; + } + + .cmp__#{$breakpointname}-no-pad { + padding: 0; + } + + @each $name, $size in $sizes { + + // Paddings. + .cmp__#{$breakpointname}-pad-#{$name} { + padding: #{$size}; + } + + .cmp__#{$breakpointname}-pad-hor-#{$name} { + padding-left: #{$size}; + padding-right: #{$size}; + } + + .cmp__#{$breakpointname}-pad-ver-#{$name} { + padding-top: #{$size}; + padding-bottom: #{$size}; + } + + .cmp__#{$breakpointname}-pad-left-#{$name} { + padding-left: #{$size}; + } + + .cmp__#{$breakpointname}-pad-right-#{$name} { + padding-right: #{$size}; + } + + .cmp__#{$breakpointname}-pad-top-#{$name} { + padding-top: #{$size}; + } + + .cmp__#{$breakpointname}-pad-bottom-#{$name} { + padding-bottom: #{$size}; + } + + // Margins. + .cmp__#{$breakpointname}-mar-#{$name} { + margin: #{$size}; + } + + .cmp__#{$breakpointname}-mar-hor-#{$name} { + margin-left: #{$size}; + margin-right: #{$size}; + } + + .cmp__#{$breakpointname}-mar-ver-#{$name} { + margin-top: #{$size}; + margin-bottom: #{$size}; + } + + .cmp__#{$breakpointname}-mar-left-#{$name} { + margin-left: #{$size}; + } + + .cmp__#{$breakpointname}-mar-right-#{$name} { + margin-right: #{$size}; + } + + .cmp__#{$breakpointname}-mar-top-#{$name} { + margin-top: #{$size}; + } + + .cmp__#{$breakpointname}-mar-bottom-#{$name} { + margin-bottom: #{$size}; + } + } + } +} + +// Color Classes. +@each $name, $color in $sizes { + .cmp__#{$name}-color { + color: $color; + } + + .cmp__#{$name}-color-bg { + background-color: $color; + } +} \ No newline at end of file diff --git a/scss/_mixins.scss b/src/scss/base/_mixins.scss similarity index 97% rename from scss/_mixins.scss rename to src/scss/base/_mixins.scss index 28c9a1c..61f4c08 100644 --- a/scss/_mixins.scss +++ b/src/scss/base/_mixins.scss @@ -279,9 +279,9 @@ box-shadow: none; } -@mixin set_heading_font($font_size: fibVars.$xs-size, $spacing: fibVars.$medium-letter-spacing) { +@mixin set_text_font($family: fibVars.$small-text-font-family, $font_size: fibVars.$xs-size, $spacing: fibVars.$medium-letter-spacing) { font: { - family: fibVars.$heading-font-family; + family: $family; size: $font_size; } text-transform: uppercase; diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss new file mode 100644 index 0000000..dc5db78 --- /dev/null +++ b/src/scss/base/_root.scss @@ -0,0 +1,45 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +// Root. +:root { + --cmp-base-size: #{fibVars.$small-screen-font-size}; + --cmp-xs-size: #{fibFuncs.size(-2)}; + --cmp-sm-size: #{fibFuncs.size(-1)}; + --cmp-md-size: #{fibFuncs.size(0)}; + --cmp-lg-size: #{fibFuncs.size(3)}; + --cmp-xl-size: #{fibFuncs.size(6)}; + --cmp-xxl-size: #{fibFuncs.size(8)}; + font-size: var(--cmp-base-size); + + --cmp-brand-color: #{fibVars.$brand-color}; + --cmp-brand-light: #{fibVars.$brand-light}; + --cmp-brand-dark: #{fibVars.$brand-dark}; + --cmp-brand-bg: #{fibVars.$brand-bg}; + --cmp-brand-gray: #{fibVars.$brand-gray}; + --cmp-dark-gray: #{fibVars.$dark-gray}; + --cmp-medium-gray: #{fibVars.$medium-gray}; + --cmp-gray: #{fibVars.$gray}; + --cmp-light-gray: #{fibVars.$light-gray}; + --cmp-dim-gray: #{fibVars.$dim-gray}; +} + +// Global Overrides. +html, body { + box-sizing: border-box; + @include fibMixins.no_spacing; + + font: { + family: fibVars.$body-font-family; + size: fibVars.$body-font-size; + } + line-height: fibVars.$base-line-height; + + color: fibVars.$dark-gray; +} + +// CSS Resets. +*, *:before, *:after { + box-sizing: inherit; +} \ No newline at end of file diff --git a/src/scss/base/_sub.scss b/src/scss/base/_sub.scss new file mode 100644 index 0000000..7d3e59e --- /dev/null +++ b/src/scss/base/_sub.scss @@ -0,0 +1,40 @@ +@use 'variables' as fibVars; +@use 'mixins' as fibMixins; + +.cmp__sub { + --cmp-bg-color: #{fibVars.$sub-bg-color}; + --cmp-bg-color-dark: #{darken(fibVars.$sub-bg-color, 5%)}; + + margin: { + top: fibVars.$md-size; + bottom: fibVars.$lg-size; + }; + padding: { + top: fibVars.$lg-size; + right: fibVars.$lg-size; + bottom: fibVars.$sm-size; + left: fibVars.$lg-size; + }; + + font-family: fibVars.$sub-content-font-family; + + @include fibMixins.config_container(fibVars.$sub-bg-color); + + &.cmp__icon-float { + position: relative; + margin-top: fibVars.$xl-size; + padding-top: fibVars.$xl-size; + } + + h4, h5 { + font-family: fibVars.$sub-title-font-family; + } + + h4 { + margin-top: 0; + } + + pre { + background-color: fibVars.$white; + } +} \ No newline at end of file diff --git a/src/scss/base/_table.scss b/src/scss/base/_table.scss new file mode 100644 index 0000000..2fccfb1 --- /dev/null +++ b/src/scss/base/_table.scss @@ -0,0 +1,39 @@ +@use 'variables' as fibVars; + +table { + width: 100%; + margin: { + top: fibVars.$md-size; + bottom: fibVars.$lg-size; + } + + font: { + size: fibVars.$table-font-size; + family: fibVars.$table-font-family; + } + + border-collapse: collapse; + caption-side: bottom; + + caption { + font: { + size: fibVars.$table-caption-font-size; + family: fibVars.$table-caption-font-family; + } + + color: fibVars.$table-caption-color; + } + + td, th { + line-height: fibVars.$table-line-height; + } + + thead { + tr { + th { + border-bottom: solid 1px fibVars.$gray; + text-align: left; + } + } + } +} \ No newline at end of file diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss new file mode 100644 index 0000000..0ba566e --- /dev/null +++ b/src/scss/base/_typography.scss @@ -0,0 +1,128 @@ +@use 'sass:color'; +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +@include fibMixins.load_google_font($fonts: + (('Source Serif Pro': ('400', '400i', '600')), + ('Source Sans Pro': ('400', '400i', '600')), + 'Patua One', + ('Amatic SC': ('wght@700'))) +); + +// Paragraphs. +p, .cmp__para { + margin: { + top: 0; + bottom: fibVars.$md-size; + } + + font-size: fibVars.$body-font-size; +} + +// Headings. +h1, .cmp__h1, +h2, .cmp__h2, +h3, .cmp__h3, +h4, .cmp__h4, +h5, .cmp__h5, +h6, .cmp__h6 { + font-family: fibVars.$heading-font-family; + line-height: fibVars.$heading-line-height; + letter-spacing: fibVars.$heading-spacing; + + color: fibVars.$heading-color; + + a:link, + a:visited, + a:hover, + a:focus, + a:active { + border-bottom: none; + } +} + +h1, .cmp__h1 { + margin: { + top: fibVars.$xl-size; + bottom: fibVars.$lg-size; + } + + font-size: fibVars.$h1-font-size; +} + +h2, .cmp__h2 { + margin: { + top: fibFuncs.size(6); + bottom: fibVars.$md-size; + } + + font-size: fibVars.$h2-font-size; +} + +h3, .cmp__h3 { + margin: { + top: fibVars.$lg-size; + bottom: fibVars.$sm-size; + } + + font-size: fibVars.$h3-font-size; +} + +h4, .cmp__h4 { + margin: { + top: fibVars.$lg-size; + bottom: fibVars.$xs-size; + } + + font-size: fibVars.$h4-font-size; +} + +h5, .cmp__h5 { + margin: { + top: fibVars.$lg-size; + bottom: fibVars.$xs-size; + } + + font-size: fibVars.$h5-font-size; + text-transform: uppercase; + letter-spacing: fibVars.$small-letter-spacing; + + color: fibVars.$gray; +} + +h6, .cmp__h6 { + margin: { + top: fibVars.$lg-size; + bottom: fibVars.$xs-size; + } + + font-size: fibVars.$h6-font-size; + text-transform: uppercase; + letter-spacing: fibVars.$small-letter-spacing; + + color: fibVars.$gray; +} + +// Links. +a:link, +a:visited, +a:hover, +a:focus, +a:active { + color: inherit; + border-bottom: dotted 1px; + text-decoration: none; + transition: all fibVars.$medium-speed; +} + +a:hover, +a:focus, +a:active { + color: fibVars.$brand-color; + text-shadow: color.adjust(fibVars.$brand-color, $lightness: 30%) 0 0 6px; +} + +a:focus-visible { + outline-color: fibVars.$brand-color; +} \ No newline at end of file diff --git a/scss/_variables.scss b/src/scss/base/_variables.scss similarity index 56% rename from scss/_variables.scss rename to src/scss/base/_variables.scss index 131a9b9..de4c551 100644 --- a/scss/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,13 +1,14 @@ @use 'sass:color'; -@use 'functions' as fibFuncs; +@use 'funcs' as fibFuncs; // Assets path. -$assets-path: 'assets' !default; +$assets-path: 'src/assets' !default; // Generic Variables. // Font families. $body-font-family: 'Source Serif Pro', Georgia, serif !default; -$heading-font-family: 'Source Sans Pro', Arial, Tahoma, sans-serif !default; +$heading-font-family: 'Patua One', cursive; // TODO: Set font family hierarchy! +$small-text-font-family: 'Source Sans Pro', Arial, Tahoma, sans-serif !default; $mono-font-family: 'JetBrains Mono', Courier, monospace !default; $logo-font-family: 'Amatic SC', 'Brush Script MT', cursive !default; @@ -43,12 +44,12 @@ $purple-ribbon: rgb(186, 137, 182) !default; // Sizes. $small-screen-font-size: 16px !default; $large-screen-font-size: 19px !default; -$xs-size: var(--xs-size) !default; -$sm-size: var(--sm-size) !default; -$md-size: var(--md-size) !default; -$lg-size: var(--lg-size) !default; -$xl-size: var(--xl-size) !default; -$xxl-size: var(--xxl-size) !default; +$xs-size: var(--cmp-xs-size) !default; +$sm-size: var(--cmp-sm-size) !default; +$md-size: var(--cmp-md-size) !default; +$lg-size: var(--cmp-lg-size) !default; +$xl-size: var(--cmp-xl-size) !default; +$xxl-size: var(--cmp-xxl-size) !default; // Font Sizes. $base-font-size: $md-size !default; @@ -89,17 +90,17 @@ $breakpoint1: 878px !default; // Custom one. $breakpoint2: 1260px !default; // Custom one. // Paragraphs. -$lead-para-font-size: fibFuncs.font_size(2) !default; +$lead-para-font-size: fibFuncs.size(2) !default; // Headings. $h1-font-size: $xxl-size !default; $h2-font-size: $xl-size !default; -$h3-font-size: fibFuncs.font_size(5) !default; +$h3-font-size: fibFuncs.size(5) !default; $h4-font-size: $lg-size !default; $h5-font-size: $base-font-size !default; $h6-font-size: $small-font-size !default; $heading-line-height: $xs-line-height !default; -$heading-spacing: $extra-small-letter-spacing !default; +$heading-spacing: $small-letter-spacing !default; $heading-color: $medium-gray !default; $h1-border-width: 36% !default; @@ -129,7 +130,7 @@ $hightlight-code-color: #1f7199 !default; $hightlight-meta-string-color: #4d99bf !default; // Abbr & Acronym. -$special-char-font-size: fibFuncs.font_size(-5, false, em) !default; +$special-char-font-size: fibFuncs.size(-5, false, em) !default; // Mark. $mark-bg-color: rgb(255, 255, 115) !default; @@ -137,12 +138,13 @@ $mark-bg-color: rgb(255, 255, 115) !default; // Blockquote. $bquote-bg-color: $dim-gray !default; $bquote-color: $medium-gray !default; -$bquote-content-font-family: $heading-font-family !default; -$bquote-title-font-family: $body-font-family !default; +$bquote-content-font-family: $body-font-family !default; +$bquote-title-font-family: $heading-font-family !default; +$cite-font-family: $small-text-font-family !default; $cite-font-size: $small-font-size !default; // Time. -$time-font-family: $heading-font-family !default; +$time-font-family: $small-text-font-family !default; $time-font-size: 0.8em !default; // Horizontal lines. @@ -151,15 +153,15 @@ $hr-separator-color: $brand-color !default; $hr-separator-size: 10px !default; // Labels. -$label-font-family: $heading-font-family !default; +$label-font-family: $small-text-font-family !default; $label-font-size: $small-font-size !default; $label-letter-spacing: $medium-letter-spacing !default; $label-color: $medium-gray !default; // Inputs. -$input-font-family: $heading-font-family !default; +$input-font-family: $small-text-font-family !default; $input-font-size: $sm-size !default; -$input-padding: fibFuncs.font_size(-7) !default; +$input-padding: fibFuncs.size(-7) !default; $input-border-color: $light-gray !default; $input-line-height: $small-line-height !default; $input-text-color: $medium-gray !default; @@ -168,9 +170,9 @@ $input-text-color: $medium-gray !default; $form-control-bg-color: $light-gray !default; // Buttons. -$button-font-family: $heading-font-family !default; +$button-font-family: $small-text-font-family !default; $button-font-size: $small-font-size !default; -$button-padding: fibFuncs.font_size(-7) fibFuncs.font_size(-3) !default; +$button-padding: fibFuncs.size(-7) fibFuncs.size(-3) !default; $button-text-color: $white !default; $button-bg-color: $brand-color !default; @@ -180,135 +182,47 @@ $icon-size: 16px !default; // Figures. $figure-caption-font-size: $small-font-size !default; $figure-caption-color: $gray !default; -$figure-caption-font-family: $heading-font-family !default; +$figure-caption-font-family: $small-text-font-family !default; // Iframes. $iframe-min-height: 400px !default; // Tables. $table-font-size: $sm-size !default; -$table-font-family: $heading-font-family !default; +$table-font-family: $small-text-font-family !default; $table-caption-font-size: $small-font-size !default; $table-caption-color: $gray !default; -$table-caption-font-family: $heading-font-family !default; +$table-caption-font-family: $small-text-font-family !default; $table-line-height: $medium-line-height !default; // Sub. -$sub-content-font-family: $heading-font-family !default; -$sub-title-font-family: $body-font-family !default; +$sub-content-font-family: $body-font-family !default; +$sub-title-font-family: $heading-font-family !default; $sub-bg-color: $success !default; -// Animations Speed. -$medium-speed: 0.5s !default; -$fast-speed: 0.25s !default; -$snail-speed: 2s !default; - -// Specific Variables. -$blur: 5px !default; - -// App. -$app-main-min-height: 700px !default; - -// Header Component. -$header-height: fibFuncs.font_size(11) !default; -$header-color: rgb(232, 232, 232) !default; - -// Logo Component. -$logo-font-family: $logo-font-family !default; -$logo-font-size: $lg-size !default; -$logo-rotate-speed: 5s !default; -$logo-name-width: fibFuncs.font_size(16) !default; - -// Navigation Component. -$nav-font-family: $heading-font-family !default; -$nav-font-size: fibFuncs.font_size(-3) !default; -$nav-link-spacing: fibFuncs.font_size(-4) !default; -$nav-link-icon-spacing: fibFuncs.font_size(-20) !default; -$nav-active-border-width: 4px !default; - -// Footer Component. -$footer-font-family: $heading-font-family !default; -$footer-font-size: fibFuncs.font_size(-5) !default; -$footer-credits-font-size: fibFuncs.font_size(-9) !default; -$footer-height: fibFuncs.font_size(16) !default; -$footer-color: $brand-gray !default; - -// Page Main Component. -$page-content-top: fibFuncs.font_size(14) !default; -$page-content-bottom: fibFuncs.font_size(19) !default; -$continue-reading-font-family: $heading-font-family !default; -$continue-reading-color: $gray !default; -$continue-reading-font-size: $small-font-size !default; - -// Article. -$article-meta-font-size: $small-font-size !default; -$article-meta-color: $gray !default; -$article-meta-font-family: $heading-font-family !default; -$article-author-pic-opacity: 0.8 !default; -$article-author-role-font-size: fibFuncs.font_size(-6) !default; -$article-author-role-font-color: $dim-gray !default; -$article-author-left-offset: fibFuncs.font_size(21, true) !default; -$article-author-admin-badge-color: $yellow-green !default; -$article-author-guest-badge-color: $gray !default; -$author-pic-default-width: 30px !default; -$author-pic-large-screen-width: fibFuncs.font_size(15) !default; -$comment-textarea-minheight: 75px !default; - -// Widgets. -$widget-bg-color: $dim-gray !default; - -// Table Of Contents. -$toc-bg-color: $widget-bg-color !default; - -// Ribbons. -$ribbon-height: fibFuncs.font_size(5) !default; -$ribbon-small-screen-height: fibFuncs.font_size(4) !default; -$ribbon-bg: $purple-ribbon !default; -$ribbon-color: $white !default; -$ribbon-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !default; - -$widget-ribbon-height: $xl-size !default; -$widget-ribbon-bg: $light-gray !default; -$widget-ribbon-color: $medium-gray !default; - -$rss-ribbon-bg: $light-gray !default; -$rss-ribbon-color: $gray !default; - // Content scale. $content-scale-height: 2px !default; $content-scale-bg: $light-gray !default; $content-scale-index: 500 !default; $scale-progress-bg: $brand-color !default; -// Graceful image rendering component. -$image-min-height: 180px !default; -$image-bg-color: $dim-gray !default; -$image-icon-color: darken($light-gray, 15%) !default; -$image-text-font-family: $heading-font-family !default; -$image-text-font-size: $small-font-size !default; -$image-text-color: darken($light-gray, 15%) !default; - -// Progress component. -$progress-square-bg-color: $brand-light !default; -$progress-square-bg-color2: $brand-color !default; -$progress-square-small-width: fibFuncs.font_size(-4) !default; -$progress-square-large-width: $sm-size !default; -$progress-square-border-radius: 2px !default; +// Widgets. +$widget-bg-color: $dim-gray !default; +$widget-ribbon-height: $xl-size !default; +$widget-ribbon-bg: $light-gray !default; +$widget-ribbon-color: $medium-gray !default; // Card component. $card-header-bg: $dark-gray !default; -$card-title-font-size: $sm-size !default; +$card-title-font-family: $small-text-font-family !default; +$card-title-font-size: $xs-size !default; $card-title-color: $dim-gray !default; -$card-footer-font-family: $heading-font-family !default; +$card-footer-font-family: $small-text-font-family !default; $card-footer-font-size: $sm-size !default; $card-footer-color: $gray !default; $card-spacing: $xxl-size !default; -// Project Card. -$project-card-image-height: 240px !default; -$person-card-image-height: 360px !default; - -// Utility Classes Variables. -$drop-cap-font-size: 300% !default; -$drop-cap-bg-color: $brand-color !default; -$drop-cap-color: $white !default; +// Animations Speed. +$medium-speed: 0.5s !default; +$fast-speed: 0.25s !default; +$snail-speed: 2s !default; \ No newline at end of file diff --git a/src/scss/base/_widget.scss b/src/scss/base/_widget.scss new file mode 100644 index 0000000..9936e82 --- /dev/null +++ b/src/scss/base/_widget.scss @@ -0,0 +1,91 @@ +@use 'variables' as fibVars; +@use 'funcs' as fibFuncs; +@use 'mixins' as fibMixins; + +.cmp__widget { + --cmp-widget-body-padding: #{fibVars.$small-padding}; + + margin-bottom: fibVars.$xl-size; + @include fibMixins.config_container(fibVars.$widget-bg-color); + + .cmp__widget-header { + padding-top: fibVars.$md-size; + } + + .cmp__widget-body { + padding: var(--cmp-widget-body-padding); + + ul, ol, menu { + margin-bottom: 0; + + li { + margin-bottom: fibFuncs.size(-7); + } + + &.cmp__inline-list { + padding-left: 0; + + li { + display: inline-block; + margin-right: fibFuncs.size(-15); + + &:before { + display: none; + } + } + } + } + } +} + +// Widget Ribbon. +.cmp__widget-ribbon { + display: inline-block; + min-width: fibFuncs.size(23); + + .cmp__widget-ribbon-content { + @include fibMixins.flex_init; + width: 100%; + position: relative; + left: -6px; + height: fibVars.$widget-ribbon-height; + line-height: fibVars.$widget-ribbon-height; + padding-left: fibVars.$md-size; + + @include fibMixins.set_text_font($family: fibVars.$heading-font-family); + font-weight: bold; + + background-color: fibVars.$widget-ribbon-bg; + color: fibVars.$widget-ribbon-color; + + &::before { + content: ''; + position: absolute; + top: -6px; + left: 0; + height: 3px; + + border: solid 3px darken(fibVars.$widget-ribbon-bg, 20%); + border-left-color: transparent; + border-top-color: transparent; + } + + &::after { + content: ''; + position: relative; + right: calc(-1 * #{fibVars.$xl-size}); + height: fibVars.$xl-size; + + border: calc(#{fibVars.$xl-size} / 2) solid fibVars.$widget-ribbon-bg; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + } + + span { + flex-grow: 1; + background-color: fibVars.$medium-gray; + @include fibMixins.inset_text_shadow(); + } + } +} \ No newline at end of file diff --git a/src/scss/export.scss b/src/scss/export.scss new file mode 100644 index 0000000..586f11c --- /dev/null +++ b/src/scss/export.scss @@ -0,0 +1,2 @@ +@use 'base/export' as fibBase; +@use 'site/export' as fibSite; diff --git a/src/scss/site/_animations.scss b/src/scss/site/_animations.scss new file mode 100644 index 0000000..7ded1df --- /dev/null +++ b/src/scss/site/_animations.scss @@ -0,0 +1,23 @@ +@keyframes arrow-move-left { + 0% { + left: 0; + } + 50% { + left: -3px; + } + 100% { + left: 0; + } +} + +@keyframes arrow-move-right { + 0% { + right: 0; + } + 50% { + right: -3px; + } + 100% { + right: 0; + } +} \ No newline at end of file diff --git a/src/scss/site/_article.scss b/src/scss/site/_article.scss new file mode 100644 index 0000000..9fdd9c6 --- /dev/null +++ b/src/scss/site/_article.scss @@ -0,0 +1,366 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +// Article Meta Info. +.cmp__article-meta { + position: relative; + @include fibMixins.flex_init($column: true, $wrap: true); + + font: { + size: fibSiteVars.$article-meta-font-size; + family: fibSiteVars.$article-meta-font-family; + } + + color: fibSiteVars.$article-meta-color; + + ul, li { + @include fibMixins.no_spacing; + list-style: none; + display: inline; + } + + a { + border-bottom: none; + } + + > * { + @include fibMixins.flex_init($ver: true); + margin: { + bottom: 5px; + right: 0; + }; + + cmp-icon { + margin-right: fibFuncs.size(-14); + } + } +} + +// Page title. +.cmp__page-title { + margin: { + top: fibVars.$xl-size; + bottom: fibFuncs.size(17); + }; + + h1, h2, h3, h4, h5, h6 { + margin: { + top: 0; + bottom: 0; + }; + } + + h1 { + position: relative; + + font-size: fibFuncs.size(9); + text-transform: uppercase; + letter-spacing: fibVars.$large-letter-spacing; + word-spacing: fibFuncs.size(-10); + + color: fibVars.$brand-gray; + + &::after { + display: block; + content: ''; + width: fibVars.$h1-border-width; + height: 5px; + margin-top: fibVars.$xl-size; + background-color: fibVars.$brand-gray; + } + + &:hover::before { + left: calc(#{fibVars.$h1-border-width} + 10px); + } + + &.cmp__has-icon { + @include fibMixins.flex_init($ver: true, $wrap: true); + + cmp-icon { + width: fibVars.$xl-size; + height: fibVars.$xl-size; + margin-right: fibVars.$xs-size; + } + + span { + min-width: calc(100% - #{fibVars.$xl-size} - #{fibVars.$xs-size}); + } + } + } + + h4 { + display: inline; + padding-bottom: fibVars.$xs-size; + + text-transform: uppercase; + letter-spacing: fibVars.$medium-letter-spacing; + + color: fibVars.$brand-gray; + } +} + +// Author Info. +.cmp__article-author { + a { + @include fibMixins.flex_init($ver: true, $align: flex-end); + + // Author Photo. + .cmp__article-author-pic { + border-radius: 50%; + opacity: fibSiteVars.$article-author-pic-opacity; + width: fibSiteVars.$author-pic-default-width; + } + + span { + margin-left: fibFuncs.size(-14); + + &.cmp__article-author-role { + position: relative; + top: -3px; + margin-top: 0; + padding: 1px 5px; + + font-size: fibSiteVars.$article-author-role-font-size; + text-transform: uppercase; + letter-spacing: fibVars.$medium-letter-spacing; + + color: fibVars.$white; + background-color: fibSiteVars.$article-author-admin-badge-color; + border-radius: fibVars.$border-radius; + + &.cmp__article-author-guest { + background-color: fibSiteVars.$article-author-guest-badge-color; + } + } + } + } +} + +// Posted Date. +.cmp__article-date { + span { + font-variant: small-caps; + } +} + +// Total comments. +.cmp__article-total-comments { + a { + @include fibMixins.flex_init($ver: true); + } +} + +// Share controls. +.cmp__article-share { + > div { + @include fibMixins.flex_init($ver: true); + } +} + +// Tags. +.cmp__article-tags { + font-style: italic; + + li { + margin-right: fibFuncs.size(-22); + + &:before { + display: none; + } + } +} + +// Article Content. +.cmp__article-content { + --cmp-link-icon-width: 14px; + --cmp-link-offset: #{fibVars.$md-size}; + --cmp-link-image: url('#{fibVars.$assets-path}/link.svg'); + + // Links. + a:link, + a:visited, + a:hover, + a:focus, + a:active { + border-bottom: none; + text-decoration: none; + transition: all fibVars.$medium-speed; + } + + a:link, + a:visited { + color: fibVars.$link-color; + } + + a:hover, + a:focus, + a:active { + color: fibVars.$link-hover-color; + } + + h2, h3, h4, h5, h6 { + + &:hover { + a::before { + opacity: 1; + } + } + + a { + position: relative; + display: inline-flex; + align-items: center; + + &::before { + content: ''; + position: absolute; + left: calc(-1 * var(--cmp-link-offset)); + width: var(--cmp-link-icon-width); + height: var(--cmp-link-icon-width); + opacity: 0; + background: var(--cmp-link-image) no-repeat; + transition: opacity fibVars.$medium-speed; + } + } + + a:link, + a:visited { + color: inherit; + } + + + a:hover, + a:focus, + a:active { + color: fibVars.$brand-color; + } + } + + // Figure element. + figure { + // Full width. + &.cmp__figure-full { + max-width: 100%; + @include fibMixins.horizontal-center(); + + figcaption, caption { + @include fibMixins.set_hor_margin(fibVars.$lg-size); + } + + img, .cmp__table-wrapper, iframe { + border-radius: 0; + } + } + } + + // Table of contents. + .cmp__toc { + color: fibVars.$gray; + + ol li a { + color: inherit; + transition: color fibVars.$medium-speed; + + &:hover { + color: fibVars.$brand-color; + } + } + } + + // Lead Para styles. + > p:first-of-type { + font-size: fibVars.$lead-para-font-size; + margin-top: fibVars.$md-size; + } + + // Article Main Poster Image. + .cmp__article-poster { + @include fibMixins.set_hor_margin(0); + margin-top: fibFuncs.size(-14); + } + + // Article element. + .cmp__page-element { + margin: { + top: fibVars.$md-size; + bottom: fibVars.$lg-size; + }; + } +} + +// Article Footer. +.cmp__article-footer { + @include fibMixins.flex_init($justify: flex-end); +} + +// Contine reading link. +a.cmp__article-continue-reading { + @include fibMixins.flex_init($inline: true, $ver: true); + text-align: right; + + font: { + family: fibSiteVars.$continue-reading-font-family; + size: fibSiteVars.$continue-reading-font-size; + } + letter-spacing: fibVars.$medium-letter-spacing; + text-transform: uppercase; + + color: fibSiteVars.$continue-reading-color; + + &:after { + position: relative; + content: '→'; + margin-left: fibFuncs.size(-20); + } + + &:hover { + color: fibVars.$brand-color; + } + + &:hover:after { + animation: arrow-move-right fibVars.$medium-speed linear infinite; + } +} + +// Share Button +button.cmp__share-it-btn { + padding: fibFuncs.size(-20); + margin-left: fibFuncs.size(-12); + font-size: fibFuncs.size(-5); + background: none; + color: fibSiteVars.$article-meta-color; + + &:focus, &:active, &:hover { + background-color: transparent; + color: fibVars.$brand-color; + } +} + +// In small screens blockquote, cmp__responsive applied elements should not have +// either border radius or shadow. +blockquote { + &.cmp__responsive { + @include fibMixins.no_shadow_radius; + } +} + +.cmp__responsive { + max-width: 100%; + @include fibMixins.set_hor_margin(0); + + &.cmp__toc, + &.cmp__widget, + &.cmp__sub { + @include fibMixins.no_shadow_radius; + } + + figcaption, caption { + @include fibMixins.set_hor_margin(fibVars.$lg-size); + } + + img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card { + @include fibMixins.no_shadow_radius; + } +} \ No newline at end of file diff --git a/src/scss/site/_carousel.scss b/src/scss/site/_carousel.scss new file mode 100644 index 0000000..1c4163f --- /dev/null +++ b/src/scss/site/_carousel.scss @@ -0,0 +1,33 @@ +@use '../base/variables' as fibVars; +@use '../base/mixins' as fibMixins; + +.cmp__carousel-post { + @include fibMixins.flex_init($align: flex-start); + + > * { + min-width: 50%; + } + + header { + position: relative; + + h4 { + position: absolute; + top: fibVars.$md-size; + left: fibVars.$md-size; + color: fibVars.$white; + } + + figure { + margin: 0; + } + } + + main { + padding: { + top: fibVars.$md-size; + left: fibVars.$md-size; + } + color: fibVars.$gray; + } +} \ No newline at end of file diff --git a/src/scss/site/_color-bars.scss b/src/scss/site/_color-bars.scss new file mode 100644 index 0000000..171bb4d --- /dev/null +++ b/src/scss/site/_color-bars.scss @@ -0,0 +1,32 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; + +.cmp__color-bars { + --cmp-bar-height: #{fibFuncs.size(-2)}; + --cmp-bar-width: #{fibFuncs.size(-10)}; + + display: flex; + position: absolute; + top: 0; + left: fibVars.$lg-size; + height: var(--cmp-bar-height); + + .cmp__color-bar { + width: var(--cmp-bar-width); + height: 100%; + position: relative; + margin-right: 1px; + background-color: fibVars.$light-gray; + + &:after { + position: absolute; + content: ''; + bottom: calc(-1 * var(--cmp-bar-width) - 1px); + left: 0; + width: var(--cmp-bar-width); + height: var(--cmp-bar-width); + background-color: inherit; + transform: rotate(45deg); + } + } +} \ No newline at end of file diff --git a/src/scss/site/_dropcap.scss b/src/scss/site/_dropcap.scss new file mode 100644 index 0000000..0b1ed6c --- /dev/null +++ b/src/scss/site/_dropcap.scss @@ -0,0 +1,25 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use 'variables' as fibSiteVars; + +// Makes the first big and stand out. +.cmp__drop-cap:first-letter { + float: left; + + padding: fibFuncs.size(-7); + margin: { + top: fibFuncs.size(-10); + right: fibFuncs.size(-10); + }; + + font: { + size: fibSiteVars.$drop-cap-font-size; + weight: bold; + } + line-height: fibVars.$xs-line-height; + + background-color: fibSiteVars.$drop-cap-bg-color; + color: fibSiteVars.$drop-cap-color; + border-radius: fibVars.$border-radius; + box-shadow: -1px -1px 10px fibVars.$brand-dark inset; +} \ No newline at end of file diff --git a/src/scss/site/_export.scss b/src/scss/site/_export.scss new file mode 100644 index 0000000..c448f20 --- /dev/null +++ b/src/scss/site/_export.scss @@ -0,0 +1,22 @@ +@use 'site'; +@use 'header'; +@use 'footer'; +@use 'article'; +@use 'toc'; +@use 'spiral'; +@use 'subscribe'; +@use 'go-top'; +@use 'color-bars'; +@use 'page-loader'; +@use 'pagination'; +@use 'ribbon'; +@use 'carousel'; +@use 'dropcap'; +@use 'animations'; +@use 'media'; + +@use './pages/home'; +@use './pages/posts'; +@use './pages/detail'; +@use './pages/contact'; +@use './pages/about'; diff --git a/src/scss/site/_footer.scss b/src/scss/site/_footer.scss new file mode 100644 index 0000000..cea46d3 --- /dev/null +++ b/src/scss/site/_footer.scss @@ -0,0 +1,39 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +.cmp__blog-footer { + position: relative; + height: fibSiteVars.$footer-height; + @include fibMixins.flex_init($column: true); + padding: fibVars.$xs-size fibVars.$md-size; + + font-family: fibSiteVars.$footer-font-family; + letter-spacing: fibVars.$large-letter-spacing; + text-transform: uppercase; + + color: fibSiteVars.$footer-color; + + section { + &.cmp__footer-left { + @include fibMixins.flex_init(); + font-size: fibSiteVars.$footer-credits-font-size; + + > div { + flex-grow: 1; + + &:last-child { + margin-left: fibFuncs.size(-14); + text-align: right; + } + } + } + + &.cmp__footer-right { + @include fibMixins.flex_init($center: true); + margin-top: fibVars.$sm-size; + font-size: fibSiteVars.$footer-font-size; + } + } +} \ No newline at end of file diff --git a/src/scss/site/_go-top.scss b/src/scss/site/_go-top.scss new file mode 100644 index 0000000..551c55f --- /dev/null +++ b/src/scss/site/_go-top.scss @@ -0,0 +1,15 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; + +a.cmp__go-top { + --cmp-border-width: #{fibFuncs.size(0)}; + --cmp-border-color: #{fibVars.$light-gray}; + + position: absolute; + bottom: 0; + left: calc(50% - var(--cmp-border-width)); + border: solid var(--cmp-border-width) var(--cmp-border-color); + border-left-color: transparent; + border-right-color: transparent; + border-top: none; +} \ No newline at end of file diff --git a/src/scss/site/_header.scss b/src/scss/site/_header.scss new file mode 100644 index 0000000..7820bbe --- /dev/null +++ b/src/scss/site/_header.scss @@ -0,0 +1,213 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +// Page Header. +.cmp__blog-header { + @include fibMixins.flex_init($ver: true); + + height: fibSiteVars.$header-height; + padding: 0 fibVars.$md-size; + + color: fibSiteVars.$header-color; +} + +// Blog Info. +.cmp__blog-info { + @include fibMixins.flex_init($column: true, $hor: true); + + // Separator. + .cmp__separator { + display: none; + margin: 0 fibVars.$sm-size; + height: fibFuncs.size(5); + border-right: solid 1px; + } +} + +// Logo Component. +a.cmp__blog-logo { + @include fibMixins.flex_init($ver: true); + border-bottom: none; + color: fibSiteVars.$header-color; + + &:hover { + .cmp__blog-name { + letter-spacing: fibVars.$extra-large-letter-spacing; + } + } + + // Logo Name. + .cmp__blog-name { + position: relative; + width: fibSiteVars.$logo-name-width; + margin-left: fibFuncs.size(-14); + top: -5px; + + font: { + family: fibVars.$logo-font-family; + size: fibSiteVars.$logo-font-size; + } + line-height: fibVars.$xs-line-height; + letter-spacing: fibVars.$large-letter-spacing; + + transition: all fibVars.$medium-speed; + } +} + +// Tag Line. +.cmp__blog-tag-line { + position: absolute; + top: fibFuncs.size(6); + left: fibFuncs.size(13); + font-size: fibFuncs.size(-5); +} + +// Page Navigation Component. +.cmp__blog-nav { + @include fibMixins.flex_init($ver: true, $justify: flex-end); + flex-grow: 1; + height: 100%; + margin-left: var(--cmp-lg-size); + + font-family: fibSiteVars.$nav-font-family; + + // Nav List. + ul { + height: 100%; + @include fibMixins.flex_init($ver: true); + @include fibMixins.no_spacing; + + list-style: none; + + // Nav List Item. + li { + height: 100%; + position: relative; + + &:before { + display: none; + } + + &:last-child { + margin-right: 0; + } + + // Active State. + &.cmp__nav-active { + a::before { + content: ''; + + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + + border-top: solid fibSiteVars.$nav-active-border-width fibSiteVars.$header-color; + } + } + + &:not(.cmp__hamburger-link) { + display: none; + } + + &.cmp__hamburger-link { + padding: 0; + + .cmp__nav-link { + position: relative; + + .cmp__hidden-menu { + position: absolute; + cursor: pointer; + width: fibVars.$lg-size; + height: fibVars.$lg-size; + opacity: 0; + } + } + } + + // Nav Link. + a { + position: relative; + z-index: 1; + @include fibMixins.flex_init($ver: true); + height: 100%; + padding: 0 fibSiteVars.$nav-link-spacing; + + font-size: fibSiteVars.$nav-font-size; + line-height: fibVars.$xs-line-height; + letter-spacing: fibVars.$large-letter-spacing; + + border-bottom: none; + transition: all fibVars.$medium-speed; + + &:hover { + background-color: darken(fibVars.$brand-bg, 5%); + color: fibVars.$dim-gray; + } + + cmp-icon { + margin-right: fibSiteVars.$nav-link-icon-spacing; + } + + .cmp__nav-link-text { + display: none; + line-height: fibVars.$xs-line-height; + } + } + + // Search form. + .cmp__search-form { + @include fibMixins.flex_init($ver: true); + height: 100%; + + input { + display: none; + padding: 0 0 fibFuncs.size(-14); + + font-size: fibVars.$small-font-size; + line-height: fibVars.$xs-line-height; + + border: none; + border-radius: 0; + border-bottom: solid 1px fibSiteVars.$header-color; + color: fibSiteVars.$header-color; + background: transparent; + + &:focus, &:active { + outline: none; + border-color: fibSiteVars.$header-color; + } + + &::placeholder { + color: fibSiteVars.$header-color; + } + } + } + } + } + + // When the search is active show the search textbox. + &.cmp__search-active { + .cmp__search-link { + display: flex; + + .cmp__search-form { + input { + display: block; + } + } + } + + ul li:not(:first-child) { + display: none; + } + + ul li:first-child { + width: 100%; + } + } +} \ No newline at end of file diff --git a/src/scss/site/_media.scss b/src/scss/site/_media.scss new file mode 100644 index 0000000..1c9f4fb --- /dev/null +++ b/src/scss/site/_media.scss @@ -0,0 +1,299 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +@media only screen and (min-width: fibVars.$mobile) { + + // Navigation. + .cmp__blog-nav { + ul { + li { + &:not(.cmp__hamburger-link) { + display: flex; + } + + &.cmp__hamburger-link { + display: none; + } + + a { + font-size: fibVars.$xs-size; + } + } + } + } + + // Responsive Article Content. + blockquote { + &.cmp__responsive { + @include fibMixins.set_shadow_radius; + } + } + + .cmp__responsive { + @include fibMixins.set_hor_margin(fibVars.$lg-size); + + &.cmp__toc, + &.cmp__widget, + &.cmp__sub { + @include fibMixins.set_shadow_radius; + } + + figcaption, caption { + @include fibMixins.set_hor_margin(0); + } + + img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card { + @include fibMixins.set_shadow_radius; + } + } +} + +@media only screen and (min-width: fibVars.$tablet) { + + // Blog Logo. + .cmp__blog-info { + @include fibMixins.flex_update($column: false); + + .cmp__separator { + display: block; + } + } + + // Logo changes. + a.cmp__blog-logo { + .cmp__blog-name { + position: static; + } + } + + // Tag line changes. + .cmp__blog-tag-line { + font-size: fibVars.$xs-size; + position: relative; + left: 0; + top: 3px; + } + + // Navigation. + .cmp__blog-nav { + ul li .cmp__search-form input { + display: block; + } + } + + // Article Meta Changes. + .cmp__blog-main { + --cmp-border-radius: #{fibFuncs.size(10)}; + } + + // Page title. + .cmp__page-title { + h1 { + &::after { + height: 6px; + } + } + } + + // Article Meta. + .cmp__article-meta { + @include fibMixins.flex_update($column: false); + + > * { + min-height: 30px; + margin-bottom: 0; + } + + > *:not(:last-child):after { + content: '|'; + @include fibMixins.set_hor_margin(fibVars.$xs-size); + color: fibVars.$light-gray; + } + } + + // Author. + .cmp__article-author { + a { + align-items: center; + + span { + &.cmp__article-author-role { + position: static; + } + } + } + + &:after { + content: '|'; + color: fibVars.$light-gray; + @include fibMixins.set_hor_margin(fibVars.$xs-size); + } + } + + // Subscribe link changes. + a.cmp__subscribe { + --cmp-ribbon-offset: 6px; + padding-bottom: fibVars.$lg-size; + width: fibVars.$xxl-size; + right: 5%; + + div { + line-height: fibVars.$small-line-height; + + span { + font-size: fibVars.$md-size; + + &:after { + $border: calc(#{fibVars.$xxl-size} / 2) solid fibSiteVars.$rss-ribbon-bg; + + border: { + left: $border; + right: $border; + bottom: fibVars.$lg-size solid transparent; + } + } + } + } + } + + // TOC Ribbon. + .cmp__ribbon { + --cmp-ribbon-height: #{fibSiteVars.$ribbon-height}; + font-size: fibVars.$small-font-size; + } + + // Responsive Article Content. + .cmp__auto-layout > *, .cmp__responsive { + @include fibMixins.set_hor_margin(fibVars.$xl-size); + } + + .cmp__responsive-flex { + @include fibMixins.flex_init($justify: space-between); + + > * { + flex-grow: 1; + width: 47%; + max-width: 47%; + } + } + + // Footer. + .cmp__blog-footer { + @include fibMixins.flex_update($column: false); + + > section { + flex-grow: 1; + } + + section { + &.cmp__footer-left { + @include fibMixins.flex_update($column: true); + + > div { + flex-grow: unset; + + &:last-child { + margin-left: 0; + text-align: left; + } + } + } + + &.cmp__footer-right { + justify-content: flex-end; + margin-top: 0; + font-size: fibSiteVars.$footer-font-size; + } + } + } + + // Ribbon. + .cmp__ribbon-container { + .cmp__ribbon { + width: 40%; + } + } + + // Go top. + a.cmp__go-top { + --cmp-border-width: #{fibFuncs.size(3)}; + } + + // Color bars. + .cmp__color-bars { + --cmp-bar-height: #{fibFuncs.size(0)}; + --cmp-bar-width: #{fibFuncs.size(-7)}; + left: fibFuncs.size(18); + } +} + +@media only screen and (min-width: fibVars.$breakpoint1) { + + // Responsive Article Content. + .cmp__auto-layout > *, .cmp__responsive { + max-width: fibVars.$container-width; + @include fibMixins.horizontal-center; + } +} + +@media only screen and (min-width: fibVars.$desktop) { + + // Navigation. + .cmp__blog-nav { + ul { + li { + a { + .cmp__nav-link-text { + display: block; + } + } + } + } + } + + // Blog content. + .cmp__blog-main { + margin: 0 fibVars.$xl-size; + } + + // Article Content. + .cmp__article-content { + --cmp-link-icon-width: 24px; + --cmp-link-offset: #{fibVars.$xl-size}; + --cmp-link-image: url('#{fibVars.$assets-path}/link-big.svg'); + } + + // Display spiral. + .cmp__spiral { + display: block; + } +} + +@media only screen and (min-width: fibVars.$breakpoint2) { + .cmp__article-author { + position: absolute; + top: fibFuncs.size(8, true); + left: fibSiteVars.$article-author-left-offset; + + &:after { + display: none; + } + + a { + flex-direction: column; + + .cmp__article-author-pic { + width: fibSiteVars.$author-pic-large-screen-width; + } + + span { + margin: { + top: fibFuncs.size(-14); + left: 0; + }; + } + } + } +} \ No newline at end of file diff --git a/src/scss/site/_page-loader.scss b/src/scss/site/_page-loader.scss new file mode 100644 index 0000000..b11a15e --- /dev/null +++ b/src/scss/site/_page-loader.scss @@ -0,0 +1,35 @@ +@use '../base/variables' as fibVars; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +.cmp__page-loader { + position: fixed; + z-index: 200; + top: 0; + left: 0; + width: 100%; + min-height: 100vh; + opacity: 1; + transition: all fibVars.$medium-speed ease-in; + background: url('#{fibVars.$assets-path}/background-dark.png') fibVars.$brand-bg; + + .cmp__loader-container { + @include fibMixins.flex_init($column: true, $center: true); + min-height: 100vh; + + .cmp__loader-logo-image { + background-image: url('data:image/svg+xml;utf8,'); + width: fibSiteVars.$loader-image-size; + height: fibSiteVars.$loader-image-size; + } + + .cmp__loader-logo-text { + font: { + size: fibVars.$xxl-size; + family: fibVars.$logo-font-family; + } + letter-spacing: fibVars.$medium-letter-spacing; + color: fibVars.$dim-gray; + } + } +} \ No newline at end of file diff --git a/src/scss/site/_pagination.scss b/src/scss/site/_pagination.scss new file mode 100644 index 0000000..42bc88a --- /dev/null +++ b/src/scss/site/_pagination.scss @@ -0,0 +1,48 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; + +.cmp__pagination { + @include fibMixins.flex_init($ver: true); + margin-top: fibVars.$lg-size; + @include fibMixins.set_text_font(); + color: fibVars.$gray; + + > * { + flex-grow: 1; + + a { + @include fibMixins.flex_init($inline: true, $ver: true); + } + } + + :first-child { + a { + &:before { + position: relative; + content: '≪'; + margin-right: fibFuncs.size(-20); + } + + &:hover:before { + animation: arrow-move-left fibVars.$medium-speed linear infinite; + } + } + } + + :last-child { + text-align: right; + + a { + &:after { + position: relative; + content: '≫'; + margin-left: fibFuncs.size(-20); + } + + &:hover:after { + animation: arrow-move-right fibVars.$medium-speed linear infinite; + } + } + } +} \ No newline at end of file diff --git a/src/scss/site/_ribbon.scss b/src/scss/site/_ribbon.scss new file mode 100644 index 0000000..3a1a515 --- /dev/null +++ b/src/scss/site/_ribbon.scss @@ -0,0 +1,74 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +.cmp__ribbon { + --cmp-ribbon-height: #{fibSiteVars.$ribbon-small-screen-height}; + --cmp-ribbon-bend-height: calc(var(--cmp-ribbon-height) / 3.75); + display: inline-block; + position: relative; + height: var(--cmp-ribbon-height); + line-height: var(--cmp-ribbon-height); + padding: 0 fibVars.$xl-size; + + @include fibMixins.set_text_font($family: fibVars.$heading-font-family, $font_size: fibFuncs.size(-4)); + text-align: center; + + background: fibSiteVars.$ribbon-bg; + color: fibSiteVars.$ribbon-color; + box-shadow: fibSiteVars.$ribbon-shadow; + + &::before, &::after { + content: ""; + position: absolute; + border: solid calc(var(--cmp-ribbon-height) / 2) darken(fibSiteVars.$ribbon-bg, 10%); + z-index: -1; + bottom: calc(-1 * var(--cmp-ribbon-bend-height)); + } + + &::before { + left: calc(-1 * calc(var(--cmp-ribbon-height) - var(--cmp-ribbon-bend-height))); + border-left-color: transparent; + } + + &::after { + right: calc(-1 * calc(var(--cmp-ribbon-height) - var(--cmp-ribbon-bend-height))); + border-right-color: transparent; + } + + .cmp__ribbon-content { + text-shadow: 0 0 2px darken(fibSiteVars.$ribbon-bg, 25%); + + &::before, &::after { + content: ""; + position: absolute; + display: block; + bottom: calc(-1 * var(--cmp-ribbon-bend-height)); + border: { + style: solid; + color: darken(fibSiteVars.$ribbon-bg, 25%) transparent transparent transparent; + } + } + + &::before { + left: 0; + border-width: var(--cmp-ribbon-bend-height) 0 0 var(--cmp-ribbon-bend-height); + } + + &::after { + right: 0; + border-width: var(--cmp-ribbon-bend-height) var(--cmp-ribbon-bend-height) 0 0; + } + } +} + +.cmp__ribbon-container { + @include fibMixins.flex_init($center: true); + position: relative; + z-index: 1; + margin: { + top: 1rem; + bottom: fibFuncs.size(10); + }; +} \ No newline at end of file diff --git a/src/scss/site/_site.scss b/src/scss/site/_site.scss new file mode 100644 index 0000000..49f87e6 --- /dev/null +++ b/src/scss/site/_site.scss @@ -0,0 +1,173 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +// Makes the page take full viewport height. +html, body { + min-height: 100vh; +} + +// Site Body. +.cmp__blog { + background: url('#{fibVars.$assets-path}/background-dark.png') fibVars.$brand-bg; + + &.cmp__site-loading { + .cmp__page-loader { + display: block; + } + } + + &.cmp__site-loaded { + .cmp__page-loader { + opacity: 0; + } + + .cmp__site-container { + opacity: 1; + } + } +} + +// Site Main Container. +.cmp__site-container { + @include fibMixins.flex_init($column: true); + flex: 1 1 auto; + min-height: 100vh; + opacity: 0; + transition: opacity fibVars.$medium-speed ease-in; +} + +// Page Main Content Container. +.cmp__blog-main { + $outside-shadow-dark: darken(fibVars.$brand-bg, 15%); + $inner-shadow-width: 6px; + $inner-shadow-adjustment: 8px; + $grad-color-0: rgba(204, 204, 204, 0.4); + $grad-color-1: transparent; + + --cmp-border-radius: #{fibFuncs.size(5)}; + + position: relative; + flex: 1 1 auto; + min-height: fibSiteVars.$app-main-min-height; // Added after introducing spiral! + padding: { + top: fibSiteVars.$page-content-top; + bottom: fibSiteVars.$page-content-bottom; + }; + + background: url('#{fibVars.$assets-path}/background.png'), + url('#{fibVars.$assets-path}/svgbg.svg') no-repeat left top, + url('#{fibVars.$assets-path}/coffee-stain.png') no-repeat right bottom fibVars.$white; + + background-size: auto, 50%; + + border-radius: var(--cmp-border-radius); + box-shadow: $outside-shadow-dark -20px -5px 10px, + $outside-shadow-dark 5px -5px 10px, + $outside-shadow-dark -20px 0 100px -20px, + rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, + rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; + + &:before, &:after { + content: ''; + position: absolute; + z-index: 1; + width: $inner-shadow-width; + top: calc(var(--cmp-border-radius) - #{$inner-shadow-adjustment}); + height: calc(100% - 2 * var(--cmp-border-radius) + #{$inner-shadow-adjustment * 2}); + } + + &:before { + left: 0; + background: linear-gradient(to right, $grad-color-0, $grad-color-1); + } + + &:after { + right: 0; + background: linear-gradient(to left, $grad-color-0, $grad-color-1); + } +} + +// Page custom heading. +.cmp__section-heading { + $border-color: darken(fibVars.$dim-gray, 10%); + + position: relative; + @include fibMixins.flex_init($center: true); + margin: { + top: fibVars.$xxl-size; + bottom: fibVars.$xl-size; + }; + + color: fibVars.$gray; + + span { + @include fibMixins.flex_init($center: true); + position: relative; + height: fibVars.$widget-ribbon-height; + padding: 0 fibVars.$sm-size; + + line-height: fibVars.$widget-ribbon-height; + @include fibMixins.set_text_font($family: fibVars.$heading-font-family); + font-weight: bold; + + background-color: fibVars.$widget-ribbon-bg; + color: fibVars.$widget-ribbon-color; + z-index: 1; + + &::before, &::after { + content: ''; + position: absolute; + top: 0; + height: 100%; + + border: calc(#{fibVars.$xl-size} / 2) solid fibVars.$widget-ribbon-bg; + border-top-color: transparent; + border-bottom-color: transparent; + } + + &::before { + left: calc(-1 * #{fibVars.$xl-size}); + border-left-color: transparent; + } + + &::after { + right: calc(-1 * #{fibVars.$xl-size}); + border-right-color: transparent; + } + } + + &:after { + position: absolute; + left: 0; + top: 50%; + content: ''; + width: 100%; + border-bottom: solid 1px $border-color; + } +} + +// Page Content. +.cmp__blog-content { + margin-bottom: fibVars.$xl-size; +} + +// In small screens, make the content fluid and fixed in large. +.cmp__auto-layout { + > * { + @include fibMixins.set_hor_margin(fibVars.$lg-size); + } + + .cmp__sub { + .cmp__responsive { + @include fibMixins.set_hor_margin(0); + } + + figure { + figcaption, caption { + @include fibMixins.set_hor_margin(0); + } + } + } +} \ No newline at end of file diff --git a/src/scss/site/_spiral.scss b/src/scss/site/_spiral.scss new file mode 100644 index 0000000..0809ca3 --- /dev/null +++ b/src/scss/site/_spiral.scss @@ -0,0 +1,18 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; + +.cmp__spiral { + $spiral-width: 60px; + $spiral-offset: 27px; + + display: none; + height: calc(100% - 2 * #{fibFuncs.size(16)}); + width: $spiral-width; + position: absolute; + top: fibFuncs.size(16); + left: -1 * $spiral-offset; + background-image: url("#{fibVars.$assets-path}/spiral.png"); + background-size: $spiral-width auto; + background-repeat: repeat-y; + z-index: 100; +} \ No newline at end of file diff --git a/src/scss/site/_subscribe.scss b/src/scss/site/_subscribe.scss new file mode 100644 index 0000000..db90262 --- /dev/null +++ b/src/scss/site/_subscribe.scss @@ -0,0 +1,55 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; +@use '../base/mixins' as fibMixins; +@use 'variables' as fibSiteVars; + +a.cmp__subscribe { + --cmp-ribbon-offset: 4px; + position: absolute; + right: calc(#{fibFuncs.size(-4)} + #{fibVars.$md-size} - 4px); + top: calc(-1 * var(--cmp-ribbon-offset)); + padding: 0 0 fibVars.$md-size 0; + width: fibVars.$xl-size; + + border-bottom: none; + + z-index: 10; + + &:before { + content: ''; + position: absolute; + top: 0; + left: calc(-1 * var(--cmp-ribbon-offset)); + height: calc(var(--cmp-ribbon-offset) / 2); + border: solid calc(var(--cmp-ribbon-offset) / 2) fibVars.$gray; + border-left-color: transparent; + border-top-color: transparent; + } + + div { + display: block; + padding: fibFuncs.size(-14) 0; + line-height: 0.8; + text-align: center; + + background-image: url('#{fibVars.$assets-path}/background.png'), linear-gradient(darken(fibSiteVars.$rss-ribbon-bg, 7%) 0%, fibSiteVars.$rss-ribbon-bg 100%); + + span { + font-size: fibVars.$sm-size; + background-color: fibSiteVars.$rss-ribbon-color; + @include fibMixins.inset_text_shadow(); + } + } + + span:after { + content: ''; + width: 0; + height: 0; + position: absolute; + bottom: 0; + left: 0; + border-left: calc(#{fibVars.$xl-size} / 2) solid fibSiteVars.$rss-ribbon-bg; + border-right: calc(#{fibVars.$xl-size} / 2) solid fibSiteVars.$rss-ribbon-bg; + border-bottom: fibVars.$md-size solid transparent; + } +} \ No newline at end of file diff --git a/src/scss/site/_toc.scss b/src/scss/site/_toc.scss new file mode 100644 index 0000000..9f4743b --- /dev/null +++ b/src/scss/site/_toc.scss @@ -0,0 +1,41 @@ +@use '../base/variables' as fibVars; +@use '../base/mixins' as fibMixins; + +.cmp__toc { + padding: fibVars.$medium-padding; + margin-bottom: fibVars.$xl-size; + + @include fibMixins.config_container(fibVars.$dim-gray); + + h5 { + padding-bottom: fibVars.$xs-size; + margin-bottom: fibVars.$sm-size; + text-align: center; + + letter-spacing: fibVars.$small-letter-spacing; + text-transform: uppercase; + + color: fibVars.$brand-color; + border-bottom: solid 1px fibVars.$light-gray; + } + + ol { + padding-left: fibVars.$md-size; + + font-size: fibVars.$sm-size; + letter-spacing: fibVars.$medium-letter-spacing; + text-transform: uppercase; + + a { + color: fibVars.$gray; + + &:hover { + color: fibVars.$brand-color; + } + } + + ol { + font-size: fibVars.$xs-size; + } + } +} \ No newline at end of file diff --git a/src/scss/site/_variables.scss b/src/scss/site/_variables.scss new file mode 100644 index 0000000..5134353 --- /dev/null +++ b/src/scss/site/_variables.scss @@ -0,0 +1,75 @@ +@use '../base/variables' as fibVars; +@use '../base/funcs' as fibFuncs; + +// App. +$app-main-min-height: 900px !default; + +// Page Loader. +$loader-image-size: 120px !default; + +// Header Component. +$header-height: fibFuncs.size(11) !default; +$header-color: rgb(232, 232, 232) !default; + +// Logo Component. +$logo-font-family: fibVars.$logo-font-family !default; +$logo-font-size: fibVars.$lg-size !default; +$logo-rotate-speed: 5s !default; +$logo-name-width: fibFuncs.size(16) !default; + +// Navigation Component. +$nav-font-family: fibVars.$small-text-font-family !default; +$nav-font-size: fibFuncs.size(-3) !default; +$nav-link-spacing: fibFuncs.size(-4) !default; +$nav-link-icon-spacing: fibFuncs.size(-20) !default; +$nav-active-border-width: 4px !default; + +// Footer Component. +$footer-font-family: fibVars.$small-text-font-family !default; +$footer-font-size: fibFuncs.size(-5) !default; +$footer-credits-font-size: fibFuncs.size(-9) !default; +$footer-height: fibFuncs.size(16) !default; +$footer-color: fibVars.$brand-gray !default; + +// Page Main Component. +$page-content-top: fibFuncs.size(14) !default; +$page-content-bottom: fibFuncs.size(19) !default; +$continue-reading-font-family: fibVars.$small-text-font-family !default; +$continue-reading-color: fibVars.$gray !default; +$continue-reading-font-size: fibVars.$small-font-size !default; + +// Article. +$article-meta-font-size: fibVars.$small-font-size !default; +$article-meta-color: fibVars.$gray !default; +$article-meta-font-family: fibVars.$small-text-font-family !default; +$article-author-pic-opacity: 0.8 !default; +$article-author-role-font-size: fibFuncs.size(-6) !default; +$article-author-role-font-color: fibVars.$dim-gray !default; +$article-author-left-offset: fibFuncs.size(21, true) !default; +$article-author-admin-badge-color: fibVars.$yellow-green !default; +$article-author-guest-badge-color: fibVars.$gray !default; +$author-pic-default-width: 30px !default; +$author-pic-large-screen-width: fibFuncs.size(15) !default; +$comment-textarea-minheight: 75px !default; + +// Table Of Contents. +$toc-bg-color: fibVars.$widget-bg-color !default; + +// Ribbons. +$ribbon-height: fibFuncs.size(5) !default; +$ribbon-small-screen-height: fibFuncs.size(4) !default; +$ribbon-bg: fibVars.$purple-ribbon !default; +$ribbon-color: fibVars.$white !default; +$ribbon-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !default; + +$rss-ribbon-bg: fibVars.$light-gray !default; +$rss-ribbon-color: fibVars.$gray !default; + +// Project Card. +$project-card-image-height: 240px !default; +$person-card-image-height: 360px !default; + +// Utility Classes Variables. +$drop-cap-font-size: 300% !default; +$drop-cap-bg-color: fibVars.$brand-color !default; +$drop-cap-color: fibVars.$white !default; \ No newline at end of file diff --git a/scss/_about.scss b/src/scss/site/pages/_about.scss similarity index 77% rename from scss/_about.scss rename to src/scss/site/pages/_about.scss index ae49ce0..917351e 100644 --- a/scss/_about.scss +++ b/src/scss/site/pages/_about.scss @@ -1,6 +1,7 @@ -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; -@use 'mixins' as fibMixins; +@use '../../base/variables' as fibVars; +@use '../../base/funcs' as fibFuncs; +@use '../../base/mixins' as fibMixins; +@use '../variables' as fibSiteVars; // Social Links. .cmp__social-widget { @@ -10,7 +11,7 @@ top: fibVars.$md-size; bottom: fibVars.$md-size; }; - @include fibMixins.set_heading_font; + @include fibMixins.set_text_font; color: fibVars.$gray; @@ -26,7 +27,7 @@ } cmp-icon { - margin-right: fibFuncs.font_size(-10); + margin-right: fibFuncs.size(-10); transition: transform fibVars.$fast-speed; } @@ -37,21 +38,21 @@ .separator { display: none; - margin: 0 fibFuncs.font_size(-7); + margin: 0 fibFuncs.size(-7); } } // Project card. .cmp__project-card { .cmp__card-image { - height: fibVars.$project-card-image-height; + height: fibSiteVars.$project-card-image-height; } } // Person Card. .cmp__person-card { .cmp__card-image { - height: fibVars.$person-card-image-height; + height: fibSiteVars.$person-card-image-height; } } diff --git a/scss/_contact.scss b/src/scss/site/pages/_contact.scss similarity index 83% rename from scss/_contact.scss rename to src/scss/site/pages/_contact.scss index f813b8c..cc1e5be 100644 --- a/scss/_contact.scss +++ b/src/scss/site/pages/_contact.scss @@ -1,6 +1,6 @@ -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; -@use 'mixins' as fibMixins; +@use '../../base/variables' as fibVars; +@use '../../base/funcs' as fibFuncs; +@use '../../base/mixins' as fibMixins; .cmp__contact-form { .cmp__bottom-row { @@ -19,7 +19,7 @@ cmp-icon { display: block; - margin-right: fibFuncs.font_size(-15); + margin-right: fibFuncs.size(-15); } } diff --git a/scss/_detail.scss b/src/scss/site/pages/_detail.scss similarity index 78% rename from scss/_detail.scss rename to src/scss/site/pages/_detail.scss index b8fbb60..f722531 100644 --- a/scss/_detail.scss +++ b/src/scss/site/pages/_detail.scss @@ -1,6 +1,7 @@ -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; -@use 'mixins' as fibMixins; +@use '../../base/variables' as fibVars; +@use '../../base/funcs' as fibFuncs; +@use '../../base/mixins' as fibMixins; +@use '../variables' as fibSiteVars; #cmp__blog_detail { .cmp__article-header { @@ -33,7 +34,7 @@ // Comments Widget .cmp__comments { .cmp__comment-by { - margin-right: fibFuncs.font_size(-7); + margin-right: fibFuncs.size(-7); @include fibMixins.flex_init($column: true, $center: true); img { @@ -42,8 +43,8 @@ span { padding: 1px 5px; - margin-top: fibFuncs.font_size(-14); - @include fibMixins.set_heading_font($font_size: fibFuncs.font_size(-5)); + margin-top: fibFuncs.size(-14); + @include fibMixins.set_text_font($font_size: fibFuncs.size(-5)); text-align: center; color: fibVars.$gray; @@ -65,14 +66,14 @@ flex: 1; textarea { - min-height: fibVars.$comment-textarea-minheight; + min-height: fibSiteVars.$comment-textarea-minheight; } } } } .cmp__comments-list { - margin: fibFuncs.font_size(4) 0 0 0; + margin: fibFuncs.size(4) 0 0 0; padding: 0; list-style: none; @@ -89,7 +90,7 @@ .cmp__comment-detail { .cmp__commented-date { - @include fibMixins.set_heading_font($font_size: fibFuncs.font_size(-5)); + @include fibMixins.set_text_font($font_size: fibFuncs.size(-5)); text-align: right; color: fibVars.$gray; } @@ -98,13 +99,13 @@ .cmp__comment-actions { @include fibMixins.flex_init($justify: flex-start, $ver: true); margin: { - top: fibFuncs.font_size(-10); - left: fibFuncs.font_size(-10); + top: fibFuncs.size(-10); + left: fibFuncs.size(-10); }; .cmp__icon-button { color: fibVars.$gray; - margin-right: fibFuncs.font_size(0); + margin-right: fibFuncs.size(0); &.cmp__button-clicked { color: fibVars.$medium-gray; @@ -139,7 +140,7 @@ @media only screen and (min-width: fibVars.$breakpoint2) { #cmp__blog_detail { .cmp__article-author { - top: fibFuncs.font_size(18, true); + top: fibFuncs.size(18, true); } } } \ No newline at end of file diff --git a/src/scss/site/pages/_home.scss b/src/scss/site/pages/_home.scss new file mode 100644 index 0000000..725420c --- /dev/null +++ b/src/scss/site/pages/_home.scss @@ -0,0 +1,56 @@ +@use '../../base/variables' as fibVars; +@use '../../base/funcs' as fibFuncs; +@use '../../base/mixins' as fibMixins; +@use '../variables' as fibSiteVars; + +#cmp__blog-home { + margin-top: fibFuncs.size(12); + + .cmp__home-heading { + font-family: fibVars.$logo-font-family; + text-align: center; + + &::after { + display: none; + } + } + + .cmp__carousel { + @include fibMixins.noisy_bg(rgb(230, 230, 230, 0.3)); + position: relative; + + padding: { + top: fibVars.$xxl-size; + bottom: fibVars.$xxl-size; + left: fibFuncs.size(16); + right: fibFuncs.size(16); + } + + /*&::before { + position: absolute; + content: ''; + top: 0; + left: 0; + width: 100%; + height: 12px; + background: linear-gradient(-135deg, fibVars.$white, 6px, transparent 0%), linear-gradient(135deg, fibVars.$white, 6px, transparent 0%); + background-size: 12px; + } + + &::after { + position: absolute; + content: ''; + bottom: 0; + left: 0; + width: 100%; + height: 12px; + background: linear-gradient(-45deg, fibVars.$white, 6px, transparent 0%), linear-gradient(45deg, fibVars.$white, 6px, transparent 0%); + background-size: 12px; + }*/ + } + + .cmp__responsive-flex { + @include fibMixins.set_hor_margin(fibFuncs.size(16)); + margin-top: fibVars.$xxl-size; + } +} \ No newline at end of file diff --git a/scss/_index.scss b/src/scss/site/pages/_posts.scss similarity index 69% rename from scss/_index.scss rename to src/scss/site/pages/_posts.scss index 4659aa5..12bb1a0 100644 --- a/scss/_index.scss +++ b/src/scss/site/pages/_posts.scss @@ -1,5 +1,4 @@ -@use 'variables' as fibVars; -@use 'functions' as fibFuncs; +@use '../../base/variables' as fibVars; .cmp__tab-hide { display: none; diff --git a/search-results.html b/src/search-results.html similarity index 96% rename from search-results.html rename to src/search-results.html index 8555a27..1b0cb56 100644 --- a/search-results.html +++ b/src/search-results.html @@ -9,7 +9,7 @@ fibonacci | Home - +
    @@ -47,12 +47,18 @@

    • -
  • +
  • home
    • +
  • + + + posts + +
  • @@ -127,7 +133,7 @@

    - Author + Author Triton Maxwell Admin @@ -185,8 +191,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -222,7 +227,7 @@

    - Author + Author Triton Maxwell Admin @@ -267,8 +272,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    @@ -303,7 +307,7 @@

    - Author + Author Triton Maxwell Admin @@ -348,8 +352,7 @@

    - + Apple
    The apple of the eden garden. Credits Source: https://unsplash.com
    diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..870fd10 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,40 @@ +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + mode: 'development', + entry: { fibonacci: './src/fibonacci.js' }, + module: { + rules: [ + { + test: /\.s[ac]ss$/i, + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { import: false } + }, + 'sass-loader', + ], + }, + { + test: /\.js[x]?$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader' + } + } + ] + }, + resolve: { + modules: [path.resolve(__dirname), 'node_modules'], + extensions: ['.js', '.json', '.css', '.scss', '.sass'] + }, + devServer: { + static: { + directory: path.resolve(__dirname, 'src') + } + }, + devtool: 'source-map' +}; \ No newline at end of file