game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

Added dark theme

commit: a2434bca4b36143490925251d124ac940ede063b
parent: eb58d3c82c84be3d86adbd2be73ea82d9ddbbe1d
author: typable <typable.dev@gmail.com>
time: 2021-03-21 18:50

6 file(s) changed, 148 insertion(s), 19 deletion(s)[browse files]

M asset/less/theme.less
M blog/index.html
M blog/spring-framework.html
M design-system/index.html
M game-engine/index.html
M index.html

asset/less/theme.less [new file] [old file]

28	font-family: 'Inter';
29}
30
31body {
32
33	@media(prefers-color-scheme: dark) {
34		background: @color-black;
35	}
36}
37
38h1 {
39	font-size: 36px;
40	margin-top: @space-4x;

45		padding-left: 2px;
46		vertical-align: top;
47	}
48
49	@media(prefers-color-scheme: dark) {
50		color: @color-white;
51	}
52}
53
54h2 {

56	font-weight: 700;
57	margin-top: @space-8x;
58	margin-bottom: @space-2x;
59
60	@media(prefers-color-scheme: dark) {
61		color: @color-white;
62	}
63}
64
65h3 {
66	font-size: 24px;
67	font-weight: 600;
68	margin-top: @space-2x;
69
70	@media(prefers-color-scheme: dark) {
71		color: @color-white;
72	}
73}
74
75h4 {
76	font-size: 18px;
77	font-weight: 600;
78	margin-top: @space-2x;
79
80	@media(prefers-color-scheme: dark) {
81		color: @color-white;
82	}
83}
84
85p {

88	margin-top: @space-2x;
89	line-height: 26px;
90
91	@media(prefers-color-scheme: dark) {
92		color: @color-gray-400;
93	}
94
95	a {
96		text-decoration: underline;
97		white-space: nowrap;

103		border-radius: 2px;
104		padding: 2px 4px;
105		color: @color-gray-800;
106
107		@media(prefers-color-scheme: dark) {
108			color: @color-gray-400;
109			background: darken(@color-gray-900, 8%);
110		}
111	}
112
113	b {
114		font-weight: 500;
115
116		@media(prefers-color-scheme: dark) {
117			color: @color-gray-100;
118		}
119
120		&.note {
121			margin-bottom: calc(@space-1x / 2);
122			display: inline-block;
123
124			@media(prefers-color-scheme: dark) {
125				color: @color-white;
126			}
127		}
128	}
129

148	font-size: 18px;
149	line-height: 28px;
150	color: @color-gray-600;
151
152	@media(prefers-color-scheme: dark) {
153		color: @color-gray-400;
154	}
155}
156
157a {

162		text-decoration: underline;
163		color: @color-gray-900;
164	}
165
166	@media(prefers-color-scheme: dark) {
167		color: @color-gray-300;
168
169		&:hover {
170			color: @color-gray-100;
171		}
172	}
173}
174
175.list {

186			margin-top: calc(@space-1x / 2);
187		}
188	}
189
190	@media(prefers-color-scheme: dark) {
191
192		li {
193			color: @color-gray-400;
194		}
195	}
196}
197
198.link-list {
199
200	span {
201		margin-top: calc(@space-1x / 2);
202
203		a {
204			display: inline-block;
205			margin-left: calc(@space-1x / 2);
206		}
207	}
208}
209
210&::-webkit-scrollbar {

241		margin-top: @space-2x;
242
243		li {
173			margin-top: calc(@space-1x / 2);
244			margin-top: @space-1x;
245			cursor: pointer;
246			user-select: none;
247			font-size: 16px;

252			&:hover {
253				color: @color-gray-900;
254			}
255
256			@media(prefers-color-scheme: dark) {
257				color: @color-gray-400;
258
259				&:hover {
260					color: @color-gray-200;
261				}
262			}
263		}
264	}
265}

272	margin-top: @space-2x;
273	position: relative;
274
275	@media(prefers-color-scheme: dark) {
276		background: darken(@color-gray-900, 8%);
277	}
278
279	pre {
280		color: @color-gray-400;
281		line-height: 22px;

431				user-select: none;
432			}
433		}
434
435		@media(prefers-color-scheme: dark) {
436			color: @color-gray-400;
437
438			a {
439				color: @color-gray-400;
440
441				&:hover {
442					color: @color-gray-200;
443				}
444			}
445		}
446	}
447}
448

527				color: @color-gray-900;
528			}
529		}
530
531		@media(prefers-color-scheme: dark) {
532			background: darken(@color-gray-900, 8%);
533
534			.ico {
535				color: @color-gray-500;
536			}
537
538			&:hover {
539
540				.ico {
541					color: @color-gray-200;
542				}
543			}
544		}
545	}
546}
547

565	a {
566		font-size: 16px;
567	}
568
569	@media(prefers-color-scheme: dark) {
570		
571		p {
572			color: @color-gray-500;
573		}
574
575		a {
576			color: @color-gray-500;
577
578			&:hover {
579				color: @color-gray-300;
580			}
581		}
582	}
583}
584
585.tooltip {

blog/index.html [new file] [old file]

17		<main class="container-fluid">
18			<div class="row">
19				<div class="container">
20					<aside>
21						<h4 data-rel="top">Blog</h4>
22						<ul></ul>
23					</aside>
20					<ul class="breadcrumb">
21						<li><a href="/">Home</a></li>
22						<li>Blog</li>

24					<h1>Blog</h1>
25					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
26					<div class="space-1"></div>
31					<p>--> <a href="/blog/spring-framework">Spring Framework</a></p>
27					<p class="link-list">
28						<span>--> <a href="/blog/spring-framework">Spring Framework</a></span>
29					</p>
30				</div>
31			</div>
32		</main>

blog/spring-framework.html [new file] [old file]

66							<p><b>Perspective and Views</b><br><br>Web Projects are typically viewed in the Resource Perspective,
67								so if the Perspective is not shown by default, add it to your Eclipse Workspace.<br><br>
68								The needed views for a smooth working process are the following:<br><br>
69								-> Project Explorer<br>
70								-> Boot Dashboard<br>
71								-> Console<br>
72								-> Gradle Tasks<br><br>
69								-> &nbsp;Project Explorer<br>
70								-> &nbsp;Boot Dashboard<br>
71								-> &nbsp;Console<br>
72								-> &nbsp;Gradle Tasks<br><br>
73								More about managing Perspectives and Views can be found here:
74								<a href="https://help.eclipse.org/2021-03/index.jsp">Eclipse - Manage Perspectives and Views</a></p>
75						</li>

201							<p><mark>spring.resources.static-locations</mark> - Files in the defined path can be modified
202								without restarting the server to see the changes. It is common to put all resources like
203								CSS, JavaScript and Images in <mark>/src/main/resources/static/</mark>.<br><br>
204								<b>Notice:</b> This is a temporary property only for development</p>
204								<b class="note">Notice:</b> <span>This is a temporary property only for development</span></p>
205						</li>
206					</ul>
207					<h2 data-ref="start-up">Start Up</h2>

design-system/index.html [new file] [old file]

33					<h2 data-ref="introduction">Introduction</h2>
34					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
35					<div class="space-1"></div>
36					<p>--> <a href="/design-system/color">Color</a></p>
37					<p>--> <a href="/design-system/icons">Icons</a></p>
36					<p class="link-list">
37						<span>--> <a href="/design-system/color">Color</a></span>
38						<span>--> <a href="/design-system/icons">Icons</a></span>
39					</p>
40					<h2 data-ref="normalize">Normalize</h2>
41					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
42					<code><pre><span class="c">@import</span> <span class="p">url</span>(<span class="s">'<span class="ref ref-link">https://git.typable.dev/std/less/normalize.less</span>'</span>);</pre></code>

game-engine/index.html [new file] [old file]

36					<h2 data-ref="introduction">Introduction</h2>
37					<p>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.<br><br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
38					<div class="space-2"></div>
39					<p>--> <a href="/game-engine/api">API</a></p>
39					<p class="link-list">
40						<span>--> <a href="/game-engine/api">API</a></span>
41					</p>
42					<div class="embed">
43						<iframe src="/asset/data/embed.html" frameborder="0"></iframe>
44						<p>Source: <a href="https://jsitor.com/NooIssgCT">"Universe" - typable</a></p>

index.html [new file] [old file]

22					</ul>
23					<h1 class="slogan">Build for the<br>web of tomorrow</h1>
24					<p class="slogan-subline subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
25					<p>--> <a href="/design-system">Design System</a></p>
26					<p>--> <a href="/game-engine"> Game Engine</a></p>
27					<p>--> <a href="/component-rendering">Component Rendering</a></p>
28					<p>--> <a href="/canvas-toolkit">Canvas Toolkit</a></p>
29					<p>--> <a href="/blog">Blog</a></p>
25					<p class="link-list">
26						<span>--> <a href="/design-system">Design System</a></span>
27						<span>--> <a href="/game-engine">Game Engine</a></span>
28						<span>--> <a href="/component-rendering">Component Rendering</a></span>
29						<span>--> <a href="/canvas-toolkit">Canvas Toolkit</a></span>
30						<span>--> <a href="/blog">Blog</a></span>
31					</p>
32				</div>
33			</div>
34		</main>

so://phie

game-engine

Added dark theme