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');
}
});

9
content/overrides/partials/footer.html
View file

@ -1,5 +1,8 @@
<footer>
<span>© all rights reserved</span>
<span><a href="https://www.linkedin.com/in/gugulet-hu/">contact</a></span>
<span>made with <a href="https://zensical.org/">zensical</a></span>
<div class="logo"><img src="../assets/media/g-logo-250x250.webp" alt="The G* Logo"></div>
<div class="tcs">
<span>© all rights reserved</span>
<span><a href="https://www.linkedin.com/in/gugulet-hu/">contact</a></span>
<span>made with <a href="https://zensical.org/">zensical</a></span>
</div>
</footer>

2
content/resume.md
View file

@ -330,11 +330,11 @@ title: Resume
</div>
<div class="faq-container">
<input type="checkbox" id="faq-toggle" class="visually-hidden">
<label for="faq-toggle" class="question-icon">
<span class="icon question"><p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512m0-336c-17.7 0-32 14.3-32 32 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-44.2 35.8-80 80-80s80 35.8 80 80c0 47.2-36 67.2-56 74.5v3.8c0 13.3-10.7 24-24 24s-24-10.7-24-24v-8.1c0-20.5 14.8-35.2 30.1-40.2 6.4-2.1 13.2-5.5 18.2-10.3 4.3-4.2 7.7-10 7.7-19.6 0-17.7-14.3-32-32-32zm-32 192a32 32 0 1 1 64 0 32 32 0 1 1-64 0"></path></svg></span></p></span>
<span class="icon close"><p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z"></path></svg></span></p></span>
</label>
<input type="checkbox" id="faq-toggle" class="visually-hidden" tabindex="-1">
<div class="faq">
<h3>Questions and Answers</h3>
<p>Why did you resign from your last job?</p>

2
zensical.toml
View file

@ -61,7 +61,7 @@ pygments_lang_class = true
[project.markdown_extensions.pymdownx.smartsymbols] # The SmartSymbols extension converts some sequences of characters into their corresponding symbols.
[project.markdown_extensions.pymdownx.snippets] # The Snippets extension adds the ability to add a small tooltip to an element, by wrapping it with an abbr tag.
# auto_append = ["content/includes/definitions.md"]
auto_append = ["content/includes/definitions.md"]
[project.markdown_extensions.pymdownx.superfences] # The SuperFences extension allows for arbitrary nesting of code and content blocks inside each other.
custom_fences = [