diff --git a/js/app.js b/js/app.js
index de2c18e..4ecd2b2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,6 +5,31 @@ const elem = selector => {
const today = new Date()
document.getElementById('year').innerHTML = today.getFullYear()
+$('#theme-switch').click(function () {
+ darkModeSwitcher()
+})
+
+var darkMode = false;
+document.documentElement.setAttribute('data-theme', ['dark', 'light'][darkMode]);
+if (darkMode) {
+ $('#theme-switch').html('🌙')
+} else {
+ $('#theme-switch').html('☀️')
+}
+
+function darkModeSwitcher () {
+
+ document.documentElement.setAttribute('data-theme', ['dark', 'light'][+darkMode]);
+ darkMode = !darkMode;
+
+ if (darkMode) {
+ $('#theme-switch').html('🌙')
+ } else {
+ $('#theme-switch').html('☀️')
+ }
+
+}
+
// PROJECTS SECTION --------------------
$(function () {
$.getJSON('data/projects.json', function (data) {
@@ -282,11 +307,11 @@ $(window).scroll(function () {
// NAVIGATION
if (wScroll > introHeight) {
nav.classList.add('alone')
- $('#niser-logo').attr("src", "images/n_logo_color.png")
+ // $('#niser-logo').attr("src", "images/n_logo_color.png")
}
if (wScroll < introHeight) {
nav.classList.remove('alone')
- $('#niser-logo').attr("src", "images/n_logo.png")
+ // $('#niser-logo').attr("src", "images/n_logo.png")
}
// LANDING ELEMENTS
diff --git a/style/main.min.css b/style/main.min.css
index f6fc7cb..556ef8f 100644
--- a/style/main.min.css
+++ b/style/main.min.css
@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins&family=Space+Mono:wght@700&display=swap";.section__image{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0;transition:all .4s ease-in-out}.section--team .section__title,.section--team .section__subtitle,.section--projects .section__title,.section--projects .section__subtitle,.section--about .section__title,.section--about .section__subtitle{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;transition:all .4s ease-in-out}.section__image.is-showing{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.section--team .section__title.is-showing,.section--team .section__subtitle.is-showing,.section--projects .section__title.is-showing,.section--projects .section__subtitle.is-showing,.section--about .section__title.is-showing,.section--about .section__subtitle.is-showing{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}*{margin:0;padding:0;box-sizing:border-box;cursor:default}nav{position:fixed;top:0;left:0;right:0;color:rgba(255,255,255,.5098039216);padding:.6rem 0;z-index:1000;background:rgba(0,0,0,0);transition:all .1s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}nav.alone{color:#181818;background:#fff;box-shadow:0 3px 20px rgba(0,0,0,.322)}nav svg{display:none}nav #nav-close{position:absolute;top:2rem;right:2rem;height:50px;width:50px;fill:rgba(255,255,255,.3607843137);display:none}nav.small{top:2rem;left:2rem;height:43px;width:43px;padding:0;border-radius:5px}nav.small ul{display:none}nav.small .logo{display:none}nav.small #nav-open{display:inline-block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}nav.small #nav-open rect{fill:#f7941d;height:2px;rx:.5px;width:100%}nav.small #nav-open .rect-1{-webkit-transform:translateY(2px);transform:translateY(2px)}nav.small #nav-open .rect-2{-webkit-transform:translateY(9px);transform:translateY(9px);width:80%}nav.small #nav-open .rect-3{-webkit-transform:translateY(16px);transform:translateY(16px)}.logo{height:6rem}.logo img{height:100%}.logo.logo-1{padding:10px}nav ul{display:-ms-flexbox;display:flex;list-style:none;-ms-flex-pack:distribute;justify-content:space-around;max-width:450px;margin:auto 0;transition:.5s ease-in}nav li{position:relative;margin:0 20px}nav li a{position:relative}nav li a::after{content:"";position:absolute;bottom:3px;width:100%;height:0;left:0;background:rgba(247,149,29,.6196078431);transition:height .1s ease-in;z-index:-1}nav li a:hover::after{height:8px;left:0}@media(max-width: 1150px){nav{padding:.5rem 1rem;font-size:15px}nav li{margin:0 10px}}@media(max-width: 700px){nav{width:100%;height:100%;background:#181818;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:center;justify-content:center;padding:0 2rem}nav ul{-ms-flex-direction:column;flex-direction:column;font-size:2rem;margin:0}nav.alone{background:#181818;color:rgba(255,255,255,.5098039216);box-shadow:0 0 10px rgba(0,0,0,.5333333333)}nav li::after{display:inline-block}.logo{height:10rem}.logo img{height:100%}.logo.logo-1{display:none}}.section--intro{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-align:center;width:100%;height:100vh;position:relative;z-index:1;overflow:hidden;background:linear-gradient(rgba(0, 0, 0, 0.6862745098), rgba(0, 0, 0, 0.7568627451)),url(../images/bg.jpg);background-size:cover;background-position:center;color:#f7941d}.section--intro h1{font-size:7rem;text-transform:uppercase;line-height:.9;font-family:"Space Mono",sans-serif;font-weight:700;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.section--intro h1 #typing-2{margin-top:30px;font-size:3rem}@-webkit-keyframes blink{0%{opacity:1}40%{opacity:1}60%{opacity:0}100%{opacity:0}}@keyframes blink{0%{opacity:1}40%{opacity:1}60%{opacity:0}100%{opacity:0}}#typing::after{content:"";display:inline-block;width:10px;height:5rem;background-color:#f7941d;margin-left:8px;-webkit-animation:blink .6s linear infinite alternate;animation:blink .6s linear infinite alternate}@media(max-width: 580px){.section--intro h1{font-size:5rem;line-height:.9}.section--intro h1 #typing-2{font-size:2rem}.section--intro h1 #typing::after{height:3.5rem}}.section--about{margin-top:8rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}.section--about .section__image{-ms-flex:1;flex:1;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0}.section--about .section__image img{width:80%}.section__content{-ms-flex:1;flex:1;padding:0 6rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start}.section__content p{margin-top:10px}@media(max-width: 680px){.section--about{-ms-flex-direction:column;flex-direction:column;width:95%;margin:auto}.section--about .section__image{height:500px;width:100%;margin:0}.section--about .section__content{-ms-flex:2;flex:2;padding:3rem 2rem;position:relative}.section--about .section__content p{color:#272727}}.section--projects{text-align:center;padding:6rem 1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.section--projects .section__about{max-width:37rem;margin:auto}.carousel{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;max-width:100%;margin:3rem auto;overflow-x:hidden;position:relative}.carousel button{all:unset;background:rgba(0,0,0,0);cursor:pointer}.carousel button:active{background:#fff}.carousel button svg path{stroke:#a3b9bf}.carousel button:hover path{stroke:#414a4d}.carousel-items{position:relative;margin-top:2rem;width:100vw;overflow-x:hidden}.carousel-item .carousel__image{width:100%;height:200px;overflow:hidden}.carousel-item .carousel__image img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.carousel-item .carousel__caption{position:relative;z-index:10;background:#eee;font-family:"Circular Std","Montserrat",sans-serif;line-height:1.5;font-weight:700;padding:1rem;text-align:left}.carousel__title{color:#222;font-size:1.5rem}.carousel__subtitle{font-size:1rem}.carousel__subtitle a{transition:.2s ease-in-out}.carousel__subtitle a:hover{color:#f7941d}#autoplay-btn{display:none}#controls-container{font-size:2rem;color:#222;display:-ms-flexbox;display:flex}#controls-container button{all:unset;margin:0 10px;background:#f7941d;height:45px;width:45px;border-radius:50%;transition:background .1s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}#controls-container button:hover{background:#e48209}.tns-nav{text-align:center;margin:10px 0}.tns-nav>[aria-controls]{display:inline-block !important;width:9px;height:9px;padding:0;margin:0 5px;border-radius:50%;background:#ddd;border:0}.tns-nav>.tns-nav-active{background:#999}@media(max-width: 760px){.section--projects{margin:0 1.2rem;overflow-x:hidden}.carousel-item{width:20rem;width:90%}.carousel-item .carousel__image img{height:13rem}.carousel-item .carousel__caption{padding:1rem 1.5rem;text-align:center}.carousel__title{font-size:1rem}.carousel__subtitle{font-size:.7rem}}.section--team{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:5rem 0}.team-switches{margin:1rem 0 3rem 0;font-family:"Poppins",sans-serif;color:#444}.team-switches .team-switch{margin:0 20px;position:relative;letter-spacing:1px;cursor:pointer}.team-switches .team-switch::after{content:"";position:absolute;bottom:5px;left:0;height:8px;width:0;background:rgba(247,149,29,.6196078431);z-index:-1;transition:all .3s ease-in-out}.team-switches .active::after{width:100%}.team-grids{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.team-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:start;align-content:flex-start;row-gap:20px;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;width:80%}.team-grid.active{display:-ms-flexbox;display:flex}.member-card{height:20rem;width:14rem;overflow:hidden;box-shadow:0 10px 1rem rgba(0,0,0,.1333333333);border-radius:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-align:center;align-items:center}.member-card figcaption{font-family:"Poppins",sans-serif;padding:1rem;text-align:center;color:#111}.member-image{width:12rem;height:12rem;border-radius:50%;display:block;overflow:hidden}.member-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.member-name{font-size:18px;font-weight:bold;text-transform:uppercase}.member-desc{font-size:13px}.member-socials{margin-top:5px}.member-socials svg{height:20px;fill:#444;margin:0 5px;cursor:pointer;transition:.1s ease-in-out}.member-socials svg:hover{fill:rgba(247,149,29,.6196078431)}@media(max-width: 760px){.team-grid{width:95%;row-gap:10px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}.team-switches .team-switch{margin:0 7px}.member-card{-webkit-transform:scale(0.9);transform:scale(0.9)}}.section--blogs{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;background:#111a1d;padding:3rem 0;color:#eee}.section--blogs .section__title{color:#f7941d}.blogs{width:80%;margin:3rem 0;text-align:left;display:-ms-flexbox;display:flex;font-size:18px;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem}.blog{margin:0 1rem;-ms-flex-preferred-size:25%;flex-basis:25%}.blog-title{cursor:pointer}.blog-title:hover{text-decoration:underline}.blog-content{text-align:justify;padding:0 0 20px 0}.blog-date{color:#f7941d}.blog-abstract{font-size:.9rem}.blog-author{margin-top:5px;color:#f7941d}.blog-btn{background:#f7941d;padding:3px 8px;color:#000;transition:background .1s ease-in-out}.blog-btn:hover{background:#e48209}@media(max-width: 1000px){.blogs{width:95%}.blog{margin:0 .2rem;-ms-flex-preferred-size:50%;flex-basis:50%}}@media(max-width: 700px){.blogs{width:95%}.blog{margin:0 .2rem;-ms-flex-preferred-size:80%;flex-basis:80%}}.section--news{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:"Poppins",sans-serif;color:#fff;padding:5rem 0}.articles{margin:3rem 0 6rem 0;width:85%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.0666666667)}.article{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;height:360px;overflow:hidden;position:relative;overflow:hidden;text-align:left}.article-image{position:relative;-webkit-filter:brightness(70%);filter:brightness(70%);transition:all .3s ease-in-out;height:100%}.article-content{position:absolute;bottom:20px;right:20px;left:20px;transition:all .3s ease-in-out}.article-content .article-title{font-size:2.2rem}.article-content .article-abstract{font-size:1rem}.article-btn{position:absolute;bottom:-50px;right:13px;font-size:1rem;background:#f7941d;padding:3px 8px;transition:all .3s ease-in-out}.article-btn:hover{background:#e48209}.article:hover .article-image{-webkit-filter:brightness(30%);filter:brightness(30%);-webkit-transform:scale(1.1);transform:scale(1.1)}.article:hover .article-content{bottom:50px}.article:hover .article-btn{bottom:13px}@media(max-width: 1200px){.article{-ms-flex-preferred-size:50%;flex-basis:50%;height:260px;-ms-flex-positive:1;flex-grow:1}}@media(max-width: 700px){.articles{margin:auto;width:95%}.article{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1}.article-image{-webkit-filter:brightness(40%);filter:brightness(40%);-webkit-transform:scale(1.1);transform:scale(1.1)}.article-content{bottom:50px}.article-btn{bottom:13px}}footer{text-align:center;padding:30px 0;color:#d1c9c1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;background:#111a1d;-ms-flex-align:center;align-items:center}footer h2.section__title{color:#f7941d}footer p{justify-self:end;font-size:.9rem;margin:0 1rem}.social-icons{cursor:pointer;margin:0 0 3rem 0}.social-icons a{margin:0 10px}.social-icons svg{width:30px;height:30px;fill:#a49b92;transition:fill .1s ease-in-out;cursor:pointer}.social-icons a:hover svg{fill:#f7941d}html{scroll-behavior:smooth}body{font-family:"Poppins","Roboto Slab",serif;font-size:1.3125rem;color:#89807a;font-weight:400;overflow-x:hidden}::selection{background:#f7941d;color:#fff}.text{font-size:2rem;color:#fff}a{color:inherit;text-decoration:none;cursor:pointer}.section__title{font-family:"Circular Std","Montserrat",sans-serif;line-height:1;font-size:3rem;color:#414a4d;text-transform:uppercase;position:relative;margin-bottom:30px;text-align:center;font-weight:700}.section__title::after{content:"";position:absolute;bottom:-10px;left:0;right:0;height:10px;background:rgba(247,149,29,.6196078431);z-index:-1}@media(max-width: 600px){.section__title{font-size:2rem}}
\ No newline at end of file
+@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins&family=Space+Mono:wght@700&display=swap";.section__image{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0;transition:all .4s ease-in-out}.section--team .section__title,.section--team .section__subtitle,.section--projects .section__title,.section--projects .section__subtitle,.section--about .section__title,.section--about .section__subtitle{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;transition:all .4s ease-in-out}.section__image.is-showing{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.section--team .section__title.is-showing,.section--team .section__subtitle.is-showing,.section--projects .section__title.is-showing,.section--projects .section__subtitle.is-showing,.section--about .section__title.is-showing,.section--about .section__subtitle.is-showing{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}*{margin:0;padding:0;box-sizing:border-box;cursor:default}html{scroll-behavior:smooth;--section-title: #414a4d;--text-color: #89807A;--about-text: #272727}html[data-theme=dark]{--d2: #0f091f;background-color:#080618;opacity:1;background-image:linear-gradient(var(--d2) 3.2px, transparent 3.2px),linear-gradient(90deg, var(--d2) 3.2px, transparent 3.2px),linear-gradient(var(--d2) 1.6px, transparent 1.6px),linear-gradient(90deg, var(--d2) 1.6px, #080618 1.6px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-3.2px -3.2px,-3.2px -3.2px,-1.6px -1.6px,-1.6px -1.6px;--section-title: #fff;--text-color: #ccc;--about-text: #eee}html{--nav-text:#ffffff82;--nav-text-alone:#181818;--nav-back-alone:#fff;--nav-logo-fill: #0066ff}html[data-theme=dark]{--nav-text:#ffffff82;--nav-text-alone:#eee;--nav-back-alone:#0f091f;--nav-logo-fill:#fff}nav{position:fixed;top:0;left:0;right:0;color:rgba(255,255,255,.5098039216);padding:.6rem 0;z-index:1000;background:rgba(0,0,0,0);transition:all .1s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}nav.alone{color:var(--nav-text-alone);background:var(--nav-back-alone);box-shadow:0 3px 20px rgba(0,0,0,.322)}nav svg{display:none}nav #nav-close{position:absolute;top:2rem;right:2rem;height:50px;width:50px;fill:rgba(255,255,255,.3607843137);display:none}nav.small{top:2rem;left:2rem;height:43px;width:43px;padding:0;border-radius:5px}nav.small ul{display:none}nav.small .logo{display:none}nav.small #nav-open{display:inline-block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}nav.small #nav-open rect{fill:#f7941d;height:2px;rx:.5px;width:100%}nav.small #nav-open .rect-1{-webkit-transform:translateY(2px);transform:translateY(2px)}nav.small #nav-open .rect-2{-webkit-transform:translateY(9px);transform:translateY(9px);width:80%}nav.small #nav-open .rect-3{-webkit-transform:translateY(16px);transform:translateY(16px)}.logo{height:6rem}.logo img{height:100%}.logo.logo-1{fill:#eee;padding:10px}nav ul{display:-ms-flexbox;display:flex;list-style:none;-ms-flex-pack:distribute;justify-content:space-around;margin:auto 0;transition:.5s ease-in}nav li{position:relative;margin:0 20px}nav li a{position:relative}nav li a::after{content:"";position:absolute;bottom:3px;width:100%;height:0;left:0;background:#fabd73;transition:height .1s ease-in;z-index:-1}nav li a:hover::after{height:8px;left:0}@media(max-width: 1150px){nav{padding:.5rem 1rem;font-size:15px}nav li{margin:0 10px}}@media(max-width: 700px){nav{width:100%;height:100%;background:#181818;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:center;justify-content:center;padding:0 2rem}nav ul{-ms-flex-direction:column;flex-direction:column;font-size:2rem;margin:0}nav.alone{background:#181818;color:rgba(255,255,255,.5098039216);box-shadow:0 0 10px rgba(0,0,0,.5333333333)}nav li::after{display:inline-block}.logo{height:10rem}.logo img{height:100%}.logo.logo-1{display:none}}.section--intro{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-align:center;width:100%;height:100vh;position:relative;z-index:1;overflow:hidden;background:linear-gradient(rgba(0, 0, 0, 0.6862745098), rgba(0, 0, 0, 0.7568627451)),url(../images/bg.jpg);background-size:cover;background-position:center;color:#f7941d}.section--intro h1{font-size:7rem;text-transform:uppercase;line-height:.9;font-family:"Space Mono",sans-serif;font-weight:700;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.section--intro h1 #typing-2{margin-top:30px;font-size:3rem}@-webkit-keyframes blink{0%{opacity:1}40%{opacity:1}60%{opacity:0}100%{opacity:0}}@keyframes blink{0%{opacity:1}40%{opacity:1}60%{opacity:0}100%{opacity:0}}#typing::after{content:"";display:inline-block;width:10px;height:5rem;background-color:#f7941d;margin-left:8px;-webkit-animation:blink .6s linear infinite alternate;animation:blink .6s linear infinite alternate}@media(max-width: 580px){.section--intro h1{font-size:5rem;line-height:.9}.section--intro h1 #typing-2{font-size:2rem}.section--intro h1 #typing::after{height:3.5rem}}.section--about{margin-top:8rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}.section--about .section__image{-ms-flex:1;flex:1;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0}.section--about .section__image img{width:80%}.section__content{-ms-flex:1;flex:1;padding:0 6rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start}.section__content p{margin-top:10px}@media(max-width: 680px){.section--about{-ms-flex-direction:column;flex-direction:column;width:95%;margin:auto}.section--about .section__image{height:500px;width:100%;margin:0}.section--about .section__content{-ms-flex:2;flex:2;padding:3rem 2rem;position:relative}.section--about .section__content p{color:var(--about-text)}}html{--carousel-back: #eee;--carousel-text: #222}html[data-theme=dark]{--carousel-back: #1c182e;--carousel-text: #eee}.section--projects{text-align:center;padding:6rem 1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.section--projects .section__about{max-width:37rem;margin:auto}.carousel{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;max-width:100%;margin:3rem auto;overflow-x:hidden;position:relative}.carousel button{all:unset;background:rgba(0,0,0,0);cursor:pointer}.carousel button:active{background:#fff}.carousel button svg path{stroke:#a3b9bf}.carousel button:hover path{stroke:#414a4d}.carousel-items{position:relative;margin-top:2rem;width:100vw;overflow-x:hidden}.carousel-item .carousel__image{width:100%;height:200px;overflow:hidden}.carousel-item .carousel__image img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.carousel-item .carousel__caption{position:relative;z-index:10;background:var(--carousel-back);font-family:"Circular Std","Montserrat",sans-serif;line-height:1.5;font-weight:700;padding:1rem;text-align:left}.carousel__title{color:var(--carousel-text);font-size:1.5rem}.carousel__subtitle{font-size:1rem}.carousel__subtitle a{transition:.2s ease-in-out}.carousel__subtitle a:hover{color:#f7941d}#autoplay-btn{display:none}#controls-container{font-size:2rem;color:var(--carousel-text);display:-ms-flexbox;display:flex}#controls-container button{all:unset;margin:0 10px;background:#f7941d;height:45px;width:45px;border-radius:50%;transition:background .1s ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}#controls-container button:hover{background:#e48209}.tns-nav{text-align:center;margin:10px 0}.tns-nav>[aria-controls]{display:inline-block !important;width:9px;height:9px;padding:0;margin:0 5px;border-radius:50%;background:#ddd;border:0}.tns-nav>.tns-nav-active{background:#999}@media(max-width: 760px){.section--projects{margin:0 1.2rem;overflow-x:hidden}.carousel-item{width:20rem;width:90%}.carousel-item .carousel__image img{height:13rem}.carousel-item .carousel__caption{padding:1rem 1.5rem;text-align:center}.carousel__title{font-size:1rem}.carousel__subtitle{font-size:.7rem}}html{--team-switch: #444;--team-member: #111;--team-member-back: #fff0;--team-socials: #444}html[data-theme=dark]{--team-switch: #eee;--team-member: #eee;--team-member-back: #141123;--team-socials: #aaa}.section--team{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:5rem 0}.team-switches{margin:1rem 0 3rem 0;font-family:"Poppins",sans-serif;color:var(--team-switch)}.team-switches .team-switch{margin:0 20px;position:relative;letter-spacing:1px;cursor:pointer}.team-switches .team-switch::after{content:"";position:absolute;bottom:5px;left:0;height:5px;width:0;background:#fabd73;z-index:-1;transition:all .3s ease-in-out}.team-switches .active::after{width:100%}.team-grids{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.team-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:start;align-content:flex-start;row-gap:20px;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;width:80%}.team-grid.active{display:-ms-flexbox;display:flex}.member-card{width:14rem;overflow:hidden;box-shadow:0 10px 1rem rgba(0,0,0,.1333333333);border-radius:10px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-align:center;align-items:center;background-color:var(--team-member-back);padding-top:10px}.member-card figcaption{font-family:"Poppins",sans-serif;padding:.7rem;text-align:center;color:var(--team-member)}.member-image{width:12rem;height:12rem;border-radius:50%;display:block;overflow:hidden}.member-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.member-name{font-size:18px;font-weight:bold;text-transform:uppercase}.member-desc{font-size:12px}.member-socials{margin-top:5px}.member-socials svg{height:20px;fill:var(--team-socials);margin:0 5px;cursor:pointer;transition:.1s ease-in-out}.member-socials svg:hover{fill:#fabd73}@media(max-width: 760px){.team-grid{width:95%;row-gap:10px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}.team-switches .team-switch{margin:0 7px}.member-card{-webkit-transform:scale(0.9);transform:scale(0.9)}}html{--dark-back: #111a1d;--dark-back-text-title: rgb(247, 148, 29);--dark-back-text: #eee;--dark-btn-hover: #e48209}html[data-theme=dark]{--dark-back-text: #c5d3d8;--dark-back: #F7941D;--dark-back-text-title: #ffffff;--dark-btn-hover: #000}.section--blogs{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;background:var(--dark-back);padding:3rem 0;color:var(--dark-back-text)}.section--blogs .section__title{color:var(--dark-back-text-title)}html[data-theme=dark] .section--blogs,html[data-theme=dark] footer{--s: 48px;--c1: #080618;--c2: #0f0c28;--c:var(--c1) 0 25%,#0000 0;--p:0 0/calc(3*var(--s)) calc(2*var(--s));background:conic-gradient(from -45deg at 75% 62.5%, var(--c)) var(--p),conic-gradient(from 135deg at 25% 37.5%, var(--c)) var(--p),repeating-conic-gradient(from 90deg, var(--c), var(--c2) 0 50%) 0 0/var(--s) var(--s)}html[data-theme=dark] footer{--c1: #f7941d;--c2: #ee8c15}.blogs{width:80%;margin:3rem 0;text-align:left;display:-ms-flexbox;display:flex;font-size:18px;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem}.blog{margin:0 1rem;-ms-flex-preferred-size:25%;flex-basis:25%}.blog-title{cursor:pointer}.blog-title:hover{text-decoration:underline}.blog-content{text-align:justify;padding:0 0 20px 0}.blog-date{color:var(--dark-back-text-title)}.blog-abstract{font-size:.9rem}.blog-author{margin-top:5px;color:var(--dark-back-text-title)}.blog-btn{background:var(--dark-back-text-title);padding:3px 8px;color:var(--dark-back);transition:background .1s ease-in-out}.blog-btn:hover{background:var(--dark-btn-hover)}@media(max-width: 1000px){.blogs{width:95%}.blog{margin:0 .2rem;-ms-flex-preferred-size:50%;flex-basis:50%}}@media(max-width: 700px){.blogs{width:95%}.blog{margin:0 .2rem;-ms-flex-preferred-size:80%;flex-basis:80%}}.section--news{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:"Poppins",sans-serif;color:#fff;padding:5rem 0}.articles{margin:3rem 0 6rem 0;width:85%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.0666666667)}.article{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;height:360px;overflow:hidden;position:relative;overflow:hidden;text-align:left}.article-image{position:relative;-webkit-filter:brightness(70%);filter:brightness(70%);transition:all .3s ease-in-out;height:100%}.article-content{position:absolute;bottom:20px;right:20px;left:20px;transition:all .3s ease-in-out}.article-content .article-title{font-size:2.2rem}.article-content .article-abstract{font-size:1rem}.article-btn{position:absolute;bottom:-50px;right:13px;font-size:1rem;background:#f7941d;padding:3px 8px;transition:all .3s ease-in-out}.article-btn:hover{background:#e48209}.article:hover .article-image{-webkit-filter:brightness(30%);filter:brightness(30%);-webkit-transform:scale(1.1);transform:scale(1.1)}.article:hover .article-content{bottom:50px}.article:hover .article-btn{bottom:13px}@media(max-width: 1200px){.article{-ms-flex-preferred-size:50%;flex-basis:50%;height:260px;-ms-flex-positive:1;flex-grow:1}}@media(max-width: 700px){.articles{margin:auto;width:95%}.article{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1}.article-image{-webkit-filter:brightness(40%);filter:brightness(40%);-webkit-transform:scale(1.1);transform:scale(1.1)}.article-content{bottom:50px}.article-btn{bottom:13px}}html{--footer-text: #D1C9C1;--footer-social: #a49b92}html[data-theme=dark]{--footer-text: #111a1d;--footer-social: #111a1d}footer{text-align:center;padding:30px 0;color:var(--footer-text);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;background:#111a1d;-ms-flex-align:center;align-items:center}footer h2.section__title{color:var(--footer-text)}footer p{justify-self:end;font-size:.9rem;margin:0 1rem}.social-icons{cursor:pointer;margin:0 0 3rem 0}.social-icons a{margin:0 10px}.social-icons svg{width:30px;height:30px;fill:var(--footer-social);transition:fill .1s ease-in-out;cursor:pointer}.social-icons a:hover svg{fill:var(--dark-btn-hover)}body{font-family:"Poppins","Roboto Slab",serif;font-size:1.3125rem;color:var(--text-color);font-weight:400;overflow-x:hidden}::selection{background:#f7941d;color:#fff}#theme-switch{position:fixed;bottom:20px;right:20px;font-size:3rem;z-index:999}.text{font-size:2rem;color:#fff}a{color:inherit;text-decoration:none;cursor:pointer}.section__title{font-family:"Circular Std","Montserrat",sans-serif;line-height:1;font-size:3rem;color:var(--section-title);text-transform:uppercase;position:relative;margin-bottom:30px;text-align:center;font-weight:700}.section__title::after{content:"";position:absolute;bottom:-10px;left:0;right:0;height:10px;background:#fabd73;z-index:-1}@media(max-width: 600px){.section__title{font-size:2rem}}
\ No newline at end of file
diff --git a/style/main.scss b/style/main.scss
index f2fddbc..2df8818 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -5,7 +5,10 @@ $bold : 'Circular Std',
sans-serif;
$yellow: #F7941D;
$yellow-dark: #e48209;
-$yellow-tr: #f7951d9e;
+// $yellow-tr: #f7951d9e;
+// $yellow-tr: #b46c13;
+$yellow-tr: #FABD73;
+$dark: #414a4d;
%is-not-showingX {
transform: translateX(20px);
@@ -36,6 +39,25 @@ $yellow-tr: #f7951d9e;
cursor: default;
}
+html {
+ scroll-behavior: smooth;
+ --section-title: #414a4d;
+ --text-color: #89807A;
+ --about-text: #272727;
+}
+
+html[data-theme='dark'] {
+ // background: #0a061a;
+ --d2: #0f091f;
+ background-color: #080618;
+ opacity: 1;
+ background-image: linear-gradient(var(--d2) 3.2px, transparent 3.2px), linear-gradient(90deg, var(--d2) 3.2px, transparent 3.2px), linear-gradient(var(--d2) 1.6px, transparent 1.6px), linear-gradient(90deg, var(--d2) 1.6px, #080618 1.6px);
+ background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
+ background-position: -3.2px -3.2px, -3.2px -3.2px, -1.6px -1.6px, -1.6px -1.6px;--section-title: #fff;
+ --text-color: #ccc;
+ --about-text: #eee;
+}
+
@import 'sections/nav';
@import 'sections/intro';
@import 'sections/about';
@@ -45,14 +67,10 @@ $yellow-tr: #f7951d9e;
@import 'sections/news';
@import 'sections/footer';
-html {
- scroll-behavior: smooth;
-}
-
body {
font-family: 'Poppins', "Roboto Slab", serif;
font-size: 1.3125rem;
- color: #89807A;
+ color: var(--text-color);
font-weight: 400;
overflow-x: hidden;
}
@@ -62,6 +80,14 @@ body {
color: #fff;
}
+#theme-switch {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ font-size: 3rem;
+ z-index: 999;
+}
+
.text {
font-size: 2rem;
color: #fff;
@@ -77,7 +103,7 @@ a {
font-family: $bold;
line-height: 1;
font-size: 3rem;
- color: #414A4D;
+ color: var(--section-title);
text-transform: uppercase;
position: relative;
margin-bottom: 30px;
diff --git a/style/sections/_about.scss b/style/sections/_about.scss
index ecc53b8..ce458a1 100644
--- a/style/sections/_about.scss
+++ b/style/sections/_about.scss
@@ -61,6 +61,6 @@
position: relative;
}
.section--about .section__content p {
- color: #272727
+ color: var(--about-text)
}
}
\ No newline at end of file
diff --git a/style/sections/_blogs.scss b/style/sections/_blogs.scss
index 2d182bc..9cd9c20 100644
--- a/style/sections/_blogs.scss
+++ b/style/sections/_blogs.scss
@@ -1,17 +1,56 @@
+html {
+ --dark-back: #111a1d;
+ --dark-back-text-title: rgb(247, 148, 29);
+ --dark-back-text: #eee;
+ --dark-btn-hover: #e48209;
+ }
+
+html[data-theme='dark'] {
+ // --dark-back-text: #111a1d;
+ // --dark-back: #F7941D;
+ // --dark-back-text-title: #111a1d;
+ // --dark-btn-hover: #000;
+ --dark-back-text: #c5d3d8;
+ --dark-back: #F7941D;
+ --dark-back-text-title: #ffffff;
+ --dark-btn-hover: #000;
+ }
+
.section--blogs {
display: flex;
flex-direction: column;
align-items: center;
- background: #111a1d;
+ background: var(--dark-back);
padding: 3rem 0;
- color: #eee;
+ color: var(--dark-back-text);
.section__title {
- color: $yellow;
+ color: var(--dark-back-text-title);
}
}
+html[data-theme='dark'] .section--blogs, html[data-theme='dark'] footer {
+ --s: 48px; /* control the size*/
+ // --c1: #f7941d;
+ // --c2: #ee8c15;
+ --c1: #080618;
+ --c2: #0f0c28;
+
+ --c:var(--c1) 0 25%,#0000 0;
+ --p:0 0/calc(3*var(--s)) calc(2*var(--s));
+ background:
+ conic-gradient(from -45deg at 75% 62.5%,var(--c)) var(--p),
+ conic-gradient(from 135deg at 25% 37.5%,var(--c)) var(--p),
+ repeating-conic-gradient(from 90deg,var(--c),var(--c2) 0 50%)
+ 0 0/var(--s) var(--s);
+}
+
+html[data-theme='dark'] footer {
+ --c1: #f7941d;
+ --c2: #ee8c15;
+}
+
.blogs {
width: 80%;
margin: 3rem 0;
@@ -42,7 +81,7 @@
}
.blog-date {
- color: $yellow;
+ color: var(--dark-back-text-title);
}
.blog-abstract {
@@ -51,16 +90,16 @@
.blog-author {
margin-top: 5px;
- color: $yellow;
+ color: var(--dark-back-text-title);
}
.blog-btn {
- background: $yellow;
+ background: var(--dark-back-text-title);
padding: 3px 8px;
- color: #000;
+ color: var(--dark-back);
transition: background .1s ease-in-out;
&:hover {
- background: $yellow-dark;
+ background: var(--dark-btn-hover);
}
}
diff --git a/style/sections/_footer.scss b/style/sections/_footer.scss
index 95963f2..3509b5c 100644
--- a/style/sections/_footer.scss
+++ b/style/sections/_footer.scss
@@ -1,7 +1,19 @@
+html {
+ --footer-text: #D1C9C1;
+ // --footer-back: #111a1d;
+ --footer-social: #a49b92;
+}
+
+html[data-theme='dark'] {
+ --footer-text: #111a1d;
+ // --footer-back: #222;
+ --footer-social: #111a1d;
+}
+
footer {
text-align: center;
padding: 30px 0;
- color: #D1C9C1;
+ color: var(--footer-text);
display: flex;
flex-direction: column;
justify-content: center;
@@ -9,7 +21,7 @@ footer {
align-items: center ;
h2.section__title {
- color: $yellow;
+ color: var(--footer-text);
}
p {
justify-self: end;
@@ -27,12 +39,12 @@ footer {
svg {
width: 30px;
height: 30px;
- fill: #a49b92;
+ fill: var(--footer-social);
transition: fill .1s ease-in-out;
cursor: pointer;
}
a:hover svg{
- fill: $yellow;
+ fill: var(--dark-btn-hover);
}
}
diff --git a/style/sections/_nav.scss b/style/sections/_nav.scss
index 163b849..f8558f9 100644
--- a/style/sections/_nav.scss
+++ b/style/sections/_nav.scss
@@ -1,3 +1,17 @@
+html {
+ --nav-text:#ffffff82;
+ --nav-text-alone:#181818;
+ --nav-back-alone:#fff;
+ --nav-logo-fill: #0066ff;
+}
+
+html[data-theme='dark'] {
+ --nav-text:#ffffff82;
+ --nav-text-alone:#eee;
+ --nav-back-alone:#0f091f;
+ --nav-logo-fill:#fff;
+}
+
nav {
position: fixed;
top: 0;
@@ -11,8 +25,8 @@ nav {
display: flex;
justify-content: space-evenly;
&.alone {
- color: #181818;
- background: #fff;
+ color: var(--nav-text-alone);
+ background:var(--nav-back-alone);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.322);
}
svg {
@@ -80,6 +94,7 @@ nav {
height: 100%;
}
&.logo-1 {
+ fill: #eee;
padding: 10px;
}
}
@@ -88,7 +103,7 @@ nav ul {
display: flex;
list-style: none;
justify-content: space-around;
- max-width: 450px;
+ // max-width: 450px;
margin: auto 0;
transition: .5s ease-in
}
diff --git a/style/sections/_projects.scss b/style/sections/_projects.scss
index 9c29721..99beeb4 100644
--- a/style/sections/_projects.scss
+++ b/style/sections/_projects.scss
@@ -1,3 +1,13 @@
+html {
+ --carousel-back: #eee;
+ --carousel-text: #222;
+}
+
+html[data-theme='dark'] {
+ --carousel-back: #1c182e;
+ --carousel-text: #eee;
+}
+
.section--projects {
text-align: center;
padding: 6rem 1rem;
@@ -74,7 +84,7 @@
.carousel__caption {
position: relative;
z-index: 10;
- background: #eee;
+ background: var(--carousel-back);
font-family: $bold;
line-height: 1.5;
font-weight: 700;
@@ -85,7 +95,7 @@
.carousel__title {
- color: #222;
+ color: var(--carousel-text);
font-size: 1.5rem;
}
@@ -107,7 +117,7 @@
#controls-container {
font-size: 2rem;
- color: #222;
+ color: var(--carousel-text);
display: flex;
button {
all: unset;
diff --git a/style/sections/_team.scss b/style/sections/_team.scss
index 285b1bc..2f1ca65 100644
--- a/style/sections/_team.scss
+++ b/style/sections/_team.scss
@@ -1,3 +1,17 @@
+html {
+ --team-switch: #444;
+ --team-member: #111;
+ --team-member-back: #fff0;
+ --team-socials: #444;
+}
+
+html[data-theme='dark'] {
+ --team-switch: #eee;
+ --team-member: #eee;
+ --team-member-back: #141123;
+ --team-socials: #aaa;
+ }
+
.section--team {
text-align: center;
display: flex;
@@ -16,7 +30,7 @@
.team-switches {
margin: 1rem 0 3rem 0;
font-family: 'Poppins', sans-serif;
- color: #444;
+ color: var(--team-switch);
.team-switch {
margin: 0 20px;
@@ -30,7 +44,7 @@
position: absolute;
bottom: 5px;
left: 0;
- height: 8px;
+ height: 5px;
width: 0;
background: $yellow-tr;
z-index: -1;
@@ -62,21 +76,23 @@
}
.member-card {
- height: 20rem;
+ // height: 22rem;
width: 14rem;
overflow: hidden;
box-shadow: 0 10px 1rem #0002;
- border-radius: 20px;
+ border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
+ background-color: var(--team-member-back);
+ padding-top: 10px;
figcaption {
font-family: 'Poppins', sans-serif;
- padding: 1rem;
+ padding: .7rem;
text-align: center;
- color: #111;
+ color: var(--team-member);
}
}
@@ -100,14 +116,14 @@
}
.member-desc {
- font-size: 13px;
+ font-size: 12px;
}
.member-socials {
margin-top: 5px;
svg {
height: 20px;
- fill: #444;
+ fill: var(--team-socials);
margin: 0 5px;
cursor: pointer;
transition: .1s ease-in-out;