making it mobile friendly
This commit is contained in:
ivanch committed
1 parent
6a93e9ae8d
commit
e205172fce
9 files changed
+175
-112
No files matched your search
+23
-31
@@ -16,7 +16,6 @@ body {
|
||||
font-family: var(--font-family);
|
||||
background: var(--background-color);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -65,13 +64,15 @@ img {
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
--page-gutter: var(--space-lg);
|
||||
--page-top: var(--space-xl);
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
padding: 0 var(--space-lg);
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding: var(--page-top) var(--page-gutter) var(--space-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -114,8 +115,8 @@ img {
|
||||
padding: var(--space-2xl) var(--space-xl);
|
||||
transition: background var(--dur-med) var(--ease-out-soft),
|
||||
box-shadow var(--dur-med) var(--ease-out-soft);
|
||||
min-width: 26rem;
|
||||
max-width: 26rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
@@ -158,45 +159,36 @@ img {
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Mobile responsive layout */
|
||||
/* Single breakpoint switches the centered card to a stacked column. */
|
||||
/* Width constraints (set via tokens in section CSS) are overridden */
|
||||
/* in one place here rather than repeated across multiple sections. */
|
||||
/* Keep the page in normal flow so short screens can scroll fully. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
@media (max-width: 1024px) {
|
||||
.main-container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
padding: var(--space-xl) var(--space-md);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
--page-gutter: var(--space-md);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.content,
|
||||
.homelab-section,
|
||||
.projects-section {
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: var(--space-xl) var(--space-sm);
|
||||
--page-gutter: var(--space-xs);
|
||||
--page-top: var(--space-md);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* Leave room for notches and the home indicator in landscape, too. */
|
||||
@supports (padding: max(0px, env(safe-area-inset-left))) {
|
||||
.main-container {
|
||||
padding-top: max(var(--page-top), env(safe-area-inset-top));
|
||||
padding-left: max(var(--page-gutter), env(safe-area-inset-left));
|
||||
padding-right: max(var(--page-gutter), env(safe-area-inset-right));
|
||||
padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
+31
-3
@@ -14,8 +14,36 @@
|
||||
filter: brightness(0.7) saturate(1.05);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.matrix-canvas {
|
||||
filter: brightness(0.6) saturate(0.9);
|
||||
/* CSS only on phones/tablets and for reduced motion: no canvas work. */
|
||||
/* Keep this query in sync with js/flowfield.js. */
|
||||
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse at 0% 0%, rgba(79, 195, 247, 0.18), transparent 55%),
|
||||
radial-gradient(ellipse at 100% 65%, rgba(118, 75, 162, 0.22), transparent 60%),
|
||||
linear-gradient(150deg, #0b1220, #100c1c);
|
||||
}
|
||||
|
||||
.matrix-canvas,
|
||||
.avatar .glitch-layer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-container .glass,
|
||||
.avatar::after,
|
||||
.homelab-background,
|
||||
.homelab-background::after,
|
||||
.homelab-title {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.main-container .glass {
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
/* Avoid blur compositing work while scrolling. */
|
||||
body .main-container :is(.glass, .content, .projects-section, .homelab-section, .btn) {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
+21
-23
@@ -5,17 +5,18 @@
|
||||
padding: var(--space-2xl);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: var(--space-xl);
|
||||
align-items: center;
|
||||
animation: fadeInUp 0.8s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.hero-details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
||||
gap: var(--space-sm);
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@@ -153,7 +154,6 @@
|
||||
/* ------------------------------------------------------------------ */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-details {
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
@@ -166,6 +166,10 @@
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.tech-tags {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -176,8 +180,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-details {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: var(--text-xl);
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
@@ -191,35 +200,24 @@
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: var(--space-xs);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-sm);
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
max-width: calc(50% - 6px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-link span {
|
||||
display: none;
|
||||
.social-link:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.social-link i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.social-link {
|
||||
max-width: calc(100% / 2 - 6px);
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
.homelab-section {
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
background: rgba(20, 20, 30, 0.10);
|
||||
backdrop-filter: blur(48px);
|
||||
@@ -7,8 +6,8 @@
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: var(--shadow-md), var(--inset-shadow);
|
||||
border: 1px solid var(--glass-border);
|
||||
min-width: 26rem;
|
||||
max-width: 26rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -220,12 +219,11 @@
|
||||
.homelab-buttons {
|
||||
gap: var(--space-sm);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.homelab-btn {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -262,6 +262,26 @@
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Responsive */
|
||||
/* ------------------------------------------------------------------ */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.profile-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.profile-container .profile-info {
|
||||
margin-top: 0;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.profile-container .avatar {
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.profile-info {
|
||||
align-items: center;
|
||||
@@ -304,7 +324,7 @@
|
||||
}
|
||||
|
||||
.profile-info-item {
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-sm);
|
||||
flex-direction: row;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
@@ -327,6 +347,6 @@
|
||||
}
|
||||
|
||||
.profile-info-item {
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
+17
-16
@@ -1,5 +1,4 @@
|
||||
.projects-section {
|
||||
flex: 0 0 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
@@ -10,8 +9,8 @@
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: var(--shadow-md), var(--inset-shadow);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
min-width: 380px;
|
||||
max-width: 440px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
@@ -112,13 +111,11 @@
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* Keep long titles from pushing icons to a new line */
|
||||
/* Let titles wrap while keeping the action links available. */
|
||||
.project-title > span:first-child {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.project-icon-link {
|
||||
@@ -150,12 +147,16 @@
|
||||
/* Responsive */
|
||||
/* ------------------------------------------------------------------ */
|
||||
@media (max-width: 1024px) {
|
||||
.projects-section {
|
||||
flex: unset;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: var(--space-xl);
|
||||
min-width: unset;
|
||||
.project-icon-link {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.project-icon-link {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,7 +180,7 @@
|
||||
}
|
||||
|
||||
.projects-title {
|
||||
font-size: var(--text-sm);
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.project {
|
||||
@@ -191,7 +192,7 @@
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.project-icons {
|
||||
@@ -205,7 +206,7 @@
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-sm);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
|
||||
Reference in new issue
Block a user