Use clamping to help with responsive font size.
This commit is contained in:
g_it
parent
7029c8f944
commit
8ba8d480ce
GPG key ID:
A2B0A7C06A054627
6 changed files with 70 additions and 46 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -175,15 +175,25 @@ body {
|
|||
|
||||
/* Footer */
|
||||
footer {
|
||||
.logo {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.tcs {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
footer>*:not(:last-child)::after {
|
||||
&>*:not(:last-child)::after {
|
||||
content: " | ";
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<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><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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue