More cleanups with sizing and spacing and alignment, footer updates
This commit is contained in:
parent
70762ec9ef
commit
1ef9ba17fb
GPG Key ID:
FC09694A000800C8
@ -31,7 +31,7 @@
|
||||
--font-serif: "Source Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
|
||||
|
||||
--column-width: min(72rem, calc(100% - 3rem));
|
||||
--content-width: min(48rem, calc(100% - 3rem));
|
||||
--content-width: min(44rem, calc(100% - 3rem));
|
||||
--article-grid: 1fr;
|
||||
--article-gap: 2rem;
|
||||
--article-top: 0;
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@ -205,23 +205,48 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
gap: 2rem;
|
||||
line-height: 1.4;
|
||||
padding: 2rem 1.5rem;
|
||||
justify-content: center;
|
||||
|
||||
section {
|
||||
display: grid;
|
||||
grid-template-columns: var(--article-grid);
|
||||
gap: var(--article-gap);
|
||||
justify-content: center;
|
||||
justify-content: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footnotes ul {
|
||||
grid-column-start: 2;
|
||||
list-style: none;
|
||||
margin: 0 0 0 -1.5rem;
|
||||
padding: 0;
|
||||
big {
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
span {
|
||||
color: var(--faded);
|
||||
font-weight: 400;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
#end
|
||||
{
|
||||
.text p:first-child {
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 0.25rem;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#footnotes
|
||||
{
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: grid;
|
||||
@ -232,20 +257,19 @@ body {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#end {
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.text {
|
||||
grid-column-start: 2;
|
||||
big {
|
||||
order: 1;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
big {
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -441,98 +465,6 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
/* list content */
|
||||
|
||||
section#studies {
|
||||
background: var(--black);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 5rem 0 3rem;
|
||||
|
||||
h1 {
|
||||
border-bottom: 0.25rem solid var(--white);
|
||||
color: #fff;
|
||||
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: 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;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
padding-top: 0;
|
||||
text-shadow: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
color: #fff;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0.5rem;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-position: bottom -15.5 right -1rem;
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
> figure {
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
color: color-mix(in srgb, var(--icon-color), #fff 50%);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* table of contents */
|
||||
nav {
|
||||
align-self: start;
|
||||
@ -608,10 +540,10 @@ nav {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
height: 1em;
|
||||
height: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
@ -778,6 +710,8 @@ span[color="yellow"] {
|
||||
/**
|
||||
* specific page handling
|
||||
*/
|
||||
|
||||
/* homepage */
|
||||
body#default
|
||||
{
|
||||
main > header {
|
||||
@ -841,7 +775,113 @@ body#default
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
}
|
||||
|
||||
> footer {
|
||||
background: var(--bg);
|
||||
color: var(--black);
|
||||
|
||||
big {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* list content */
|
||||
section#studies {
|
||||
background: var(--black);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 5rem 0;
|
||||
|
||||
h1 {
|
||||
border-bottom: 0.25rem solid var(--white);
|
||||
color: #fff;
|
||||
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: bottom -16rem right -1rem; /* mobile position */
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 30rem; /* 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;
|
||||
height: 100%;
|
||||
padding: 2rem 1.5rem 2.5rem;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
padding-top: 0;
|
||||
text-shadow: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
color: #fff;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0.5rem;
|
||||
text-shadow: none;
|
||||
|
||||
+ p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-position: bottom -15.5 right -1rem;
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
> figure {
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
color: color-mix(in srgb, var(--icon-color), #fff 50%);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* legacy case study */
|
||||
body#legacy
|
||||
{
|
||||
main > header {
|
||||
@ -901,10 +941,6 @@ body#legacy
|
||||
/* tablets */
|
||||
@media (min-width: 640px)
|
||||
{
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body > header {
|
||||
padding: 0 2rem;
|
||||
|
||||
@ -956,6 +992,20 @@ body#legacy
|
||||
}
|
||||
}
|
||||
|
||||
section#studies
|
||||
{
|
||||
article
|
||||
{
|
||||
> a {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
p:first-of-type + p {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tablet-show {
|
||||
display: block;
|
||||
}
|
||||
@ -965,7 +1015,7 @@ body#legacy
|
||||
}
|
||||
|
||||
/* landscape tablets */
|
||||
@media (min-width: 800px)
|
||||
@media (min-width: 768px)
|
||||
{
|
||||
section#studies
|
||||
{
|
||||
@ -1007,6 +1057,35 @@ body#legacy
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
body > footer
|
||||
{
|
||||
#end {
|
||||
grid-template-columns: var(--article-grid);
|
||||
gap: var(--article-gap);
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.text {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
}
|
||||
|
||||
#footnotes {
|
||||
grid-template-columns: var(--article-grid);
|
||||
gap: var(--article-gap);
|
||||
padding-bottom: 1rem;
|
||||
|
||||
ul {
|
||||
grid-column-start: 2;
|
||||
margin: 0.5rem 0 0 -1.5rem;
|
||||
}
|
||||
|
||||
big {
|
||||
order: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main > header {
|
||||
> hgroup {
|
||||
.lede {
|
||||
@ -1044,77 +1123,90 @@ body#legacy
|
||||
}
|
||||
}
|
||||
|
||||
body#default main
|
||||
body#default
|
||||
{
|
||||
> header {
|
||||
padding: 0 1.5rem;
|
||||
main
|
||||
{
|
||||
> header {
|
||||
padding: 0 1.5rem;
|
||||
|
||||
hgroup {
|
||||
padding: 10dvh 0 0;
|
||||
}
|
||||
hgroup {
|
||||
padding: 10dvh 0 0;
|
||||
}
|
||||
|
||||
#semicircle {
|
||||
bottom: 57dvh;
|
||||
height: 12dvh;
|
||||
border-radius: 12dvh 12dvh 0 0;
|
||||
width: 24dvh;
|
||||
left: auto;
|
||||
right: -1dvw;
|
||||
#semicircle {
|
||||
bottom: 57dvh;
|
||||
height: 12dvh;
|
||||
border-radius: 12dvh 12dvh 0 0;
|
||||
width: 24dvh;
|
||||
left: auto;
|
||||
right: -1dvw;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(6deg) translateY(0.125dvh);
|
||||
&:hover {
|
||||
transform: rotate(6deg) translateY(0.125dvh);
|
||||
|
||||
+ #square {
|
||||
transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
|
||||
+ #square {
|
||||
transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#square {
|
||||
bottom: 45dvh;
|
||||
height: 12dvh;
|
||||
width: 12dvh;
|
||||
left: auto;
|
||||
right: 2dvw;
|
||||
#square {
|
||||
bottom: 45dvh;
|
||||
height: 12dvh;
|
||||
width: 12dvh;
|
||||
left: auto;
|
||||
right: 2dvw;
|
||||
|
||||
&:has(+ #circle:hover) {
|
||||
transform: translateX(-0.25dvw);
|
||||
&:has(+ #circle:hover) {
|
||||
transform: translateX(-0.25dvw);
|
||||
}
|
||||
}
|
||||
|
||||
#circle {
|
||||
height: 15dvh;
|
||||
left: auto;
|
||||
bottom: 30dvh;
|
||||
right: 3dvw;
|
||||
width: 15dvh;
|
||||
}
|
||||
|
||||
#rectangle {
|
||||
height: 5dvh;
|
||||
left: auto;
|
||||
width: 36dvw;
|
||||
right: -16dvw;
|
||||
bottom: 25dvh;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-6deg) translateY(-0.125dvh);
|
||||
}
|
||||
}
|
||||
|
||||
#triangle {
|
||||
height: 25dvh;
|
||||
right: 6dvw;
|
||||
width: 25dvh;
|
||||
}
|
||||
}
|
||||
|
||||
#circle {
|
||||
height: 15dvh;
|
||||
left: auto;
|
||||
bottom: 30dvh;
|
||||
right: 3dvw;
|
||||
width: 15dvh;
|
||||
}
|
||||
section#studies {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
#rectangle {
|
||||
height: 5dvh;
|
||||
left: auto;
|
||||
width: 36dvw;
|
||||
right: -16dvw;
|
||||
bottom: 25dvh;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-6deg) translateY(-0.125dvh);
|
||||
article h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#triangle {
|
||||
height: 25dvh;
|
||||
right: 6dvw;
|
||||
width: 25dvh;
|
||||
}
|
||||
}
|
||||
|
||||
section#studies {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
> footer {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
|
||||
article h2 {
|
||||
font-size: 2.5rem;
|
||||
section {
|
||||
grid-template-columns: 12rem 1fr;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1124,7 +1216,9 @@ body#legacy
|
||||
@media (min-width: 1280px)
|
||||
{
|
||||
:root {
|
||||
--article-grid: 16rem var(--content-width) 8rem;
|
||||
--content-width: min(48rem, calc(100% - 3rem));
|
||||
--column-width: min(68rem, calc(100% - 3rem));
|
||||
--article-grid: 16rem var(--content-width) 4rem;
|
||||
--article-gap: 0;
|
||||
--article-top: 3rem;
|
||||
}
|
||||
@ -1139,12 +1233,25 @@ body#legacy
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
body#default
|
||||
{
|
||||
> footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
section {
|
||||
grid-template-columns: var(--article-grid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* displays */
|
||||
@media (min-width: 1440px)
|
||||
{
|
||||
:root {
|
||||
--column-width: min(72rem, calc(100% - 3rem));
|
||||
--article-grid: 16rem var(--content-width) 8rem;
|
||||
--article-top: 4rem;
|
||||
}
|
||||
|
||||
@ -31,13 +31,14 @@
|
||||
<div class="title">
|
||||
<a class="logo" href="{{ "/" | relURL }}">
|
||||
{{- if and .IsPage (eq .Section "studies") -}}
|
||||
<span>AG</span>
|
||||
<span class="tablet-hide">AG</span>
|
||||
<span class="tablet-show">Andrew Gioia</span>
|
||||
{{- else -}}
|
||||
<span>Andrew Gioia</span>
|
||||
{{- end -}}
|
||||
</a>
|
||||
{{- if and .IsPage (eq .Section "studies") -}}
|
||||
<a class="page" href="{{ "/studies" | relURL }}">
|
||||
<a class="page" href="{{ "/#studies" | relURL }}">
|
||||
Case study
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
@ -28,7 +28,22 @@
|
||||
<section id="end">
|
||||
{{ if eq (len $footnotes) 0 }}<big>Ag</big>{{ end }}
|
||||
<div class="text">
|
||||
<p>This is the design portfolio for <a href="https://andrewgioia.com">Andrew Gioia</a>, co-founder of TeachBoost and current Staff Designer at SchoolStatus.</p>
|
||||
<div>{{ partial "icon.html" (dict "name" "cc") }} 2026 BY-NC-ND. Please share this responsibly.</div>
|
||||
<p>
|
||||
Product design portfolio for <a href="https://andrewgioia.com">Andrew Gioia</a>, co-founder of TeachBoost and current Principal Designer at SchoolStatus.
|
||||
</p>
|
||||
<menu>
|
||||
<li>
|
||||
<a href="/#studies">Case studies</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact">Get in touch</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/andrewgioia">GitHub</a>
|
||||
</li>
|
||||
</menu>
|
||||
<p>
|
||||
{{ partial "icon.html" (dict "name" "cc") }} 2026 BY-NC-ND. Please share this responsibly.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user