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
  43h1 {
  

  55h2 {
  56	font-size: 28px;
  57	font-weight: 700;
  46	margin-top: @space-8x;
  58	margin-top: @space-4x;
  59	margin-bottom: @space-2x;
  60
  61	@media(min-width: @screen-xs) {
  62		margin-top: @space-8x;
  63	}
  64}
  65
  66h3 {
  

  83
  84	a {
  85		text-decoration: underline;
  70		white-space: nowrap;
  86	}
  87
  88	mark {
  89		background: @color-gray-200;
  75		white-space: nowrap;
  90		border-radius: 2px;
  91		padding: 2px 4px;
  92		color: @color-gray-800;
  93		word-break: break-word;
  94	}
  95
  96	b {
  

  109}
  110
  111.slogan {
  97	font-size: 64px;
  112	font-size: 44px;
  113	margin-bottom: @space-4x;
  114
  115	@media(min-width: @screen-xs) {
  116		font-size: 64px;
  117	}
  118}
  119
  120.slogan-subline {
  

  176	transform: translate(calc(-100% - @space-2x), 0);
  177	width: 250px;
  178	padding-top: @space-4x;
  179	display: none;
  180
  181	@media(min-width: @screen-lg) {
  182		display: block;
  183	}
  184
  185	h4 {
  186		margin: 0;
  

  216	padding: @space-1x;
  217	margin-top: @space-2x;
  218	position: relative;
  219	overflow-x: auto;
  220
  221	&::-webkit-scrollbar {
  222		height: 8px;
  223	}
  224
  225	&::-webkit-scrollbar-thumb {
  226		background: @color-gray-700;
  227
  228		&:hover {
  229			background: @color-gray-800;
  230		}
  231	}
  232
  233	pre {
  234		color: @color-gray-400;
  235		line-height: 22px;
  236		tab-size: 40px;
  237		font-family: 'JetBrains Mono', monospace;
  238		display: inline-block;
  239
  240		span {
  241			font-family: 'JetBrains Mono', monospace;
  

  355	iframe {
  356		border-radius: 4px;
  357		width: 100%;
  320		height: 500px;
  358		height: calc(100vw * 500 / 800);
  359		pointer-events: none;
  360
  361		@media(min-width: 800px) {
  362			width: 100%;
  363			height: 500px;
  364		}
  365	}
  366
  367	p {
  

  371
  372.breadcrumb {
  373	display: flex;
  331	padding-top: @space-4x;
  374	padding-top: @space-2x;
  375	list-style-type: none;
  376
  377	@media(min-width: @screen-xs) {
  378		padding-top: @space-4x;
  379	}
  380
  381	li {
  382		color: @color-gray-700;
  383		font-size: 16px;
  

  409		display: flex;
  410		flex-direction: column;
  411		border-radius: 4px;
  365		width: calc(25% - @space-1x * 3 / 4);
  412		width: calc(50% - @space-1x * 1 / 2);
  413		margin-bottom: @space-1x;
  414
  415		@media(min-width: @screen-xs) {
  416			width: calc(25% - @space-1x * 3 / 4);
  417		}
  418
  419		.palette-tone {
  420			width: 100%;
  421			color: white;
  

  429
  430			&.dark {
  431				color: @color-gray-900;
  381				font-weight: 600;
  432				font-weight: 500;
  433			}
  434
  435			&:hover {
  

  467		border-radius: 4px;
  468		justify-content: center;
  469		align-items: center;
  419		width: calc(10% - @space-1x * 9 / 10);
  470		width: calc(25% - @space-1x * 3 / 4);
  471		aspect-ratio: 1 / 1;
  472		background: @color-gray-50;
  473		cursor: pointer;
  474
  475		@media(min-width: @screen-xs) {
  476			width: calc(16.666% - @space-1x * 5 / 6);
  477		}
  478
  479		@media(min-width: @screen-sm) {
  480			width: calc(10% - @space-1x * 9 / 10);
  481		}
  482		
  483		.ico {
  484			color: @color-gray-600;
  

  495}
  496
  497footer {
  439	margin-top: @space-8x;
  440	margin-bottom: @space-4x;
  498	margin-top: @space-4x;
  499	margin-bottom: @space-2x;
  500
  501	@media(min-width: @screen-xs) {
  502		margin-top: @space-8x;
  503		margin-bottom: @space-4x;
  504
  505		a {
  506
  507			&:first-of-type {
  508				display: flex !important;
  509			}
  510		}
  511	}
  512
  513	.container {
  514		display: flex;
  

  525
  526	a {
  527		font-size: 16px;
  528		display: flex;
  529		align-items: center;
  530
  531		&:first-of-type {
  532			display: none;
  533		}
  534	}
  535}
  536
  

  595.snackbar {
  596	background: @color-gray-900;
  597	position: fixed;
  521	left: @space-2x;
  522	bottom: @space-1x;
  598	left: 50%;
  599	bottom: 0;
  600	border-radius: 4px;
  601	color: @color-white;
  602	padding: 18px 30px;
  603	pointer-events: none;
  604	opacity: 0;
  605	transition: opacity ease 0.2s, bottom ease 0.2s;
  606	transform: translate(-50%, 0);
  607	white-space: nowrap;
  608
  609	&.active {
  610		opacity: 1;
  532		bottom: @space-2x;
  611		bottom: @space-1x;
  612	}
  613
  614	@media(min-width: @screen-xs) {
  615		left: @space-2x;
  616		bottom: @space-1x;
  617		transform: none;
  618
  619		&.active {
  620			bottom: @space-2x;
  621		}
  622	}
  534}
  534
  \ No newline at end of file
  623}