rob
/
cyberegg2077
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactored the LESS source to separate components-ish

develop
Rob Colbert 2 years ago
parent
87563c2ee5
commit
e937be7579
8 changed files with 205 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      game/less/lib/brand-link.less
  2. 58
      game/less/lib/button.less
  3. 6
      game/less/lib/container.less
  4. 45
      game/less/lib/game-view.less
  5. 35
      game/less/lib/main.less
  6. 7
      game/less/lib/page-footer.less
  7. 31
      game/less/lib/responsive.less
  8. 208
      game/less/style.less

16
game/less/lib/brand-link.less
View File

@ -0,0 +1,16 @@
.brand-link {
display: block;
width: 240px;
img.brand-header {
display: block;
width: 100%;
max-width: 960px;
height: auto;
margin: 0 auto;
}
.brand-prompt {
text-align: center;
}
}

58
game/less/lib/button.less
View File

@ -0,0 +1,58 @@
button {
border: solid 3px;
border-color: rgba(255,255,255, 0);
border-radius: 8px;
width: 80px;
height: 80px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.direction-button {
display: block;
background: rgba(0,0,0, 0.6);
color: white;
font-size: 4em;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
img.button-icon {
display: block;
height: 0.8em;
margin: 0 auto;
}
}
button.action-button {
background: rgba(255,0,0, 0.6);
color: white;
font-size: 3em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
button.action-button.active,
button.direction-button.active {
border-color: white;
}
button.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
button.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
button.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
}

6
game/less/lib/container.less
View File

@ -0,0 +1,6 @@
.container {
max-width: 960px;
margin: 0 auto;
background-color: var(--background-color);
color: var(--text-color);
}

45
game/less/lib/game-view.less
View File

@ -0,0 +1,45 @@
.game-title {
font-size: 2.25em;
font-weight: bold;
color: var(--brand-color);
}
.game-subtitle {
margin: 8px 0;
color: var(--brand-color);
font-style: italic;
}
.game-display-wrapper {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
canvas.game-display {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin: 0 auto;
height: auto;
border: solid 1px #4a4a4a;
border-radius: 8px;
}
button.start-button {
position: absolute;
left: calc(50% - 120px);
top: calc(50% - 32px);
width: 240px;
height: 64px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
}
}

35
game/less/lib/main.less
View File

@ -0,0 +1,35 @@
html, body {
margin: 0;
padding: 0;
--brand-color: rgb(252, 98, 0);
--background-color: rgb(0,0,0);
--text-color: #e8e8e8;
--default-margin: 30px;
}
body {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
padding: var(--default-margin) 0;
background-color: var(--background-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a, a:visited {
color: var(--brand-color);
}
.text-center {
text-align: center;
}
.margin-block {
display: block;
position: relative;
width: 100%;
margin: var(--default-margin) 0;
}

7
game/less/lib/page-footer.less
View File

@ -0,0 +1,7 @@
.page-footer {
display: flex;
.game-data {
flex-grow: 1;
}
}

31
game/less/lib/responsive.less
View File

@ -0,0 +1,31 @@
@media only screen and (max-width: 480px) {
.container .game-display-wrapper button.start-button {
left: calc(50% - 100px);
top: calc(50% - 28px);
width: 200px;
height: 56px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
}
.container button {
width: 50px;
height: 50px;
}
.container button.direction-button {
font-size: 2em;
}
.container button.action-button {
font-size: 1.5em;
}
.container button.action-button#btn-throw-egg {
bottom: 80px;
}
}

208
game/less/style.less
View File

@ -1,204 +1,10 @@
html, body {
margin: 0;
padding: 0;
@import 'lib/main.less';
--brand-color: rgb(252, 98, 0);
--background-color: rgb(0,0,0);
--text-color: #e8e8e8;
--default-margin: 30px;
}
body {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
padding: var(--default-margin) 0;
background-color: var(--background-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a, a:visited {
color: var(--brand-color);
}
.container {
max-width: 960px;
margin: 0 auto;
background-color: var(--background-color);
color: var(--text-color);
}
.text-center {
text-align: center;
}
.margin-block {
display: block;
position: relative;
width: 100%;
margin: var(--default-margin) 0;
}
.game-title {
font-size: 2.25em;
font-weight: bold;
color: var(--brand-color);
}
.game-subtitle {
margin: 8px 0;
color: var(--brand-color);
font-style: italic;
}
.game-display-wrapper {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
canvas.game-display {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin: 0 auto;
height: auto;
border: solid 1px #4a4a4a;
border-radius: 8px;
}
@import 'lib/container.less';
@import 'lib/game-view.less';
@import 'lib/button.less';
button.start-button {
position: absolute;
left: calc(50% - 120px);
top: calc(50% - 32px);
width: 240px;
height: 64px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
}
}
button {
border: solid 3px;
border-color: rgba(255,255,255, 0);
border-radius: 8px;
width: 80px;
height: 80px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.direction-button {
display: block;
background: rgba(0,0,0, 0.6);
color: white;
font-size: 4em;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
img.button-icon {
display: block;
height: 0.8em;
margin: 0 auto;
}
}
button.action-button {
background: rgba(255,0,0, 0.6);
color: white;
font-size: 3em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
@import 'lib/page-footer.less';
@import 'lib/brand-link.less';
button.action-button.active,
button.direction-button.active {
border-color: white;
}
button.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
button.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
button.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
}
@media only screen and (max-width: 480px) {
.container .game-display-wrapper button.start-button {
left: calc(50% - 100px);
top: calc(50% - 28px);
width: 200px;
height: 56px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
}
.container button {
width: 50px;
height: 50px;
}
.container button.direction-button {
font-size: 2em;
}
.container button.action-button {
font-size: 1.5em;
}
.container button.action-button#btn-throw-egg {
bottom: 80px;
}
}
.page-footer {
display: flex;
.game-data {
flex-grow: 1;
}
}
.brand-link {
display: block;
width: 240px;
img.brand-header {
display: block;
width: 100%;
max-width: 960px;
height: auto;
margin: 0 auto;
}
.brand-prompt {
text-align: center;
}
}
@import 'lib/responsive.less';
Write Preview
Loading…
Cancel
Save