g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases 1 Wiki Activity Actions

Use clamping to help with responsive font size.

Browse source
This commit is contained in:
g_it 2026-02-19 00:56:28 +01:00
commit 8ba8d480ce
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
6 changed files with 70 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

66
content/assets/css/resume.css
View file

@ -34,12 +34,14 @@ body {
min-height: 80vh;
.cards {
padding: 1rem;
/* OLD: padding: 1rem; */
padding: clamp(0.75rem, 2vw, 1.5rem);
h2 {
color: var(--dark-grey);
font-family: var(--general-sans);
font-size: 2.5rem;
/* OLD: font-size: 2.5rem; */
font-size: clamp(1.5rem, 5vw, 2.5rem);
line-height: 1;
margin: 0;
}
@ -47,10 +49,12 @@ body {
.company {
font-family: var(--general-sans);
font-weight: 400;
font-size: 1.2rem;
/* OLD: font-size: 1.2rem; */
font-size: clamp(0.9rem, 2vw, 1.2rem);
span {
font-size: 0.7rem;
/* OLD: font-size: 0.7rem; */
font-size: clamp(0.6rem, 1.2vw, 0.7rem);
font-weight: 400;
margin: 0 0 0 25px;
}
@ -58,12 +62,15 @@ body {
.job-blurb {
font-family: var(--general-serif);
font-size: 1.2rem;
/* OLD: font-size: 1.2rem; */
font-size: clamp(0.9rem, 2vw, 1.2rem);
font-variation-settings: "opsz" 8;
font-weight: 700;
line-height: 1.5;
margin-bottom: 30px;
margin-top: 30px;
/* OLD: margin-bottom: 30px; */
margin-bottom: clamp(1.5rem, 3vw, 2rem);
/* OLD: margin-top: 30px; */
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.job-achievements {
@ -73,7 +80,8 @@ body {
h5 {
color: var(--dark-grey);
cursor: pointer;
font-size: 0.9rem;
/* OLD: font-size: 0.9rem; */
font-size: clamp(0.75rem, 1.8vw, 0.9rem);
margin: 0;
text-transform: none;
}
@ -142,7 +150,8 @@ body {
.title {
font-family: var(--general-serif);
font-size: 5rem;
/* OLD: font-size: 5rem; */
font-size: clamp(2rem, 8vw, 5rem);
font-variation-settings: "opsz" 8;
font-weight: 900;
}
@ -158,7 +167,8 @@ body {
figcaption {
color: var(--dark-grey);
font-family: var(--general-sans);
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.65rem, 1.2vw, 0.8rem);
font-style: normal;
font-weight: 400;
}
@ -199,7 +209,8 @@ body {
color: var(--dark-grey);
flex: 1 1 200px;
font-family: var(--general-sans);
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
font-style: normal;
margin: 0;
text-align: left;
@ -218,7 +229,8 @@ body {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.8rem;
/* OLD: font-size: 1.8rem; */
font-size: clamp(1.2rem, 3vw, 1.8rem);
justify-content: flex-start;
padding: 1rem;
@ -253,7 +265,8 @@ body {
}
.writing-types {
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
justify-content: center;
margin-bottom: 0.7rem;
text-align: left;
@ -286,7 +299,8 @@ body {
color: var(--dark-grey);
flex: 1 1 200px;
font-family: var(--general-sans);
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
font-style: normal;
margin: 0;
text-align: left;
@ -317,7 +331,8 @@ body {
border-bottom: 2px solid var(--dark-grey);
color: var(--dark-grey);
font-family: var(--general-serif);
font-size: 1.2rem;
/* OLD: font-size: 1.2rem; */
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-variation-settings: "opsz" 8;
font-weight: 700;
}
@ -349,11 +364,11 @@ body {
background-color: var(--neutral-grey);
border: 2px solid var(--dark-grey);
border-radius: 5px;
bottom: 50px;
bottom: 100px;
opacity: 0;
padding: 20px;
position: fixed;
right: 20px;
right: 50px;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
width: 400px;
@ -373,12 +388,12 @@ body {
.question-icon {
align-items: center;
bottom: 30px;
bottom: 80px;
cursor: pointer;
display: flex;
justify-content: center;
position: fixed;
right: 20px;
right: 50px;
width: 50px;
z-index: 1000;
@ -446,7 +461,8 @@ body {
color: var(--dark-grey);
cursor: pointer;
border-radius: 5px;
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
font-weight: 700;
margin-bottom: 1rem;
margin-left: 1rem;
@ -455,7 +471,8 @@ body {
h5 {
color: var(--dark-grey);
font-size: 0.8rem;
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
font-weight: 900;
margin-bottom: 0;
}
@ -464,8 +481,8 @@ body {
list-style-type: square;
li {
font-size: 1rem;
;
/* OLD: font-size: 1rem; */
font-size: clamp(0.85rem, 1.8vw, 1rem);
}
}
@ -522,7 +539,8 @@ body {
background-color: var(--neutral-grey);
display: flex;
flex-direction: row;
font-size: 0.7rem;
/* OLD: font-size: 0.7rem; */
font-size: clamp(0.65rem, 1.5vw, 0.7rem);
font-weight: 400;
justify-content: center;
padding: 10px;

30
content/assets/css/theme.css
View file

@ -175,15 +175,25 @@ body {
/* Footer */
footer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 5px;
padding-bottom: 0;
}
.logo {
text-align: center;
footer>*:not(:last-child)::after {
content: " | ";
margin: 0 8px;
img {
height: 25px;
}
}
.tcs {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 5px;
padding-bottom: 0;
&>*:not(:last-child)::after {
content: " | ";
margin: 0 8px;
}
}
}

7
content/assets/js/index.js
View file

@ -84,10 +84,3 @@ document.addEventListener('DOMContentLoaded', function () {
slide.innerHTML = `<a href="${links[index]}">${slide.innerHTML}</a>`;
});
});
// Hide the scroll icon when at the end of the page
window.addEventListener('scroll', function () {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
document.getElementById('down-arrow').classList.add('hidden');
}
});