aselimov/gitKeep
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix responsiveness on smaller screens

Browse source
This commit is contained in:
Alex Selimov 2026-05-29 09:16:10 -04:00
parent 433b69525b
commit 5b05cb4ff8
1 changed files with 28 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/lib/styles/style.css
View file

@ -1,4 +1,10 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
h1, h1,
h2, h2,
h3, h3,
@ -10,21 +16,25 @@ h6 {
.display-heading { .display-heading {
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
font-size: 72px; font-size: clamp(44px, 8vw, 72px);
line-height: 1; line-height: 1;
overflow-wrap: anywhere;
} }
.site-header { .site-header {
align-items: center; align-items: center;
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px 24px;
justify-content: space-between; justify-content: space-between;
padding: 16px 40px; padding: 16px clamp(20px, 4vw, 40px);
} }
.site-logo { .site-logo {
color: #222; color: #222;
flex: 0 0 auto;
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
font-size: 40px; font-size: clamp(32px, 9vw, 40px);
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
} }
@ -37,16 +47,21 @@ h6 {
.site-nav { .site-nav {
align-items: center; align-items: center;
display: flex; display: flex;
gap: 24px; flex: 0 1 auto;
flex-wrap: wrap;
gap: 10px clamp(10px, 3vw, 24px);
justify-content: flex-end;
margin-left: auto; margin-left: auto;
min-width: 0;
} }
.site-nav a { .site-nav a {
color: #222; color: #222;
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
font-size: 24px; font-size: clamp(16px, 5vw, 24px);
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
white-space: nowrap;
} }
.site-nav a:hover { .site-nav a:hover {
@ -58,7 +73,7 @@ h6 {
background: transparent; background: transparent;
border: 1px solid #222; border: 1px solid #222;
color: #222; color: #222;
padding: 4px 14px; padding: clamp(2px, 1vw, 4px) clamp(8px, 2.5vw, 14px);
} }
.site-nav .login-link:hover { .site-nav .login-link:hover {
@ -95,16 +110,13 @@ li::before {
@media (max-width: 600px) { @media (max-width: 600px) {
.site-header { .site-header {
align-items: flex-start; gap: 12px;
flex-direction: column; padding: 12px 16px;
gap: 16px;
padding: 16px 20px;
} }
.site-nav { .site-nav {
flex-wrap: wrap; gap: 8px 12px;
gap: 12px 18px; margin-left: auto;
margin-left: 0;
} }
} }
@ -126,12 +138,13 @@ li::before {
.ascii-art { .ascii-art {
display: inline-block; display: inline-block;
font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 8px; font-size: clamp(4px, 0.7vw, 8px);
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
line-height: 1; line-height: 1;
margin: 0; margin: 0;
overflow: visible; max-width: 100%;
overflow: hidden;
white-space: pre; white-space: pre;
} }