andrew/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile improvements

Browse Source
This commit is contained in:
Andrew Gioia 2026-04-30 10:44:19 -04:00
parent 58dc25f417
commit 70762ec9ef
Signed by: andrew
GPG Key ID: FC09694A000800C8
2 changed files with 73 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
assets/css/site.css
View File

@ -42,7 +42,7 @@
} }
html { html {
font-size: 14px; font-size: 15px;
background: var(--bg); background: var(--bg);
} }
@ -66,9 +66,9 @@ a {
} }
h1 { h1 {
font-size: clamp(2.25rem, 9dvw, 4rem); font-size: clamp(2.75rem, 9dvw, 4rem);
font-weight: 700; font-weight: 700;
letter-spacing: -0.5px; letter-spacing: -1px;
line-height: 1.05; line-height: 1.05;
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@ -259,18 +259,17 @@ body {
main { main {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: ; grid-template-rows: min-content auto; /* header is full initial pane, then content is auto */
justify-items: center; justify-items: center;
/* layout handling for the top sections */ /* layout handling for the top sections */
> header { > header {
align-content: start; align-content: start;
display: grid; display: grid;
grid-auto-rows: auto 12rem; grid-auto-rows: auto auto; /* @todo make row 2 12rem on larger screens */
justify-items: center; justify-items: center;
height: calc(100lvh - 5rem);
max-height: calc(100lvh - 5rem);
max-width: 100lvw; max-width: 100lvw;
padding-bottom: 10rem; /* artwork pad on mobile */
width: 100lvw; width: 100lvw;
hgroup, hgroup,
@ -287,7 +286,7 @@ main {
.lede { .lede {
margin: 1rem 0 0; margin: 1rem 0 0;
font-size: 1.6rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
@ -317,7 +316,8 @@ main {
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
justify-content: flex-start; justify-content: flex-start;
padding-top: 3rem; padding-bottom: 2rem;
padding-top: 2rem;
figure { figure {
display: grid; display: grid;
@ -452,23 +452,32 @@ section#studies {
h1 { h1 {
border-bottom: 0.25rem solid var(--white); border-bottom: 0.25rem solid var(--white);
color: #fff; color: #fff;
margin-bottom: 3rem;
max-width: var(--column-width); max-width: var(--column-width);
padding-bottom: 1rem; padding-bottom: 1rem;
width: var(--column-width); width: var(--column-width);
+ p {
color: var(--white);
padding-right: 1rem;
margin-bottom: 0;
max-width: var(--column-width);
}
} }
article { article {
background-color: var(--blue); background-color: var(--blue);
background-image: var(--card-bg); background-image: var(--card-bg);
background-position: top 20rem right -2rem; /* mobile position */ background-position: bottom -16rem right -1rem; /* mobile position */
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50% auto; /* mobile size */ background-size: 50% auto; /* mobile size */
border: none; border: none;
color: #fff; color: #fff;
transition: transform 150ms ease-in, background-position 150ms ease-in; transition: transform 150ms ease-in, background-position 150ms ease-in;
&:first-of-type {
margin-top: 3rem;
}
> a { > a {
color: inherit; color: inherit;
display: block; display: block;
@ -479,7 +488,7 @@ section#studies {
} }
h2 { h2 {
font-size: 2.5rem; font-size: 2rem;
padding-top: 0; padding-top: 0;
text-shadow: none; text-shadow: none;
font-weight: 700; font-weight: 700;
@ -495,7 +504,7 @@ section#studies {
} }
&:hover { &:hover {
background-position: top 19.5rem right -2rem; background-position: bottom -15.5 right -1rem;
transform: translateY(-0.5rem); transform: translateY(-0.5rem);
} }
@ -774,8 +783,6 @@ body#default
main > header { main > header {
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
justify-items: center;
width: 100%;
#circle, #circle,
#rectangle, #rectangle,
@ -791,7 +798,7 @@ body#default
bottom: 12dvw; bottom: 12dvw;
height: 10dvw; height: 10dvw;
border-radius: 10dvw 10dvw 0 0; border-radius: 10dvw 10dvw 0 0;
left: 52dvw; left: 60dvw;
width: 20dvw; width: 20dvw;
} }
@ -800,15 +807,16 @@ body#default
height: 12dvw; height: 12dvw;
width: 12dvw; width: 12dvw;
bottom: 0; bottom: 0;
left: 54dvw;
} }
#circle { #circle {
background: var(--blue); background: var(--blue);
border-radius: 50%; border-radius: 50%;
height: 20dvw; height: 16dvw;
bottom: 5dvh; bottom: 3dvh;
left: 4dvw; left: 4dvw;
width: 20dvw; width: 16dvw;
&:hover { &:hover {
transform: translateX(1rem); transform: translateX(1rem);
@ -817,8 +825,8 @@ body#default
#rectangle { #rectangle {
background: var(--yellow); background: var(--yellow);
height: 5dvh; height: 3dvh;
width: 36dvw; width: 32dvw;
left: 2dvw; left: 2dvw;
bottom: 0; bottom: 0;
transform-origin: 38%; transform-origin: 38%;
@ -826,8 +834,8 @@ body#default
#triangle { #triangle {
background: var(--red); background: var(--red);
height: 40dvw; height: 32dvw;
width: 40dvw; width: 32dvw;
bottom: 0; bottom: 0;
right: 0; right: 0;
clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%);
@ -838,7 +846,7 @@ body#legacy
{ {
main > header { main > header {
background-image: url('/img/nyc.svg'); background-image: url('/img/nyc.svg');
background-position: bottom 0 right -15dvw; background-position: bottom 0 right -20dvw;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: clamp(300px, 50dvw, 800px) auto; background-size: clamp(300px, 50dvw, 800px) auto;
position: relative; position: relative;
@ -864,6 +872,7 @@ body#legacy
} }
/* small height screens override */ /* small height screens override */
/* FIX */
@media (max-height: 720px) @media (max-height: 720px)
{ {
main > header { main > header {
@ -904,36 +913,43 @@ body#legacy
} }
} }
main > header { main {
min-height: 860px; grid-template-rows: max(800px, calc(100lvh - 5rem)) auto;
> hgroup { > header {
padding-top: 4rem; min-height: calc(800px - 5rem);
.lede { > hgroup {
max-width: 80%; padding-top: 4rem;
.lede {
font-size: 1.6rem;
max-width: 80%;
}
} }
}
> aside { > aside {
flex-direction: row; flex-direction: row;
padding-bottom: 0;
padding-top: 3rem;
figure { figure {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: 2rem 2rem auto; grid-template-rows: 2rem 2rem auto;
max-width: 16%; max-width: 16%;
padding-right: 1rem; padding-right: 1rem;
figcaption { figcaption {
grid-column-start: 1; grid-column-start: 1;
&.min { &.min {
width: min-content; width: min-content;
} }
span { span {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
}
} }
} }
} }
@ -1046,7 +1062,7 @@ body#legacy
right: -1dvw; right: -1dvw;
&:hover { &:hover {
transform: rotate(6deg) translateY(0.25dvh); transform: rotate(6deg) translateY(0.125dvh);
+ #square { + #square {
transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw); transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
@ -1058,10 +1074,11 @@ body#legacy
bottom: 45dvh; bottom: 45dvh;
height: 12dvh; height: 12dvh;
width: 12dvh; width: 12dvh;
left: auto;
right: 2dvw; right: 2dvw;
&:has(+ #circle:hover) { &:has(+ #circle:hover) {
transform: translateX(-0.125dvw); transform: translateX(-0.25dvw);
} }
} }
@ -1095,6 +1112,10 @@ body#legacy
section#studies { section#studies {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
article h2 {
font-size: 2.5rem;
}
} }
} }
} }

5
layouts/index.html
View File

@ -7,7 +7,7 @@
<p class="lede"> <p class="lede">
<b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter! <b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
</p> </p>
<p class="lede"> <p class="lede tablet-show">
Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below. Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.
</p> </p>
</hgroup> </hgroup>
@ -19,6 +19,9 @@
</header> </header>
<section id="studies"> <section id="studies">
<h1>Case studies</h1> <h1>Case studies</h1>
<p class="tablet-hide">
Longer form overviews of some of my projects over the past few years. These each highlight different aspects of my design process, collaboration, and skills.
</p>
{{ range where .Site.RegularPages "Section" "studies" }} {{ range where .Site.RegularPages "Section" "studies" }}
{{- $page := . -}} {{- $page := . -}}
{{- $cardImage := "" -}} {{- $cardImage := "" -}}