diff --git a/dist/css/main.css b/dist/css/main.css deleted file mode 100644 index 860c7ff..0000000 --- a/dist/css/main.css +++ /dev/null @@ -1 +0,0 @@ -/*! 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}}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;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}}: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/src/api/timelineData.php b/src/api/timelineData.php index 93d4a83..a9fc5e2 100644 --- a/src/api/timelineData.php +++ b/src/api/timelineData.php @@ -29,7 +29,7 @@ class TimelineData function getWorkData() { $conn = dbConn(); - $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title FROM work ORDER BY startPeriod DESC;"); + $stmt = $conn->prepare("SELECT DATE_FORMAT(startPeriod, '%b, %Y') as startPeriod, DATE_FORMAT(endPeriod, '%b, %Y') as endPeriod, companyName, area, title FROM work ORDER BY work.startPeriod DESC;"); $stmt->execute(); // set the resulting array to associative diff --git a/src/css/main.css b/src/css/main.css index 3202116..3b4cd8c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -5,7 +5,7 @@ @import "nav.css"; @import "about.css"; @import "cv.css"; -@import "mediaQueries.css"; +@import "templateStyles.css"; /****** Root Style ******/ :root { @@ -28,84 +28,272 @@ --headingFS: 1.5rem; } -/*** Template Styles ****/ -html { - scroll-behavior: smooth; + +/**** 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; + } + } -body { - font-family: Noto Sans KR, sans-serif; - font-style: normal; - font-weight: 500; - font-size: var(--generalFS); - line-height: 1.625rem; +@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; + } } -a:visited { - color: inherit; +@media screen and (max-width: 55em) { + + /****** CV Styles *******/ + + section#curriculumvitae .cvGrid .timeline, section#curriculumvitae .cvGrid .timeline#work { + margin: 0 auto; + width: 100%; + } + + section#curriculumvitae .timeline:before { + border: none; + } + + section#curriculumvitae .timelineItem, section#curriculumvitae .timelineItem:nth-child(2n) { + width: 95%; + padding: 0; + margin: 0 auto; + } + + section#curriculumvitae .timelineItem:before { + right: unset; + left: unset; + border:none + } + } -h1, nav { - font-family: Share Tech Mono, monospace; - font-style: normal; - font-weight: normal; - font-size: var(--titleFS); - line-height: 2.5625rem; - text-transform: lowercase; -} +@media screen and (max-width: 31em) { -h2 { - font-family: Noto Sans KR, sans-serif; - font-style: normal; - font-weight: 500; - font-size: var(--headingFS); - line-height: 2.1875rem; -} + /*** Template Styles ****/ -a.btn, form input[type="submit"] { - text-decoration: none; - display: inline-block; - padding: 1rem 2rem; - border-radius: 0.625em; - border: 0.3215em solid var(--primaryDefault); - color: #FFFFFF; -} + section#about, section#curriculumvitae h1 { + padding: 0 1em; + } -a.btn:hover { - border: 0.3215em solid var(--primaryHover); -} + /*** Navigation Styles **/ -a.btnPrimary, form input[type="submit"] { - background: var(--primaryDefault); - cursor: pointer; -} + header div h1 { + text-align: center; + height: 5.125rem; + } -a.btnOutline { - background: #FFFFFF; - color: var(--primaryDefault); -} + /***** About Styles *****/ -a.btnPrimary:hover, form input[type="submit"]:hover { - background: var(--primaryHover); -} + section#about div { + padding: 0.1em 1em; + } -a.btn:active, form input[type="submit"]:active { - padding: 0.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; } diff --git a/src/css/mediaQueries.css b/src/css/mediaQueries.css deleted file mode 100644 index bdce4e0..0000000 --- a/src/css/mediaQueries.css +++ /dev/null @@ -1,269 +0,0 @@ -/**** 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/templateStyles.css b/src/css/templateStyles.css new file mode 100644 index 0000000..c9c19ef --- /dev/null +++ b/src/css/templateStyles.css @@ -0,0 +1,81 @@ +/*** Template Styles ****/ + +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: normal; + 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: 0.625em; + border: 0.3215em solid var(--primaryDefault); + color: #FFFFFF; +} + +a.btn:hover { + border: 0.3215em solid var(--primaryHover); +} + +a.btnPrimary, form input[type="submit"] { + background: var(--primaryDefault); + cursor: pointer; +} + +a.btnOutline { + background: #FFFFFF; + color: var(--primaryDefault); +} + +a.btnPrimary:hover, form input[type="submit"]:hover { + background: var(--primaryHover); +} + +a.btn:active, form input[type="submit"]:active { + padding: 0.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; +}