A lightweight JavaScript game engine
git clone git://soophie.de/game-engine
blob: 2f6eb739b39f8394e15cd275272e84ddef8a6302 (5410 bytes)[doc][blame][raw]
1
@space-1x: 20px;2
@space-2x: 40px;3
@space-4x: 80px;4
@space-8x: 160px;6
.space-1 {7
width: 100%;8
height: @space-1x;9
}11
.space-2 {12
width: 100%;13
height: @space-2x;14
}16
.space-4 {17
width: 100%;18
height: @space-4x;19
}21
.space-8 {22
width: 100%;23
height: @space-8x;24
}26
* {27
color: @color-gray-900;28
font-family: 'Inter';29
}31
h1 {32
font-size: 36px;33
margin-top: @space-4x;35
sup {36
font-size: 18px;37
font-weight: 600;38
padding-left: 2px;39
vertical-align: top;40
}41
}43
h2 {44
font-size: 28px;45
font-weight: 700;46
margin-top: @space-8x;47
margin-bottom: @space-2x;48
}50
h3 {51
font-size: 24px;52
font-weight: 600;53
margin-top: @space-2x;54
}56
h4 {57
font-size: 18px;58
font-weight: 600;59
margin-top: @space-2x;60
}62
p {63
color: @color-gray-700;64
font-size: 16px;65
margin-top: @space-1x;66
line-height: 24px;67
}69
.slogan {70
font-size: 64px;71
margin-bottom: @space-4x;72
}74
.slogan-subline {75
margin-bottom: @space-4x;76
}78
.subline {79
font-weight: 500;80
font-size: 18px;81
}83
a {84
text-decoration: none;85
color: @color-gray-800;87
&:hover {88
text-decoration: underline;89
color: @color-gray-900;90
}91
}93
&::-webkit-scrollbar {94
width: 10px;95
}97
&::-webkit-scrollbar-thumb {98
background: @color-gray-400;100
&:hover {101
background: @color-gray-500;102
}103
}105
.container {106
position: relative;107
}109
aside {110
position: fixed;111
transform: translate(calc(-100% - @space-2x), 0);112
width: 250px;113
padding-top: @space-4x;115
h4 {116
margin: 0;117
cursor: pointer;118
user-select: none;119
margin-bottom: @space-1x;120
}122
ul {123
list-style-type: none;125
li {126
margin-top: calc(@space-1x / 2);127
cursor: pointer;128
user-select: none;129
font-size: 16px;130
font-weight: 500;131
color: @color-gray-700;132
line-height: 24px;134
&:hover {135
color: @color-gray-900;136
}137
}138
}139
}141
code {142
display: block;143
background: @color-gray-900;144
border-radius: 4px;145
padding: @space-1x;146
margin-top: @space-2x;147
position: relative;149
pre {150
color: @color-gray-400;151
line-height: 22px;152
tab-size: 40px;153
font-family: 'JetBrains Mono', monospace;155
span {156
font-family: 'JetBrains Mono', monospace;157
color: inherit;159
&.n {160
color: @color-gray-50;161
}163
&.c {164
color: @color-blue-300;165
}167
&.s {168
color: @color-green-300;169
}171
&.p {172
color: @color-cyan-300;173
}175
&.x {176
color: @color-teal-400;177
}179
&.ref {180
cursor: pointer;182
&:hover {183
text-decoration: underline;184
}185
}186
}187
}189
.clipboard {190
position: absolute;191
top: 14px;192
right: 14px;193
width: 34px;194
height: 34px;195
padding: 5px;196
border-radius: 50%;197
cursor: pointer;198
color: @color-gray-600;200
&:hover {201
color: @color-gray-700;203
&::before,204
&::after {205
opacity: 1;206
}207
}209
&::before {210
content: '';211
opacity: 0;212
display: inline-block;213
position: absolute;214
user-select: none;215
pointer-events: none;216
left: 50%;217
top: -2px;218
transform: translate(-50%, 0);219
border: 5px solid transparent;220
border-top: 5px solid @color-gray-900;221
}223
&::after {224
content: attr(data-title);225
opacity: 0;226
display: inline-block;227
position: absolute;228
background: @color-gray-900;229
padding: 6px 8px;230
color: @color-white;231
font-family: 'Inter', sans-serif;232
font-size: 12px;233
border-radius: 3px;234
user-select: none;235
pointer-events: none;236
left: 50%;237
top: -25px;238
transform: translate(-50%, 0);239
}240
}241
}243
.logo {244
margin-top: @space-2x;245
cursor: pointer;246
}248
.banner {249
display: block;250
margin-top: @space-4x;252
img {253
width: 100%;254
height: 100%;255
object-fit: cover;256
display: block;257
border-radius: 4px;258
height: 500px;259
}261
p {262
margin-top: @space-2x;263
}264
}266
.embed {267
display: block;268
margin-top: @space-4x;270
iframe {271
border-radius: 4px;272
width: 100%;273
height: 500px;274
pointer-events: none;275
}277
p {278
margin-top: @space-2x;279
}280
}282
.breadcrumb {283
display: flex;284
padding-top: @space-4x;285
list-style-type: none;287
li {288
color: @color-gray-700;289
font-size: 16px;290
line-height: 24px;291
position: relative;292
padding-right: @space-1x;294
&:not(:last-of-type) {296
&::after {297
content: '/';298
display: inline-block;299
position: absolute;300
right: 7px;301
user-select: none;302
}303
}304
}305
}307
.palette-list {308
display: flex;309
flex-wrap: wrap;310
list-style-type: none;311
margin-top: @space-4x;312
gap: @space-1x;314
.palette {315
display: flex;316
flex-direction: column;317
border-radius: 4px;318
overflow: hidden;319
width: calc(25% - @space-1x * 3 / 4);320
margin-bottom: @space-1x;322
.palette-tone {323
width: 100%;324
color: white;325
font-size: 14px;326
display: inline-flex;327
align-items: center;328
padding: calc(@space-1x / 1.25);329
cursor: pointer;330
user-select: none;332
&.dark {333
color: @color-gray-900;334
font-weight: 600;335
}336
}337
}338
}340
.icon-list {341
display: flex;342
flex-wrap: wrap;343
list-style-type: none;344
margin-top: @space-2x;345
margin-bottom: @space-2x;346
gap: @space-1x;348
.icon {349
display: flex;350
border-radius: 4px;351
justify-content: center;352
align-items: center;353
width: calc(10% - @space-1x * 9 / 10);354
aspect-ratio: 1 / 1;355
background: @color-gray-50;356
cursor: pointer;358
.ico {359
color: @color-gray-700;360
}362
&:hover {364
.ico {365
color: @color-gray-900;366
}367
}368
}369
}371
footer {372
margin-top: @space-8x;373
margin-bottom: @space-4x;375
.container {376
display: flex;377
justify-content: flex-end;378
gap: @space-1x;379
}381
p {382
flex: 1;383
align-self: flex-start;384
color: @color-gray-700;385
margin: 0;386
}388
a {389
font-size: 16px;390
}