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

77
assets/css/site.css
View File

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