Merge pull request #99 from spacenomads/issue/98-sample-page

feat: Add Asteroids sample page.
spacenomads · Oct 18, 2023 · fa1b1c4 · fa1b1c4
2 parents f8243a9 + 8f0032b
commit fa1b1c4
Show file tree

Hide file tree

Showing 16 changed files with 387 additions and 42 deletions.
diff --git 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
@@ -0,0 +1,11 @@
+<footer class="page__footer footer">
+	<ul class="footer__items">
+		<li class="footer__item">
+			<span class="footer__license"><a href="https://github.com/spacenomads/Asteroids/blob/main/LICENSE" class="footer__link"><span class="footer__license-cc">CC</span><span class="footer__license-zero">0</span> 1.0</a> <span class="footer__year">{{ settings.year }}</span></span>
+		</li>
+		<li class="footer__item">
+			Asteroids <span class="footer__by">by <a href="https://spacenomads.com" class="footer__link">Spacenomads.com</a></span>
+		</li>
+		<li class="footer__item">v{{ settings.projectVersion }} - <a href="https://github.com/spacenomads/asteroids" class="footer__link">Fork it on GitHub</a></li>
+	</ul>
+</footer>
diff --git a/_src/_templates/layouts/main.njk → _src/_templates/layouts/sample-layout.njk b/_src/_templates/layouts/main.njk → _src/_templates/layouts/sample-layout.njk
@@ -8,31 +8,14 @@
 	<meta name="theme-color" content="#212121" media="(prefers-color-scheme: dark)">
 	<title>{{ settings.siteName }}</title>
 	<link rel="stylesheet" href="assets/css/main.css">
-	<script src="assets/js/app.js" type="module" defer></script>
+	<script src="assets/js/app.js" type="module"></script>
 </head>
 <body>
 	<div class="page">
-		<header class="page__header header">
-			<div class="wrapper">
-				<a href="/" class="header__brand">
-					<div class="brand">Asteroids</div>
-				</a>
-			</div>
-
-			{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
-				listElement: 'ul',
-				listItemElement: 'li',
-				listClass: 'menu',
-				listItemClass: 'menu__item',
-				anchorClass: 'menu__link'
-			}) | safe }}
-		</header>
 		<main class="page__main main">
 			{{ content | safe }}
 		</main>
-		<footer class="page__footer">
-			{{ settings.year }}
-		</footer>
+		{% include "components/footer.njk" %}
 	</div>
 </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/';