Skip to content

Commit fa1b1c4

Browse files
oneeyedmanoneeyedman
authored
Merge pull request #99 from spacenomads/issue/98-sample-page
feat: Add Asteroids sample page.
2 parents f8243a9 + 8f0032b commit fa1b1c4

16 files changed

+387
-42
lines changed

‎_src/_data/settings.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
var pjson = require('../../package.json');
2+
13
function getYear() {
24
return new Date().getFullYear();
35
}
@@ -6,7 +8,7 @@ function getYear() {
68

79

810

9-
function getStaticsVersion() {
11+
function getStaticsVersioning() {
1012
const version = new Date()
1113
.toISOString()
1214
.replace(/[^A-SU-Y0-9]/g, '');
@@ -21,6 +23,7 @@ module.exports = {
2123
lang: 'en',
2224
mode: process.env.MODE,
2325
siteName: 'Asteroids',
24-
version: getStaticsVersion(),
26+
version: getStaticsVersioning(),
2527
year: getYear(),
28+
projectVersion: pjson.version,
2629
};

‎_src/_templates/components/footer.njk

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<footer class="page__footer footer">
2+
<ul class="footer__items">
3+
<li class="footer__item">
4+
<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>
5+
</li>
6+
<li class="footer__item">
7+
Asteroids <span class="footer__by">by <a href="https://spacenomads.com" class="footer__link">Spacenomads.com</a></span>
8+
</li>
9+
<li class="footer__item">v{{ settings.projectVersion }} - <a href="https://github.com/spacenomads/asteroids" class="footer__link">Fork it on GitHub</a></li>
10+
</ul>
11+
</footer>

‎_src/_templates/layouts/main.njk ‎_src/_templates/layouts/sample-layout.njk

+2-19
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,14 @@
88
<meta name="theme-color" content="#212121" media="(prefers-color-scheme: dark)">
99
<title>{{ settings.siteName }}</title>
1010
<link rel="stylesheet" href="assets/css/main.css">
11-
<script src="assets/js/app.js" type="module" defer></script>
11+
<script src="assets/js/app.js" type="module"></script>
1212
</head>
1313
<body>
1414
<div class="page">
15-
<header class="page__header header">
16-
<div class="wrapper">
17-
<a href="/" class="header__brand">
18-
<div class="brand">Asteroids</div>
19-
</a>
20-
</div>
21-
22-
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
23-
listElement: 'ul',
24-
listItemElement: 'li',
25-
listClass: 'menu',
26-
listItemClass: 'menu__item',
27-
anchorClass: 'menu__link'
28-
}) | safe }}
29-
</header>
3015
<main class="page__main main">
3116
{{ content | safe }}
3217
</main>
33-
<footer class="page__footer">
34-
{{ settings.year }}
35-
</footer>
18+
{% include "components/footer.njk" %}
3619
</div>
3720
</body>
3821
</html>

‎_src/assets/_scss/_sample-page.scss

+140-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,150 @@
11
@use 'core/core';
22

33
body {
4+
font-size: 100%;
5+
font-family: core.$font-sample;
6+
margin: 0;
7+
background-image: core.$gradient-bg;
48
background-color: core.$color-bg;
5-
color: core.$color-correct-blue;
6-
font-size: core.rem(20);
9+
}
10+
11+
.page {
12+
display: grid;
13+
grid-template-rows: 1fr auto;
14+
min-height: 100vh;
15+
min-height: 100dvh;
16+
}
17+
18+
19+
720

8-
@include core.mq(600) {
9-
color: black;
21+
22+
/* HERO */
23+
.hero {
24+
height: 100%;
25+
padding: core.em(50);
26+
box-sizing: border-box;
27+
28+
.wrapper {
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
height: 100%;
1033
}
1134
}
1235

13-
@include core.mq(600) {
14-
p {
15-
border: 1px solid orange;
16-
color: blue;
36+
.hero__asteroids {
37+
font-size: clamp(.875rem, .7917rem + .4167vw, 1.125rem);
38+
// font-size: core.rem(14);
39+
40+
// @include core.mq(650) {
41+
// font-size: core.rem(18);
42+
// }
43+
}
44+
45+
.hero__asteroids-title {
46+
font-size: core.em(55);
47+
margin: 0;
48+
49+
&::before {
50+
content: '';
51+
width: core.em(250, 55);
52+
height: core.em(250, 55);
53+
background: core.img('hero/asteroids.png') left top no-repeat;
54+
background-size: cover;
55+
display: block;
56+
border-radius: 50%;
57+
margin: 0 auto;
1758
}
1859
}
60+
61+
.hero__asteroids-title-main {
62+
color: core.$color-space-green;
63+
font-family: core.$font-asteroids;
64+
}
65+
66+
.hero__asteroids-by {
67+
color: core.$color-space-light-green;
68+
font-weight: 300;
69+
display: block;
70+
text-align: right;
71+
font-size: 30%;
72+
margin-top: -1.5em;
73+
}
74+
75+
.hero__asteroids-version {}
76+
77+
78+
79+
80+
81+
/* FOOTER */
82+
.footer {
83+
color: white;
84+
line-height: core.rem(30);
85+
@include core.mq(650) {
86+
justify-content: center;
87+
display: flex;
88+
89+
}
90+
}
91+
92+
.footer__items {
93+
background-color: core.$color-space-green;
94+
padding: core.rem(15) core.rem(30);
95+
margin: 0;
96+
list-style: none;
97+
text-align: center;
98+
99+
@include core.mq(650) {
100+
display: flex;
101+
justify-content: center;
102+
width: auto;
103+
}
104+
}
105+
106+
.footer__item {
107+
& + .footer__item {
108+
&::before {
109+
content: '|';
110+
margin: 0 .5em;
111+
}
112+
}
113+
}
114+
115+
.footer__link {
116+
text-decoration: none;
117+
color: core.$color-space-extra-light-green;
118+
}
119+
120+
.footer__license {
121+
display: flex;
122+
justify-content: center;
123+
align-items: center;
124+
gap: .15em;
125+
}
126+
127+
.footer__license-cc,
128+
.footer__license-zero {
129+
height: core.rem(1);
130+
padding-top: core.rem(15);
131+
width: core.rem(16);
132+
display: inline-block;
133+
background: core.img('icons/cc-logo.svg') left top no-repeat;
134+
background-size: 100% auto;
135+
overflow: hidden;
136+
vertical-align: middle;
137+
}
138+
139+
.footer__license-zero {
140+
background-image: core.img('icons/cc-zero.svg');
141+
margin-left: .15em;
142+
}
143+
144+
.footer__year {
145+
margin-left: .15em;
146+
}
147+
148+
.footer__link {}
149+
150+

‎_src/assets/_scss/core/_core.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
@forward 'vars';
22
@forward 'functions';
33
@forward 'mixins';
4+
@forward 'utils';
5+
@forward 'fonts';

‎_src/assets/_scss/core/_fonts.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* glegoo-700 - latin */
2+
@font-face {
3+
font-display: swap;
4+
font-family: Glegoo;
5+
font-style: normal;
6+
font-weight: 700;
7+
src: url(/assets/fonts/glegoo/glegoo-v16-latin-700.woff2) format('woff2');
8+
}
9+
10+
11+
12+
13+
14+
/* roboto-300 - latin */
15+
@font-face {
16+
font-display: swap;
17+
font-family: Roboto;
18+
font-style: normal;
19+
font-weight: 300;
20+
src: url(/assets/fonts/roboto/roboto-v30-latin-300.woff2) format('woff2');
21+
}
22+
23+
/* roboto-regular - latin */
24+
@font-face {
25+
font-display: swap;
26+
font-family: Roboto;
27+
font-style: normal;
28+
font-weight: 400;
29+
src: url(/assets/fonts/roboto/roboto-v30-latin-regular.woff2) format('woff2');
30+
}

‎_src/assets/_scss/core/_utils.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use 'mixins';
2+
3+
.u__sr-only {
4+
@include mixins.screen-reader-only();
5+
}

‎_src/assets/_scss/core/_vars.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
// ---
1919
$color-correct-blue: #007aff;
2020
$color-bg: #f4f5f6;
21+
$gradient-bg: linear-gradient(#fff, #f4f5f6);
22+
$color-space-green: #084e62;
23+
$color-space-light-green: #75af9e;
24+
$color-space-extra-light-green: #b5e0cf;
25+
$color-space-dark-orange: #903d25;
2126

2227

2328

@@ -26,6 +31,8 @@ $color-bg: #f4f5f6;
2631
// 2. Fonts
2732
// ---
2833
$font-size: 16;
34+
$font-sample: roboto, arial, sans-serif;
35+
$font-asteroids: glegoo, arial, sans-serif;
2936

3037

3138

@@ -48,4 +55,4 @@ $levels: footer, content, header;
4855

4956
// 5. Themes
5057
// ---
51-
$theme: 'layout/'
58+
$theme: '/assets/images/sample-page/';

0 commit comments

Comments
 (0)