Implement proper dark mode (#800)
* Implement proper dark mode Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Fix footer color in light mode Signed-off-by: hossainemruz <hossainemruz@gmail.com> --------- Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
parent
6dc9d1d33d
commit
5f0aebcf68
38 changed files with 1136 additions and 353 deletions
|
@ -1,30 +0,0 @@
|
|||
import { enable, disable, auto, setFetchMethod } from 'darkreader'
|
||||
import * as params from '@params'
|
||||
|
||||
const darkreader = params?.darkmode?.darkreader || {}
|
||||
const defaultColorScheme = darkreader.defaultcolorscheme || 'system'
|
||||
const theme = {
|
||||
brightness: 100,
|
||||
contrast: 100,
|
||||
sepia: 0,
|
||||
...(darkreader.theme || {})
|
||||
}
|
||||
const fixes = {
|
||||
invert: ['img[src$=".svg"]'],
|
||||
...(darkreader.fixes || {})
|
||||
}
|
||||
setFetchMethod(window.fetch)
|
||||
|
||||
export function setSchemeDark () {
|
||||
enable(theme, fixes)
|
||||
}
|
||||
|
||||
export function setSchemeLight () {
|
||||
disable()
|
||||
}
|
||||
|
||||
export function setSchemeSystem () {
|
||||
auto(theme, fixes)
|
||||
}
|
||||
|
||||
export { defaultColorScheme }
|
|
@ -1,14 +1,6 @@
|
|||
const PERSISTENCE_KEY = 'darkmode:color-scheme'
|
||||
|
||||
async function getService () {
|
||||
if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
|
||||
return await import('./darkreader')
|
||||
}
|
||||
|
||||
throw Error(' No service defined for feature darkMode.')
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
window.addEventListener('load', async () => {
|
||||
const menu = document.getElementById('themeMenu')
|
||||
const $icon = document.getElementById('navbar-theme-icon-svg')
|
||||
if (menu == null || $icon == null) return
|
||||
|
@ -20,32 +12,32 @@ window.addEventListener('DOMContentLoaded', async () => {
|
|||
return map
|
||||
}, {})
|
||||
|
||||
const {
|
||||
setSchemeDark,
|
||||
setSchemeLight,
|
||||
setSchemeSystem,
|
||||
defaultColorScheme
|
||||
} = await getService()
|
||||
|
||||
function loadScheme () {
|
||||
return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
|
||||
function loadScheme() {
|
||||
return localStorage.getItem(PERSISTENCE_KEY) || "system"
|
||||
}
|
||||
|
||||
function saveScheme (scheme) {
|
||||
function saveScheme(scheme) {
|
||||
localStorage.setItem(PERSISTENCE_KEY, scheme)
|
||||
}
|
||||
|
||||
function setScheme (newScheme) {
|
||||
function getPreferredColorScheme() {
|
||||
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
return isDarkMode ? "dark" : "light";
|
||||
}
|
||||
|
||||
function setScheme(newScheme) {
|
||||
let theme = newScheme
|
||||
if (newScheme === 'system') {
|
||||
theme = getPreferredColorScheme()
|
||||
}
|
||||
// set data-theme attribute on html tag
|
||||
document.querySelector("html").dataset.theme = theme;
|
||||
|
||||
// update icon
|
||||
$icon.src = iconMap[newScheme]
|
||||
|
||||
if (newScheme === 'dark') {
|
||||
setSchemeDark()
|
||||
} else if (newScheme === 'system') {
|
||||
setSchemeSystem()
|
||||
} else {
|
||||
setSchemeLight()
|
||||
}
|
||||
|
||||
// save preference to local storage
|
||||
saveScheme(newScheme)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
const updateNavBar = () => {
|
||||
const topNavbar = document.getElementById('top-navbar')
|
||||
const navbarToggler = document.getElementById('navbar-toggler')
|
||||
const themeIcon = document.getElementById('navbar-theme-icon-svg')
|
||||
|
||||
if (window.scrollY > 40) {
|
||||
topNavbar?.classList.remove('transparent-navbar')
|
||||
|
@ -10,8 +9,6 @@ const updateNavBar = () => {
|
|||
navbarToggler?.classList.remove('navbar-dark')
|
||||
navbarToggler?.classList.add('navbar-light')
|
||||
|
||||
// color theme selector a.k.a. dark mode
|
||||
themeIcon?.classList.remove('navbar-icon-svg-dark')
|
||||
|
||||
// get the main logo from hidden img tag
|
||||
const mainLogo = document.getElementById('main-logo')
|
||||
|
@ -26,9 +23,6 @@ const updateNavBar = () => {
|
|||
navbarToggler?.classList.remove('navbar-light')
|
||||
navbarToggler?.classList.add('navbar-dark')
|
||||
|
||||
// color theme selector a.k.a. dark mode
|
||||
themeIcon?.classList.add('navbar-icon-svg-dark')
|
||||
|
||||
// get the inverted logo from hidden img tag
|
||||
const invertedLogo = document.getElementById('inverted-logo')
|
||||
if (invertedLogo) {
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
/* Note: No need to invert when the screen is small because the navbar is
|
||||
collapsed to a hamburger menu. */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.dynamic-navbar .navbar-icon-svg-dark {
|
||||
filter: invert(1);
|
||||
};
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.dropdown-menu-icons-only {
|
||||
width: 25px;
|
||||
min-width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
|
@ -1,44 +1,44 @@
|
|||
.btn-dark {
|
||||
background-color: $text-color !important;
|
||||
border-color: $text-color !important;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('text-color') !important;
|
||||
border-color: get-light-color('text-color') !important;
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
@include transition();
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $accent-color !important;
|
||||
border-color: $accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
border-color: get-light-color('accent-color') !important;
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: $accent-color !important;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $hover-over-accent-color !important;
|
||||
background-color: get-light-color('hover-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
color: $accent-color !important;
|
||||
border-color: $accent-color !important;
|
||||
color: get-light-color('accent-color') !important;
|
||||
border-color: get-light-color('accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $accent-color !important;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $hover-over-accent-color;
|
||||
color: get-light-color('hover-over-accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -46,7 +46,7 @@
|
|||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
}
|
||||
|
||||
.tags {
|
||||
|
@ -56,18 +56,19 @@
|
|||
font-size: 0.5em;
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
background: $accent-color;
|
||||
background: get-light-color('accent-color');
|
||||
margin-left: 0.1em;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
a {
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: $text-color;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('text-color');
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.2rem;
|
||||
|
@ -75,19 +76,99 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
||||
.filled-button {
|
||||
background-color: $accent-color !important;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
@include transition();
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $hover-over-accent-color !important;
|
||||
background-color: get-light-color('hover-over-accent-color') !important;
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.btn-dark {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
border-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: get-dark-color('hover-over-accent-color') !important;
|
||||
border-color: get-dark-color('hover-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: get-dark-color('bg-card') !important;
|
||||
color: get-dark-color('text-color') !important;
|
||||
border: 1px solid get-dark-color('muted-text-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: get-dark-color('hover-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
color: get-dark-color('accent-color') !important;
|
||||
border-color: get-dark-color('accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: get-dark-color('accent-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: get-dark-color('hover-over-accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.tags {
|
||||
li {
|
||||
background: get-dark-color('accent-color');
|
||||
a {
|
||||
background-color: get-dark-color('bg-card');
|
||||
border: 1px solid get-dark-color('muted-text-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: get-dark-color('muted-text-color');
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filled-button {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: get-dark-color('hover-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,12 +2,12 @@
|
|||
box-shadow: none;
|
||||
@include transition();
|
||||
overflow: hidden;
|
||||
background: $bg-card;
|
||||
background: get-light-color('bg-card');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $box-shadow;
|
||||
border: 1px solid $bg-primary;
|
||||
border: 1px solid get-light-color('bg-primary');
|
||||
@include transition();
|
||||
}
|
||||
|
||||
|
@ -36,7 +36,10 @@
|
|||
}
|
||||
|
||||
.card-footer {
|
||||
background: $bg-card !important;
|
||||
background: get-light-color('bg-card') !important;
|
||||
a.btn {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -45,7 +48,7 @@
|
|||
display: inline-flex;
|
||||
|
||||
.post-card-link {
|
||||
text-decoration: none;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
@ -80,9 +83,33 @@
|
|||
|
||||
span {
|
||||
font-size: 10pt;
|
||||
color: $muted-text-color !important;
|
||||
color: get-light-color('muted-text-color') !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.card {
|
||||
background: get-dark-color('bg-card');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
|
||||
}
|
||||
.card-footer {
|
||||
background: get-dark-color('bg-card') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.post-card {
|
||||
.card {
|
||||
.card-footer {
|
||||
span {
|
||||
color: get-dark-color('muted-text-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@ img {
|
|||
}
|
||||
|
||||
figure {
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
width: -moz-fit-content;
|
||||
|
@ -30,5 +30,15 @@ caption,
|
|||
figcaption {
|
||||
caption-side: bottom;
|
||||
text-align: center;
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
figure {
|
||||
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
|
||||
}
|
||||
caption,
|
||||
figcaption {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,38 +1,38 @@
|
|||
a {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
@include transition();
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: $hover-over-accent-color underline;
|
||||
color: $hover-over-accent-color;
|
||||
text-decoration: get-light-color('hover-over-accent-color') underline;
|
||||
color: get-light-color('hover-over-accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
||||
.list-link {
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
text-decoration: none !important;
|
||||
color: get-light-color('text-color');
|
||||
@include transition();
|
||||
&.active {
|
||||
display: inline;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-left: 3px;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
||||
a.header-anchor {
|
||||
text-decoration: none;
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
i,
|
||||
svg {
|
||||
font-size: 10pt;
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
@ -43,10 +43,37 @@ a.header-anchor {
|
|||
}
|
||||
}
|
||||
code {
|
||||
color: $inline-code-color;
|
||||
color: get-light-color('inline-code-color');
|
||||
}
|
||||
}
|
||||
|
||||
.anchor {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
a {
|
||||
color: get-dark-color('accent-color');
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: get-dark-color('hover-over-accent-color') underline;
|
||||
color: get-dark-color('hover-over-accent-color');
|
||||
}
|
||||
}
|
||||
.list-link {
|
||||
color: get-dark-color('text-color');
|
||||
&:hover {
|
||||
color: get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
a.header-anchor {
|
||||
color: get-dark-color('heading-color');
|
||||
i,
|
||||
svg {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
code {
|
||||
color: get-dark-color('inline-code-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,12 +6,12 @@
|
|||
|
||||
.page-item {
|
||||
& > a {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
&.active,
|
||||
&:hover > a {
|
||||
background-color: $accent-color !important;
|
||||
color: $text-over-accent-color !important;
|
||||
background-color: get-light-color('accent-color') !important;
|
||||
color: get-light-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -31,3 +31,18 @@ pre {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.paginator {
|
||||
.page-item {
|
||||
& > a {
|
||||
color: get-dark-color('accent-color');
|
||||
}
|
||||
&.active,
|
||||
&:hover > a {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
table {
|
||||
border-radius: 0.1rem;
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
|
||||
min-width: 10rem;
|
||||
padding: 0.1rem;
|
||||
thead {
|
||||
tr {
|
||||
background: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
height: 40px !important;
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
&:nth-child(odd) {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
}
|
||||
&:nth-child(even) {
|
||||
background-color: rgba($accent-color, 0.05);
|
||||
background-color: rgba(get-light-color('accent-color'), 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -33,10 +33,10 @@ table {
|
|||
|
||||
.gist {
|
||||
table {
|
||||
border-radius: unset;
|
||||
background: unset;
|
||||
border: unset;
|
||||
padding: unset;
|
||||
border-radius: unset !important;
|
||||
background: unset !important;
|
||||
border: unset !important;
|
||||
padding: unset !important;
|
||||
|
||||
tr {
|
||||
height: unset !important;
|
||||
|
@ -44,31 +44,67 @@ table {
|
|||
|
||||
th,
|
||||
td {
|
||||
padding: unset;
|
||||
border-left: unset;
|
||||
border-bottom: unset;
|
||||
padding: unset !important;
|
||||
border-left: unset !important;
|
||||
border-bottom: unset !important;
|
||||
}
|
||||
td,
|
||||
tc {
|
||||
border-right: 1px solid $border-color;
|
||||
border-right: 1px solid rgba(get-light-color('accent-color'), 0.1);
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
background: unset;
|
||||
color: unset;
|
||||
background: unset !important;
|
||||
color: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: unset;
|
||||
background-color: unset !important;
|
||||
}
|
||||
&:hover {
|
||||
background: unset;
|
||||
background: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
table {
|
||||
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
|
||||
thead {
|
||||
tr {
|
||||
background: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
color: get-dark-color('text-color');
|
||||
&:nth-child(odd) {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
}
|
||||
&:nth-child(even) {
|
||||
background-color: rgba(get-dark-color('accent-color'), 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.gist {
|
||||
&::selection{
|
||||
background: get-dark-color('text-color');
|
||||
color: get-dark-color('inverse-text-color');
|
||||
}
|
||||
table {
|
||||
td,
|
||||
tc {
|
||||
border-right: 1px solid rgba(get-dark-color('accent-color'), 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,41 +3,41 @@ h2,
|
|||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $heading-color !important;
|
||||
color: get-light-color('heading-color') !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid $accent-color;
|
||||
background-color: rgba($accent-color, 0.05);
|
||||
border-left: 4px solid get-light-color('accent-color');
|
||||
background-color: rgba(get-light-color('accent-color'), 0.05);
|
||||
padding: 0.3rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
& > p {
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $muted-text-color !important;
|
||||
color: get-light-color('muted-text-color') !important;
|
||||
}
|
||||
|
||||
.text-heading {
|
||||
font-weight: bold;
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
|
@ -60,3 +60,50 @@ blockquote {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
|
||||
strong {
|
||||
color: get-dark-color('heading-color') !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid get-dark-color('accent-color');
|
||||
background-color: rgba(get-dark-color('accent-color'), 0.05);
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: get-dark-color('muted-text-color') !important;
|
||||
}
|
||||
|
||||
.text-heading {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
::-moz-selection {
|
||||
@include selection-color($theme: 'dark');
|
||||
}
|
||||
|
||||
::selection {
|
||||
@include selection-color($theme: 'dark');
|
||||
}
|
||||
li,
|
||||
ul {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -49,12 +49,12 @@ body.kind-page {
|
|||
|
||||
.page-item {
|
||||
& > a {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -172,3 +172,36 @@ body.kind-page {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.kind-section,
|
||||
body.kind-term,
|
||||
body.kind-page {
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.paginator {
|
||||
.page-item {
|
||||
& > a {
|
||||
background-color: get-dark-color('bg-card') !important;
|
||||
color: get-dark-color('text-color') !important;
|
||||
border: 1px solid get-dark-color('muted-text-color') !important;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: get-dark-color('hover-over-accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,16 +20,16 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
font-family: 'Mulish';
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $bg-primary !important;
|
||||
background-color: get-light-color('bg-primary') !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: $bg-secondary !important;
|
||||
background-color: get-light-color('bg-secondary') !important;
|
||||
}
|
||||
|
||||
.flag-icon {
|
||||
|
@ -55,12 +55,12 @@ body {
|
|||
}
|
||||
|
||||
kbd {
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: $highlight-color;
|
||||
background-color: get-light-color('highlight-color');
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
|
@ -88,3 +88,24 @@ mark {
|
|||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: get-dark-color('bg-primary') !important;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: get-dark-color('bg-secondary') !important;
|
||||
}
|
||||
kbd {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
mark {
|
||||
background-color: get-dark-color('highlight-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,7 +48,7 @@ body.type-notes {
|
|||
|
||||
.note-title {
|
||||
padding-left: 1rem;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
@ -56,11 +56,11 @@ body.type-notes {
|
|||
width: 98%;
|
||||
height: 100%;
|
||||
margin-bottom: -26px;
|
||||
border-bottom: 1px solid $accent-color;
|
||||
border-bottom: 1px solid get-light-color('accent-color');
|
||||
}
|
||||
|
||||
span {
|
||||
background: $bg-secondary;
|
||||
background: get-light-color('bg-secondary');
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
@ -173,3 +173,27 @@ body.type-notes {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.type-notes {
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.note-card-holder {
|
||||
.note-title {
|
||||
color: get-dark-color('accent-color');
|
||||
&:before {
|
||||
border-bottom: 1px solid get-dark-color('accent-color');
|
||||
}
|
||||
|
||||
span {
|
||||
background: get-dark-color('bg-secondary');
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
body.kind-page {
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
position: relative;
|
||||
|
||||
.wrapper {
|
||||
|
@ -23,7 +23,7 @@ body.kind-page {
|
|||
padding-top: 1.5rem;
|
||||
|
||||
.read-area {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
|
||||
.hero-area {
|
||||
margin-top: 3rem;
|
||||
|
@ -54,7 +54,7 @@ body.kind-page {
|
|||
width: 120px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
@ -93,6 +93,9 @@ body.kind-page {
|
|||
.next-prev-text {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -111,7 +114,7 @@ body.kind-page {
|
|||
padding-top: 1rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
margin-right: 0.5rem;
|
||||
@include transition();
|
||||
|
||||
|
@ -138,16 +141,17 @@ body.kind-page {
|
|||
.nav-link {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
@include transition();
|
||||
color: $heading-color;
|
||||
color: get-light-color('text-color');
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
@ -176,13 +180,13 @@ body.kind-page {
|
|||
position: fixed;
|
||||
bottom: 0rem;
|
||||
right: 1rem;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
font-size: 24pt;
|
||||
z-index: 900000;
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
color: $hover-over-accent-color;
|
||||
color: get-light-color('hover-over-accent-color');
|
||||
}
|
||||
&.show {
|
||||
visibility: visible;
|
||||
|
@ -190,7 +194,7 @@ body.kind-page {
|
|||
|
||||
i {
|
||||
box-shadow: $box-shadow;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
@ -318,3 +322,61 @@ body.kind-page {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.kind-page {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.read-area {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
|
||||
.page-content {
|
||||
.author-profile {
|
||||
img {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc-section {
|
||||
.toc-holder {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
hr {
|
||||
background-color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.toc {
|
||||
nav {
|
||||
.nav-link {
|
||||
color: get-dark-color('text-color');
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scroll-to-top {
|
||||
color: get-dark-color('accent-color');
|
||||
&:hover {
|
||||
color: get-dark-color('hover-over-accent-color');
|
||||
}
|
||||
|
||||
i {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,21 @@
|
|||
@function get-color($mode, $key) {
|
||||
@if map-has-key($themes, $mode) {
|
||||
$theme: map-get($themes, $mode);
|
||||
@if map-has-key($theme, $key) {
|
||||
@return map-get($theme, $key);
|
||||
}
|
||||
}
|
||||
@return red; // default color for debugging purpose
|
||||
}
|
||||
|
||||
@function get-light-color($key) {
|
||||
@return get-color('light', $key);
|
||||
}
|
||||
|
||||
@function get-dark-color($key) {
|
||||
@return get-color('dark', $key);
|
||||
}
|
||||
|
||||
@mixin reset-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -24,7 +42,11 @@
|
|||
transition: all $transition-type $transition-duration;
|
||||
}
|
||||
|
||||
@mixin selection-color() {
|
||||
background: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
@mixin selection-color($theme: 'light') {
|
||||
background: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
@if $theme == 'dark' {
|
||||
background: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,14 @@
|
|||
@mixin nav-item-hover-effect() {
|
||||
color: $accent-color !important;
|
||||
border-bottom: 2px solid $accent-color !important;
|
||||
background: rgba($accent-color, 0.1);
|
||||
@mixin nav-item-hover-effect($theme: 'light') {
|
||||
color: get-light-color('accent-color') !important;
|
||||
border-bottom: 2px solid get-light-color('accent-color') !important;
|
||||
background: rgba(get-light-color('accent-color'), 0.1);
|
||||
@include transition();
|
||||
|
||||
@if $theme == 'dark' {
|
||||
color: get-dark-color('accent-color') !important;
|
||||
border-bottom: 2px solid get-dark-color('accent-color') !important;
|
||||
background: rgba(get-dark-color('accent-color'), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.top-navbar {
|
||||
|
@ -14,13 +20,13 @@
|
|||
z-index: 99999;
|
||||
margin: 0px;
|
||||
padding-top: 0.4rem;
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
text-align: center;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
@include transition();
|
||||
|
||||
.navbar-brand {
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
font-weight: 600;
|
||||
img {
|
||||
width: 42px;
|
||||
|
@ -41,7 +47,8 @@
|
|||
|
||||
li {
|
||||
a {
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
text-decoration: none !important;
|
||||
font-weight: 500;
|
||||
@include transition();
|
||||
border-bottom: 2px solid transparent;
|
||||
|
@ -57,14 +64,14 @@
|
|||
|
||||
#top-navbar-divider {
|
||||
margin-top: 10px;
|
||||
background-color: $muted-text-color;
|
||||
background-color: get-light-color('muted-text-color');
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow;
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
|
||||
max-height: 0vh;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
@ -77,7 +84,7 @@
|
|||
@include transition();
|
||||
|
||||
a {
|
||||
color: $heading-color !important;
|
||||
color: get-light-color('heading-color') !important;
|
||||
|
||||
&:hover {
|
||||
@include nav-item-hover-effect();
|
||||
|
@ -90,40 +97,51 @@
|
|||
margin-top: -5px;
|
||||
&.show,
|
||||
&.collapsing {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
padding-left: 1rem;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
font-weight: 500;
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.active {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
a:hover {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.transparent-navbar {
|
||||
background-color: transparent;
|
||||
background-color: transparent !important;
|
||||
.navbar-brand {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
font-weight: 600;
|
||||
}
|
||||
li {
|
||||
a {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
}
|
||||
}
|
||||
.feather-menu {
|
||||
stroke: $inverse-text-color;
|
||||
stroke: get-light-color('inverse-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
#themeMenu {
|
||||
width: 25px;
|
||||
min-width: 3rem;
|
||||
|
||||
img.theme-icon {
|
||||
display: block !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -140,7 +158,7 @@
|
|||
&.transparent-navbar {
|
||||
.navbar-nav .active,
|
||||
li a:hover {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
@ -163,9 +181,12 @@
|
|||
right: 0.5rem;
|
||||
bottom: 1rem;
|
||||
z-index: 10000000;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
#themeMenu{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media('<=small') {
|
||||
|
@ -180,5 +201,85 @@
|
|||
.feather-menu {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
stroke: $text-color;
|
||||
stroke: get-light-color('text-color');
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.top-navbar {
|
||||
color: get-dark-color('heading-color');
|
||||
background-color: get-dark-color('bg-primary');
|
||||
|
||||
.navbar-brand {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
.sidebar-icon {
|
||||
filter: invert(0.5);
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
}
|
||||
|
||||
#top-navbar-divider {
|
||||
background-color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow;
|
||||
background-color: get-dark-color('bg-card');
|
||||
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
|
||||
|
||||
&.show {
|
||||
a {
|
||||
color: get-dark-color('heading-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
&.show,
|
||||
&.collapsing {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
|
||||
li {
|
||||
a {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.active {
|
||||
color: get-dark-color('accent-color');
|
||||
}
|
||||
a:hover {
|
||||
color: get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.transparent-navbar {
|
||||
.navbar-brand {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
li {
|
||||
a {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
.feather-menu {
|
||||
stroke: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img.theme-icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.feather-sidebar,
|
||||
.feather-menu {
|
||||
stroke: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,14 +7,14 @@
|
|||
.sidebar-holder {
|
||||
top: 2.5rem;
|
||||
position: sticky;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-shadow: $box-shadow;
|
||||
@include transition();
|
||||
|
||||
.sidebar {
|
||||
background: $bg-primary;
|
||||
background: get-light-color('bg-primary');
|
||||
height: 100vh;
|
||||
@include transition();
|
||||
|
||||
|
@ -27,12 +27,12 @@
|
|||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
@include transition();
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
|
||||
|
||||
&:focus {
|
||||
border: 1pt solid $accent-color;
|
||||
border: 1pt solid get-light-color('accent-color');
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
@ -56,11 +56,11 @@
|
|||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
color: $heading-color;
|
||||
color: get-light-color('heading-color');
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
@ -80,7 +80,7 @@
|
|||
top: 2.5rem;
|
||||
left: 1.5rem;
|
||||
bottom: 0.9rem;
|
||||
border-left: 1px solid $text-color;
|
||||
border-left: 1px solid get-light-color('text-color');
|
||||
}
|
||||
li {
|
||||
&:before {
|
||||
|
@ -88,14 +88,14 @@
|
|||
display: block;
|
||||
width: 18px;
|
||||
height: 0;
|
||||
border-top: 1px solid $text-color;
|
||||
border-top: 1px solid get-light-color('text-color');
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -2px;
|
||||
}
|
||||
&:last-child:before {
|
||||
background: $bg-primary;
|
||||
background: get-light-color('bg-primary');
|
||||
height: auto;
|
||||
top: 1.1rem;
|
||||
bottom: 0;
|
||||
|
@ -253,3 +253,49 @@
|
|||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.sidebar-section {
|
||||
.sidebar-holder {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
|
||||
.sidebar {
|
||||
background: get-dark-color('bg-primary');
|
||||
|
||||
#search-box {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
|
||||
|
||||
&:focus {
|
||||
border: 1pt solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
.tree {
|
||||
li {
|
||||
color: get-dark-color('heading-color');
|
||||
|
||||
i {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
}
|
||||
.subtree {
|
||||
&:before {
|
||||
border-left: 1px solid get-dark-color('text-color');
|
||||
}
|
||||
li {
|
||||
&:before {
|
||||
border-top: 1px solid get-dark-color('text-color');
|
||||
}
|
||||
&:last-child:before {
|
||||
background: get-dark-color('bg-primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -54,11 +54,11 @@ $progress-bar-colors: (
|
|||
|
||||
a {
|
||||
font-size: 1.5rem;
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
padding: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
@ -78,7 +78,7 @@ $progress-bar-colors: (
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 12px solid $bg-primary;
|
||||
border: 12px solid get-light-color('bg-primary');
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -130,9 +130,9 @@ $progress-bar-colors: (
|
|||
height: 90%;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
background: $text-color;
|
||||
background: get-light-color('text-color');
|
||||
font-size: 1rem;
|
||||
color: $bg-primary;
|
||||
color: get-light-color('bg-primary');
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
@ -202,3 +202,28 @@ $progress-bar-colors: (
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.about-section {
|
||||
.social-link {
|
||||
a {
|
||||
color: get-dark-color('text-color');
|
||||
|
||||
&:hover {
|
||||
color: get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
&::after {
|
||||
border: 12px solid get-dark-color('bg-primary');
|
||||
}
|
||||
|
||||
.circular-progress-value {
|
||||
background: get-dark-color('inverse-text-color');
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
@include section-title-adjustment();
|
||||
|
||||
.card {
|
||||
background: $bg-card;
|
||||
border-top: 2px solid $accent-color;
|
||||
background: get-light-color('bg-card');
|
||||
border-top: 2px solid get-light-color('accent-color');
|
||||
height: 100%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-top: 2px solid $hover-over-accent-color;
|
||||
border-top: 2px solid get-light-color('hover-over-accent-color');
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
@ -16,7 +16,7 @@
|
|||
border: none;
|
||||
|
||||
.sub-title {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.card-footer {
|
||||
background: $bg-card;
|
||||
background: get-light-color('bg-card');
|
||||
border: none;
|
||||
padding: 0;
|
||||
padding-left: 0.7rem;
|
||||
|
@ -53,3 +53,26 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.accomplishments-section {
|
||||
.card {
|
||||
background: get-dark-color('bg-card');
|
||||
border-top: 2px solid get-dark-color('accent-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-top: 2px solid get-dark-color('hover-over-accent-color');
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.sub-title {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
}
|
||||
.card-footer {
|
||||
background: get-dark-color('bg-card');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
z-index: 1;
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
@ -21,8 +21,8 @@
|
|||
@include transition();
|
||||
|
||||
.title {
|
||||
color: $inverse-text-color;
|
||||
background-color: rgba($bg-primary-inverse, 0.7);
|
||||
color: get-light-color('inverse-text-color');
|
||||
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
|
||||
opacity: 0;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
|
@ -85,28 +85,28 @@
|
|||
}
|
||||
|
||||
.svg-inline--fa {
|
||||
color: $muted-text-color;
|
||||
background-color: rgba($bg-primary-inverse, 0.7);
|
||||
color: get-light-color('muted-text-color');
|
||||
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
|
||||
padding: 10px;
|
||||
font-size: 0rem;
|
||||
opacity: 0;
|
||||
}
|
||||
.caption {
|
||||
background-color: rgba($bg-primary-inverse, 0.7);
|
||||
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
@include transition();
|
||||
|
||||
h4 {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -127,3 +127,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.achievements-section {
|
||||
#gallery {
|
||||
.achievement-entry {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
|
||||
.title {
|
||||
color: get-dark-color('inverse-text-color');
|
||||
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
|
||||
}
|
||||
}
|
||||
.svg-inline--fa {
|
||||
color: get-dark-color('muted-text-color');
|
||||
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
|
||||
}
|
||||
.caption {
|
||||
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
|
||||
color: get-dark-color('inverse-text-color');
|
||||
|
||||
h4 {
|
||||
color: get-dark-color('inverse-text-color');
|
||||
}
|
||||
p {
|
||||
color: get-dark-color('inverse-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
.card {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-left: 2px solid $accent-color;
|
||||
border-left: 2px solid get-light-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -23,19 +23,19 @@
|
|||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
background-color: $accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.icon-holder {
|
||||
background-color: $accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
@ -43,14 +43,14 @@
|
|||
tr,
|
||||
th,
|
||||
td {
|
||||
border: none;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
background: none;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background: none;
|
||||
background: none !important;
|
||||
}
|
||||
&:first-child {
|
||||
.hline {
|
||||
|
@ -72,7 +72,7 @@
|
|||
div {
|
||||
height: 2px;
|
||||
margin-right: -1px;
|
||||
background-color: $accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -81,10 +81,10 @@
|
|||
padding: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-left: 2px solid $accent-color;
|
||||
border-top: 1px solid $bg-primary;
|
||||
border-bottom: 1px solid $bg-primary;
|
||||
border-right: 1px solid $bg-primary;
|
||||
border-left: 2px solid get-light-color('accent-color');
|
||||
border-top: 1px solid get-light-color('bg-primary');
|
||||
border-bottom: 1px solid get-light-color('bg-primary');
|
||||
border-right: 1px solid get-light-color('bg-primary');
|
||||
border-radius: 5px;
|
||||
|
||||
h5 {
|
||||
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
|
||||
.timeframe {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
@ -109,7 +109,7 @@
|
|||
th {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
}
|
||||
|
||||
tr {
|
||||
|
@ -167,5 +167,68 @@
|
|||
}
|
||||
|
||||
.education-alt .degree-info {
|
||||
border-right: 2px solid $accent-color;
|
||||
border-right: 2px solid get-light-color('accent-color');
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.education-section {
|
||||
.card {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-left: 2px solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
.education-info-table {
|
||||
.icon {
|
||||
.hline {
|
||||
background-color: get-dark-color('accent-color');
|
||||
}
|
||||
|
||||
.icon-holder {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
tr {
|
||||
.line {
|
||||
div {
|
||||
background-color: get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.degree-info {
|
||||
border-left: 2px solid get-dark-color('accent-color');
|
||||
border-top: 1px solid get-dark-color('bg-primary');
|
||||
border-bottom: 1px solid get-dark-color('bg-primary');
|
||||
border-right: 1px solid get-dark-color('bg-primary');
|
||||
|
||||
.timeframe {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.taken-courses {
|
||||
table {
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border: 1px solid rgba(get-dark-color('accent-color'),0.2);
|
||||
border-left: 2px solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.education-alt .degree-info {
|
||||
border-right: 2px solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
padding-left: 1rem;
|
||||
& > li {
|
||||
margin-left: 0;
|
||||
color: $text-color;
|
||||
color: get-light-color('text-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -18,8 +18,8 @@
|
|||
.circle {
|
||||
padding: 13px 20px;
|
||||
border-radius: 50%;
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
max-height: 50px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
@ -33,7 +33,7 @@
|
|||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-left: 3px solid $accent-color;
|
||||
border-left: 3px solid get-light-color('accent-color');
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
|
@ -48,7 +48,7 @@
|
|||
height: 40px;
|
||||
}
|
||||
hr {
|
||||
border-top: 3px solid $accent-color;
|
||||
border-top: 3px solid get-light-color('accent-color');
|
||||
margin: 0;
|
||||
top: 17px;
|
||||
position: relative;
|
||||
|
@ -58,7 +58,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
.corner {
|
||||
border: 3px solid $accent-color;
|
||||
border: 3px solid get-light-color('accent-color');
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
|
@ -113,3 +113,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.experiences-section {
|
||||
ul {
|
||||
& > li {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
.timeline {
|
||||
.vertical-line {
|
||||
&::after {
|
||||
border-left: 3px solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
.horizontal-line {
|
||||
hr {
|
||||
border-top: 3px solid get-dark-color('accent-color');
|
||||
}
|
||||
.corner {
|
||||
border: 3px solid get-dark-color('accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
.footer {
|
||||
color: $muted-text-color !important;
|
||||
background-color: $bg-primary-inverse;
|
||||
color: get-light-color('muted-text-color') !important;
|
||||
background-color: get-light-color('footer-color');
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
|
||||
h5 {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
}
|
||||
|
||||
a {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
@include transition();
|
||||
&:hover {
|
||||
margin-left: 5px;
|
||||
text-decoration: $muted-text-color underline;
|
||||
text-decoration: get-light-color('muted-text-color') underline;
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
@ -28,30 +28,30 @@
|
|||
}
|
||||
|
||||
hr {
|
||||
background-color: $muted-text-color;
|
||||
background-color: get-light-color('muted-text-color');
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $inverse-text-color;
|
||||
background-color: get-light-color('inverse-text-color');
|
||||
&:focus {
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
#disclaimer {
|
||||
color: $muted-text-color !important;
|
||||
color: get-light-color('muted-text-color') !important;
|
||||
text-align: justify;
|
||||
& > strong {
|
||||
color: $inverse-text-color !important;
|
||||
color: get-light-color('inverse-text-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
#theme {
|
||||
color: $inverse-text-color;
|
||||
color: get-light-color('inverse-text-color');
|
||||
img {
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
|
@ -67,3 +67,46 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.footer {
|
||||
color: get-dark-color('muted-text-color') !important;
|
||||
background-color: get-dark-color('footer-color');
|
||||
h5 {
|
||||
color: get-dark-color('heading-color');
|
||||
}
|
||||
|
||||
a {
|
||||
color: get-dark-color('muted-text-color');
|
||||
&:hover {
|
||||
text-decoration: get-dark-color('muted-text-color') underline;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
&:focus {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
#disclaimer {
|
||||
color: get-dark-color('muted-text-color') !important;
|
||||
& > strong {
|
||||
color: get-dark-color('text-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
#theme {
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
overflow: hidden;
|
||||
|
||||
.background {
|
||||
|
@ -44,19 +44,19 @@
|
|||
img {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.greeting,
|
||||
.greeting-subtitle {
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
.typing-carousel {
|
||||
font-size: 14pt;
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
#typing-carousel-data {
|
||||
|
@ -65,7 +65,7 @@
|
|||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
color: $text-over-accent-color;
|
||||
color: get-light-color('text-over-accent-color');
|
||||
font-size: 1.5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
@ -108,3 +108,24 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.home {
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
img {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
}
|
||||
|
||||
.greeting,
|
||||
.greeting-subtitle {
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
.typing-carousel {
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
.arrow {
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.projects-section {
|
||||
.card {
|
||||
.card-header {
|
||||
background-color: $bg-card;
|
||||
background-color: get-light-color('bg-card');
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
text-decoration: none;
|
||||
|
@ -10,7 +10,7 @@
|
|||
margin-right: 0.5rem;
|
||||
}
|
||||
.sub-title {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
margin-top: 0.4rem;
|
||||
|
||||
span {
|
||||
|
@ -81,3 +81,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.projects-section {
|
||||
.card {
|
||||
.card-header {
|
||||
background-color: get-dark-color('bg-card');
|
||||
.sub-title {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,12 +2,12 @@
|
|||
@include section-title-adjustment();
|
||||
|
||||
.card {
|
||||
background: $bg-card;
|
||||
border-top: 2px solid $accent-color;
|
||||
background: get-light-color('bg-card');
|
||||
border-top: 2px solid get-light-color('accent-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-top: 2px solid $accent-color;
|
||||
border-top: 2px solid get-light-color('accent-color');
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
@ -17,7 +17,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
.sub-title {
|
||||
color: $muted-text-color;
|
||||
color: get-light-color('muted-text-color');
|
||||
margin-top: 0.4rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.card-footer {
|
||||
background: $bg-card;
|
||||
background: get-light-color('bg-card');
|
||||
border: none;
|
||||
padding: 0;
|
||||
padding-left: 1rem;
|
||||
|
@ -106,3 +106,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.publications-section {
|
||||
.card {
|
||||
background: get-dark-color('bg-card');
|
||||
border-top: 2px solid get-dark-color('accent-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-top: 2px solid get-dark-color('accent-color');
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.sub-title {
|
||||
color: get-dark-color('muted-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background: get-dark-color('bg-card');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,12 +5,12 @@
|
|||
height: 100%;
|
||||
|
||||
.card-head {
|
||||
background-color: $bg-primary !important;
|
||||
background-color: get-light-color('bg-primary') !important;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
|
||||
border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
|
||||
|
||||
.card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
|
@ -33,3 +33,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.skills-section {
|
||||
.card {
|
||||
.card-head {
|
||||
background-color: get-dark-color('bg-card') !important;
|
||||
border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,33 +13,76 @@ $breakpoints: (
|
|||
// Color are chosen from TailwindCSS color scheme
|
||||
// https://tailwindcss.com/docs/customizing-colors
|
||||
|
||||
// accent-color
|
||||
$accent-color: #0891b2; // cyan 600
|
||||
$hover-over-accent-color: #06b6d4; // cyan 500
|
||||
$text-over-accent-color: #e4e4e7; // zinc 200
|
||||
|
||||
// background-color
|
||||
$bg-primary: #f8fafc; // slate 50
|
||||
$bg-primary-inverse: #0f172a; // slate 900
|
||||
$bg-secondary: #e2e8f0; // slate 200
|
||||
$bg-card: #fff;
|
||||
|
||||
// text-color
|
||||
$heading-color: #1e293b; // slate 800
|
||||
$text-color: #334155; // slate 700
|
||||
$inverse-text-color: #cbd5e1; // slate 300
|
||||
$muted-text-color: #64748b; // slate 500
|
||||
$inline-code-color: #dc2626; // red 600
|
||||
$highlight-color: #fde68a; // amber 200
|
||||
|
||||
// transitions
|
||||
$transition-duration: 0.3s;
|
||||
$transition-type: ease-out;
|
||||
|
||||
// borders and shadows
|
||||
$border-color: rgba($accent-color, 0.1);
|
||||
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
|
||||
// themes
|
||||
$themes: (
|
||||
'light': (
|
||||
// cyan 600
|
||||
'accent-color': #0891b2,
|
||||
// cyan 500
|
||||
'hover-over-accent-color': #06b6d4,
|
||||
// zinc 200
|
||||
'text-over-accent-color': #e4e4e7,
|
||||
// slate 50
|
||||
'bg-primary': #f8fafc,
|
||||
// slate 900
|
||||
'bg-primary-inverse': #0f172a,
|
||||
// slate 200
|
||||
'bg-secondary': #e2e8f0,
|
||||
'bg-card': #fff,
|
||||
// slate 800
|
||||
'heading-color': #1e293b,
|
||||
// slate 700
|
||||
'text-color': #334155,
|
||||
// slate 300
|
||||
'inverse-text-color': #cbd5e1,
|
||||
// slate 500
|
||||
'muted-text-color': #64748b,
|
||||
// red 600
|
||||
'inline-code-color': #dc2626,
|
||||
// amber 200
|
||||
'highlight-color': #fde68a,
|
||||
// slate 900
|
||||
'footer-color': #0f172a,
|
||||
),
|
||||
'dark': (
|
||||
// cyan 600
|
||||
'accent-color': #0891b2,
|
||||
// cyan 500
|
||||
'hover-over-accent-color': #06b6d4,
|
||||
// zinc 200
|
||||
'text-over-accent-color': #e4e4e7,
|
||||
// gray-800
|
||||
'bg-primary': #1f2937,
|
||||
// slate 900
|
||||
'bg-primary-inverse': #0f172a,
|
||||
// gray 900
|
||||
'bg-secondary': #111827,
|
||||
// slate 800
|
||||
'bg-card': #1e293b,
|
||||
// slate 100
|
||||
'heading-color': #f1f5f9,
|
||||
// slate 300
|
||||
'text-color': #cbd5e1,
|
||||
// slate 900
|
||||
'inverse-text-color': #0f172a,
|
||||
// slate 500
|
||||
'muted-text-color': #64748b,
|
||||
// red 600
|
||||
'inline-code-color': #dc2626,
|
||||
// amber 200
|
||||
'highlight-color': #fde68a,
|
||||
// slate 900
|
||||
'footer-color': #0f172a,
|
||||
),
|
||||
);
|
||||
|
||||
$brand-colors: (
|
||||
'facebook': #3b5998,
|
||||
'twitter': #1da1f2,
|
||||
|
|
|
@ -8,12 +8,6 @@ videoplayer:
|
|||
styles:
|
||||
- plyr/dist/plyr
|
||||
|
||||
darkmode:
|
||||
services:
|
||||
darkreader:
|
||||
styles:
|
||||
- ./colortheme/colortheme
|
||||
|
||||
syntaxhighlight:
|
||||
services:
|
||||
hljs:
|
||||
|
|
|
@ -81,15 +81,6 @@ params:
|
|||
# Enable dark theme
|
||||
darkMode:
|
||||
enable: false
|
||||
services:
|
||||
darkreader:
|
||||
defaultColorScheme: system # options are 'system', 'dark', 'light'
|
||||
fixes:
|
||||
invert: ['img[src$=".svg"]'] # inverts svg colors.
|
||||
theme:
|
||||
brightness: 100
|
||||
contrast: 100
|
||||
sepia: 0
|
||||
|
||||
# Enable and configure portfolio
|
||||
portfolio:
|
||||
|
|
|
@ -11,7 +11,17 @@
|
|||
|
||||
<!--================= add analytics if enabled =========================-->
|
||||
{{- partial "analytics.html" . -}}
|
||||
|
||||
<script>
|
||||
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
|
||||
if (theme == 'system') {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = 'dark';
|
||||
} else {
|
||||
theme = 'light';
|
||||
}
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
|
||||
|
|
|
@ -17,6 +17,17 @@
|
|||
|
||||
<!--================= add analytics if enabled =========================-->
|
||||
{{- partial "analytics.html" . -}}
|
||||
<script>
|
||||
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
|
||||
if (theme == 'system') {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = 'dark';
|
||||
} else {
|
||||
theme = 'light';
|
||||
}
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
</script>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target="#top-navbar" data-offset="100">
|
||||
|
||||
|
|
|
@ -72,29 +72,12 @@ params:
|
|||
# The `darkMode` feature
|
||||
darkmode:
|
||||
enable: true
|
||||
services:
|
||||
# darkmode is realized by using DarkReader library
|
||||
darkreader:
|
||||
# options are 'system', 'dark', 'light'
|
||||
defaultColorScheme: system
|
||||
# For all available options, see `interface DynamicThemeFix`:
|
||||
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L125
|
||||
fixes:
|
||||
invert: ['img[src$=".svg"]'] # inverts svg colors.
|
||||
# For all available options, see `interface Theme` in:
|
||||
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L45
|
||||
theme:
|
||||
brightness: 100
|
||||
contrast: 100
|
||||
sepia: 0
|
||||
```
|
||||
|
||||
This helper will convert the above config into the following env vars:
|
||||
|
||||
* `FEATURE_ANALYTICS=1`
|
||||
* `FEATURE_ANALYTICS_GOOGLE=1`
|
||||
* `FEATURE_DARKMODE=1`
|
||||
* `FEATURE_DARKMODE_DARKREADER=1`
|
||||
|
||||
In JS, you can use it like this:
|
||||
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
|
||||
<img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
|
||||
</a>
|
||||
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
|
||||
<a class="dropdown-item nav-link" href="#" data-scheme="light">
|
||||
<img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
|
||||
<img class="theme-icon" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
|
||||
</a>
|
||||
<a class="dropdown-item nav-link" href="#" data-scheme="dark">
|
||||
<img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
|
||||
<img class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
|
||||
</a>
|
||||
<a class="dropdown-item nav-link" href="#" data-scheme="system">
|
||||
<img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
|
||||
<img class="theme-icon" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
|
17
package-lock.json
generated
17
package-lock.json
generated
|
@ -13,7 +13,6 @@
|
|||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"bootstrap": "^4.6.2",
|
||||
"darkreader": "^4.9.58",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
|
@ -1013,16 +1012,6 @@
|
|||
"lodash-es": "^4.17.21"
|
||||
}
|
||||
},
|
||||
"node_modules/darkreader": {
|
||||
"version": "4.9.58",
|
||||
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
|
||||
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/darkreader/donate"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
@ -4543,12 +4532,6 @@
|
|||
"lodash-es": "^4.17.21"
|
||||
}
|
||||
},
|
||||
"darkreader": {
|
||||
"version": "4.9.58",
|
||||
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
|
||||
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
|
|
@ -32,7 +32,6 @@
|
|||
"@fontsource/mulish": "4.5.13",
|
||||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"bootstrap": "^4.6.2",
|
||||
"darkreader": "^4.9.58",
|
||||
"filterizr": "^2.2.4",
|
||||
"flag-icon-css": "^4.1.7",
|
||||
"fuse.js": "^6.6.2",
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
"@fortawesome/fontawesome-free": "project",
|
||||
"autoprefixer": "project",
|
||||
"bootstrap": "project",
|
||||
"darkreader": "project",
|
||||
"eslint": "project",
|
||||
"eslint-config-prettier": "project",
|
||||
"eslint-config-standard": "project",
|
||||
|
@ -42,7 +41,6 @@
|
|||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"bootstrap": "^4.6.2",
|
||||
"darkreader": "^4.9.58",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue