From bdc259e912411131df737045a440a1b2f4c52929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yunus=20G=C3=BCrlek?= Date: Sun, 25 Jun 2023 00:49:02 +0200 Subject: [PATCH] Add light theme --- .DS_Store | Bin 0 -> 6148 bytes controllers/index/theme/post.js | 8 +++ middleware/generateConstantData.js | 2 +- public/css/general/dark.css | 17 ++++++ public/css/general/general.css | 13 ----- public/css/general/header.css | 81 +++++++++++++---------------- public/css/general/light.css | 17 ++++++ public/css/general/navbar.css | 3 +- public/css/general/writing.css | 4 +- public/css/projects/index.css | 6 +++ public/js/functions/header.js | 13 +++++ public/js/functions/navbar.js | 1 + public/js/projects/index.js | 5 +- routes/indexRoute.js | 6 +++ translations/en.json | 4 +- translations/tr.json | 4 +- views/partials/head.pug | 4 ++ views/partials/header.pug | 15 ++++++ 18 files changed, 134 insertions(+), 69 deletions(-) create mode 100644 .DS_Store create mode 100644 controllers/index/theme/post.js create mode 100644 public/css/general/dark.css create mode 100644 public/css/general/light.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2a1e21a54e6b4dd874e5da36ad493733ed4d458f GIT binary patch literal 6148 zcmeHKJ8Hu~5S>X>7~H5#xmWNF7UP`27ce-+jgUZ2Qme|jayxO`7mV%)H&v zycK$dMk6A+|9IPpv?8*B8_Ji3rP+P+g*|0PfpDBL${-!C3s&pQxLY}c*US5ifBQU+ zeK+*iIDOr5tfB%`fC^9nDnJDuC}6!8w%G@-0V?pX6wu~yJnZpG*;^McXT7$-PjIXGhMQsS6a;U_KySy` gSUZ04qNppj#{HT&1v(vhrvv#jV7kz#z+Wry13XO@IsgCw literal 0 HcmV?d00001 diff --git a/controllers/index/theme/post.js b/controllers/index/theme/post.js new file mode 100644 index 0000000..16bdfae --- /dev/null +++ b/controllers/index/theme/post.js @@ -0,0 +1,8 @@ +module.exports = (req, res) => { + if (!req.body.theme || (req.body.theme != 'dark' && req.body.theme != 'light')) + return res.json({ success: false, error: 'bad_request' }); + + req.session.theme = req.body.theme; + + return res.json({ success: true }); +} \ No newline at end of file diff --git a/middleware/generateConstantData.js b/middleware/generateConstantData.js index 910ca5d..4fd9508 100644 --- a/middleware/generateConstantData.js +++ b/middleware/generateConstantData.js @@ -94,7 +94,7 @@ module.exports = (req, res, next) => { web: 'https://node101.io' }; - + res.locals.theme = req.session.theme ? req.session.theme : 'dark'; res.locals.HEADER_MENU = HEADER_MENU; res.locals.MONTHS = MONTHS; res.locals.SOCIAL_MEDIA_ICONS = SOCIAL_MEDIA_ICONS; diff --git a/public/css/general/dark.css b/public/css/general/dark.css new file mode 100644 index 0000000..8e8c201 --- /dev/null +++ b/public/css/general/dark.css @@ -0,0 +1,17 @@ +:root { + --main-color: rgba(120, 169, 255, 1); + --warning-color: rgba(192, 3, 3, 1); + --box-color: rgba(6, 6, 9, 1); + --background-color: rgba(13, 13, 15, 1); + --background-color-two: rgba(8, 8, 10, 1); + --border-color: rgba(248, 248, 248, 0.2); + --hover-color: rgba(148, 148, 148, 0.2); + --hover-color-light: rgba(254, 254, 254, 0.8); + --button-text-color: rgba(250, 250, 250, 1); + --text-color: rgba(254, 254, 254, 1); + --text-color-two: rgba(236, 236, 236, 1); + --placeholder-color: rgba(248, 248, 248, 0.6); + + --footer-bottom-color: rgba(1, 1, 2, 1); + --navbar-each-empty-line-background-color: rgba(30, 30, 30, 1) +} \ No newline at end of file diff --git a/public/css/general/general.css b/public/css/general/general.css index b7926dd..8465dfa 100644 --- a/public/css/general/general.css +++ b/public/css/general/general.css @@ -55,19 +55,6 @@ input[type=number] { --content-horizontal-padding: 170px; --box-padding: 30px; --space-character-width: 6px; - - --main-color: rgba(120, 169, 255, 1); - --warning-color: rgba(192, 3, 3, 1); - --box-color: rgba(6, 6, 9, 1); - --background-color: rgba(13, 13, 15, 1); - --background-color-two: rgba(8, 8, 10, 1); - --border-color: rgba(248, 248, 248, 0.2); - --hover-color: rgba(148, 148, 148, 0.2); - --hover-color-light: rgba(254, 254, 254, 0.8); - --button-text-color: rgba(250, 250, 250, 1); - --text-color: rgba(254, 254, 254, 1); - --text-color-two: rgba(236, 236, 236, 1); - --placeholder-color: rgba(248, 248, 248, 0.6); } .display-none { diff --git a/public/css/general/header.css b/public/css/general/header.css index 9d5d32e..b86eb45 100644 --- a/public/css/general/header.css +++ b/public/css/general/header.css @@ -6,8 +6,7 @@ --all-header-search-wrapper-width: 350px; --all-header-search-results-height: 150px; --all-header-search-result-image-size: 20px; - --all-header-language-button-height: 42px; - --all-header-language-button-width: 140px; + --all-header-system-button-height: 32px; --all-footer-left-width: 350px; --all-footer-each-column-width: 200px; } @@ -188,70 +187,60 @@ white-space: nowrap; } -.all-header-language-button { +.all-header-change-theme-button { margin-left: auto; - height: fit-content; - min-height: fit-content; + height: var(--all-header-system-button-height); + min-height: var(--all-header-system-button-height); width: fit-content; min-width: fit-content; display: flex; align-items: center; cursor: pointer; text-decoration: none; - padding: 4px 8px; + padding: 0 8px; border-radius: 3px; } -.all-header-language-button:hover { - background-color: var(--border-color); -} -.all-header-language-button-flag { - height: 18px; - min-height: 18px; - width: auto; - margin-right: 6px; +.all-header-change-theme-button:hover { + background-color: var(--hover-color); } -.all-header-language-button-text { +.all-header-change-theme-button-text { font-weight: 700; - font-size: 18px; + font-size: 16px; color: var(--text-color); } - -.all-header-language-menu { - position: absolute; - top: var(--all-header-language-button-height); - height: fit-content; - min-height: fit-content; - width: var(--all-header-language-button-width); - min-width: var(--all-header-language-button-width); - display: flex; - flex-direction: column; +.all-header-change-theme-button-icon { + fill: var(--text-color); + height: 18px; + min-height: 18px; + width: auto; + margin-left: 8px; } -.all-header-each-language-button { - height: var(--all-header-language-button-height); - min-height: var(--all-header-language-button-height); - width: var(--all-header-language-button-width); - min-width: var(--all-header-language-button-width); +.all-header-language-button { + height: var(--all-header-system-button-height); + min-height: var(--all-header-system-button-height); + width: fit-content; + min-width: fit-content; display: flex; align-items: center; - justify-content: space-between; - padding: 0 10px; - background-color: var(--background-color-two); - margin-bottom: 5px; cursor: pointer; + text-decoration: none; + padding: 0 8px; + border-radius: 3px; } -.all-header-each-language-button:hover { - background-color: rgba(21, 21, 21, 1); +.all-header-language-button:hover { + background-color: var(--hover-color); } -.all-header-each-language-button-text { - font-weight: 600; - font-size: 16px; - color: var(--text-color); +.all-header-language-button-flag { + height: 18px; + min-height: 18px; + width: auto; + margin-right: 6px; } -.all-header-each-language-button-flag { - width: 20px; - min-width: 20px; - height: auto; +.all-header-language-button-text { + font-weight: 700; + font-size: 18px; + color: var(--text-color); } .all-content-wrapper { @@ -372,7 +361,7 @@ display: flex; align-items: center; justify-content: flex-end; - background-color: rgba(1, 1, 2); + background-color: var(--footer-bottom-color); } .all-footer-bottom-text { color: var(--text-color); diff --git a/public/css/general/light.css b/public/css/general/light.css new file mode 100644 index 0000000..c3090ef --- /dev/null +++ b/public/css/general/light.css @@ -0,0 +1,17 @@ +:root { + --main-color: rgba(120, 169, 255, 1); + --warning-color: rgba(192, 3, 3, 1); + --box-color: rgba(212, 212, 212, 1); + --background-color: rgba(256, 256, 256, 1); + --background-color-two: rgba(248, 248, 248, 1); + --border-color: rgba(136, 136, 136, 0.2); + --hover-color: rgba(196, 196, 196, 0.2); + --hover-color-light: rgba(188, 188, 188, 0.8); + --button-text-color: rgba(12, 12, 16, 1); + --text-color: rgba(4, 4, 15, 1); + --text-color-two: rgba(6, 6, 12, 1); + --placeholder-color: rgba(6, 6, 8, 0.6); + + --footer-bottom-color: rgba(224, 224, 224, 1); + --navbar-each-empty-line-background-color: rgba(248, 248, 248, 1) +} \ No newline at end of file diff --git a/public/css/general/navbar.css b/public/css/general/navbar.css index 2f8995c..38c2ca1 100644 --- a/public/css/general/navbar.css +++ b/public/css/general/navbar.css @@ -1,7 +1,6 @@ :root { --general-navbar-width: 350px; --general-navbar-each-empty-line-height: 50px; - --general-navbar-each-empty-line-background-color: rgba(30, 30, 30, 1); --general-navbar-short-writing-height: 70px; --general-navbar-writing-height: 110px; } @@ -64,7 +63,7 @@ min-height: var(--general-navbar-each-empty-line-height); width: 100%; min-width: 100%; - background-color: var(--general-navbar-each-empty-line-background-color); + background-color: var(--navbar-each-empty-line-background-color); margin-bottom: calc(var(--box-padding) / 3); } diff --git a/public/css/general/writing.css b/public/css/general/writing.css index a67a7fe..f25bbb7 100644 --- a/public/css/general/writing.css +++ b/public/css/general/writing.css @@ -98,8 +98,8 @@ margin-bottom: -1px; } .general-each-writing-subtitle { - font-weight: 300; - font-size: 15px; + font-weight: 400; + font-size: 16px; color: var(--text-color); margin-top: calc(var(--box-padding) / 2); display: -webkit-box; diff --git a/public/css/projects/index.css b/public/css/projects/index.css index 641d437..4546c57 100644 --- a/public/css/projects/index.css +++ b/public/css/projects/index.css @@ -88,4 +88,10 @@ min-height: calc(var(--each-project-height) - var(--box-padding) / 2); width: calc(var(--each-project-height) - var(--box-padding) / 2); min-width: calc(var(--each-project-height) - var(--box-padding) / 2); +} + +@media only screen and (max-width: 650px) { + .projects-wrapper { + grid-template-columns: 1fr; + } } \ No newline at end of file diff --git a/public/js/functions/header.js b/public/js/functions/header.js index 4b1bfa2..e830e95 100644 --- a/public/js/functions/header.js +++ b/public/js/functions/header.js @@ -50,6 +50,8 @@ function loadSearchResults(search) { }; window.addEventListener('load', () => { + const theme = JSON.parse(document.getElementById('theme').value); + SOCIAL_MEDIA_ICONS = JSON.parse(document.getElementById('social-media-account-json').value); QUERY = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop) @@ -82,6 +84,17 @@ window.addEventListener('load', () => { window.location.href = url; } + + if (event.target.closest('.all-header-change-theme-button')) { + serverRequest('/theme', 'POST', { + theme: theme == 'dark' ? 'light' : 'dark' + }, res => { + if (!res.success) + return throwError(res.error); + + window.location.reload(); + }); + } }); const allHeaderAnimationMaxHeight = 100; diff --git a/public/js/functions/navbar.js b/public/js/functions/navbar.js index c1b466e..3a3c3f1 100644 --- a/public/js/functions/navbar.js +++ b/public/js/functions/navbar.js @@ -136,6 +136,7 @@ function loadNavbarContent() { window.addEventListener('load', () => { if ( + window.innerWidth > NAVBAR_DISPLAY_NONE_WIDTH && !document.getElementById('navbar-loaded') || !JSON.parse(document.getElementById('navbar-loaded').value) ) diff --git a/public/js/projects/index.js b/public/js/projects/index.js index 4816735..e19e398 100644 --- a/public/js/projects/index.js +++ b/public/js/projects/index.js @@ -11,7 +11,7 @@ function createProject(project) { newProject.href = project.link; const newProjectContentWrapper = document.createElement('div'); - newProjectContentWrapper.classList.add('general-each-item-content-wrapper'); + newProjectContentWrapper.classList.add('each-project-content-wrapper'); const newProjectTitle = document.createElement('h1'); newProjectTitle.classList.add('each-project-title'); @@ -49,11 +49,10 @@ function createProject(project) { newProject.appendChild(newProjectContentWrapper); const newProjectImage = document.createElement('img'); - newProjectImage.classList.add('general-each-item-image'); + newProjectImage.classList.add('each-project-image'); newProjectImage.src = project.image; newProjectImage.alt = project.title; newProjectImage.loading = 'lazy'; - newProject.appendChild(newProjectImage); document.querySelector('.projects-wrapper').appendChild(newProject); diff --git a/routes/indexRoute.js b/routes/indexRoute.js index 6eb9a8c..7d75f8e 100644 --- a/routes/indexRoute.js +++ b/routes/indexRoute.js @@ -13,6 +13,7 @@ const searchGetController = require('../controllers/index/search/get'); const stableGetController = require('../controllers/index/stable/get'); const filterPostController = require('../controllers/index/filter/post'); +const themePostController = require('../controllers/index/theme/post'); router.get( '/', @@ -53,5 +54,10 @@ router.post( generateConstantData, filterPostController ); +router.post( + '/theme', + generateConstantData, + themePostController +); module.exports = router; diff --git a/translations/en.json b/translations/en.json index 901a7f6..d4ee180 100644 --- a/translations/en.json +++ b/translations/en.json @@ -54,5 +54,7 @@ "See more": "See more", "Community": "Community", "Editor's Pick": "Editor's Pick", - "Read, Listen & Watch": "Read, Listen & Watch" + "Read, Listen & Watch": "Read, Listen & Watch", + "Light": "Light", + "Dark": "Dark" } \ No newline at end of file diff --git a/translations/tr.json b/translations/tr.json index 2d448ea..7f4f2a1 100644 --- a/translations/tr.json +++ b/translations/tr.json @@ -39,5 +39,7 @@ "search": "sonuç bulundu", "Exclusive": "Size Özel", "writing": "writing", - "s": "s" + "s": "s", + "Light": "Aydınlat", + "Dark": "Karart" } \ No newline at end of file diff --git a/views/partials/head.pug b/views/partials/head.pug index c9c2e7f..fa01e31 100644 --- a/views/partials/head.pug +++ b/views/partials/head.pug @@ -8,6 +8,10 @@ html(lang='tr') else title library.node101 link(href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700,800' rel='stylesheet') + if theme && theme == 'light' + link(rel='stylesheet' href=`${URL}/css/general/light.css`) + else + link(rel='stylesheet' href=`${URL}/css/general/dark.css`) if includes if includes.meta meta(property='og:type' content='website') diff --git a/views/partials/header.pug b/views/partials/header.pug index c2205f4..9263b1b 100644 --- a/views/partials/header.pug +++ b/views/partials/header.pug @@ -1,5 +1,6 @@ extends ./head block content + input.display-none#theme(value=JSON.stringify(theme)) input.display-none#social-media-account-json(value=JSON.stringify(SOCIAL_MEDIA_ICONS)) .all-wrapper .all-header-wrapper @@ -24,6 +25,13 @@ block content path(d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z') input.all-header-search-input(type='search' name='new-password' placeholder=__('Search') autocomplete='off' value=(search ? search : '')) .all-header-search-input-results-wrapper + .all-header-change-theme-button + if theme && theme == 'light' + span.all-header-change-theme-button-text= __('Dark') + else + span.all-header-change-theme-button-text= __('Light') + svg.all-header-change-theme-button-icon(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512') + path(d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z') if lang == 'tr' a.all-header-language-button(href=`${url}${url.includes('?') ? '&' : '?'}lang=en`) img.all-header-language-button-flag(src=`${URL}/img/flags/en.png` alt='node101 language english') @@ -49,6 +57,13 @@ block content path(d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z') input.all-header-search-input(type='search' name='search' placeholder=__('Search') autocomplete='off' value=(search ? search : '')) .all-header-search-input-results-wrapper + .all-header-change-theme-button + if theme && theme == 'light' + span.all-header-change-theme-button-text= __('Dark') + else + span.all-header-change-theme-button-text= __('Light') + svg.all-header-change-theme-button-icon(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512') + path(d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z') if lang == 'tr' a.all-header-language-button(href=`${url}${url.includes('?') ? '&' : '?'}lang=en`) img.all-header-language-button-flag(src=`${URL}/img/flags/en.png` alt='node101 language english')