From 433ef3ae4358c6e69300d4f72323c94dae9614cd Mon Sep 17 00:00:00 2001 From: rodude123 Date: Wed, 1 Sep 2021 20:37:31 +0100 Subject: [PATCH] Factored out CSS to different files. --- dist/css/main.css | 2 +- gulpfile.js | 2 +- src/css/about.css | 0 src/css/cv.css | 98 ++++++++ src/css/main.css | 487 +-------------------------------------- src/css/mediaQueries.css | 269 +++++++++++++++++++++ src/css/nav.css | 103 +++++++++ 7 files changed, 476 insertions(+), 485 deletions(-) create mode 100644 src/css/about.css create mode 100644 src/css/cv.css create mode 100644 src/css/mediaQueries.css create mode 100644 src/css/nav.css diff --git a/dist/css/main.css b/dist/css/main.css index 9570632..b0f57ac 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{--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{margin-bottom:5rem}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%}section#curriculumvitae .cvGrid h2{text-align:center}section#curriculumvitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;margin:0 auto;height:100%}section#curriculumvitae #work{margin:0 auto 0 8rem}section#curriculumvitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumvitae .timeline:after{content:"";display:table;clear:both}section#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)}.timelineItem:after,section#curriculumvitae .timelineItem:before{content:'';position:absolute}section#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)}section#curriculumvitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumvitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumvitae .timelineItem h3{font-weight:400}section#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}section#curriculumvitae .cvGrid{padding:0}}@media screen and (max-width:55em){section#curriculumvitae .cvGrid .timeline{margin:0 1em;max-width:100%}section#curriculumvitae .timeline:before{border:none}section#curriculumvitae .timelineItem{width:95%}section#curriculumvitae .timelineItem:nth-child(2n){margin-left:0}section#curriculumvitae .timelineItem:before{right:unset;left:unset;border:none}}@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 +/*! 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}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}}: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} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 058610e..e0655de 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,7 +19,7 @@ gulp.task("minifyHTML", () => gulp.task("minifyCSS", () => { - return gulp.src("src/css/*.css") + return gulp.src("src/css/main.css") .pipe(cssMin({compatibility: "ie8"})) .pipe(gulp.dest("dist/css")); }); diff --git a/src/css/about.css b/src/css/about.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/cv.css b/src/css/cv.css new file mode 100644 index 0000000..0bf2d7d --- /dev/null +++ b/src/css/cv.css @@ -0,0 +1,98 @@ +/****** 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%; +} + +section#curriculumvitae .cvGrid h2 { + text-align: center; +} + +section#curriculumvitae .timeline { + position: relative; + max-width: 30em; + gap: 1em; + display: flex; + flex-direction: column; + margin: 0 auto; + height: 100%; +} + +section#curriculumvitae #work { + margin: 0 auto 0 8rem; +} + +section#curriculumvitae .timeline:before { + content: ""; + position: absolute; + height: 100%; + border: 4px var(--timelineItemBrdr) solid; + /*border-bottom: 4;*/ + right: 194px; + top: 0; +} + +section#curriculumvitae .timeline:after { + content: ""; + display: table; + clear: both; +} + +section#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); +} + +section#curriculumvitae .timelineItem:before, .timelineItem:after { + content: ''; + position: absolute; +} + +section#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); +} +section#curriculumvitae .timelineItem:nth-child(2n) { + margin-left: 21em; +} + +section#curriculumvitae .timelineItem:nth-child(2n):before { + right: auto; + left: -20px; + border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr); +} + +section#curriculumvitae .timelineItem h3 { + font-weight: normal; +} + +section#curriculumvitae .timelineItem span { + color: hsl(0, 0%, 90%); +} diff --git a/src/css/main.css b/src/css/main.css index 92dcea7..a8f5f5a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,6 +1,10 @@ /******** Imports *******/ @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"); +/*local imports*/ +@import "nav.css"; +@import "about.css"; + /****** Root Style ******/ :root { @@ -104,486 +108,3 @@ a.btn:active, form input[type="submit"]:active { section#about, section#curriculumvitae h1 { padding: 0 5rem; } - -/*** Navigation Styles **/ - -header { - background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom; - background-size: cover; - height: 40%; - color: #FFFFFF; - backdrop-filter: grayscale(100%); - position: relative; -} - -nav { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0.25em; - position: fixed; - top: 0; - width: 100%; - transition: background-color 0.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: #FFFFFF; -} - -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 a:hover span, nav ul li .active 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: none; - 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; - } -} - -/***** About Styles *****/ - -section#about { - margin-bottom: 5rem; -} - -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%; -} - -section#curriculumvitae .cvGrid h2 { - text-align: center; -} - -section#curriculumvitae .timeline { - position: relative; - max-width: 30em; - gap: 1em; - display: flex; - flex-direction: column; - margin: 0 auto; - height: 100%; -} - -section#curriculumvitae #work { - margin: 0 auto 0 8rem; -} - -section#curriculumvitae .timeline:before { - content: ""; - position: absolute; - height: 100%; - border: 4px var(--timelineItemBrdr) solid; - /*border-bottom: 4;*/ - right: 194px; - top: 0; -} - -section#curriculumvitae .timeline:after { - content: ""; - display: table; - clear: both; -} - -section#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); -} - -section#curriculumvitae .timelineItem:before, .timelineItem:after { - content: ''; - position: absolute; -} - -section#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); -} -section#curriculumvitae .timelineItem:nth-child(2n) { - margin-left: 21em; -} - -section#curriculumvitae .timelineItem:nth-child(2n):before { - right: auto; - left: -20px; - border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr); -} - -section#curriculumvitae .timelineItem h3 { - font-weight: normal; -} - -section#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; - 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 0.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 0.4s ease-in; - opacity: 0; - } - - .nav-btn label { - display: inline-block; - cursor: pointer; - width: 60px; - height: 50px; - position: fixed; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -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: #FFFFFF; - opacity: 1; - right: 0; - top: 20px; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .25s ease-in; - -moz-transition: .25s ease-in; - -o-transition: .25s ease-in; - transition: .25s ease-in; - } - - /** Burger Not Clicked **/ - - 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-btn label:hover, nav #nav-check:checked ~ .nav-btn label { - background-color: rgba(-1, 0, 0, 0.3); - } - - /**** Burger Clicked ****/ - - nav #nav-check:checked ~ ul{ - max-height: 50vh; - overflow-y: hidden; - } - - nav #nav-check:checked ~ ul li a { - opacity: 1; - transform: translateX(0px); - } - - nav #nav-check:checked ~ ul li:nth-child(1) a { - transition-delay: 0.15s; - } - - nav #nav-check:checked ~ ul li:nth-child(2) a { - transition-delay: 0.25s; - } - - nav #nav-check:checked ~ ul li:nth-child(3) a { - transition-delay: 0.35s; - } - - nav #nav-check:checked ~ ul li:nth-child(4) a { - transition-delay: 0.45s; - } - - nav #nav-check:checked ~ ul li:nth-child(5) a { - transition-delay: 0.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); - } - - /***** About Styles *****/ - - section#about div { - padding: 0.1em 2.5em; - } - - /****** CV Styles *******/ - - section#curriculumvitae .cvGrid { - padding: 0; - } -} - -@media screen and (max-width: 55em) { - - /****** CV Styles *******/ - - section#curriculumvitae .cvGrid .timeline { - margin: 0 1em; - max-width: 100%; - } - - section#curriculumvitae .timeline:before { - border: none; - } - - section#curriculumvitae .timelineItem{ - width: 95%; - } - - section#curriculumvitae .timelineItem:nth-child(2n) { - margin-left: 0; - } - - section#curriculumvitae .timelineItem:before { - right: unset; - left: unset; - border:none - } - -} - -@media screen and (max-width: 31em) { - - /*** Template Styles ****/ - - section#about, section#curriculumvitae h1 { - padding: 0 1em; - } - - /*** Navigation Styles **/ - - header div h1 { - text-align: center; - height: 5.125rem; - } - - /***** About Styles *****/ - - section#about div { - padding: 0.1em 1em; - } - -} diff --git a/src/css/mediaQueries.css b/src/css/mediaQueries.css new file mode 100644 index 0000000..bdce4e0 --- /dev/null +++ b/src/css/mediaQueries.css @@ -0,0 +1,269 @@ +/**** 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; + 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 0.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 0.4s ease-in; + opacity: 0; + } + + .nav-btn label { + display: inline-block; + cursor: pointer; + width: 60px; + height: 50px; + position: fixed; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -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: #FFFFFF; + opacity: 1; + right: 0; + top: 20px; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .25s ease-in; + -moz-transition: .25s ease-in; + -o-transition: .25s ease-in; + transition: .25s ease-in; + } + + /** Burger Not Clicked **/ + + 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-btn label:hover, nav #nav-check:checked ~ .nav-btn label { + background-color: rgba(-1, 0, 0, 0.3); + } + + /**** Burger Clicked ****/ + + nav #nav-check:checked ~ ul{ + max-height: 50vh; + overflow-y: hidden; + } + + nav #nav-check:checked ~ ul li a { + opacity: 1; + transform: translateX(0px); + } + + nav #nav-check:checked ~ ul li:nth-child(1) a { + transition-delay: 0.15s; + } + + nav #nav-check:checked ~ ul li:nth-child(2) a { + transition-delay: 0.25s; + } + + nav #nav-check:checked ~ ul li:nth-child(3) a { + transition-delay: 0.35s; + } + + nav #nav-check:checked ~ ul li:nth-child(4) a { + transition-delay: 0.45s; + } + + nav #nav-check:checked ~ ul li:nth-child(5) a { + transition-delay: 0.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); + } + + /***** About Styles *****/ + + section#about div { + padding: 0.1em 2.5em; + } + + /****** CV Styles *******/ + + section#curriculumvitae .cvGrid { + padding: 0; + } +} + +@media screen and (max-width: 55em) { + + /****** CV Styles *******/ + + section#curriculumvitae .cvGrid .timeline { + margin: 0 1em; + max-width: 100%; + } + + section#curriculumvitae .timeline:before { + border: none; + } + + section#curriculumvitae .timelineItem{ + width: 95%; + } + + section#curriculumvitae .timelineItem:nth-child(2n) { + margin-left: 0; + } + + section#curriculumvitae .timelineItem:before { + right: unset; + left: unset; + border:none + } + +} + +@media screen and (max-width: 31em) { + + /*** Template Styles ****/ + + section#about, section#curriculumvitae h1 { + padding: 0 1em; + } + + /*** Navigation Styles **/ + + header div h1 { + text-align: center; + height: 5.125rem; + } + + /***** About Styles *****/ + + section#about div { + padding: 0.1em 1em; + } + +} diff --git a/src/css/nav.css b/src/css/nav.css new file mode 100644 index 0000000..1f9f29b --- /dev/null +++ b/src/css/nav.css @@ -0,0 +1,103 @@ +/*** Navigation Styles **/ + +header { + background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom; + background-size: cover; + height: 40%; + color: #FFFFFF; + backdrop-filter: grayscale(100%); + position: relative; +} + +nav { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0.25em; + position: fixed; + top: 0; + width: 100%; + transition: background-color 0.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: #FFFFFF; +} + +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 a:hover span, nav ul li .active 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: none; + 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; + } +} -- 2.43.0