Mobile improvements
This commit is contained in:
parent
58dc25f417
commit
70762ec9ef
GPG Key ID:
FC09694A000800C8
@ -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,36 +913,43 @@ body#legacy
|
||||
}
|
||||
}
|
||||
|
||||
main > header {
|
||||
min-height: 860px;
|
||||
main {
|
||||
grid-template-rows: max(800px, calc(100lvh - 5rem)) auto;
|
||||
|
||||
> hgroup {
|
||||
padding-top: 4rem;
|
||||
> header {
|
||||
min-height: calc(800px - 5rem);
|
||||
|
||||
.lede {
|
||||
max-width: 80%;
|
||||
> hgroup {
|
||||
padding-top: 4rem;
|
||||
|
||||
.lede {
|
||||
font-size: 1.6rem;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> aside {
|
||||
flex-direction: row;
|
||||
> aside {
|
||||
flex-direction: row;
|
||||
padding-bottom: 0;
|
||||
padding-top: 3rem;
|
||||
|
||||
figure {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 2rem 2rem auto;
|
||||
max-width: 16%;
|
||||
padding-right: 1rem;
|
||||
figure {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 2rem 2rem auto;
|
||||
max-width: 16%;
|
||||
padding-right: 1rem;
|
||||
|
||||
figcaption {
|
||||
grid-column-start: 1;
|
||||
figcaption {
|
||||
grid-column-start: 1;
|
||||
|
||||
&.min {
|
||||
width: min-content;
|
||||
}
|
||||
&.min {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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, & 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 := "" -}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user