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

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

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

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

@ -1,5 +1,8 @@
<footer> <footer>
<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>© all rights reserved</span>
<span><a href="https://www.linkedin.com/in/gugulet-hu/">contact</a></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> <span>made with <a href="https://zensical.org/">zensical</a></span>
</div>
</footer> </footer>

2
content/resume.md
View file

@ -330,11 +330,11 @@ title: Resume
</div> </div>
<div class="faq-container"> <div class="faq-container">
<input type="checkbox" id="faq-toggle" class="visually-hidden">
<label for="faq-toggle" class="question-icon"> <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 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> <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> </label>
<input type="checkbox" id="faq-toggle" class="visually-hidden" tabindex="-1">
<div class="faq"> <div class="faq">
<h3>Questions and Answers</h3> <h3>Questions and Answers</h3>
<p>Why did you resign from your last job?</p> <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.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. [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. [project.markdown_extensions.pymdownx.superfences] # The SuperFences extension allows for arbitrary nesting of code and content blocks inside each other.
custom_fences = [ custom_fences = [