Improve responsive layouts and streamline page loading
All checks were successful
Deploy MineGeo to Dokploy / deploy (push) Successful in 8m58s
All checks were successful
Deploy MineGeo to Dokploy / deploy (push) Successful in 8m58s
This commit is contained in:
@@ -83,6 +83,24 @@ html[data-theme="light"] :is(h1, h2, h3) {
|
||||
html[data-theme="light"] .hero h1 span {
|
||||
text-shadow: none;
|
||||
}
|
||||
html[data-theme="light"] :is(.compass-art, .floating-tag) {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border-color: var(--line);
|
||||
box-shadow:
|
||||
inset 0 1px #fff,
|
||||
0 4px 12px #243a1814;
|
||||
}
|
||||
html[data-theme="light"] .floating-tag strong {
|
||||
color: var(--text);
|
||||
}
|
||||
html[data-theme="light"] .floating-tag > span {
|
||||
color: var(--muted);
|
||||
}
|
||||
html[data-theme="light"] .card-type {
|
||||
background: var(--panel2);
|
||||
color: var(--text);
|
||||
}
|
||||
html[data-theme="light"] :is(.site-header, .site-footer) {
|
||||
background: var(--bg);
|
||||
border-color: var(--line);
|
||||
@@ -387,7 +405,12 @@ html[data-theme="light"] .site-cursor-dot span {
|
||||
.header-inner {
|
||||
max-width: 1600px;
|
||||
}
|
||||
@media (max-width: 1500px) {
|
||||
.nav-toggle,
|
||||
.site-navigation .nav-support,
|
||||
.account-symbol {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1500px) and (min-width: 1201px) {
|
||||
.site-header {
|
||||
height: auto;
|
||||
}
|
||||
@@ -407,76 +430,140 @@ html[data-theme="light"] .site-cursor-dot span {
|
||||
padding: 12px 0 2px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.header-inner {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
@media (max-width: 1200px) {
|
||||
.site-header {
|
||||
height: auto;
|
||||
}
|
||||
.header-actions {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
.header-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
.header-inner > .brand {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.header-inner .header-actions {
|
||||
grid-area: 1 / 2;
|
||||
margin: 0;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
}
|
||||
.header-inner .nav-toggle {
|
||||
grid-area: 1 / 3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text);
|
||||
background: var(--panel);
|
||||
}
|
||||
.header-inner nav.site-navigation {
|
||||
display: none;
|
||||
grid-area: 2 / 1 / auto / -1;
|
||||
width: 100%;
|
||||
padding: 12px 0 0;
|
||||
margin: 2px 0 0;
|
||||
border-top: 1px solid var(--line);
|
||||
gap: 4px;
|
||||
font:
|
||||
500 14px/1.5 Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
.header-inner nav.site-navigation[data-open="true"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.site-navigation a {
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.site-navigation a[aria-current="page"] {
|
||||
color: var(--green);
|
||||
background: var(--panel2);
|
||||
}
|
||||
.site-navigation a[aria-current="page"]::after {
|
||||
display: none;
|
||||
}
|
||||
.site-navigation .nav-support {
|
||||
display: block;
|
||||
}
|
||||
.site-navigation a:hover,
|
||||
.nav-toggle:hover {
|
||||
background: var(--panel2);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.header-inner {
|
||||
padding: 10px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
.header-inner .brand {
|
||||
gap: 5px;
|
||||
}
|
||||
.header-inner .brand .brand-wordmark {
|
||||
font-size: 21px;
|
||||
}
|
||||
.header-inner .brand .brand-mark {
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
}
|
||||
.header-inner .brand {
|
||||
gap: 5px;
|
||||
.header-inner .brand sup {
|
||||
display: none;
|
||||
}
|
||||
.header-actions {
|
||||
gap: 4px;
|
||||
.header-inner .header-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
.header-actions .header-report,
|
||||
.header-account > span,
|
||||
.header-account .account-arrow {
|
||||
display: none;
|
||||
}
|
||||
.header-actions .header-account {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
.header-account .account-symbol {
|
||||
display: block;
|
||||
}
|
||||
.header-actions .theme-toggle,
|
||||
.header-inner .nav-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.game-header .brand .brand-wordmark {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.header-actions {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
margin-left: 0;
|
||||
}
|
||||
.header-inner nav {
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
html[lang="ru"] .header-actions {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
margin-left: 0;
|
||||
}
|
||||
html[lang="ru"] .header-inner nav {
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
.difficulty-options button.difficulty-void {
|
||||
border-color: #a855f7;
|
||||
background: linear-gradient(145deg, #21122f, #100c18);
|
||||
color: #e9d5ff;
|
||||
box-shadow: 0 0 16px #a855f738, inset 0 0 20px #a855f710;
|
||||
box-shadow:
|
||||
0 0 16px #a855f738,
|
||||
inset 0 0 20px #a855f710;
|
||||
}
|
||||
.difficulty-options button.difficulty-void strong {
|
||||
color: #e9d5ff;
|
||||
text-shadow: 0 0 10px #c084fc99, 0 0 22px #a855f780;
|
||||
text-shadow:
|
||||
0 0 10px #c084fc99,
|
||||
0 0 22px #a855f780;
|
||||
}
|
||||
.difficulty-options button.difficulty-void.selected,
|
||||
html[data-theme="light"] .difficulty-options button.difficulty-void.selected {
|
||||
color: #f3e8ff;
|
||||
background: linear-gradient(145deg, #482363, #21122f);
|
||||
border-color: #d8b4fe;
|
||||
box-shadow: 0 0 24px #a855f760, inset 0 0 20px #c084fc18;
|
||||
box-shadow:
|
||||
0 0 24px #a855f760,
|
||||
inset 0 0 20px #c084fc18;
|
||||
}
|
||||
html[data-theme="light"] .difficulty-options button.difficulty-void {
|
||||
background: #f3e8ff;
|
||||
@@ -486,6 +573,9 @@ html[data-theme="light"] .difficulty-options button.difficulty-void {
|
||||
html[data-theme="light"] .difficulty-options button.difficulty-void strong {
|
||||
color: #7e22ce;
|
||||
}
|
||||
html[data-theme="light"] .difficulty-options button.difficulty-void.selected strong {
|
||||
html[data-theme="light"]
|
||||
.difficulty-options
|
||||
button.difficulty-void.selected
|
||||
strong {
|
||||
color: #f3e8ff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user