so://phie

game-engine

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

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v0.1

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

  3@space-4x: 80px;
  4@space-8x: 160px;
  5
  6@screen-xs: 576px;
  7@screen-sm: 768px;
  8@screen-md: 992px;
  9@screen-lg: 1200px;
  10
  11.space-1 {
  12	width: 100%;
  13	height: @space-1x;
  

  31* {
  32	color: @color-gray-900;
  33	font-family: 'Inter';
  34	-webkit-tap-highlight-color: transparent;
  35}
  36
  37body,
  38main,
  39footer{
  40	overflow-x: hidden;
  41}
  42
  43body {
  

  66h2 {
  67	font-size: 28px;
  68	font-weight: 700;
  57	margin-top: @space-8x;
  69	margin-top: @space-4x;
  70	margin-bottom: @space-2x;
  71
  72	@media(prefers-color-scheme: dark) {
  73		color: @color-white;
  74	}
  75	
  76	@media(min-width: @screen-xs) {
  77		margin-top: @space-8x;
  78	}
  79}
  80
  81h3 {
  

  110
  111	a {
  112		text-decoration: underline;
  97		white-space: nowrap;
  113	}
  114
  115	mark {
  116		background: @color-gray-200;
  102		white-space: nowrap;
  117		border-radius: 2px;
  118		padding: 2px 4px;
  119		color: @color-gray-800;
  120		word-break: break-word;
  121
  122		@media(prefers-color-scheme: dark) {
  123			color: @color-gray-400;
  

  149}
  150
  151.slogan {
  137	font-size: 64px;
  152	font-size: 44px;
  153	margin-bottom: @space-4x;
  154
  155	@media(min-width: @screen-xs) {
  156		font-size: 64px;
  157	}
  158}
  159
  160.slogan-subline {
  

  247	transform: translate(calc(-100% - @space-2x), 0);
  248	width: 250px;
  249	padding-top: @space-4x;
  250	display: none;
  251
  252	@media(min-width: @screen-lg) {
  253		display: block;
  254	}
  255
  256	h4 {
  257		margin: 0;
  

  295	padding: @space-1x;
  296	margin-top: @space-2x;
  297	position: relative;
  298	overflow-x: auto;
  299
  300	&::-webkit-scrollbar {
  301		height: 8px;
  302	}
  303
  304	&::-webkit-scrollbar-thumb {
  305		background: @color-gray-700;
  306
  307		&:hover {
  308			background: @color-gray-800;
  309		}
  310	}
  311
  312	@media(prefers-color-scheme: dark) {
  313		background: darken(@color-gray-900, 8%);
  

  318		line-height: 22px;
  319		tab-size: 40px;
  320		font-family: 'JetBrains Mono', monospace;
  321		display: inline-block;
  322
  323		span {
  324			font-family: 'JetBrains Mono', monospace;
  

  438	iframe {
  439		border-radius: 4px;
  440		width: 100%;
  403		height: 500px;
  441		height: calc(100vw * 500 / 800);
  442		pointer-events: none;
  443
  444		@media(min-width: 800px) {
  445			width: 100%;
  446			height: 500px;
  447		}
  448	}
  449
  450	p {
  

  454
  455.breadcrumb {
  456	display: flex;
  414	padding-top: @space-4x;
  457	padding-top: @space-2x;
  458	list-style-type: none;
  459
  460	@media(min-width: @screen-xs) {
  461		padding-top: @space-4x;
  462	}
  463
  464	li {
  465		color: @color-gray-700;
  466		font-size: 16px;
  

  504		display: flex;
  505		flex-direction: column;
  506		border-radius: 4px;
  460		width: calc(25% - @space-1x * 3 / 4);
  507		width: calc(50% - @space-1x * 1 / 2);
  508		margin-bottom: @space-1x;
  509
  510		@media(min-width: @screen-xs) {
  511			width: calc(25% - @space-1x * 3 / 4);
  512		}
  513
  514		.palette-tone {
  515			width: 100%;
  516			color: white;
  

  524
  525			&.dark {
  526				color: @color-gray-900;
  476				font-weight: 600;
  527				font-weight: 500;
  528			}
  529
  530			&:hover {
  

  562		border-radius: 4px;
  563		justify-content: center;
  564		align-items: center;
  514		width: calc(10% - @space-1x * 9 / 10);
  565		width: calc(25% - @space-1x * 3 / 4);
  566		aspect-ratio: 1 / 1;
  567		background: @color-gray-50;
  568		cursor: pointer;
  569
  570		@media(min-width: @screen-xs) {
  571			width: calc(16.666% - @space-1x * 5 / 6);
  572		}
  573
  574		@media(min-width: @screen-sm) {
  575			width: calc(10% - @space-1x * 9 / 10);
  576		}
  577		
  578		.ico {
  579			color: @color-gray-600;
  

  605}
  606
  607footer {
  549	margin-top: @space-8x;
  550	margin-bottom: @space-4x;
  608	margin-top: @space-4x;
  609	margin-bottom: @space-2x;
  610
  611	@media(min-width: @screen-xs) {
  612		margin-top: @space-8x;
  613		margin-bottom: @space-4x;
  614
  615		a {
  616
  617			&:first-of-type {
  618				display: flex !important;
  619			}
  620		}
  621	}
  622
  623	.container {
  624		display: flex;
  

  635
  636	a {
  637		font-size: 16px;
  638		display: flex;
  639		align-items: center;
  640
  641		&:first-of-type {
  642			display: none;
  643		}
  644	}
  645
  646	@media(prefers-color-scheme: dark) {
  

  720.snackbar {
  721	background: @color-gray-900;
  722	position: fixed;
  646	left: @space-2x;
  647	bottom: @space-1x;
  723	left: 50%;
  724	bottom: 0;
  725	border-radius: 4px;
  726	color: @color-white;
  727	padding: 18px 30px;
  728	pointer-events: none;
  729	opacity: 0;
  730	transition: opacity ease 0.2s, bottom ease 0.2s;
  731	transform: translate(-50%, 0);
  732	white-space: nowrap;
  733	z-index: 99;
  734
  735	&.active {
  736		opacity: 1;
  657		bottom: @space-2x;
  737		bottom: @space-1x;
  738	}
  659}
  659
  \ No newline at end of file
  739
  740	@media(min-width: @screen-xs) {
  741		left: @space-2x;
  742		bottom: @space-1x;
  743		transform: none;
  744
  745		&.active {
  746			bottom: @space-2x;
  747		}
  748	}
  749}