From 7d901093bf8ba99713f38e694f2ef40a4f24b0dc Mon Sep 17 00:00:00 2001 From: rodude123 Date: Mon, 16 Aug 2021 23:46:16 +0100 Subject: [PATCH] Styled timelines. Still need to populate with real data --- dist/css/main.css | 2 +- dist/index.html | 2 +- src/css/main.css | 170 +++++++++++++++++++++++++++++++++++++++++----- src/index.html | 51 ++++++++++++-- src/js/main.js | 86 ++++++++++++----------- 5 files changed, 250 insertions(+), 61 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index 2399bc6..7008f18 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primaryDefault:hsla(79, 62%, 51%, 1);--primaryHover:hsla(79, 75%, 41%, 1);--errorDefault:hsla(0, 62%, 51%, 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsl(0, 0%, 30%);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1rem 2rem;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff}a.btn:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:var(--mutedGrey);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about{padding:0 5em}section#about div{padding:.1em 5em}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about{padding:0 1em}section#about div{padding:.1em 2.5em}}@media screen and (max-width:31em){header div h1{text-align:center;height:5.125rem}section#about{padding:0 .5em}section#about div{padding:.1em 1em}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:79;--mainSat:62%;--mainLight:51%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, var(--mainSat), var(--mainLight), 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1rem 2rem;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff}a.btn:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}section#about,section#curriculumvitae h1{padding:0 5rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack);z-index:1}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:var(--mutedGrey);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}section#about div{padding:.1em 5em}section#curriculumvitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumvitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumvitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}#curriculumvitae .cvGrid h2{text-align:center}#curriculumvitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;margin:0 auto;height:100%}#curriculumvitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}#curriculumvitae .timeline:after{content:"";display:table;clear:both}#curriculumvitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}#curriculumvitae .timelineItem:before,.timelineItem:after{content:'';position:absolute}#curriculumvitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}#curriculumvitae .timelineItem:nth-child(2n){margin-left:21em}#curriculumvitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}#curriculumvitae .timelineItem h3{font-weight:400}#curriculumvitae .timelineItem span{color:#e5e5e5}@media screen and (max-width:90em){section#curriculumvitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumvitae .cvGrid>div{width:100%}section#curriculumvitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumvitae .cvGrid h2{margin-left:5em}section#curriculumvitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumvitae h1{padding:0 1em}nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}section#about div{padding:.1em 2.5em}}@media screen and (max-width:31em){section#about,section#curriculumvitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index a92e103..3b034d2 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1 +1 @@ -Document

full stack developer

Contact Me

about

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 nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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 nostrum odio sed sunt tempora totam voluptatem voluptatibus.

Download CV

curriculum vitae

Education

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!

Work

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!

project title to be generated

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.

testing testing

other projects

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.

Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.

Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!

find me

say hello

© 2021 Rohit Pai all rights reserved

\ No newline at end of file +Document

full stack developer

Contact Me

about

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 nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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 nostrum odio sed sunt tempora totam voluptatem voluptatibus.

Download CV

curriculum vitae

Education

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Work

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

Sep 2016 - July 2018

Grade: D*D*D*

Chelmsford College - BTEC Level 3 in IT

project title to be generated

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.

testing testing

other projects

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.

Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.

Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!

find me

say hello

© 2021 Rohit Pai all rights reserved

\ No newline at end of file diff --git a/src/css/main.css b/src/css/main.css index ce7ce81..622dfce 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -5,13 +5,17 @@ /****** Root Style ******/ :root { /* Colours */ - --primaryDefault: hsla(79, 62%, 51%, 1); - --primaryHover: hsla(79, 75%, 41%, 1); - --errorDefault: hsla(0, 62%, 51%, 1); + --mainHue: 79; + --mainSat: 62%; + --mainLight: 51%; + --primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1); + --primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1); + --timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1); + --errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1); --grey: hsla(0, 0%, 39%, 1); --mutedGrey: hsla(0, 0%, 67%, 0.58); --mutedBlack: hsla(0, 0%, 0%, 0.25); - --navBack: hsl(0, 0%, 30%); + --navBack: hsla(0, 0%, 30%, 1); /* Font Sizes */ --titleFS: 2.25rem; @@ -79,7 +83,6 @@ a.btnOutline { a.btnPrimary:hover, form input[type="submit"]:hover { background: var(--primaryHover); - } a.btn:active, form input[type="submit"]:active { @@ -98,6 +101,10 @@ a.btn:active, form input[type="submit"]:active { text-shadow: 0 6px 4px var(--mutedBlack); } +section#about, section#curriculumvitae h1 { + padding: 0 5rem; +} + /*** Navigation Styles **/ header { @@ -122,6 +129,7 @@ nav { nav.scrolled { background-color: var(--navBack); + z-index: 1; } nav #nav-check { @@ -203,20 +211,149 @@ div h1 span { /***** About Styles *****/ -section#about { - padding: 0 5em; -} - section#about div { padding: 0.1em 5em; } +/****** CV Styles *******/ + +section#curriculumvitae{ + background-color: var(--primaryDefault); + color: #FFFFFF; + padding: 2em 0; +} + +section#curriculumvitae .cvGrid { + display: flex; + flex-direction: row; + padding: 0 1.5rem; + flex-wrap: wrap; +} + +section#curriculumvitae .cvGrid > div { + width: 45%; + display: flex; + flex-direction: column; + min-height: 100%; + +} + +#curriculumvitae .cvGrid h2 { + text-align: center; +} + +#curriculumvitae .timeline { + position: relative; + max-width: 30em; + gap: 1em; + display: flex; + flex-direction: column; + margin: 0 auto; + height: 100%; +} + +#curriculumvitae .timeline:before { + content: ""; + position: absolute; + height: 100%; + border: 4px var(--timelineItemBrdr) solid; + /*border-bottom: 4;*/ + right: 194px; + top: 0; +} + +#curriculumvitae .timeline:after { + content: ""; + display: table; + clear: both; +} + +#curriculumvitae .timelineItem { + border: 2px solid var(--timelineItemBrdr); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + padding: 0 1rem; + width: 50%; + position: relative; + background-color: var(--primaryHover); +} + +#curriculumvitae .timelineItem:before, .timelineItem:after { + content: ''; + position: absolute; +} + +#curriculumvitae .timelineItem:before{ + content: ''; + right: -20px; + top: calc(50% - 5px); + border-style: solid; + border-color: var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent; + border-width: 20px; + transform: rotate(45deg); +} +#curriculumvitae .timelineItem:nth-child(2n) { + margin-left: 21em; +} + +#curriculumvitae .timelineItem:nth-child(2n):before { + right: auto; + left: -20px; + border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr); +} + +#curriculumvitae .timelineItem h3 { + font-weight: normal; +} + +#curriculumvitae .timelineItem span { + color: hsl(0, 0%, 90%); +} + /**** Media Queries *****/ +@media screen and (max-width: 90em) { + + /****** CV Styles *******/ + + section#curriculumvitae .cvGrid { + flex-direction: column; + justify-content: center; + align-items: center; + } + + section#curriculumvitae .cvGrid > div { + width: 100%; + } + + section#curriculumvitae .cvGrid > div:first-child { + padding-bottom: 2.5em; + margin-bottom: 2.5em; + border-bottom: 5px #FFFFFF solid; + } + + section#curriculumvitae .cvGrid h2 { + margin-left: 5em; + } + + section#curriculumvitae .cvGrid .timeline { + margin: 0 auto; + } +} + @media screen and (max-width: 75em) { + /*** Template Styles ****/ + + section#about, section#curriculumvitae h1 { + padding: 0 1em; + } + /*** Navigation Styles **/ + /** Default Nav Styles **/ + nav { display: block; height: 50px; @@ -380,16 +517,19 @@ section#about div { /***** About Styles *****/ - section#about { - padding: 0 1em; - } - section#about div { padding: 0.1em 2.5em; } } @media screen and (max-width: 31em) { + + /*** Template Styles ****/ + + section#about, section#curriculumvitae h1 { + padding: 0 1em; + } + /*** Navigation Styles **/ header div h1 { @@ -399,10 +539,6 @@ section#about div { /***** About Styles *****/ - section#about { - padding: 0 0.5em; - } - section#about div { padding: 0.1em 1em; } diff --git a/src/index.html b/src/index.html index d249974..a2a2cc7 100644 --- a/src/index.html +++ b/src/index.html @@ -26,7 +26,7 @@