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