diff --git a/_src/_data/settings.js b/_src/_data/settings.js index 5f3837f..aae18e8 100644 --- a/_src/_data/settings.js +++ b/_src/_data/settings.js @@ -1,3 +1,5 @@ +var pjson = require('../../package.json'); + function getYear() { return new Date().getFullYear(); } @@ -6,7 +8,7 @@ function getYear() { -function getStaticsVersion() { +function getStaticsVersioning() { const version = new Date() .toISOString() .replace(/[^A-SU-Y0-9]/g, ''); @@ -21,6 +23,7 @@ module.exports = { lang: 'en', mode: process.env.MODE, siteName: 'Asteroids', - version: getStaticsVersion(), + version: getStaticsVersioning(), year: getYear(), + projectVersion: pjson.version, }; diff --git a/_src/_templates/components/footer.njk b/_src/_templates/components/footer.njk new file mode 100644 index 0000000..eaa955a --- /dev/null +++ b/_src/_templates/components/footer.njk @@ -0,0 +1,11 @@ + diff --git a/_src/_templates/layouts/main.njk b/_src/_templates/layouts/sample-layout.njk similarity index 52% rename from _src/_templates/layouts/main.njk rename to _src/_templates/layouts/sample-layout.njk index caccc96..43ce75e 100644 --- a/_src/_templates/layouts/main.njk +++ b/_src/_templates/layouts/sample-layout.njk @@ -8,31 +8,14 @@ {{ settings.siteName }} - +
-
-
- -
Asteroids
- -
- - {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({ - listElement: 'ul', - listItemElement: 'li', - listClass: 'menu', - listItemClass: 'menu__item', - anchorClass: 'menu__link' - }) | safe }} -
{{ content | safe }}
- + {% include "components/footer.njk" %}
diff --git a/_src/assets/_scss/_sample-page.scss b/_src/assets/_scss/_sample-page.scss index b39aa4c..bece569 100644 --- a/_src/assets/_scss/_sample-page.scss +++ b/_src/assets/_scss/_sample-page.scss @@ -1,18 +1,150 @@ @use 'core/core'; body { + font-size: 100%; + font-family: core.$font-sample; + margin: 0; + background-image: core.$gradient-bg; background-color: core.$color-bg; - color: core.$color-correct-blue; - font-size: core.rem(20); +} + +.page { + display: grid; + grid-template-rows: 1fr auto; + min-height: 100vh; + min-height: 100dvh; +} + + + - @include core.mq(600) { - color: black; + +/* HERO */ +.hero { + height: 100%; + padding: core.em(50); + box-sizing: border-box; + + .wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100%; } } -@include core.mq(600) { - p { - border: 1px solid orange; - color: blue; +.hero__asteroids { + font-size: clamp(.875rem, .7917rem + .4167vw, 1.125rem); + // font-size: core.rem(14); + + // @include core.mq(650) { + // font-size: core.rem(18); + // } +} + +.hero__asteroids-title { + font-size: core.em(55); + margin: 0; + + &::before { + content: ''; + width: core.em(250, 55); + height: core.em(250, 55); + background: core.img('hero/asteroids.png') left top no-repeat; + background-size: cover; + display: block; + border-radius: 50%; + margin: 0 auto; } } + +.hero__asteroids-title-main { + color: core.$color-space-green; + font-family: core.$font-asteroids; +} + +.hero__asteroids-by { + color: core.$color-space-light-green; + font-weight: 300; + display: block; + text-align: right; + font-size: 30%; + margin-top: -1.5em; +} + +.hero__asteroids-version {} + + + + + +/* FOOTER */ +.footer { + color: white; + line-height: core.rem(30); + @include core.mq(650) { + justify-content: center; + display: flex; + + } +} + +.footer__items { + background-color: core.$color-space-green; + padding: core.rem(15) core.rem(30); + margin: 0; + list-style: none; + text-align: center; + + @include core.mq(650) { + display: flex; + justify-content: center; + width: auto; + } +} + +.footer__item { + & + .footer__item { + &::before { + content: '|'; + margin: 0 .5em; + } + } +} + +.footer__link { + text-decoration: none; + color: core.$color-space-extra-light-green; +} + +.footer__license { + display: flex; + justify-content: center; + align-items: center; + gap: .15em; +} + +.footer__license-cc, +.footer__license-zero { + height: core.rem(1); + padding-top: core.rem(15); + width: core.rem(16); + display: inline-block; + background: core.img('icons/cc-logo.svg') left top no-repeat; + background-size: 100% auto; + overflow: hidden; + vertical-align: middle; +} + +.footer__license-zero { + background-image: core.img('icons/cc-zero.svg'); + margin-left: .15em; +} + +.footer__year { + margin-left: .15em; +} + +.footer__link {} + + diff --git a/_src/assets/_scss/core/_core.scss b/_src/assets/_scss/core/_core.scss index 7221488..c966295 100644 --- a/_src/assets/_scss/core/_core.scss +++ b/_src/assets/_scss/core/_core.scss @@ -1,3 +1,5 @@ @forward 'vars'; @forward 'functions'; @forward 'mixins'; +@forward 'utils'; +@forward 'fonts'; diff --git a/_src/assets/_scss/core/_fonts.scss b/_src/assets/_scss/core/_fonts.scss new file mode 100644 index 0000000..2a62674 --- /dev/null +++ b/_src/assets/_scss/core/_fonts.scss @@ -0,0 +1,30 @@ +/* glegoo-700 - latin */ +@font-face { + font-display: swap; + font-family: Glegoo; + font-style: normal; + font-weight: 700; + src: url(/assets/fonts/glegoo/glegoo-v16-latin-700.woff2) format('woff2'); +} + + + + + +/* roboto-300 - latin */ +@font-face { + font-display: swap; + font-family: Roboto; + font-style: normal; + font-weight: 300; + src: url(/assets/fonts/roboto/roboto-v30-latin-300.woff2) format('woff2'); +} + +/* roboto-regular - latin */ +@font-face { + font-display: swap; + font-family: Roboto; + font-style: normal; + font-weight: 400; + src: url(/assets/fonts/roboto/roboto-v30-latin-regular.woff2) format('woff2'); +} diff --git a/_src/assets/_scss/core/_utils.scss b/_src/assets/_scss/core/_utils.scss new file mode 100644 index 0000000..d3becd3 --- /dev/null +++ b/_src/assets/_scss/core/_utils.scss @@ -0,0 +1,5 @@ +@use 'mixins'; + +.u__sr-only { + @include mixins.screen-reader-only(); +} diff --git a/_src/assets/_scss/core/_vars.scss b/_src/assets/_scss/core/_vars.scss index 3176765..d650dad 100644 --- a/_src/assets/_scss/core/_vars.scss +++ b/_src/assets/_scss/core/_vars.scss @@ -18,6 +18,11 @@ // --- $color-correct-blue: #007aff; $color-bg: #f4f5f6; +$gradient-bg: linear-gradient(#fff, #f4f5f6); +$color-space-green: #084e62; +$color-space-light-green: #75af9e; +$color-space-extra-light-green: #b5e0cf; +$color-space-dark-orange: #903d25; @@ -26,6 +31,8 @@ $color-bg: #f4f5f6; // 2. Fonts // --- $font-size: 16; +$font-sample: roboto, arial, sans-serif; +$font-asteroids: glegoo, arial, sans-serif; @@ -48,4 +55,4 @@ $levels: footer, content, header; // 5. Themes // --- -$theme: 'layout/' +$theme: '/assets/images/sample-page/'; diff --git a/_src/assets/css/main.css b/_src/assets/css/main.css index 8f89c02..8846f62 100644 --- a/_src/assets/css/main.css +++ b/_src/assets/css/main.css @@ -1,15 +1,183 @@ +.u__sr-only { + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* glegoo-700 - latin */ +@font-face { + font-display: swap; + font-family: Glegoo; + font-style: normal; + font-weight: 700; + src: url(/assets/fonts/glegoo/glegoo-v16-latin-700.woff2) format("woff2"); +} +/* roboto-300 - latin */ +@font-face { + font-display: swap; + font-family: Roboto; + font-style: normal; + font-weight: 300; + src: url(/assets/fonts/roboto/roboto-v30-latin-300.woff2) format("woff2"); +} +/* roboto-regular - latin */ +@font-face { + font-display: swap; + font-family: Roboto; + font-style: normal; + font-weight: 400; + src: url(/assets/fonts/roboto/roboto-v30-latin-regular.woff2) format("woff2"); +} body { + font-size: 100%; + font-family: roboto, arial, sans-serif; + margin: 0; + background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f5f6)); + background-image: linear-gradient(#fff, #f4f5f6); background-color: #f4f5f6; - color: #007aff; - font-size: 1.25rem; } -@media screen and (min-width: 37.5em) { - body { - color: black; + +.page { + display: grid; + grid-template-rows: 1fr auto; + min-height: 100vh; + min-height: 100dvh; +} + +/* HERO */ +.hero { + height: 100%; + padding: 3.125em; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.hero .wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.hero__asteroids { + font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem); +} + +.hero__asteroids-title { + font-size: 3.4375em; + margin: 0; +} +.hero__asteroids-title::before { + content: ""; + width: 4.5454545455em; + height: 4.5454545455em; + background: url("/assets/images/sample-page/hero/asteroids.png") left top no-repeat; + background-size: cover; + display: block; + border-radius: 50%; + margin: 0 auto; +} + +.hero__asteroids-title-main { + color: #084e62; + font-family: glegoo, arial, sans-serif; +} + +.hero__asteroids-by { + color: #75af9e; + font-weight: 300; + display: block; + text-align: right; + font-size: 30%; + margin-top: -1.5em; +} + +/* FOOTER */ +.footer { + color: white; + line-height: 1.875rem; +} + +.footer__items { + background-color: #084e62; + padding: 0.9375rem 1.875rem; + margin: 0; + list-style: none; + text-align: center; +} + +.footer__item + .footer__item::before { + content: "|"; + margin: 0 0.5em; +} + +.footer__link { + text-decoration: none; + color: #b5e0cf; +} + +.footer__license { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.15em; +} + +.footer__license-cc, +.footer__license-zero { + height: 0.0625rem; + padding-top: 0.9375rem; + width: 1rem; + display: inline-block; + background: url("/assets/images/sample-page/icons/cc-logo.svg") left top no-repeat; + background-size: 100% auto; + overflow: hidden; + vertical-align: middle; +} + +.footer__license-zero { + background-image: url("/assets/images/sample-page/icons/cc-zero.svg"); + margin-left: 0.15em; +} + +.footer__year { + margin-left: 0.15em; +} + +@media screen and (min-width: 40.625em) { + .footer { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } - p { - border: 1px solid orange; - color: blue; + .footer__items { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; } } /*# sourceMappingURL=main.css.map */ diff --git a/_src/assets/fonts/glegoo/glegoo-v16-latin-700.woff2 b/_src/assets/fonts/glegoo/glegoo-v16-latin-700.woff2 new file mode 100644 index 0000000..89c7410 Binary files /dev/null and b/_src/assets/fonts/glegoo/glegoo-v16-latin-700.woff2 differ diff --git a/_src/assets/fonts/roboto/roboto-v30-latin-300.woff2 b/_src/assets/fonts/roboto/roboto-v30-latin-300.woff2 new file mode 100644 index 0000000..6068138 Binary files /dev/null and b/_src/assets/fonts/roboto/roboto-v30-latin-300.woff2 differ diff --git a/_src/assets/fonts/roboto/roboto-v30-latin-regular.woff2 b/_src/assets/fonts/roboto/roboto-v30-latin-regular.woff2 new file mode 100644 index 0000000..020729e Binary files /dev/null and b/_src/assets/fonts/roboto/roboto-v30-latin-regular.woff2 differ diff --git a/_src/assets/images/sample-page/hero/asteroids.png b/_src/assets/images/sample-page/hero/asteroids.png new file mode 100644 index 0000000..739cd7a Binary files /dev/null and b/_src/assets/images/sample-page/hero/asteroids.png differ diff --git a/_src/assets/images/sample-page/icons/cc-logo.svg b/_src/assets/images/sample-page/icons/cc-logo.svg new file mode 100644 index 0000000..c2e5c08 --- /dev/null +++ b/_src/assets/images/sample-page/icons/cc-logo.svg @@ -0,0 +1 @@ + diff --git a/_src/assets/images/sample-page/icons/cc-zero.svg b/_src/assets/images/sample-page/icons/cc-zero.svg new file mode 100644 index 0000000..2519f22 --- /dev/null +++ b/_src/assets/images/sample-page/icons/cc-zero.svg @@ -0,0 +1 @@ + diff --git a/_src/index.njk b/_src/index.njk index b1456c7..db5bf6e 100644 --- a/_src/index.njk +++ b/_src/index.njk @@ -1,12 +1,14 @@ --- title: home -layout: layouts/main.njk +layout: layouts/sample-layout.njk eleventyNavigation: key: home --- -
-
- YAY +
+
+
+

Asteroids by Spacenomads

+