styled about section to all sizes

Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai 2021-08-01 12:55:25 +01:00
parent 2522946558
commit 10a5117eb1
6 changed files with 96 additions and 60 deletions

2
dist/css/main.css vendored

File diff suppressed because one or more lines are too long

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

2
dist/js/main.js vendored
View File

@ -1 +1 @@
const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n<e[n].length&&t(e[n],0,(function(){setTimeout(o,1500,n+1)}))}(0)})); const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((o=>{const c=o.offsetTop;window.pageYOffset>=c-60&&(e=o.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((o=>{o.classList.remove("active"),o.href.includes(e)&&""!==e?o.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))};

View File

@ -1,10 +1,10 @@
/******** Imports ********/ /******** Imports *******/
@import "/node_modules/normalize.css/normalize.css"; @import "/node_modules/normalize.css/normalize.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/****** Root Style ******/ /****** Root Style ******/
:root { :root {
/* colours */ /* Colours */
--primaryDefault: hsla(79, 62%, 51%, 1); --primaryDefault: hsla(79, 62%, 51%, 1);
--primaryHover: hsla(79, 75%, 41%, 1); --primaryHover: hsla(79, 75%, 41%, 1);
--errorDefault: hsla(0, 62%, 51%, 1); --errorDefault: hsla(0, 62%, 51%, 1);
@ -13,7 +13,7 @@
--mutedBlack: hsla(0, 0%, 0%, 0.25); --mutedBlack: hsla(0, 0%, 0%, 0.25);
--navBack: hsl(0, 0%, 30%); --navBack: hsl(0, 0%, 30%);
/* font sizes */ /* Font Sizes */
--titleFS: 2.25rem; --titleFS: 2.25rem;
--generalFS: 1.125rem; --generalFS: 1.125rem;
--headingFS: 1.5rem; --headingFS: 1.5rem;
@ -29,7 +29,7 @@ body {
font-family: Noto Sans KR, sans-serif; font-family: Noto Sans KR, sans-serif;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 1.125rem; font-size: var(--generalFS);
line-height: 1.625rem; line-height: 1.625rem;
} }
@ -41,7 +41,7 @@ h1, nav {
font-family: Share Tech Mono, monospace; font-family: Share Tech Mono, monospace;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 2.25rem; font-size: var(--titleFS);
line-height: 2.5625rem; line-height: 2.5625rem;
text-transform: lowercase; text-transform: lowercase;
} }
@ -50,7 +50,7 @@ h2 {
font-family: Noto Sans KR, sans-serif; font-family: Noto Sans KR, sans-serif;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 1.5rem; font-size: var(--headingFS);
line-height: 2.1875rem; line-height: 2.1875rem;
} }
@ -201,10 +201,21 @@ div h1 span {
} }
} }
/***** About Styles *****/
section#about {
padding: 0 5em;
}
section#about div {
padding: 0.1em 5em;
}
/**** Media Queries *****/ /**** Media Queries *****/
@media screen and (max-width: 75em) { @media screen and (max-width: 75em) {
/*** Navigation styles **/
/*** Navigation Styles **/
nav { nav {
display: block; display: block;
@ -281,7 +292,7 @@ div h1 span {
transition: .25s ease-in; transition: .25s ease-in;
} }
/** burger not clicked **/ /** Burger Not Clicked **/
nav #nav-check:not(:checked) ~ ul{ nav #nav-check:not(:checked) ~ ul{
height: auto; height: auto;
@ -316,7 +327,7 @@ div h1 span {
background-color: rgba(-1, 0, 0, 0.3); background-color: rgba(-1, 0, 0, 0.3);
} }
/**** burger clicked ****/ /**** Burger Clicked ****/
nav #nav-check:checked ~ ul{ nav #nav-check:checked ~ ul{
max-height: 50vh; max-height: 50vh;
@ -366,12 +377,33 @@ div h1 span {
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
/***** About Styles *****/
section#about {
padding: 0 1em;
}
section#about div {
padding: 0.1em 2.5em;
}
} }
@media screen and (max-width: 31em) { @media screen and (max-width: 31em) {
/** not to squish name **/ /*** Navigation Styles **/
header div h1{ header div h1 {
width: min-content; width: min-content;
} }
/***** About Styles *****/
section#about {
padding: 0 0.5em;
}
section#about div {
padding: 0.1em 1em;
}
} }

View File

@ -41,13 +41,17 @@
<main> <main>
<section id="about"> <section id="about">
<h1>about</h1> <h1>about</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus
molestias
officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p> nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
<a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section> <a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
</div>
</section>
<section id="curiculumvitae"> <section id="curiculumvitae">
<h1>curriculum vitae</h1> <h1>curriculum vitae</h1>
<div class="cvGrid"> <div class="cvGrid">

View File

@ -39,47 +39,47 @@ window.onscroll = () =>
}); });
}; };
document.addEventListener('DOMContentLoaded', () => // document.addEventListener('DOMContentLoaded', () =>
{ // {
// array with texts to type in typewriter // // array with texts to type in typewriter
var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"]; // var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
//
// type one text in the typwriter // // type one text in the typwriter
// keeps calling itself until the text is finished // // keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) { // function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet // // chekc if text isn't finished yet
if (i < (text.length)) { // if (i < (text.length)) {
// add next character to h1 // // add next character to h1
document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>'; // document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>';
//
// wait for a while and call this function again for next character // // wait for a while and call this function again for next character
setTimeout(function() { // setTimeout(function() {
typeWriter(text, i + 1, fnCallback) // typeWriter(text, i + 1, fnCallback)
}, 100); // }, 100);
} // }
// text finished, call callback if there is a callback function // // text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') { // else if (typeof fnCallback == 'function') {
// call callback after timeout // // call callback after timeout
setTimeout(fnCallback, 700); // setTimeout(fnCallback, 700);
} // }
} // }
// start a typewriter animation for a text in the dataText array // // start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) { // function StartTextAnimation(i) {
if (typeof dataText[i] === 'undefined'){ // if (typeof dataText[i] === 'undefined'){
setTimeout(function() { // setTimeout(function() {
StartTextAnimation(0); // StartTextAnimation(0);
}, 1500); // }, 1500);
// StartTextAnimation(0); // // StartTextAnimation(0);
} // }
else if (i < dataText[i].length) { // else if (i < dataText[i].length) {
// text exists! start typewriter animation // // text exists! start typewriter animation
typeWriter(dataText[i], 0, function(){ // typeWriter(dataText[i], 0, function(){
// after callback (and whole text has been animated), start next text // // after callback (and whole text has been animated), start next text
setTimeout(StartTextAnimation, 1500, i + 1); // setTimeout(StartTextAnimation, 1500, i + 1);
}); // });
} // }
} // }
// start the text animation // // start the text animation
StartTextAnimation(0); // StartTextAnimation(0);
}); // });