From 5fc8f46a90fd7b3367786d50e5caf75f61ef3b79 Mon Sep 17 00:00:00 2001 From: siddhanth339 Date: Sat, 1 May 2021 23:25:28 +0530 Subject: [PATCH 1/3] darkTheme --- css/darkTheme.css | 493 +++++++++++++++++++++++++++++ css/{custom.css => lightTheme.css} | 112 +++++-- index.html | 40 ++- 3 files changed, 613 insertions(+), 32 deletions(-) create mode 100644 css/darkTheme.css rename css/{custom.css => lightTheme.css} (84%) diff --git a/css/darkTheme.css b/css/darkTheme.css new file mode 100644 index 0000000..6dd55c3 --- /dev/null +++ b/css/darkTheme.css @@ -0,0 +1,493 @@ +/* TYPOGRAPHY --------------------------------------------------------------- */ + + +/* latin-ext */ + +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + /* normal */ + src: local('Nunito Regular'), local('Nunito-Regular'), url('Nunito-Regular-latin-ext.woff2') format('woff2'), url('Nunito-Regular.ttf') format('truetype'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + + +/* latin */ + +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + /* normal */ + src: local('Nunito Regular'), local('Nunito-Regular'), url('Nunito-Regular.woff2') format('woff2'), url('Nunito-Regular.ttf') format('truetype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + + +/* latin-ext */ + +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + /* bold */ + src: local('Nunito Bold'), local('Nunito-Bold'), url('Nunito-Bold-latin-ext.woff2') format('woff2'), url('Nunito-Bold.ttf') format('truetype'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + + +/* latin */ + +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + /* bold */ + src: local('Nunito Bold'), local('Nunito-Bold'), url('Nunito-Bold.woff2') format('woff2'), url('Nunito-Bold.ttf') format('truetype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + font-weight: normal; + line-height: 170%; + background-color: #212529; + color: #fff; +} + +.navbar-brand, +h1, +h2, +h3 { + font-weight: bold; +} + + +/* COLOR -------------------------------------------------------------------- */ + +.navbar, +.jumbotron, +footer { + background-color: #202124 !important; + color: #fff; + border-radius: 0; + /* better readability on bright background */ + text-shadow: 0 0 2px rgba(10, 30, 20, .4); +} + + +/* BUTTONS ------------------------------------------------------------------ */ + +.btn { + border-radius: 100px; +} + +.btn img { + width: 1rem; + height: 1rem; + vertical-align: sub; +} + +.jumbotron .btn { + background: transparent; + color: #fff; + border: 2px solid #fff; + font-weight: bold; +} + +.jumbotron .btn:hover, +.jumbotron .btn:focus, +.jumbotron .btn:active { + background: #fff; + color: #212529; +} + +.jumbotron .btn:hover img, +.jumbotron .btn:focus img, +.jumbotron .btn:active img { + filter: invert(80%); +} + + +/* LINKS -------------------------------------------------------------------- */ + +a { + text-decoration: none !important; + outline: none !important; + color: #fff; + transition: transform .2s; + /* Animation */ +} + +a:hover { + color: #fff; + box-shadow: 0 0 0.25em 0.25em rgba(134, 128, 128, 0.25); + transform: scale(1.05); +} + +footer a { + color: #fff !important; + font-weight: bold; +} + +footer a:hover, +footer a:focus, +footer a:active { + opacity: .8; +} + + +/* HOVER/FOCUS EFFECT ------------------------------------------------------- */ + +section:not(.no-highlight-effect) div > a:hover::after, +section:not(.no-highlight-effect) div > a:focus::after, +section:not(.no-highlight-effect) div > a:active::after { + content: url('../img/highlight-white.svg'); + position: absolute; + top: -3px; + left: calc(50% - 128px); +} + +.nav-item, +.navbar-brand, +.navbar-toggler { + position: relative; +} + +.nav-link:hover::before, +.navbar-toggler:hover::before { + content: url('../img/highlight-white-small-left.svg'); + position: absolute; + top: 2px; + left: -10px; +} + +.nav-link:hover::after, +.navbar-toggler:hover::after { + content: url('../img/highlight-white-small-right.svg'); + position: absolute; + top: 2px; + right: -8px; +} + + +/* Special case for the logo */ + +.navbar-brand:focus::before, +.navbar-brand:hover::before, +.navbar-brand:active::before { + left: -25px; +} + +.navbar-brand:focus::after, +.navbar-brand:hover::after, +.navbar-brand:active::after { + right: -20px; +} + + +/* Special case for the mobile nav entries */ + +.navbar-collapse.show .mr-auto .nav-link:focus::before, +.navbar-collapse.show .mr-auto .nav-link:hover::before, +.navbar-collapse.show .mr-auto .nav-link:active::before { + left: -20px; +} + +.navbar-collapse.show .mr-auto .nav-link:focus::after, +.navbar-collapse.show .mr-auto .nav-link:hover::after, +.navbar-collapse.show .mr-auto .nav-link:active::after { + left: 65px; +} + + +/* HEADER ------------------------------------------------------------------- */ + +.navbar-brand { + display: flex; + align-items: center; +} + +.navbar-brand img { + margin-right: 5px; + align-self: start; + height: 1.2em; +} + + +/* Icons for Twitter, GitHub, IRC */ + +.nav-link img { + width: 1rem; + height: 1rem; + opacity: .6; +} + +.nav-link:hover img, +.nav-link:focus img { + opacity: 1; +} + + +/* Toggle icon on mobile */ + +.navbar-dark .navbar-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); +} + +.navbar-toggler { + border: none; + outline: none !important; +} + + +/* CONTENT ------------------------------------------------------------------ */ + +section { + padding-top: 32px; +} + +h2 { + display: inline-block; + background-color: #fff; + color: #202124 !important; + text-align: center; + padding: 16px; + margin-top: 32px; +} + +hr { + border: 2px solid #fff !important; + border-radius: 3px; + margin-bottom: -4.4rem; + margin-top: 5rem; +} + +[class^='col-md-'], +[class*=' col-md-'] { + margin-top: 20px; + margin-bottom: 20px; +} + +h3 { + margin-top: 1rem; + line-height: 130%; +} + +.text-center .col-md-4 p, +.text-center .col-md-4 li { + text-align: left; +} + +.container .row img { + width: 100px; + max-height: 100px; + border-radius: 50%; + margin-top: 20px; +} + + +/* LOGO --------------------------------------------------------------------- */ + +.jumbotron .container>img { + margin: 60px 0 10px 0; +} + + +/* FOOTER ------------------------------------------------------------------- */ + +footer { + margin-top: 4rem; + padding: 2rem 0; +} + + +/* EXPERIMENTS -------------------------------------------------------------- */ + +[class^='color-'], +[class*='color-'] { + border: none; +} + +.color-heartofcode, +.color-heartofcode:hover, +.color-heartofcode:focus, +.color-heartofcode:active { + background-color: #c32025; +} + +.color-lereset, +.color-lereset:hover, +.color-lereset:focus, +.color-lereset:active { + background-color: #feed64; + color: #444444; +} + +.color-doubleunion, +.color-doubleunion:hover, +.color-doubleunion:focus, +.color-doubleunion:active { + background-color: #d12aa4; +} + +.color-railsgirls, +.color-railsgirls:hover, +.color-railsgirls:focus, +.color-railsgirls:active { + background-color: #d82222; +} + +.color-outreachy, +.color-outreachy:hover, +.color-outreachy:focus, +.color-outreachy:active { + background-color: #58cfe5; +} + + +/* ---------------------------Animated Hamburger Menu--------------------- */ + +.animated-icon { + width: 30px; + height: 20px; + position: relative; + margin: 0px; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .5s ease-in-out; + -moz-transition: .5s ease-in-out; + -o-transition: .5s ease-in-out; + transition: .5s ease-in-out; + cursor: pointer; +} + +.animated-icon span { + display: block; + position: absolute; + height: 3px; + width: 100%; + border-radius: 9px; + opacity: 1; + left: 0; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .25s ease-in-out; + -moz-transition: .25s ease-in-out; + -o-transition: .25s ease-in-out; + transition: .25s ease-in-out; +} + +.animated-icon span { + background: #e3f2fd; +} + +.animated-icon span:nth-child(1) { + top: 0px; +} + +.animated-icon span:nth-child(2), +.animated-icon span:nth-child(3) { + top: 10px; +} + +.animated-icon span:nth-child(4) { + top: 20px; +} + +.animated-icon.open span:nth-child(1) { + top: 11px; + width: 0%; + left: 50%; +} + +.animated-icon.open span:nth-child(2) { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} + +.animated-icon.open span:nth-child(3) { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.animated-icon.open span:nth-child(4) { + top: 11px; + width: 0%; + left: 50%; +} + + +/*Simple css to style it like a toggle switch*/ + +.theme-switch-wrapper { + display: flex; + align-items: center; +} + +em { + margin-left: 10px; + font-size: 1rem; +} + +.theme-switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + +.theme-switch input { + display: none; +} + +.slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.slider:before { + background-color: #fff; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: .4s; + width: 26px; +} + +input:checked+.slider { + background-color: blue; +} + +input:checked+.slider:before { + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/css/custom.css b/css/lightTheme.css similarity index 84% rename from css/custom.css rename to css/lightTheme.css index c9ad876..b3cc3d0 100644 --- a/css/custom.css +++ b/css/lightTheme.css @@ -116,8 +116,17 @@ footer { /* LINKS -------------------------------------------------------------------- */ a { - text-decoration: none !important; - outline: none !important; + text-decoration: none !important; + outline: none !important; + color: #fff; + transition: transform .2s; + /* Animation */ +} + +a:hover { + color: #45b086; + box-shadow: 0 0 0.25em 0.25em rgba(134, 128, 128, 0.25); + transform: scale(1.05); } .navbar-dark .navbar-nav .nav-link, @@ -160,13 +169,13 @@ footer a:active { /* HOVER/FOCUS EFFECT ------------------------------------------------------- */ -section:not(.no-highlight-effect) a:hover::after, -section:not(.no-highlight-effect) a:focus::after, -section:not(.no-highlight-effect) a:active::after { +section:not(.no-highlight-effect) div > a:hover::after, +section:not(.no-highlight-effect) div > a:focus::after, +section:not(.no-highlight-effect) div > a:active::after { content: url('../img/highlight.svg'); position: absolute; - top: -3px; - left: calc(50% - 128px); + top: -3px; + left: calc(50% - 128px); } .nav-item, @@ -175,34 +184,23 @@ section:not(.no-highlight-effect) a:active::after { position: relative; } -.nav-link:focus::before, .nav-link:hover::before, -.nav-link:active::before, -.navbar-brand:focus::before, -.navbar-brand:hover::before, -.navbar-brand:active::before, -.navbar-toggler:focus::before, .navbar-toggler:hover::before { - content: url('../img/highlight-white-small-left.svg'); - position: absolute; - top: 2px; - left: -10px; + content: url('../img/highlight-white-small-left.svg'); + position: absolute; + top: 2px; + left: -10px; } -.nav-link:focus::after, .nav-link:hover::after, -.nav-link:active::after, -.navbar-brand:focus::after, -.navbar-brand:hover::after, -.navbar-brand:active::after, -.navbar-toggler:focus::after, .navbar-toggler:hover::after { - content: url('../img/highlight-white-small-right.svg'); - position: absolute; - top: 2px; - right: -8px; + content: url('../img/highlight-white-small-right.svg'); + position: absolute; + top: 2px; + right: -8px; } + /* Special case for the logo */ .navbar-brand:focus::before, .navbar-brand:hover::before, @@ -442,3 +440,63 @@ footer { width: 0%; left: 50%; } +/*Simple css to style it like a toggle switch*/ + +.theme-switch-wrapper { + display: flex; + align-items: center; +} + +em { + margin-left: 10px; + font-size: 1rem; +} + +.theme-switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + +.theme-switch input { + display: none; +} + +.slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.slider:before { + background-color: #fff; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: .4s; + width: 26px; +} + +input:checked+.slider { + background-color: blue; +} + +input:checked+.slider:before { + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/index.html b/index.html index 4fed906..c3b3755 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,10 @@ - + - + @@ -58,6 +58,12 @@
  • Consulting
    • +
    + +
    - - - @@ -474,6 +477,33 @@

    Programming Diversity

    }; return t; }(document, "script", "twitter-wjs")); + + function switchTheme(e) { + if (e.target.checked) { + document.getElementById("styles").setAttribute('href', 'css/darkTheme.css'); + localStorage.setItem('theme', 'dark'); + } + else { + document.getElementById("styles").setAttribute('href', 'css/lightTheme.css'); + localStorage.setItem('theme', 'light'); + } + } + + document.addEventListener('DOMContentLoaded', () => { + const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); + toggleSwitch.addEventListener('change', switchTheme, false); + const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; + + if (currentTheme === 'dark') { + document.getElementById("styles").setAttribute('href', 'css/darkTheme.css'); + toggleSwitch.checked = true; + } + else { + document.getElementById("styles").setAttribute('href', 'css/lightTheme.css'); + toggleSwitch.checked = false; + } + }) + From 76d06badec599c756124e1550cd4b354957aceec Mon Sep 17 00:00:00 2001 From: siddhanth339 Date: Sun, 2 May 2021 00:28:27 +0530 Subject: [PATCH 2/3] Added moon-icon to theme toggle button --- css/darkTheme.css | 6 +++++- css/lightTheme.css | 4 ++++ img/moon.png | Bin 0 -> 644 bytes index.html | 1 - 4 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 img/moon.png diff --git a/css/darkTheme.css b/css/darkTheme.css index 6dd55c3..cf67faf 100644 --- a/css/darkTheme.css +++ b/css/darkTheme.css @@ -434,6 +434,7 @@ footer { /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { + margin-left: 5px; display: flex; align-items: center; } @@ -474,10 +475,13 @@ em { position: absolute; transition: .4s; width: 26px; + background-image: url("../img/moon.png"); + background-position: center; + background-repeat: no-repeat; } input:checked+.slider { - background-color: blue; + background-color: #3b3b3b; } input:checked+.slider:before { diff --git a/css/lightTheme.css b/css/lightTheme.css index b3cc3d0..bdf1535 100644 --- a/css/lightTheme.css +++ b/css/lightTheme.css @@ -443,6 +443,7 @@ footer { /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { + margin-left: 5px; display: flex; align-items: center; } @@ -483,6 +484,9 @@ em { position: absolute; transition: .4s; width: 26px; + background-image: url("../img/moon.png"); + background-position: center; + background-repeat: no-repeat; } input:checked+.slider { diff --git a/img/moon.png b/img/moon.png new file mode 100644 index 0000000000000000000000000000000000000000..37f8ef38e4b7f0a0744e89d359aa6e4b989a4785 GIT binary patch literal 644 zcmV-~0(Kut1p9$UGZ^1Sc(x`sg`_{08S?I>zIbN^uN7k0W8K(JVJe1+n)p$O@+YaM7F-*MCb9f7V;RQ zx)4GO_TXlW@j-#Xeqlxkp}s16rcsCXG@mW%JwXo3YZX`~vtn;i?`fJ_YZYk0n;7G8 zVI#)akI&drt3Weemg!%@ju683T15KMQzkNUc!BqrSCvh1O?G1&$^cg5H}0Wn62$Y< zUPonjU~L8P0hw(-V%IptIUL7#48i6kaB!TBEAT8~@8b+Quta8*4xB=t|0#SCX5$-P zW7aq#^*Di71ti5ah{rPPH|ICzbLYY&-tnAt`eQgEv-5(qK8Wt(H0@5Ro2m}BEQN2R z@3pR2U?IL>02`|ypN^~egPo(&v;edXpVCRrVdezMH^{OpqH|QQ1h@&e61WeYSc6;< zt}zjJCF~IPjp3{CRC{Gvly}DndT - From 1f4252363c70ec6084cd1a2205835ded24e4ca7e Mon Sep 17 00:00:00 2001 From: siddhanth339 Date: Sat, 8 May 2021 19:36:35 +0530 Subject: [PATCH 3/3] Combined light and dark themes into styles.css --- css/darkTheme.css | 497 ----------------------------- css/{lightTheme.css => styles.css} | 323 +++++++++---------- index.html | 34 +- 3 files changed, 147 insertions(+), 707 deletions(-) delete mode 100644 css/darkTheme.css rename css/{lightTheme.css => styles.css} (68%) diff --git a/css/darkTheme.css b/css/darkTheme.css deleted file mode 100644 index cf67faf..0000000 --- a/css/darkTheme.css +++ /dev/null @@ -1,497 +0,0 @@ -/* TYPOGRAPHY --------------------------------------------------------------- */ - - -/* latin-ext */ - -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - /* normal */ - src: local('Nunito Regular'), local('Nunito-Regular'), url('Nunito-Regular-latin-ext.woff2') format('woff2'), url('Nunito-Regular.ttf') format('truetype'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} - - -/* latin */ - -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - /* normal */ - src: local('Nunito Regular'), local('Nunito-Regular'), url('Nunito-Regular.woff2') format('woff2'), url('Nunito-Regular.ttf') format('truetype'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - - -/* latin-ext */ - -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 700; - /* bold */ - src: local('Nunito Bold'), local('Nunito-Bold'), url('Nunito-Bold-latin-ext.woff2') format('woff2'), url('Nunito-Bold.ttf') format('truetype'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} - - -/* latin */ - -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 700; - /* bold */ - src: local('Nunito Bold'), local('Nunito-Bold'), url('Nunito-Bold.woff2') format('woff2'), url('Nunito-Bold.ttf') format('truetype'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -html { - scroll-behavior: smooth; -} - -body { - font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - font-weight: normal; - line-height: 170%; - background-color: #212529; - color: #fff; -} - -.navbar-brand, -h1, -h2, -h3 { - font-weight: bold; -} - - -/* COLOR -------------------------------------------------------------------- */ - -.navbar, -.jumbotron, -footer { - background-color: #202124 !important; - color: #fff; - border-radius: 0; - /* better readability on bright background */ - text-shadow: 0 0 2px rgba(10, 30, 20, .4); -} - - -/* BUTTONS ------------------------------------------------------------------ */ - -.btn { - border-radius: 100px; -} - -.btn img { - width: 1rem; - height: 1rem; - vertical-align: sub; -} - -.jumbotron .btn { - background: transparent; - color: #fff; - border: 2px solid #fff; - font-weight: bold; -} - -.jumbotron .btn:hover, -.jumbotron .btn:focus, -.jumbotron .btn:active { - background: #fff; - color: #212529; -} - -.jumbotron .btn:hover img, -.jumbotron .btn:focus img, -.jumbotron .btn:active img { - filter: invert(80%); -} - - -/* LINKS -------------------------------------------------------------------- */ - -a { - text-decoration: none !important; - outline: none !important; - color: #fff; - transition: transform .2s; - /* Animation */ -} - -a:hover { - color: #fff; - box-shadow: 0 0 0.25em 0.25em rgba(134, 128, 128, 0.25); - transform: scale(1.05); -} - -footer a { - color: #fff !important; - font-weight: bold; -} - -footer a:hover, -footer a:focus, -footer a:active { - opacity: .8; -} - - -/* HOVER/FOCUS EFFECT ------------------------------------------------------- */ - -section:not(.no-highlight-effect) div > a:hover::after, -section:not(.no-highlight-effect) div > a:focus::after, -section:not(.no-highlight-effect) div > a:active::after { - content: url('../img/highlight-white.svg'); - position: absolute; - top: -3px; - left: calc(50% - 128px); -} - -.nav-item, -.navbar-brand, -.navbar-toggler { - position: relative; -} - -.nav-link:hover::before, -.navbar-toggler:hover::before { - content: url('../img/highlight-white-small-left.svg'); - position: absolute; - top: 2px; - left: -10px; -} - -.nav-link:hover::after, -.navbar-toggler:hover::after { - content: url('../img/highlight-white-small-right.svg'); - position: absolute; - top: 2px; - right: -8px; -} - - -/* Special case for the logo */ - -.navbar-brand:focus::before, -.navbar-brand:hover::before, -.navbar-brand:active::before { - left: -25px; -} - -.navbar-brand:focus::after, -.navbar-brand:hover::after, -.navbar-brand:active::after { - right: -20px; -} - - -/* Special case for the mobile nav entries */ - -.navbar-collapse.show .mr-auto .nav-link:focus::before, -.navbar-collapse.show .mr-auto .nav-link:hover::before, -.navbar-collapse.show .mr-auto .nav-link:active::before { - left: -20px; -} - -.navbar-collapse.show .mr-auto .nav-link:focus::after, -.navbar-collapse.show .mr-auto .nav-link:hover::after, -.navbar-collapse.show .mr-auto .nav-link:active::after { - left: 65px; -} - - -/* HEADER ------------------------------------------------------------------- */ - -.navbar-brand { - display: flex; - align-items: center; -} - -.navbar-brand img { - margin-right: 5px; - align-self: start; - height: 1.2em; -} - - -/* Icons for Twitter, GitHub, IRC */ - -.nav-link img { - width: 1rem; - height: 1rem; - opacity: .6; -} - -.nav-link:hover img, -.nav-link:focus img { - opacity: 1; -} - - -/* Toggle icon on mobile */ - -.navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); -} - -.navbar-toggler { - border: none; - outline: none !important; -} - - -/* CONTENT ------------------------------------------------------------------ */ - -section { - padding-top: 32px; -} - -h2 { - display: inline-block; - background-color: #fff; - color: #202124 !important; - text-align: center; - padding: 16px; - margin-top: 32px; -} - -hr { - border: 2px solid #fff !important; - border-radius: 3px; - margin-bottom: -4.4rem; - margin-top: 5rem; -} - -[class^='col-md-'], -[class*=' col-md-'] { - margin-top: 20px; - margin-bottom: 20px; -} - -h3 { - margin-top: 1rem; - line-height: 130%; -} - -.text-center .col-md-4 p, -.text-center .col-md-4 li { - text-align: left; -} - -.container .row img { - width: 100px; - max-height: 100px; - border-radius: 50%; - margin-top: 20px; -} - - -/* LOGO --------------------------------------------------------------------- */ - -.jumbotron .container>img { - margin: 60px 0 10px 0; -} - - -/* FOOTER ------------------------------------------------------------------- */ - -footer { - margin-top: 4rem; - padding: 2rem 0; -} - - -/* EXPERIMENTS -------------------------------------------------------------- */ - -[class^='color-'], -[class*='color-'] { - border: none; -} - -.color-heartofcode, -.color-heartofcode:hover, -.color-heartofcode:focus, -.color-heartofcode:active { - background-color: #c32025; -} - -.color-lereset, -.color-lereset:hover, -.color-lereset:focus, -.color-lereset:active { - background-color: #feed64; - color: #444444; -} - -.color-doubleunion, -.color-doubleunion:hover, -.color-doubleunion:focus, -.color-doubleunion:active { - background-color: #d12aa4; -} - -.color-railsgirls, -.color-railsgirls:hover, -.color-railsgirls:focus, -.color-railsgirls:active { - background-color: #d82222; -} - -.color-outreachy, -.color-outreachy:hover, -.color-outreachy:focus, -.color-outreachy:active { - background-color: #58cfe5; -} - - -/* ---------------------------Animated Hamburger Menu--------------------- */ - -.animated-icon { - width: 30px; - height: 20px; - position: relative; - margin: 0px; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .5s ease-in-out; - -moz-transition: .5s ease-in-out; - -o-transition: .5s ease-in-out; - transition: .5s ease-in-out; - cursor: pointer; -} - -.animated-icon span { - display: block; - position: absolute; - height: 3px; - width: 100%; - border-radius: 9px; - opacity: 1; - left: 0; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .25s ease-in-out; - -moz-transition: .25s ease-in-out; - -o-transition: .25s ease-in-out; - transition: .25s ease-in-out; -} - -.animated-icon span { - background: #e3f2fd; -} - -.animated-icon span:nth-child(1) { - top: 0px; -} - -.animated-icon span:nth-child(2), -.animated-icon span:nth-child(3) { - top: 10px; -} - -.animated-icon span:nth-child(4) { - top: 20px; -} - -.animated-icon.open span:nth-child(1) { - top: 11px; - width: 0%; - left: 50%; -} - -.animated-icon.open span:nth-child(2) { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); -} - -.animated-icon.open span:nth-child(3) { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.animated-icon.open span:nth-child(4) { - top: 11px; - width: 0%; - left: 50%; -} - - -/*Simple css to style it like a toggle switch*/ - -.theme-switch-wrapper { - margin-left: 5px; - display: flex; - align-items: center; -} - -em { - margin-left: 10px; - font-size: 1rem; -} - -.theme-switch { - display: inline-block; - height: 34px; - position: relative; - width: 60px; -} - -.theme-switch input { - display: none; -} - -.slider { - background-color: #ccc; - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: .4s; -} - -.slider:before { - background-color: #fff; - bottom: 4px; - content: ""; - height: 26px; - left: 4px; - position: absolute; - transition: .4s; - width: 26px; - background-image: url("../img/moon.png"); - background-position: center; - background-repeat: no-repeat; -} - -input:checked+.slider { - background-color: #3b3b3b; -} - -input:checked+.slider:before { - transform: translateX(26px); -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} \ No newline at end of file diff --git a/css/lightTheme.css b/css/styles.css similarity index 68% rename from css/lightTheme.css rename to css/styles.css index bdf1535..ed7d492 100644 --- a/css/lightTheme.css +++ b/css/styles.css @@ -44,135 +44,180 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } -html{ - scroll-behavior: smooth; +:root { + --white: #fff; + --lightGreen: #45b086; + --darkGrey: #202124; + --lightGrey: #212529; + --textShadow: 0 0 2px rgba(10, 30, 20, .4); + --boxShadow: 0 0 0.25em 0.25em rgba(134, 128, 128, 0.25); +} + +@media (prefers-color-scheme: dark) { + :root { + --Theme: var(--darkGrey); + } + + body { + background-color: var(--lightGrey); + color: var(--white); + } + + a:hover { + color: var(--white); + } + + section:not(.no-highlight-effect) div > a:hover::after, + section:not(.no-highlight-effect) div > a:focus::after, + section:not(.no-highlight-effect) div > a:active::after { + content: url('../img/highlight-white.svg'); + } + + hr { + border: 2px solid var(--white) !important; + } + + .jumbotron-heading { + color: var(--lightGreen); + } +} + +@media (prefers-color-scheme: light) { + :root { + --Theme: var(--lightGreen); + } + + a:hover { + color: var(--Theme); + } + + .navbar-dark .navbar-nav .nav-link, + .navbar-dark .navbar-nav .nav-link:hover, + .navbar-dark .navbar-nav .nav-link:focus, + .navbar-dark .navbar-nav .nav-link:active { + color: rgba(255,255,255,1); + } + + section a, + section a h3, + section a p { + color: var(--lightGrey); + } + + section a:hover, + section a:hover h3, + section a:hover p, + section a:focus, + section a:focus h3, + section a:focus p, + section a:active, + section a:active h3, + section a:active p { + color: var(--lightGreen); + } + + section:not(.no-highlight-effect) div > a:hover::after, + section:not(.no-highlight-effect) div > a:focus::after, + section:not(.no-highlight-effect) div > a:active::after { + content: url('../img/highlight.svg'); + } + + hr { + border: 2px solid var(--lightGreen) !important; + } +} + +html { + scroll-behavior: smooth; } + body { - font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - font-weight: normal; - line-height: 170%; + font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + font-weight: normal; + line-height: 170%; } .navbar-brand, h1, h2, h3 { - font-weight: bold; + font-weight: bold; } - - - - /* COLOR -------------------------------------------------------------------- */ .navbar, .jumbotron, footer { - background-color: #45b086 !important; - color: #fff; - border-radius: 0; - /* better readability on bright background */ - text-shadow: 0 0 2px rgba(10, 30, 20, .4); + background-color: var(--Theme) !important; + color: var(--white); + border-radius: 0; + /* better readability on bright background */ + text-shadow: var(--textShadow); } - - - - /* BUTTONS ------------------------------------------------------------------ */ .btn { - border-radius: 100px; + border-radius: 100px; } + .btn img { - width: 1rem; - height: 1rem; - vertical-align: sub; + width: 1rem; + height: 1rem; + vertical-align: sub; } + .jumbotron .btn { - background: transparent; - color: #fff; - border: 2px solid #fff; - font-weight: bold; + background: transparent; + color: var(--white); + border: 2px solid var(--white); + font-weight: bold; } + .jumbotron .btn:hover, .jumbotron .btn:focus, .jumbotron .btn:active { - background: #fff; - color: #212529; + background: var(--white); + color: var(--lightGrey); } + .jumbotron .btn:hover img, .jumbotron .btn:focus img, .jumbotron .btn:active img { - filter: invert(80%); + filter: invert(80%); } - - - - /* LINKS -------------------------------------------------------------------- */ a { text-decoration: none !important; outline: none !important; - color: #fff; + color: var(--white); transition: transform .2s; /* Animation */ } a:hover { - color: #45b086; - box-shadow: 0 0 0.25em 0.25em rgba(134, 128, 128, 0.25); + box-shadow: var(--boxShadow); transform: scale(1.05); } -.navbar-dark .navbar-nav .nav-link, -.navbar-dark .navbar-nav .nav-link:hover, -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:active { - color: rgba(255,255,255,1); -} - -section a, -section a h3, -section a p { - color: #212529; -} -section a:hover, -section a:hover h3, -section a:hover p, -section a:focus, -section a:focus h3, -section a:focus p, -section a:active, -section a:active h3, -section a:active p { - color: #45b086; -} - footer a { - color: #fff !important; - font-weight: bold; + color: var(--white) !important; + font-weight: bold; } + footer a:hover, footer a:focus, footer a:active { - opacity: .8; + opacity: .8; } - - - - -/* HOVER/FOCUS EFFECT ------------------------------------------------------- */ - section:not(.no-highlight-effect) div > a:hover::after, section:not(.no-highlight-effect) div > a:focus::after, section:not(.no-highlight-effect) div > a:active::after { - content: url('../img/highlight.svg'); position: absolute; top: -3px; left: calc(50% - 128px); @@ -181,7 +226,7 @@ section:not(.no-highlight-effect) div > a:active::after { .nav-item, .navbar-brand, .navbar-toggler { - position: relative; + position: relative; } .nav-link:hover::before, @@ -205,89 +250,83 @@ section:not(.no-highlight-effect) div > a:active::after { .navbar-brand:focus::before, .navbar-brand:hover::before, .navbar-brand:active::before { - left: -25px; + left: -25px; } + .navbar-brand:focus::after, .navbar-brand:hover::after, .navbar-brand:active::after { - right: -20px; + right: -20px; } /* Special case for the mobile nav entries */ .navbar-collapse.show .mr-auto .nav-link:focus::before, .navbar-collapse.show .mr-auto .nav-link:hover::before, .navbar-collapse.show .mr-auto .nav-link:active::before { - left: -20px; + left: -20px; } + .navbar-collapse.show .mr-auto .nav-link:focus::after, .navbar-collapse.show .mr-auto .nav-link:hover::after, .navbar-collapse.show .mr-auto .nav-link:active::after { - left: 65px; + left: 65px; } - - - - /* HEADER ------------------------------------------------------------------- */ - .navbar-brand { - display: flex; - align-items: center; + display: flex; + align-items: center; } .navbar-brand img { - margin-right: 5px; - align-self: start; - height: 1.2em; + margin-right: 5px; + align-self: start; + height: 1.2em; } /* Icons for Twitter, GitHub, IRC */ .nav-link img { width: 1rem; height: 1rem; - opacity: .6; + opacity: .6; } + .nav-link:hover img, .nav-link:focus img { - opacity: 1; + opacity: 1; } /* Toggle icon on mobile */ .navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + .navbar-toggler { - border: none; - outline: none !important; + border: none; + outline: none !important; } - - - - /* CONTENT ------------------------------------------------------------------ */ - section { - padding-top: 32px; + padding-top: 32px; } h2 { - display: inline-block; - background-color: #fff; - color: #45b086 !important; - text-align: center; - padding: 16px; - margin-top: 32px; + display: inline-block; + background-color: var(--white); + color: var(--Theme) !important; + text-align: center; + padding: 16px; + margin-top: 32px; } hr { - border: 2px solid #45b086 !important; - border-radius: 3px; - margin-bottom: -4.4rem; - margin-top: 5rem; + border-radius: 3px; + margin-bottom: -4.4rem; + margin-top: 5rem; } + [class^='col-md-'], [class*=' col-md-'] { margin-top: 20px; margin-bottom: 20px; @@ -310,24 +349,18 @@ h3 { margin-top: 20px; } - /* LOGO --------------------------------------------------------------------- */ - .jumbotron .container > img { margin: 60px 0 10px 0; } - /* FOOTER ------------------------------------------------------------------- */ - footer { margin-top: 4rem; padding: 2rem 0; } - /* EXPERIMENTS -------------------------------------------------------------- */ - [class^='color-'], [class*='color-'] { border: none; } @@ -439,68 +472,4 @@ footer { top: 11px; width: 0%; left: 50%; -} -/*Simple css to style it like a toggle switch*/ - -.theme-switch-wrapper { - margin-left: 5px; - display: flex; - align-items: center; -} - -em { - margin-left: 10px; - font-size: 1rem; -} - -.theme-switch { - display: inline-block; - height: 34px; - position: relative; - width: 60px; -} - -.theme-switch input { - display: none; -} - -.slider { - background-color: #ccc; - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: .4s; -} - -.slider:before { - background-color: #fff; - bottom: 4px; - content: ""; - height: 26px; - left: 4px; - position: absolute; - transition: .4s; - width: 26px; - background-image: url("../img/moon.png"); - background-position: center; - background-repeat: no-repeat; -} - -input:checked+.slider { - background-color: blue; -} - -input:checked+.slider:before { - transform: translateX(26px); -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; } \ No newline at end of file diff --git a/index.html b/index.html index 172a0ff..cd37daa 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + @@ -57,12 +57,6 @@
  • Consulting
    • -
    - -
      @@ -477,32 +471,6 @@

      Programming Diversity

      return t; }(document, "script", "twitter-wjs")); - function switchTheme(e) { - if (e.target.checked) { - document.getElementById("styles").setAttribute('href', 'css/darkTheme.css'); - localStorage.setItem('theme', 'dark'); - } - else { - document.getElementById("styles").setAttribute('href', 'css/lightTheme.css'); - localStorage.setItem('theme', 'light'); - } - } - - document.addEventListener('DOMContentLoaded', () => { - const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); - toggleSwitch.addEventListener('change', switchTheme, false); - const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; - - if (currentTheme === 'dark') { - document.getElementById("styles").setAttribute('href', 'css/darkTheme.css'); - toggleSwitch.checked = true; - } - else { - document.getElementById("styles").setAttribute('href', 'css/lightTheme.css'); - toggleSwitch.checked = false; - } - }) -