From 8753311f5ce34ee68813858becb41e0809acec58 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Fri, 10 Sep 2021 18:11:32 -0400 Subject: [PATCH] added scss, but wont move forward --- .idea/.gitignore | 3 + .idea/lerko96.github.io.iml | 9 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + app/js/script.js | 1 + app/scss/_globals.scss | 773 +++++++++++++++++++++++++++++++++ app/scss/style.css | 821 ++++++++++++++++++++++++++++++++++++ app/scss/style.css.map | 10 + app/scss/style.scss | 1 + index.html | 64 ++- style.css | 403 +++++++++++++++++- 12 files changed, 2083 insertions(+), 22 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/lerko96.github.io.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 app/js/script.js create mode 100644 app/scss/_globals.scss create mode 100644 app/scss/style.css create mode 100644 app/scss/style.css.map create mode 100644 app/scss/style.scss diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..26d33521 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/lerko96.github.io.iml b/.idea/lerko96.github.io.iml new file mode 100644 index 00000000..d6ebd480 --- /dev/null +++ b/.idea/lerko96.github.io.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..40674af8 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..6e636ebb --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/js/script.js b/app/js/script.js new file mode 100644 index 00000000..3d4db9c9 --- /dev/null +++ b/app/js/script.js @@ -0,0 +1 @@ +console.log('hello nurse'); \ No newline at end of file diff --git a/app/scss/_globals.scss b/app/scss/_globals.scss new file mode 100644 index 00000000..d5dc5bae --- /dev/null +++ b/app/scss/_globals.scss @@ -0,0 +1,773 @@ +html { + font-size: 100%; + box-sizing: border-box; +} + + +*, *::before, *::after { + box-sizing: inherit; +} + +body { + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + line-height: 1.3; + margin: 0px; + padding: 0px; + background-color: #212121; + color: #ffffff; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; + scroll-behavior: smooth; +} + +body { + box-sizing: border-box; + color: #c9cacc; + background-color: #110f16; + /* background-color: #272727; */ + font-size: 16px; + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + font-weight: 400; + /* line-height: 1.725; */ + text-rendering: geometricPrecision; + min-height: 100vh; + /* margin: 0 auto; */ +} + +#wrapper { + display: flex; + flex-direction: column; + width: 100%; + /* max-width: 560px; */ + margin: 0 auto; +} + +nav { + +} + +nav ul { + list-style-type: none; + margin: auto; + padding: 0em; +} + +nav a { + text-decoration: none; + border-radius: 500px; + padding: 0.2rem; + font-weight: 600; + display: flex; + justify-content: center; + color: #c9cacc; + letter-spacing: 0.09rem; +} + +nav a:hover { + background-color: #29f3c3; + color: #1b1b1b; + transition: 150ms ease; +} + +/* header { + color: #c9cacc; + margin: 0 auto; + text-align: center; + padding: 2rem; + line-height: 1.75rem; + border-top: 1.5px solid #666; + border-bottom: 1.5px solid #666; +} */ + +/* header img { + width: 100px; + border: 5px solid #666; + border-radius: 165px; +} */ + +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; +} + +h1 { + /* font-family: 'Source Sans Pro', sans-serif; */ + /* font-weight: 700; */ + /* line-height: 2rem; */ + /* letter-spacing: 0.05rem; */ +} + +h1 a { + font-size: .8em; + color: #c9cacc; + text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; + +} + +h1 a:hover { + color: #29f3c3; +} + +header h2 { + /* font-weight: 200; */ + font-size: 1.2rem; + letter-spacing: 0.01rem; +} + +h2, +h3, +h4 { + /* letter-spacing: 0.01rem; */ +} + +#aboutMe { + letter-spacing: 0.01rem; +} + +#bio, +#skills { + padding: 1.5rem; + text-align: start; +} + +#bio h2 { + font-size: 2.2rem; +} + +#skills h4 { + padding: 1.5rem; + color: #666; + font-size: 1.5rem; + margin: 0 auto 20px; +} +#skills ul { + line-height: 1.35rem; + font-weight: 200; + text-align: center; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; +} + +.skills { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 10px 75px; + grid-auto-flow: row; + grid-template-areas: + '. .' + '. .' + '. .' + '. .' + '. .' + '. .' + '. .' + '. .'; +} + +#contact { + margin-top: 1rem; + padding: 1.5rem; +} + +#contact h3 { + font-size: 1.5rem; +} + +#contact ul { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + text-align: center; +} + +.contactLinks li { + display: flex; + flex-direction: column; + flex: 1; +} + +.contactLinks a { + display: flex; + flex-direction: column; + color: #c9cacc; + text-decoration: none; +} + +.contactLinks a:hover { + font-weight: 600; +} + +#project-wrapper { + margin-top: 2.5rem; +} + +#project-wrapper h2 { + margin: 0; + padding: 1.5rem 1.5rem 0 1.5rem; + font-size: 2rem; +} + +#project-wrapper h3 { + font-size: 1.5rem; + text-align: left; + margin: 0 auto; + padding: 1.5rem; + letter-spacing: 0.01rem; +} + +.project-item { + display: flex; + flex-direction: column; + margin: 1.5rem 0; + text-align: center; + font-weight: 200; + letter-spacing: 0.01rem; +} + +.project-item a { + color: #c9cacc; + text-decoration: none; +} + +.project-item a:hover { + color: #29f3c3; +} + +.project-desc { + margin: 0; + padding: 0 0.8rem; +} + +.project-skills { + color: #666; + list-style: none; + margin: 0 auto; + line-height: 1.25rem; + text-align: start; + padding: 0 1.5rem; + display: flex; + align-items: baseline; +} + +.project-skills h4 { + font-size: 1.5rem; + /* flex: 1; */ +} + +.project-skills li { + list-style-type: none; + color: #c9cacc; +} + +.project-skills ul { + /* flex: 9; */ + line-height: 2rem; + text-align: start; +} + +.project-item img { + max-width: 375px; + /* width: 90%; */ + box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); +} + +footer { + color: #666; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin: 0 auto; + padding: 1rem; +} + +#copyright { + margin: 0.4rem; + letter-spacing: 0.1rem; +} + +#footLinks { + margin: 0.4rem; + letter-spacing: 0.8rem; +} + +#footLinks a { + color: #666; +} + +#footLinks a:hover { + color: #c9cacc; + transition: 160ms ease-in; +} + +code pen begin + +/* This pen */ + +.dark { + background: #110f16; +} +.light { + background: #f3f5f7; +} +a, +a:hover { + text-decoration: none; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + flex-wrap: wrap; + display: flex; + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} +.postcard.dark { + background-color: #18151f; +} +.postcard.light { + background-color: #e1e5ea; +} +.postcard .t-dark { + color: #18151f; +} +.postcard a { + color: inherit; +} +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +.postcard .small { + font-size: 80%; +} +.postcard .postcard__title { + font-size: 1.75rem; +} +.postcard .postcard__img { + max-height: 180px; + width: 100%; + object-fit: cover; + position: relative; +} +.postcard .postcard__img_link { + display: contents; +} +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + transition: width 0.2s ease; +} +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: flex; + flex-direction: column; +} +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} +.postcard .postcard__tagbox { + display: flex; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + justify-content: center; +} +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + user-select: none; + transition: background-color 0.3s; +} +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} +.postcard:hover .postcard__bar { + width: 100px; +} +@media screen and (min-width: 769px) { + .postcard { + flex-wrap: inherit; + } + .postcard .postcard__title { + font-size: 2rem; + } + .postcard .postcard__tagbox { + justify-content: start; + } + .postcard .postcard__img { + max-width: 300px; + max-height: 100%; + transition: transform 0.3s ease; + } + .postcard .postcard__text { + padding: 3rem; + width: 100%; + } + .postcard .media.postcard__text:before { + content: ''; + position: absolute; + display: block; + background: #18151f; + top: -20%; + height: 130%; + width: 55px; + } + .postcard:hover .postcard__img { + transform: scale(1.1); + } + .postcard:nth-child(2n + 1) { + flex-direction: row; + } + .postcard:nth-child(2n + 0) { + flex-direction: row-reverse; + } + .postcard:nth-child(2n + 1) .postcard__text::before { + left: -12px !important; + transform: rotate(4deg); + } + .postcard:nth-child(2n + 0) .postcard__text::before { + right: -12px !important; + transform: rotate(-4deg); + } +} +@media screen and (min-width: 1024px) { + .postcard__text { + padding: 2rem 3.5rem; + } + .postcard__text:before { + content: ''; + position: absolute; + display: block; + top: -20%; + height: 130%; + width: 55px; + } + .postcard.dark .postcard__text:before { + background: #18151f; + } + .postcard.light .postcard__text:before { + background: #e1e5ea; + } +} +/* COLORS */ +.postcard .postcard__tagbox .green.play:hover { + background: #79dd09; + color: black; +} +.green .postcard__title:hover { + color: #79dd09; +} +.green .postcard__bar { + background-color: #79dd09; +} +.green::before { + background-image: linear-gradient( + -30deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); +} +.green:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .blue.play:hover { + background: #0076bd; +} +.blue .postcard__title:hover { + color: #0076bd; +} +.blue .postcard__bar { + background-color: #0076bd; +} +.blue::before { + background-image: linear-gradient( + -30deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); +} +.blue:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .red.play:hover { + background: #bd150b; +} +.red .postcard__title:hover { + color: #bd150b; +} +.red .postcard__bar { + background-color: #bd150b; +} +.red::before { + background-image: linear-gradient( + -30deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); +} +.red:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .yellow.play:hover { + background: #bdbb49; + color: black; +} +.yellow .postcard__title:hover { + color: #bdbb49; +} +.yellow .postcard__bar { + background-color: #bdbb49; +} +.yellow::before { + background-image: linear-gradient( + -30deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); +} +.yellow:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); +} +@media screen and (min-width: 769px) { + .green::before { + background-image: linear-gradient( + -80deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); + } + .green:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); + } + .blue::before { + background-image: linear-gradient( + -80deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); + } + .blue:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); + } + .red::before { + background-image: linear-gradient( + -80deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); + } + .red:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); + } + .yellow::before { + background-image: linear-gradient( + -80deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); + } + .yellow:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); + } +} + +/* code pen finish */ + +/* color: #1b1b1b; */ +/* color: #2a9d8f */ +/* @media (min-width: 768px) { + #wrapper { + max-width: 992px; + } + + nav { + display: flex; + } + + nav a { + margin: auto; + padding: 0.5rem; + flex: 4; + justify-content: flex-start; + } + + nav li { + display: inline-block; + } + + nav ul { + display: flex; + } + + #aboutMe { + display: flex; + } + + #bio { + flex: 2; + } + + #contact { + flex: 1; + text-align: end; + } + + .contactLinks { + display: flex; + flex-direction: column; + } + + .contactLinks li { + align-items: flex-end; + } + .contactLinks a { + flex-direction: row; + } + + .contactLinks i { + margin: auto 5px; + } + + #skills { + padding: 0; + } + + #project-container { + display: flex; + flex-direction: row-reverse; + } + + .project-item img { + flex: 2; + } + + .project-skills { + flex: 1; + margin: 0; + padding: 0; + text-align: end; + flex-direction: column; + align-items: flex-end; + } + + .project-skills h4 { + margin: 1.5rem; + align-self: flex-start; + } + + .project-skills ul { + margin: 1.5rem; + padding: 0; + } + + .project-item a { + align-self: start; + } + + footer { + margin: 0 auto; + width: 87%; + padding: 2rem; + flex-direction: row; + justify-content: space-between; + } +} */ + + diff --git a/app/scss/style.css b/app/scss/style.css new file mode 100644 index 00000000..a44ac628 --- /dev/null +++ b/app/scss/style.css @@ -0,0 +1,821 @@ +html { + font-size: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +*, *::before, *::after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} + +body { + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + line-height: 1.3; + margin: 0px; + padding: 0px; + background-color: #212121; + color: #ffffff; +} + +* { + padding: 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; + scroll-behavior: smooth; +} + +body { + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #c9cacc; + background-color: #110f16; + /* background-color: #272727; */ + font-size: 16px; + font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; + font-weight: 400; + /* line-height: 1.725; */ + text-rendering: geometricPrecision; + min-height: 100vh; + /* margin: 0 auto; */ +} + +#wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + /* max-width: 560px; */ + margin: 0 auto; +} + +nav ul { + list-style-type: none; + margin: auto; + padding: 0em; +} + +nav a { + text-decoration: none; + border-radius: 500px; + padding: 0.2rem; + font-weight: 600; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #c9cacc; + letter-spacing: 0.09rem; +} + +nav a:hover { + background-color: #29f3c3; + color: #1b1b1b; + -webkit-transition: 150ms ease; + transition: 150ms ease; +} + +/* header { + color: #c9cacc; + margin: 0 auto; + text-align: center; + padding: 2rem; + line-height: 1.75rem; + border-top: 1.5px solid #666; + border-bottom: 1.5px solid #666; +} */ +/* header img { + width: 100px; + border: 5px solid #666; + border-radius: 165px; +} */ +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + -webkit-box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; +} + +h1 { + /* font-family: 'Source Sans Pro', sans-serif; */ + /* font-weight: 700; */ + /* line-height: 2rem; */ + /* letter-spacing: 0.05rem; */ +} + +h1 a { + font-size: .8em; + color: #c9cacc; + text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; +} + +h1 a:hover { + color: #29f3c3; +} + +header h2 { + /* font-weight: 200; */ + font-size: 1.2rem; + letter-spacing: 0.01rem; +} + +h2, +h3, +h4 { + /* letter-spacing: 0.01rem; */ +} + +#aboutMe { + letter-spacing: 0.01rem; +} + +#bio, +#skills { + padding: 1.5rem; + text-align: start; +} + +#bio h2 { + font-size: 2.2rem; +} + +#skills h4 { + padding: 1.5rem; + color: #666; + font-size: 1.5rem; + margin: 0 auto 20px; +} + +#skills ul { + line-height: 1.35rem; + font-weight: 200; + text-align: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; +} + +.skills { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + gap: 10px 75px; + grid-auto-flow: row; + grid-template-areas: '. .' '. .' '. .' '. .' '. .' '. .' '. .' '. .'; +} + +#contact { + margin-top: 1rem; + padding: 1.5rem; +} + +#contact h3 { + font-size: 1.5rem; +} + +#contact ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + text-align: center; +} + +.contactLinks li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.contactLinks a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + color: #c9cacc; + text-decoration: none; +} + +.contactLinks a:hover { + font-weight: 600; +} + +#project-wrapper { + margin-top: 2.5rem; +} + +#project-wrapper h2 { + margin: 0; + padding: 1.5rem 1.5rem 0 1.5rem; + font-size: 2rem; +} + +#project-wrapper h3 { + font-size: 1.5rem; + text-align: left; + margin: 0 auto; + padding: 1.5rem; + letter-spacing: 0.01rem; +} + +.project-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 1.5rem 0; + text-align: center; + font-weight: 200; + letter-spacing: 0.01rem; +} + +.project-item a { + color: #c9cacc; + text-decoration: none; +} + +.project-item a:hover { + color: #29f3c3; +} + +.project-desc { + margin: 0; + padding: 0 0.8rem; +} + +.project-skills { + color: #666; + list-style: none; + margin: 0 auto; + line-height: 1.25rem; + text-align: start; + padding: 0 1.5rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +.project-skills h4 { + font-size: 1.5rem; + /* flex: 1; */ +} + +.project-skills li { + list-style-type: none; + color: #c9cacc; +} + +.project-skills ul { + /* flex: 9; */ + line-height: 2rem; + text-align: start; +} + +.project-item img { + max-width: 375px; + /* width: 90%; */ + box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75); +} + +footer { + color: #666; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 auto; + padding: 1rem; +} + +#copyright { + margin: 0.4rem; + letter-spacing: 0.1rem; +} + +#footLinks { + margin: 0.4rem; + letter-spacing: 0.8rem; +} + +#footLinks a { + color: #666; +} + +#footLinks a:hover { + color: #c9cacc; + -webkit-transition: 160ms ease-in; + transition: 160ms ease-in; +} + +code pen begin +.dark { + background: #110f16; +} + +.light { + background: #f3f5f7; +} + +a, +a:hover { + text-decoration: none; + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} + +.postcard.dark { + background-color: #18151f; +} + +.postcard.light { + background-color: #e1e5ea; +} + +.postcard .t-dark { + color: #18151f; +} + +.postcard a { + color: inherit; +} + +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} + +.postcard .small { + font-size: 80%; +} + +.postcard .postcard__title { + font-size: 1.75rem; +} + +.postcard .postcard__img { + max-height: 180px; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + position: relative; +} + +.postcard .postcard__img_link { + display: contents; +} + +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + -webkit-transition: width 0.2s ease; + transition: width 0.2s ease; +} + +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} + +.postcard .postcard__tagbox { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: background-color 0.3s; + transition: background-color 0.3s; +} + +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} + +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} + +.postcard:hover .postcard__bar { + width: 100px; +} + +@media screen and (min-width: 769px) { + .postcard { + -ms-flex-wrap: inherit; + flex-wrap: inherit; + } + .postcard .postcard__title { + font-size: 2rem; + } + .postcard .postcard__tagbox { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; + } + .postcard .postcard__img { + max-width: 300px; + max-height: 100%; + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + } + .postcard .postcard__text { + padding: 3rem; + width: 100%; + } + .postcard .media.postcard__text:before { + content: ''; + position: absolute; + display: block; + background: #18151f; + top: -20%; + height: 130%; + width: 55px; + } + .postcard:hover .postcard__img { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + .postcard:nth-child(2n + 1) { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + } + .postcard:nth-child(2n + 0) { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .postcard:nth-child(2n + 1) .postcard__text::before { + left: -12px !important; + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + .postcard:nth-child(2n + 0) .postcard__text::before { + right: -12px !important; + -webkit-transform: rotate(-4deg); + transform: rotate(-4deg); + } +} + +@media screen and (min-width: 1024px) { + .postcard__text { + padding: 2rem 3.5rem; + } + .postcard__text:before { + content: ''; + position: absolute; + display: block; + top: -20%; + height: 130%; + width: 55px; + } + .postcard.dark .postcard__text:before { + background: #18151f; + } + .postcard.light .postcard__text:before { + background: #e1e5ea; + } +} + +/* COLORS */ +.postcard .postcard__tagbox .green.play:hover { + background: #79dd09; + color: black; +} + +.green .postcard__title:hover { + color: #79dd09; +} + +.green .postcard__bar { + background-color: #79dd09; +} + +.green::before { + background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%); +} + +.green:nth-child(2n)::before { + background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%); +} + +.postcard .postcard__tagbox .blue.play:hover { + background: #0076bd; +} + +.blue .postcard__title:hover { + color: #0076bd; +} + +.blue .postcard__bar { + background-color: #0076bd; +} + +.blue::before { + background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%); +} + +.blue:nth-child(2n)::before { + background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%); +} + +.postcard .postcard__tagbox .red.play:hover { + background: #bd150b; +} + +.red .postcard__title:hover { + color: #bd150b; +} + +.red .postcard__bar { + background-color: #bd150b; +} + +.red::before { + background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%); +} + +.red:nth-child(2n)::before { + background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%); +} + +.postcard .postcard__tagbox .yellow.play:hover { + background: #bdbb49; + color: black; +} + +.yellow .postcard__title:hover { + color: #bdbb49; +} + +.yellow .postcard__bar { + background-color: #bdbb49; +} + +.yellow::before { + background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%); +} + +.yellow:nth-child(2n)::before { + background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%); +} + +@media screen and (min-width: 769px) { + .green::before { + background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%); + } + .green:nth-child(2n)::before { + background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%); + } + .blue::before { + background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%); + } + .blue:nth-child(2n)::before { + background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%); + } + .red::before { + background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%); + } + .red:nth-child(2n)::before { + background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%); + } + .yellow::before { + background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%); + } + .yellow:nth-child(2n)::before { + background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%); + } +} + +/* code pen finish */ +/* color: #1b1b1b; */ +/* color: #2a9d8f */ +/* @media (min-width: 768px) { + #wrapper { + max-width: 992px; + } + + nav { + display: flex; + } + + nav a { + margin: auto; + padding: 0.5rem; + flex: 4; + justify-content: flex-start; + } + + nav li { + display: inline-block; + } + + nav ul { + display: flex; + } + + #aboutMe { + display: flex; + } + + #bio { + flex: 2; + } + + #contact { + flex: 1; + text-align: end; + } + + .contactLinks { + display: flex; + flex-direction: column; + } + + .contactLinks li { + align-items: flex-end; + } + .contactLinks a { + flex-direction: row; + } + + .contactLinks i { + margin: auto 5px; + } + + #skills { + padding: 0; + } + + #project-container { + display: flex; + flex-direction: row-reverse; + } + + .project-item img { + flex: 2; + } + + .project-skills { + flex: 1; + margin: 0; + padding: 0; + text-align: end; + flex-direction: column; + align-items: flex-end; + } + + .project-skills h4 { + margin: 1.5rem; + align-self: flex-start; + } + + .project-skills ul { + margin: 1.5rem; + padding: 0; + } + + .project-item a { + align-self: start; + } + + footer { + margin: 0 auto; + width: 87%; + padding: 2rem; + flex-direction: row; + justify-content: space-between; + } +} */ +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/app/scss/style.css.map b/app/scss/style.css.map new file mode 100644 index 00000000..c1458690 --- /dev/null +++ b/app/scss/style.css.map @@ -0,0 +1,10 @@ +{ + "version": 3, + "mappings": "ACAA,AAAA,IAAI,CAAC;EACD,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,UAAU;CACzB;;AAGD,AAAA,CAAC,EAAE,CAAC,AAAA,QAAQ,EAAE,CAAC,AAAA,OAAO,CAAC;EACnB,UAAU,EAAE,OAAO;CACtB;;AAED,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,0DAA0D;EACpE,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,GAAG;EACZ,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;CACjB;;AAED,AAAA,CAAC,CAAC;EACD,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,UAAU;CACtB;;AAED,AAAA,IAAI,EAAE,IAAI,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,UAAU,EAAE,UAAU;EACtB,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,iCAAiC;EACjC,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,0DAA0D;EACvE,WAAW,EAAE,GAAG;EAChB,yBAAyB;EACzB,cAAc,EAAE,kBAAkB;EAClC,UAAU,EAAE,KAAK;EACjB,qBAAqB;CACrB;;AAED,AAAA,QAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,IAAI;EACX,uBAAuB;EACvB,MAAM,EAAE,MAAM;CACd;;AAMD,AAAA,GAAG,CAAC,EAAE,CAAC;EACN,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,GAAG;CACZ;;AAED,AAAA,GAAG,CAAC,CAAC,CAAC;EACL,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,KAAK;EACpB,OAAO,EAAE,MAAM;EACf,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,KAAK,EAAE,OAAO;EACd,cAAc,EAAE,OAAO;CACvB;;AAED,AAAA,GAAG,CAAC,CAAC,AAAA,MAAM,CAAC;EACX,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,UAAU;CACtB;;AAED;;;;;;;;IAQI;AAEJ;;;;IAII;AAEJ,AAAA,KAAK,CAAC;EACL,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAkB;CAC9C;;AAED,AAAA,SAAS,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;EACnB,uBAAuB,EAAE,IAAI;EAC7B,yBAAyB,EAAE,IAAI;CAC/B;;AAED,AAAA,KAAK,CAAC,GAAG,CAAC;EACT,MAAM,EAAE,cAAc;EACtB,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,GAAG;CAClB;;AAED,AAAA,EAAE,CAAC;EACF,iDAAiD;EACjD,uBAAuB;EACvB,wBAAwB;EACxB,8BAA8B;CAC9B;;AAED,AAAA,EAAE,CAAC,CAAC,CAAC;EACJ,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAO;EACd,eAAe,EAAE,IAAI;EACrB,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,MAAM;CAEpB;;AAED,AAAA,EAAE,CAAC,CAAC,AAAA,MAAM,CAAC;EACV,KAAK,EAAE,OAAO;CACd;;AAED,AAAA,MAAM,CAAC,EAAE,CAAC;EACT,uBAAuB;EACvB,SAAS,EAAE,MAAM;EACjB,cAAc,EAAE,OAAO;CACvB;;AAED,AAAA,EAAE;AACF,EAAE;AACF,EAAE,CAAC;EACF,8BAA8B;CAC9B;;AAED,AAAA,QAAQ,CAAC;EACR,cAAc,EAAE,OAAO;CACvB;;AAED,AAAA,IAAI;AACJ,OAAO,CAAC;EACP,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,KAAK;CACjB;;AAED,AAAA,IAAI,CAAC,EAAE,CAAC;EACP,SAAS,EAAE,MAAM;CACjB;;AAED,AAAA,OAAO,CAAC,EAAE,CAAC;EACV,OAAO,EAAE,MAAM;EACf,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,MAAM;EACjB,MAAM,EAAE,WAAW;CACnB;;AACD,AAAA,OAAO,CAAC,EAAE,CAAC;EACV,WAAW,EAAE,OAAO;EACpB,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,eAAe,EAAE,IAAI;CACrB;;AAED,AAAA,OAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,OAAO;EAC9B,kBAAkB,EAAE,+BAA+B;EACnD,GAAG,EAAE,SAAS;EACd,cAAc,EAAE,GAAG;EACnB,mBAAmB,EAClB,+CAOK;CACN;;AAED,AAAA,QAAQ,CAAC;EACR,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,MAAM;CACf;;AAED,AAAA,QAAQ,CAAC,EAAE,CAAC;EACX,SAAS,EAAE,MAAM;CACjB;;AAED,AAAA,QAAQ,CAAC,EAAE,CAAC;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,aAAa,CAAC,EAAE,CAAC;EAChB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,IAAI,EAAE,CAAC;CACP;;AAED,AAAA,aAAa,CAAC,CAAC,CAAC;EACf,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,OAAO;EACd,eAAe,EAAE,IAAI;CACrB;;AAED,AAAA,aAAa,CAAC,CAAC,AAAA,MAAM,CAAC;EACrB,WAAW,EAAE,GAAG;CAChB;;AAED,AAAA,gBAAgB,CAAC;EAChB,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,gBAAgB,CAAC,EAAE,CAAC;EACnB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,sBAAsB;EAC/B,SAAS,EAAE,IAAI;CACf;;AAED,AAAA,gBAAgB,CAAC,EAAE,CAAC;EACnB,SAAS,EAAE,MAAM;EACjB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,MAAM;EACf,cAAc,EAAE,OAAO;CACvB;;AAED,AAAA,aAAa,CAAC;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,QAAQ;EAChB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,OAAO;CACvB;;AAED,AAAA,aAAa,CAAC,CAAC,CAAC;EACf,KAAK,EAAE,OAAO;EACd,eAAe,EAAE,IAAI;CACrB;;AAED,AAAA,aAAa,CAAC,CAAC,AAAA,MAAM,CAAC;EACrB,KAAK,EAAE,OAAO;CACd;;AAED,AAAA,aAAa,CAAC;EACb,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,QAAQ;CACjB;;AAED,AAAA,eAAe,CAAC;EACf,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,MAAM;EACd,WAAW,EAAE,OAAO;EACpB,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,QAAQ;CACrB;;AAED,AAAA,eAAe,CAAC,EAAE,CAAC;EAClB,SAAS,EAAE,MAAM;EACjB,cAAc;CACd;;AAED,AAAA,eAAe,CAAC,EAAE,CAAC;EAClB,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;CACd;;AAED,AAAA,eAAe,CAAC,EAAE,CAAC;EAClB,cAAc;EACd,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,KAAK;CACjB;;AAED,AAAA,aAAa,CAAC,GAAG,CAAC;EACjB,SAAS,EAAE,KAAK;EAChB,iBAAiB;EACjB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB;EAClD,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB;EAC1D,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB;CACvD;;AAED,AAAA,MAAM,CAAC;EACN,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,IAAI;CACb;;AAED,AAAA,UAAU,CAAC;EACV,MAAM,EAAE,MAAM;EACd,cAAc,EAAE,MAAM;CACtB;;AAED,AAAA,UAAU,CAAC;EACV,MAAM,EAAE,MAAM;EACd,cAAc,EAAE,MAAM;CACtB;;AAED,AAAA,UAAU,CAAC,CAAC,CAAC;EACZ,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,UAAU,CAAC,CAAC,AAAA,MAAM,CAAC;EAClB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,aAAa;CACzB;;AAED,AAAA,IAAI,CAAC,GAAG,CAAC,KAAK;AAId,KAAK,CAAC;EACL,UAAU,EAAE,OAAO;CACnB;;AACD,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,OAAO;CACnB;;AACD,AAAA,CAAC;AACD,CAAC,AAAA,MAAM,CAAC;EACP,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,sBAAsB;CAClC;;AAED,WAAW;AACX,AAAA,SAAS,CAAC;EACT,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,KAAI,CAAC,mBAAmB;EAChD,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,UAAU;EAClB,QAAQ,EAAE,MAAM;EAChB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,SAAS,AAAA,KAAK,CAAC;EACd,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,SAAS,AAAA,MAAM,CAAC;EACf,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,SAAS,CAAC,OAAO,CAAC;EACjB,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,SAAS,CAAC,CAAC,CAAC;EACX,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,SAAS,CAAC,EAAE;AACZ,SAAS,CAAC,GAAG,CAAC;EACb,aAAa,EAAE,MAAM;EACrB,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,GAAG;CAChB;;AACD,AAAA,SAAS,CAAC,MAAM,CAAC;EAChB,SAAS,EAAE,GAAG;CACd;;AACD,AAAA,SAAS,CAAC,gBAAgB,CAAC;EAC1B,SAAS,EAAE,OAAO;CAClB;;AACD,AAAA,SAAS,CAAC,cAAc,CAAC;EACxB,UAAU,EAAE,KAAK;EACjB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,QAAQ,EAAE,QAAQ;CAClB;;AACD,AAAA,SAAS,CAAC,mBAAmB,CAAC;EAC7B,OAAO,EAAE,QAAQ;CACjB;;AACD,AAAA,SAAS,CAAC,cAAc,CAAC;EACxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,MAAM;EACd,aAAa,EAAE,GAAG;EAClB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,eAAe;CAC3B;;AACD,AAAA,SAAS,CAAC,eAAe,CAAC;EACzB,OAAO,EAAE,MAAM;EACf,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CACtB;;AACD,AAAA,SAAS,CAAC,sBAAsB,CAAC;EAChC,QAAQ,EAAE,MAAM;EAChB,aAAa,EAAE,QAAQ;EACvB,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,IAAI;CACZ;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC;EAC3B,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,QAAQ;EACnB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,UAAU;EAClB,OAAO,EAAE,CAAC;EACV,eAAe,EAAE,MAAM;CACvB;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC,UAAU,CAAC;EACtC,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,qBAAqB;EACjC,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,UAAU;EACnB,MAAM,EAAE,WAAW;EACnB,MAAM,EAAE,OAAO;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,qBAAqB;CACjC;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC,UAAU,AAAA,MAAM,CAAC;EAC5C,UAAU,EAAE,qBAAqB;CACjC;;AACD,AAAA,SAAS,AAAA,OAAO,CAAC;EAChB,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,gBAAgB,EAAE,iDAAiD;EACnE,OAAO,EAAE,CAAC;EACV,aAAa,EAAE,IAAI;CACnB;;AACD,AAAA,SAAS,AAAA,MAAM,CAAC,cAAc,CAAC;EAC9B,KAAK,EAAE,KAAK;CACZ;;AACD,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAClC,AAAA,SAAS,CAAC;IACT,SAAS,EAAE,OAAO;GAClB;EACD,AAAA,SAAS,CAAC,gBAAgB,CAAC;IAC1B,SAAS,EAAE,IAAI;GACf;EACD,AAAA,SAAS,CAAC,iBAAiB,CAAC;IAC3B,eAAe,EAAE,KAAK;GACtB;EACD,AAAA,SAAS,CAAC,cAAc,CAAC;IACxB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,mBAAmB;GAC/B;EACD,AAAA,SAAS,CAAC,eAAe,CAAC;IACzB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;GACX;EACD,AAAA,SAAS,CAAC,MAAM,AAAA,eAAe,AAAA,OAAO,CAAC;IACtC,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,OAAO;IACnB,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;GACX;EACD,AAAA,SAAS,AAAA,MAAM,CAAC,cAAc,CAAC;IAC9B,SAAS,EAAE,UAAU;GACrB;EACD,AAAA,SAAS,AAAA,UAAW,CAAA,MAAM,EAAE;IAC3B,cAAc,EAAE,GAAG;GACnB;EACD,AAAA,SAAS,AAAA,UAAW,CAAA,MAAM,EAAE;IAC3B,cAAc,EAAE,WAAW;GAC3B;EACD,AAAA,SAAS,AAAA,UAAW,CAAA,MAAM,EAAE,eAAe,AAAA,QAAQ,CAAC;IACnD,IAAI,EAAE,gBAAgB;IACtB,SAAS,EAAE,YAAY;GACvB;EACD,AAAA,SAAS,AAAA,UAAW,CAAA,MAAM,EAAE,eAAe,AAAA,QAAQ,CAAC;IACnD,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAa;GACxB;;;AAEF,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,MAAM;EACnC,AAAA,eAAe,CAAC;IACf,OAAO,EAAE,WAAW;GACpB;EACD,AAAA,eAAe,AAAA,OAAO,CAAC;IACtB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,KAAK;IACd,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;GACX;EACD,AAAA,SAAS,AAAA,KAAK,CAAC,eAAe,AAAA,OAAO,CAAC;IACrC,UAAU,EAAE,OAAO;GACnB;EACD,AAAA,SAAS,AAAA,MAAM,CAAC,eAAe,AAAA,OAAO,CAAC;IACtC,UAAU,EAAE,OAAO;GACnB;;;AAEF,YAAY;AACZ,AAAA,SAAS,CAAC,iBAAiB,CAAC,MAAM,AAAA,KAAK,AAAA,MAAM,CAAC;EAC7C,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,KAAK;CACZ;;AACD,AAAA,MAAM,CAAC,gBAAgB,AAAA,MAAM,CAAC;EAC7B,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,MAAM,CAAC,cAAc,CAAC;EACrB,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,MAAM,AAAA,QAAQ,CAAC;EACd,gBAAgB,EAAE,gEAIjB;CACD;;AACD,AAAA,MAAM,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;EAC5B,gBAAgB,EAAE,+DAIjB;CACD;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC,KAAK,AAAA,KAAK,AAAA,MAAM,CAAC;EAC5C,UAAU,EAAE,OAAO;CACnB;;AACD,AAAA,KAAK,CAAC,gBAAgB,AAAA,MAAM,CAAC;EAC5B,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,KAAK,CAAC,cAAc,CAAC;EACpB,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,KAAK,AAAA,QAAQ,CAAC;EACb,gBAAgB,EAAE,gEAIjB;CACD;;AACD,AAAA,KAAK,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;EAC3B,gBAAgB,EAAE,+DAIjB;CACD;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC,IAAI,AAAA,KAAK,AAAA,MAAM,CAAC;EAC3C,UAAU,EAAE,OAAO;CACnB;;AACD,AAAA,IAAI,CAAC,gBAAgB,AAAA,MAAM,CAAC;EAC3B,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,IAAI,CAAC,cAAc,CAAC;EACnB,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,IAAI,AAAA,QAAQ,CAAC;EACZ,gBAAgB,EAAE,gEAIjB;CACD;;AACD,AAAA,IAAI,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;EAC1B,gBAAgB,EAAE,+DAIjB;CACD;;AACD,AAAA,SAAS,CAAC,iBAAiB,CAAC,OAAO,AAAA,KAAK,AAAA,MAAM,CAAC;EAC9C,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,KAAK;CACZ;;AACD,AAAA,OAAO,CAAC,gBAAgB,AAAA,MAAM,CAAC;EAC9B,KAAK,EAAE,OAAO;CACd;;AACD,AAAA,OAAO,CAAC,cAAc,CAAC;EACtB,gBAAgB,EAAE,OAAO;CACzB;;AACD,AAAA,OAAO,AAAA,QAAQ,CAAC;EACf,gBAAgB,EAAE,iEAIjB;CACD;;AACD,AAAA,OAAO,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;EAC7B,gBAAgB,EAAE,gEAIjB;CACD;;AACD,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAClC,AAAA,MAAM,AAAA,QAAQ,CAAC;IACd,gBAAgB,EAAE,gEAIjB;GACD;EACD,AAAA,MAAM,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;IAC5B,gBAAgB,EAAE,+DAIjB;GACD;EACD,AAAA,KAAK,AAAA,QAAQ,CAAC;IACb,gBAAgB,EAAE,gEAIjB;GACD;EACD,AAAA,KAAK,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;IAC3B,gBAAgB,EAAE,+DAIjB;GACD;EACD,AAAA,IAAI,AAAA,QAAQ,CAAC;IACZ,gBAAgB,EAAE,gEAIjB;GACD;EACD,AAAA,IAAI,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;IAC1B,gBAAgB,EAAE,+DAIjB;GACD;EACD,AAAA,OAAO,AAAA,QAAQ,CAAC;IACf,gBAAgB,EAAE,iEAIjB;GACD;EACD,AAAA,OAAO,AAAA,UAAW,CAAA,EAAE,CAAC,QAAQ,CAAC;IAC7B,gBAAgB,EAAE,gEAIjB;GACD;;;AAGF,qBAAqB;AAErB,qBAAqB;AACrB,oBAAoB;AACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgGI", + "sources": [ + "style.scss", + "_globals.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/app/scss/style.scss b/app/scss/style.scss new file mode 100644 index 00000000..995faf56 --- /dev/null +++ b/app/scss/style.scss @@ -0,0 +1 @@ +@import "globals"; \ No newline at end of file diff --git a/index.html b/index.html index 300899cc..655f78c5 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,15 @@ href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet" /> - + + - + + Tyler Koenig @@ -34,6 +35,8 @@
+
+
tyler

Tyler Koenig @@ -43,6 +46,7 @@
Student at We Can Code IT, Web Developer in the making!

+
@@ -121,8 +125,54 @@
  • Relational Databases
  • Source Control/ Github
    • -
    + +
    + + Image Title + +
    +

    + Podcast Title +

    +
    + +
    +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing + elit. Eligendi, fugiat asperiores inventore beatae + accusamus odit minima enim, commodi quia, doloribus + eius! Ducimus nemo accusantium maiores velit + corrupti tempora reiciendis molestiae repellat vero. + Eveniet ipsam adipisci illo iusto quibusdam, sunt + neque nulla unde ipsum dolores nobis enim quidem + excepturi, illum quos! +
    + +
    +
    +

    projects

    @@ -426,6 +476,6 @@
    - + diff --git a/style.css b/style.css index 4fe4c3b1..8fdaf92d 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,34 @@ -html { +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; scroll-behavior: smooth; } body { box-sizing: border-box; color: #c9cacc; - background-color: #272727; + background-color: #110f16; + /* background-color: #272727; */ font-size: 16px; font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif; font-weight: 400; - line-height: 1.725; + /* line-height: 1.725; */ text-rendering: geometricPrecision; min-height: 100vh; - margin: 0 auto; + /* margin: 0 auto; */ } #wrapper { display: flex; flex-direction: column; width: 100%; - max-width: 560px; + /* max-width: 560px; */ margin: 0 auto; } @@ -46,7 +55,7 @@ nav a:hover { transition: 150ms ease; } -header { +/* header { color: #c9cacc; margin: 0 auto; text-align: center; @@ -54,25 +63,50 @@ header { line-height: 1.75rem; border-top: 1.5px solid #666; border-bottom: 1.5px solid #666; -} +} */ -header img { +/* header img { width: 100px; border: 5px solid #666; border-radius: 165px; +} */ + +.card { + background-color: #151515; + margin: 2rem; + text-align: center; + border-radius: 10px; + box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2); +} + +.card-top { + margin: auto; + height: 80px; + background: #29f3c3; + border-start-end-radius: 10px; + border-start-start-radius: 10px; +} + +.card img { + margin: 40px auto 10px; + width: 100px; + border-radius: 50%; } h1 { /* font-family: 'Source Sans Pro', sans-serif; */ /* font-weight: 700; */ - line-height: 2rem; + /* line-height: 2rem; */ /* letter-spacing: 0.05rem; */ } h1 a { - font-size: 3rem; + font-size: .8em; color: #c9cacc; text-decoration: none; + letter-spacing: -.05em; + word-spacing: -.05em; + } h1 a:hover { @@ -80,7 +114,7 @@ h1 a:hover { } header h2 { - font-weight: 200; + /* font-weight: 200; */ font-size: 1.2rem; letter-spacing: 0.01rem; } @@ -88,7 +122,7 @@ header h2 { h2, h3, h4 { - letter-spacing: 0.01rem; + /* letter-spacing: 0.01rem; */ } #aboutMe { @@ -277,11 +311,348 @@ footer { transition: 160ms ease-in; } +code pen begin + +@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap'); +/* This pen */ + +.dark { + background: #110f16; +} +.light { + background: #f3f5f7; +} +a, +a:hover { + text-decoration: none; + transition: color 0.3s ease-in-out; +} + +/* Cards */ +.postcard { + flex-wrap: wrap; + display: flex; + box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); + border-radius: 10px; + margin: 0 0 2rem 0; + overflow: hidden; + position: relative; + color: #ffffff; +} +.postcard.dark { + background-color: #18151f; +} +.postcard.light { + background-color: #e1e5ea; +} +.postcard .t-dark { + color: #18151f; +} +.postcard a { + color: inherit; +} +.postcard h1, +.postcard .h1 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +.postcard .small { + font-size: 80%; +} +.postcard .postcard__title { + font-size: 1.75rem; +} +.postcard .postcard__img { + max-height: 180px; + width: 100%; + object-fit: cover; + position: relative; +} +.postcard .postcard__img_link { + display: contents; +} +.postcard .postcard__bar { + width: 50px; + height: 10px; + margin: 10px 0; + border-radius: 5px; + background-color: #424242; + transition: width 0.2s ease; +} +.postcard .postcard__text { + padding: 1.5rem; + position: relative; + display: flex; + flex-direction: column; +} +.postcard .postcard__preview-txt { + overflow: hidden; + text-overflow: ellipsis; + text-align: justify; + height: 100%; +} +.postcard .postcard__tagbox { + display: flex; + flex-flow: row wrap; + font-size: 14px; + margin: 20px 0 0 0; + padding: 0; + justify-content: center; +} +.postcard .postcard__tagbox .tag__item { + display: inline-block; + background: rgba(83, 83, 83, 0.4); + border-radius: 3px; + padding: 2.5px 10px; + margin: 0 5px 5px 0; + cursor: default; + user-select: none; + transition: background-color 0.3s; +} +.postcard .postcard__tagbox .tag__item:hover { + background: rgba(83, 83, 83, 0.8); +} +.postcard:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(-70deg, #424242, transparent 50%); + opacity: 1; + border-radius: 10px; +} +.postcard:hover .postcard__bar { + width: 100px; +} +@media screen and (min-width: 769px) { + .postcard { + flex-wrap: inherit; + } + .postcard .postcard__title { + font-size: 2rem; + } + .postcard .postcard__tagbox { + justify-content: start; + } + .postcard .postcard__img { + max-width: 300px; + max-height: 100%; + transition: transform 0.3s ease; + } + .postcard .postcard__text { + padding: 3rem; + width: 100%; + } + .postcard .media.postcard__text:before { + content: ''; + position: absolute; + display: block; + background: #18151f; + top: -20%; + height: 130%; + width: 55px; + } + .postcard:hover .postcard__img { + transform: scale(1.1); + } + .postcard:nth-child(2n + 1) { + flex-direction: row; + } + .postcard:nth-child(2n + 0) { + flex-direction: row-reverse; + } + .postcard:nth-child(2n + 1) .postcard__text::before { + left: -12px !important; + transform: rotate(4deg); + } + .postcard:nth-child(2n + 0) .postcard__text::before { + right: -12px !important; + transform: rotate(-4deg); + } +} +@media screen and (min-width: 1024px) { + .postcard__text { + padding: 2rem 3.5rem; + } + .postcard__text:before { + content: ''; + position: absolute; + display: block; + top: -20%; + height: 130%; + width: 55px; + } + .postcard.dark .postcard__text:before { + background: #18151f; + } + .postcard.light .postcard__text:before { + background: #e1e5ea; + } +} +/* COLORS */ +.postcard .postcard__tagbox .green.play:hover { + background: #79dd09; + color: black; +} +.green .postcard__title:hover { + color: #79dd09; +} +.green .postcard__bar { + background-color: #79dd09; +} +.green::before { + background-image: linear-gradient( + -30deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); +} +.green:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .blue.play:hover { + background: #0076bd; +} +.blue .postcard__title:hover { + color: #0076bd; +} +.blue .postcard__bar { + background-color: #0076bd; +} +.blue::before { + background-image: linear-gradient( + -30deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); +} +.blue:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .red.play:hover { + background: #bd150b; +} +.red .postcard__title:hover { + color: #bd150b; +} +.red .postcard__bar { + background-color: #bd150b; +} +.red::before { + background-image: linear-gradient( + -30deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); +} +.red:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); +} +.postcard .postcard__tagbox .yellow.play:hover { + background: #bdbb49; + color: black; +} +.yellow .postcard__title:hover { + color: #bdbb49; +} +.yellow .postcard__bar { + background-color: #bdbb49; +} +.yellow::before { + background-image: linear-gradient( + -30deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); +} +.yellow:nth-child(2n)::before { + background-image: linear-gradient( + 30deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); +} +@media screen and (min-width: 769px) { + .green::before { + background-image: linear-gradient( + -80deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); + } + .green:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(121, 221, 9, 0.1), + transparent 50% + ); + } + .blue::before { + background-image: linear-gradient( + -80deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); + } + .blue:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(0, 118, 189, 0.1), + transparent 50% + ); + } + .red::before { + background-image: linear-gradient( + -80deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); + } + .red:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(189, 21, 11, 0.1), + transparent 50% + ); + } + .yellow::before { + background-image: linear-gradient( + -80deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); + } + .yellow:nth-child(2n)::before { + background-image: linear-gradient( + 80deg, + rgba(189, 187, 73, 0.1), + transparent 50% + ); + } +} + +/* code pen finish */ + /* color: #1b1b1b; */ /* color: #2a9d8f */ -@media (min-width: 576px) { +/* @media (min-width: 768px) { #wrapper { - width: 560px; + max-width: 992px; } nav { @@ -375,4 +746,6 @@ footer { flex-direction: row; justify-content: space-between; } -} +} */ + +