NigeriaLogos, an
-
-
+
+
diff --git a/js/data-binding.js b/js/data-binding.js
new file mode 100644
index 0000000..036fa70
--- /dev/null
+++ b/js/data-binding.js
@@ -0,0 +1,14 @@
+const bindedElements = document.querySelectorAll('[bind]');
+bindedElements.forEach(propagatingEl => {
+ propagatingEl.oninput = () => {
+ bindedElements.forEach(receivingEl => {
+ if (receivingEl !== propagatingEl && receivingEl.getAttribute('bind') === propagatingEl.getAttribute('bind')) {
+ if (['SELECT', 'INPUT'].includes(receivingEl.tagName)) {
+ receivingEl.value = propagatingEl.value;
+ } else {
+ receivingEl.innerHTML = propagatingEl.value;
+ }
+ }
+ });
+ };
+});
diff --git a/js/imageLoad.js b/js/imageLoad.js
index 43439cf..37c4544 100644
--- a/js/imageLoad.js
+++ b/js/imageLoad.js
@@ -1,121 +1,210 @@
-const searchbars = document.querySelectorAll('.search input');
+/* eslint-disable no-undef */
const selects = document.querySelectorAll('.select select');
const results = document.querySelector('#results');
const alphabetlink = document.querySelector('.companies-alphabet');
-
-function loadJSON(callback) {
- const xobj = new XMLHttpRequest();
- xobj.overrideMimeType("application/json");
- xobj.open('GET', 'logos.json', true);
- xobj.onreadystatechange = function () {
- if (xobj.readyState == 4) {
- callback(xobj.responseText);
- }
- };
- xobj.send(null);
-}
-
-function sortObjectArray(array, key) {
- return array.sort(function(a1, a2) {
- var b1 = a1[key].toLowerCase();
- var b2 = a2[key].toLowerCase();
- return ((b1 < b2) ? -1 : ((b1 > b2) ? 1 : 0));
- });
-}
-
-
-function isValidURL(url) {
- var pattern = new RegExp(/^(?:http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/);
- return pattern.test(url);
-}
-
-function setLogoCompanyLink(logoArray) {
- logoArray.map((logo) => {
- let logoUrl = logo.url;
-
- if (logoUrl === '' || !isValidURL(logoUrl)) {
- logo.url = `https://www.google.com/search?q=${encodeURIComponent(logo.title)}`;
- logo.urlTitle = `Search for ${logo.title} on Google`;
- } else {
- logo.url = logoUrl;
- logo.urlTitle = `Visit ${logo.title} official website`;
- }
- });
- return;
-}
-
-function createLogos(logoArray) {
- let categories = [];
- let groupanchor = '';
- let logotitle = '';
- let currentanchorchar = '';
-
- sortObjectArray(logoArray, 'title').forEach(logo => {
- // Fix company name that start with number
- if ('0123456789'.includes(logo.title.charAt(0))) logotitle = "#" + logo.title;
- else logotitle = logo.title;
-
- // Set anchor
- if (logotitle.charAt(0).toLowerCase() != currentanchorchar.toLowerCase()) {
- currentanchorchar = logotitle.charAt(0);
- groupanchor = ``;
- alphalinkhtml = `${currentanchorchar}`;
- }
- else{
- groupanchor = '';
- alphalinkhtml = '';
- }
- const html = groupanchor + ` 
${(logo.category+"").replace(","," / ")}
`;
- const main = document.querySelector('main');
- main.insertAdjacentHTML('beforeend', html);
- alphabetlink.insertAdjacentHTML('beforeend', alphalinkhtml);
-
- // Load singular category array
- logo.category.forEach(cat => {
- if (categories.indexOf(cat) === -1)
- categories.push(cat);
- });
- });
-
- // Sort category alphabetically
- categories = categories.sort();
-
- // Load category dropdown
- categories.forEach(cat => {
- const html = ``;
- selects.forEach(select => {
- select.insertAdjacentHTML('beforeend', html);
- });
- });
-}
-
-function createSecondaryAlphabet() {
- const secondaryAlphabet = document.querySelector('.secondary-alphabet');
- const letterACode = 65;
- const letterZCode = 91;
-
- function characterFromCode(code){
- return String.fromCharCode(code);
- }
-
- for (let index = letterACode; index < letterZCode; index++) {
- let letter = characterFromCode(index);
- let html = `${letter}`
- secondaryAlphabet.insertAdjacentHTML('beforeend', html);
- }
-}
-
-function init() {
- // Create logos
- loadJSON(response => {
- const logoArray = JSON.parse(response);
-
- setLogoCompanyLink(logoArray);
-
- createLogos(logoArray);
- results.innerHTML = `${logoArray.length}`
- });
-}
+const modeButtons = document.querySelectorAll('.mode-button,.mode-button-mobile');
+const modeButtonText = document.querySelector('.mode-button .text');
+
+const loadJSON = callback => {
+ const xobj = new XMLHttpRequest();
+ xobj.overrideMimeType('application/json');
+ xobj.open('GET', 'logos.json', true);
+ xobj.onreadystatechange = () => {
+ if (xobj.readyState === 4) {
+ callback(xobj.responseText);
+ }
+ };
+ xobj.send(null);
+};
+
+const sortObjectArray = (array, key) => {
+ return array.sort(function(a1, a2) {
+ const b1 = a1[key].toLowerCase();
+ const b2 = a2[key].toLowerCase();
+
+ // return b1 < b2 ? -1 : b1 > b2 ? 1 : 0;
+ if (b1 === b2) {
+ return 0;
+ }
+ return b1 > b2 ? 1 : -1;
+ });
+};
+
+const isValidURL = url => {
+ let urlInstance;
+ try {
+ urlInstance = new URL(url);
+ } catch (_) {
+ return false;
+ }
+ return urlInstance.protocol === "http:" || urlInstance.protocol === "https:";
+};
+
+const setLogoCompanyLink = logoArray => {
+ logoArray.map(logo => {
+ const logoUrl = logo.url;
+
+ if (logoUrl === '' || !isValidURL(logoUrl)) {
+ logo.url = `https://www.google.com/search?q=${encodeURIComponent(logo.title)}`;
+ logo.urlTitle = `Search for ${logo.title} on Google`;
+ } else {
+ logo.url = logoUrl;
+ logo.urlTitle = `Visit ${logo.title} official website`;
+ }
+
+ return true;
+ });
+};
+
+const createLogos = logoArray => {
+ let categories = [];
+ let groupanchor = '';
+ let logotitle = '';
+ let currentanchorchar = '';
+
+ sortObjectArray(logoArray, 'title').forEach(logo => {
+ // Fix company name that start with number
+ if ('0123456789'.includes(logo.title.charAt(0))) logotitle = `#${logo.title}`;
+ else logotitle = logo.title;
+
+ // Set anchor
+ if (logotitle.charAt(0).toLowerCase() !== currentanchorchar.toLowerCase()) {
+ currentanchorchar = logotitle.charAt(0);
+ groupanchor = ``;
+ alphalinkhtml = `${currentanchorchar}`;
+ } else {
+ groupanchor = '';
+ alphalinkhtml = '';
+ }
+ const html = `${groupanchor} 
${`${logo.category}`.replace(',', ' / ')}
`;
+ const main = document.querySelector('main');
+ main.insertAdjacentHTML('beforeend', html);
+ alphabetlink.insertAdjacentHTML('beforeend', alphalinkhtml);
+
+ // Load singular category array
+ logo.category.forEach(cat => {
+ if (categories.indexOf(cat) === -1) categories.push(cat);
+ });
+ });
+
+ // Sort category alphabetically
+ categories = categories.sort();
+
+ // Load category dropdown
+ categories.forEach(cat => {
+ const html = ``;
+ selects.forEach(select => {
+ select.insertAdjacentHTML('beforeend', html);
+ });
+ });
+};
+
+const createSecondaryAlphabet = () => {
+ const secondaryAlphabet = document.querySelector('.secondary-alphabet');
+ const letterACode = 65;
+ const letterZCode = 91;
+
+ function characterFromCode(code) {
+ return String.fromCharCode(code);
+ }
+
+ for (let index = letterACode; index < letterZCode; index++) {
+ const letter = characterFromCode(index);
+ const html = `${letter}`;
+ secondaryAlphabet.insertAdjacentHTML('beforeend', html);
+ }
+};
+
+// Night Mode
+const getMode = localStorage.getItem('mode') || 'light';
+
+const loadMode = mode => {
+ mode = mode.toLowerCase();
+ if (mode === 'system') {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ loadMode('dark');
+ } else {
+ loadMode('light');
+ }
+ } else if (mode === 'dark') {
+ document.body.className = 'dark-mode';
+ } else {
+ document.body.className = '';
+ }
+};
+
+const updateModeUI = mode => {
+ loadMode(mode);
+ switch (mode.toLowerCase()) {
+ case 'system':
+ modeButtons.forEach(modeButton => {
+ modeButton.className = `${Array.from(modeButton.classList).shift()} light`;
+ modeButton.setAttribute('title', 'Light');
+ });
+ modeButtonText.textContent = 'Light';
+ localStorage.setItem('mode', 'system');
+ break;
+
+ case 'light':
+ modeButtons.forEach(modeButton => {
+ modeButton.className = `${Array.from(modeButton.classList).shift()} dark`;
+ modeButton.setAttribute('title', 'Dark');
+ });
+ modeButtonText.textContent = 'Dark';
+ localStorage.setItem('mode', 'light');
+ break;
+
+ case 'dark':
+ modeButtons.forEach(modeButton => {
+ modeButton.className = `${Array.from(modeButton.classList).shift()} system`;
+ modeButton.setAttribute('title', 'System');
+ });
+ modeButtonText.textContent = 'System';
+ localStorage.setItem('mode', 'dark');
+ break;
+
+ default:
+ break;
+ }
+};
+
+modeButtons.forEach(modeButton => {
+ updateModeUI(getMode, modeButton);
+ modeButton.addEventListener('click', e => {
+ updateModeUI(modeButtonText.textContent, e.target);
+ });
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ const newColorScheme = e.matches ? 'dark' : 'light';
+ if (localStorage.getItem('mode') === 'system') {
+ loadMode(newColorScheme);
+ }
+});
+
+init = () => {
+ // Create logos
+ loadJSON(response => {
+ const logoArray = JSON.parse(response);
+
+ setLogoCompanyLink(logoArray);
+
+ createLogos(logoArray);
+ results.innerHTML = `${logoArray.length}`;
+ });
+};
init();
-createSecondaryAlphabet();
\ No newline at end of file
+createSecondaryAlphabet();
diff --git a/js/scroll.js b/js/scroll.js
index d57df4e..e07b839 100644
--- a/js/scroll.js
+++ b/js/scroll.js
@@ -1,36 +1,38 @@
-(function(){
- const alphabets = document.querySelector('.companies-alphabet');
- const scrollShowLogo = document.querySelector('.scroll-show .site-logo');
- const scrollShowSearchbar = document.querySelector('.scroll-show .searchbar');
- const whiteBG = document.querySelector('.white-bg');
- const secondaryAlphabet = document.querySelector('.secondary-alphabet');
- window.addEventListener('scroll', ()=>{
- if (alphabets.getBoundingClientRect().bottom < 0) {
- whiteBG.style.transform = 'translateY(0)';
- scrollShowLogo.style.opacity = '1';
- scrollShowSearchbar.style.opacity = '1';
- secondaryAlphabet.style.opacity = '1';
- } else {
- whiteBG.style.transform = 'translateY(-100%)';
- scrollShowLogo.style.opacity = '0';
- scrollShowSearchbar.style.opacity = '0';
- secondaryAlphabet.style.opacity = '0';
- }
- });
+(function() {
+ const main = document.querySelector('main');
+ const scrollShow = document.querySelector('.scroll-show');
+ const secondaryAlphabet = document.querySelector('.secondary-alphabet');
+ const scrollShowInput = document.querySelector('.scroll-show input');
+ const scrollShowSelect = document.querySelector('.scroll-show .select');
- const scrollShowInput = document.querySelector('.scroll-show input');
- const scrollShowSelect = document.querySelector('.scroll-show .select');
- function menuAnime() {
- scrollShowInput.addEventListener('focus', ()=> {
- scrollShowSelect.style.transform = 'translateX(0)';
- scrollShowSelect.style.opacity = '1';
- secondaryAlphabet.style.zIndex = '666';
- })
- scrollShowInput.addEventListener('blur', ()=> {
- scrollShowSelect.style.transform = 'translateX(100%)';
- scrollShowSelect.style.opacity = '0';
- secondaryAlphabet.style.zIndex = '668';
- })
- }
- menuAnime();
-})();
\ No newline at end of file
+ const searchDefault = () => {
+ scrollShowSelect.style.transform = 'translateX(100%)';
+ scrollShowSelect.style.opacity = '0';
+ secondaryAlphabet.style.zIndex = '668';
+ };
+ const searchOnFocus = () => {
+ scrollShowSelect.style.transform = 'translateX(0)';
+ scrollShowSelect.style.opacity = '1';
+ secondaryAlphabet.style.zIndex = '666';
+ };
+ const windowOnScroll = () => {
+ if (window.screen.width > 1000) {
+ if (main.getBoundingClientRect().top < 0) {
+ scrollShow.style.display = 'block';
+ } else {
+ scrollShow.style.display = 'none';
+ }
+ } else {
+ scrollShow.removeAttribute('style');
+ }
+ };
+
+ // Initialize states
+ scrollShow.style.display = 'none';
+ searchDefault();
+
+ // Handle events
+ window.addEventListener('scroll', windowOnScroll);
+ scrollShowInput.addEventListener('focus', searchOnFocus);
+ scrollShowInput.addEventListener('blur', searchDefault);
+})();
diff --git a/js/search.js b/js/search.js
index 8779012..f62f8d8 100644
--- a/js/search.js
+++ b/js/search.js
@@ -1,76 +1,74 @@
-// searchbar, select, results - Global variables initialized in imageLoad.js
+/* eslint-disable no-undef */
+// selects, results - Global variables initialized in imageLoad.js
+
const typeResults = document.querySelector('.typed');
-searchbars.forEach(searchbar => {
- searchbar.addEventListener('keyup', (e)=> {
- const typed = e.target.value.toLowerCase();
- typeResults.innerHTML = typed;
- const logos = document.querySelectorAll('main .logo');
- let numberOfResults = 0;
+const searchbars = document.querySelectorAll('.search input');
+let typed = '';
+let numberOfResults = 0;
- logos.forEach(logo => {
- const searchParagraph = logo.lastElementChild;
- const searchTitle = searchParagraph.firstElementChild.textContent;
- const logoCategory = searchParagraph.lastElementChild.textContent;
- const scrollShowSearchbar = document.querySelector('.scroll-show .searchbar');
- const searchbarOpacity = window.getComputedStyle(scrollShowSearchbar).getPropertyValue('opacity');
- let newSelect = searchbarOpacity > 0 ? selects[0] : selects[1];
- let selectedCategory = newSelect.value;
- selects.forEach(select => {
- select.value = selectedCategory;
- });
- searchTermHighlight(logo, typed);
- const isPresent = searchTitle.toLowerCase().includes(typed);
- const categoryMatch = selectedCategory === 'All Categories' || logoCategory.includes(selectedCategory);
- const shouldShow = isPresent && categoryMatch;
-
- logo.style.display = shouldShow ? 'block' : 'none';
- if(shouldShow) numberOfResults += 1;
- });
- results.innerHTML = `${numberOfResults}`
- searchState();
- });
- function searchTermHighlight(logo, term) {
- logoText = logo.querySelector('.logo__text--link');
- logoTextTitle = logoText.textContent;
- logoText.innerHTML = logoTextTitle.replace(new RegExp(term, "gi"), (match) => `${match}`);
- }
-});
+const updateSearchState = () => {
+ const alphabetRow = document.querySelector('.companies-alphabet');
+ const subcopy = document.querySelector('.heading .subcopy');
+ const contributeButton = document.querySelector('.heading .contribute');
+ const searchResultDisplay = document.querySelector('.result');
+ const mediaQuery = window.matchMedia('(max-width: 880px)');
+ searchResultDisplay.style.transform = mediaQuery.matches ? 'translateY(-18px)' : 'translateY(-45px)';
+ if (numberOfResults > 0 && typed) {
+ alphabetRow.style.display = 'none';
+ subcopy.style.display = 'none';
+ searchResultDisplay.style.opacity = '1';
+ contributeButton.style.transform = 'translateY(-4vh)';
+ } else {
+ alphabetRow.style.display = 'flex';
+ subcopy.style.display = 'block';
+ searchResultDisplay.style.opacity = '0';
+ contributeButton.style.transform = 'translateY(0)';
+ }
+};
+
+const highlightSearchTerm = (logo, term) => {
+ const logoText = logo.querySelector('.logo__text--link');
+ const logoTextTitle = logoText.textContent;
+ logoText.innerHTML = logoTextTitle.replace(new RegExp(term, 'gi'), match => `${match}`);
+};
+
+const onSearch = e => {
+ // Check if event is null -> select (down below)
+ if (e) {
+ typed = e.target.value.toLowerCase();
+ typeResults.innerHTML = typed;
+ }
+
+ numberOfResults = 0;
-function searchState() {
- const alphabetRow = document.querySelector('.companies-alphabet');
- const subcopy = document.querySelector('.subcopy');
- const contributeButton = document.querySelector('.contribute');
- const searchResultDisplay = document.querySelector('.result');
- const mediaQuery = window.matchMedia( '(max-width: 880px)' );
- searchbars.forEach(searchbar => {
- if (searchbar.value) {
- alphabetRow.style.display = 'none';
- subcopy.style.display = 'none';
- searchResultDisplay.style.opacity = '1';
- mediaQuery.matches ? searchResultDisplay.style.transform = 'translateY(-18px)'
- : searchResultDisplay.style.transform = 'translateY(-45px)';
- contributeButton.style.transform = 'translateY(-4vh)';
-
- } else {
- alphabetRow.style.display = 'flex';
- subcopy.style.display = 'block';
- searchResultDisplay.style.opacity = '0';
- contributeButton.style.transform = 'translateY(0)';
- }
- });
-}
+ // This is initialized here and not globally, ensuring dom data is loaded without awaiting
+ const logos = document.querySelectorAll('main .logo');
+ logos.forEach(logo => {
+ const searchParagraph = logo.lastElementChild;
+ const searchTitle = searchParagraph.firstElementChild.textContent;
+ const logoCategory = searchParagraph.lastElementChild.textContent;
+ const isPresent = searchTitle.toLowerCase().includes(typed);
-function selectReload() {
- const enterPressed = new KeyboardEvent('keyup', {
- key: 'Enter'
- });
- selects.forEach(select => {
- select.addEventListener('change', ()=> {
- searchbars.forEach(searchbar => {
- searchbar.dispatchEvent(enterPressed);
- })
- });
- });
-}
+ // all select are binding allowing for either [0] or [1]
+ const selectedCategory = selects[0].value;
+ const categoryMatch = selectedCategory === '' || logoCategory.includes(selectedCategory);
-selectReload();
\ No newline at end of file
+ const shouldShow = isPresent && categoryMatch;
+ logo.style.display = shouldShow ? 'block' : 'none';
+ numberOfResults += shouldShow ? 1 : 0;
+ highlightSearchTerm(logo, typed);
+ });
+
+ results.innerHTML = numberOfResults;
+ updateSearchState();
+};
+
+searchbars.forEach(searchBar => {
+ searchBar.addEventListener('input', onSearch);
+});
+
+selects.forEach(select => {
+ select.addEventListener('input', () => {
+ onSearch(null);
+ });
+});
diff --git a/package-lock.json b/package-lock.json
index f67021c..a914c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6182,4 +6182,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6e0e5c2..810bdd0 100644
--- a/package.json
+++ b/package.json
@@ -47,4 +47,4 @@
"pre-commit": "lint-staged"
}
}
-}
+}
\ No newline at end of file
diff --git a/scss/abstracts/_colors.scss b/scss/abstracts/_colors.scss
index ef04dcc..988685a 100644
--- a/scss/abstracts/_colors.scss
+++ b/scss/abstracts/_colors.scss
@@ -6,4 +6,23 @@ $col-grey-2: #74848A;
$col-grey-3: #C4C4C4;
$col-grey-4: #F9F9F9;
-$col-white: #FFFFFF;
\ No newline at end of file
+$col-white: #FFFFFF;
+
+/* dm -Dark Mode */
+$dm-fg-color-1: #e5e0d8;
+$dm-fg-color-2: #a59d8f;
+$dm-fg-color-3: #9a9081;
+$dm-bg-color-1: #5b5f13;
+$dm-bg-color-2: #15539c;
+$dm-bg-color-3: #0b0c0c;
+$dm-bg-color-4: #20a788;
+$dm-bg-color-5: #242525;
+$dm-bg-color-6: #272828;
+$dm-ph-color: #b2aa9e;
+$dm-border-color-1: #776f62;
+$dm-border-color-2: #21af8e;
+$dm-border-color-3: #4a4d4e;
+$dm-outline-color-1: #16694e;
+$dm-outline-color-2: #21af8e;
+$dm-tdecor-color-1: #4febc7;
+$dm-tdecor-color-2: #21af8e;
diff --git a/scss/layout/_background.scss b/scss/layout/_background.scss
index b27dec7..b642165 100644
--- a/scss/layout/_background.scss
+++ b/scss/layout/_background.scss
@@ -19,12 +19,8 @@
top: 0;
left: 0;
}
- &--thick {
- background-color: $col-green-2;
- width: 11.8%;
- height: 100%;
- }
}
+
&__stripes {
position: absolute;
top: 0;
@@ -35,6 +31,7 @@
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
}
+
&__stripe {
border-right: .035rem $col-grey-3;
opacity: .6;
@@ -48,4 +45,4 @@
}
}
-}
\ No newline at end of file
+}
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index e0f7ce7..d8b97e3 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -23,6 +23,7 @@ header {
}
}
}
+
.searchbar {
display: flex;
width: 35.9vw;
@@ -60,7 +61,8 @@ header {
padding-left: 1em;
}
}
- .select{
+
+ .select {
width: calc(35% - 2px); // account for the margin on the input
& select {
@@ -87,10 +89,11 @@ header {
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
-
+
&::-ms-expand {
display: none;
}
+
&:focus,
&:active {
outline: $col-green-2;
@@ -98,6 +101,7 @@ header {
}
}
}
+
h1 {
min-width: 500px;
position: absolute;
@@ -108,12 +112,13 @@ header {
color: inherit;
text-decoration-color: $col-green-1;
- &:hover{
+ &:hover {
text-decoration-color: inherit;
}
}
}
- .visuallyhidden{
+
+ .visuallyhidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
@@ -122,12 +127,57 @@ header {
width: 1px;
overflow: hidden;
}
+
.subcopy {
position: absolute;
// top: 22vh;
bottom: 0;
margin-bottom: 80px;
}
+
+ .mode-button {
+ margin-left: 10px;
+ padding: 2px 5px;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ border-radius: 2px;
+ transition: .2s all ease-in-out;
+
+ &.dark {
+ .icon {
+ &.dark-mode {
+ display: inline;
+ }
+ }
+ }
+
+ &.light {
+ .icon {
+ &.light-mode {
+ display: inline;
+ }
+ }
+ }
+
+ &.system {
+ .icon {
+ &.system-mode {
+ display: inline;
+ }
+ }
+ }
+
+ .icon {
+ width: 1em;
+ display: inline;
+ margin-right: 5px;
+ position: relative;
+ top: 0.15em;
+ display: none;
+ }
+ }
+
.contribute {
position: absolute;
cursor: pointer;
@@ -142,6 +192,7 @@ header {
border-radius: 4px;
transition: .2s all ease-in-out;
}
+
.white-bg {
width: 100%;
height: 10%;
@@ -149,27 +200,26 @@ header {
position: fixed;
top: 0;
z-index: 665;
- transform: translateY(-100%);
transition: all .25s cubic-bezier(0.19, 1, 0.22, 1);
}
+
.scroll-show {
height: 90px;
position: absolute;
- & .site-logo{
+ & .site-logo {
position: fixed;
- top: 0;
+ top: 0;
z-index: 666;
transform: scale(.6) translateX(-35%);
- opacity: 0;
transition: all .2s ease-in-out;
}
+
& .searchbar {
position: fixed;
top: 25px;
right: 12.5%;
- z-index: 666;
- opacity: 0;
+ z-index: 666;
transition: all .2s ease-in-out;
& input {
@@ -179,12 +229,13 @@ header {
min-width: 240px;
transition: all .2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
+
& input:focus {
width: 100%;
}
}
+
& .select {
- opacity: 0;
transform: translateX(100%);
transition: all .2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
@@ -200,15 +251,16 @@ header {
}
}
+
.secondary-alphabet {
display: flex;
justify-content: space-between;
position: fixed;
width: 53%;
- top: 35px;
+ top: 35px;
left: 18%;
z-index: 668;
- opacity: 0;
+
& a {
text-decoration: none;
color: inherit;
@@ -217,13 +269,59 @@ header {
}
}
}
- .contribute-mobile {
- color: $col-grey-1;
- text-decoration-color: $col-green-1;
+
+ .right-nav {
position: absolute;
top: 4.5%;
right: 8%;
- font-size: 150%;
display: none;
+
+ .mode-button-mobile {
+ margin-right: 5px;
+ padding: 2px 5px;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ border-radius: 2px;
+ transition: .2s all ease-in-out;
+
+ &.dark {
+ .icon {
+ &.dark-mode {
+ display: inline;
+ }
+ }
+ }
+
+ &.light {
+ .icon {
+ &.light-mode {
+ display: inline;
+ }
+ }
+ }
+
+ &.system {
+ .icon {
+ &.system-mode {
+ display: inline;
+ }
+ }
+ }
+
+ .icon {
+ width: 1em;
+ display: inline;
+ position: relative;
+ top: 0.15em;
+ display: none;
+ }
+ }
+
+ .contribute-mobile {
+ color: $col-grey-1;
+ text-decoration-color: $col-green-1;
+ font-size: 150%;
+ }
}
-}
\ No newline at end of file
+}
diff --git a/scss/layout/_night-mode.scss b/scss/layout/_night-mode.scss
new file mode 100644
index 0000000..85c620d
--- /dev/null
+++ b/scss/layout/_night-mode.scss
@@ -0,0 +1,259 @@
+body.dark-mode {
+ border-color: $dm-border-color-1;
+ color: $dm-fg-color-1;
+}
+
+.dark-mode {
+ ::placeholder {
+ color: $dm-ph-color;
+ }
+
+ input {
+ color: $dm-fg-color-1;
+
+ &:-webkit-autofill {
+ background-color: $dm-bg-color-1 !important;
+ color: $dm-fg-color-1 !important;
+ }
+ }
+
+ select {
+ &:-webkit-autofill {
+ background-color: $dm-bg-color-1 !important;
+ color: $dm-fg-color-1 !important;
+ }
+ }
+
+ &::selection {
+ background-color: $dm-bg-color-2 !important;
+ color: $dm-fg-color-1 !important;
+ }
+
+ &::-moz-selection {
+ background-color: $dm-bg-color-2 !important;
+ color: $dm-fg-color-1 !important;
+ }
+
+ header {
+ .searchbar {
+ .search {
+ input {
+ outline-color: initial;
+ border-color: $dm-border-color-2;
+ background-color: $dm-bg-color-3;
+ background-image: url(../images/icons/search.svg);
+ }
+ }
+
+ .select {
+ select {
+ color: $dm-fg-color-1;
+ border-color: $dm-border-color-2;
+ background-color: $dm-bg-color-4;
+ background-image: url(../images/icons/dropdown_button.svg);
+
+ &:focus {
+ outline-color: $dm-outline-color-1;
+ }
+
+ &:active {
+ outline-color: $dm-outline-color-1;
+ }
+ }
+ }
+ }
+
+ h1 {
+ a {
+ color: inherit;
+ text-decoration-color: $dm-tdecor-color-1;
+
+ &:hover {
+ text-decoration-color: inherit;
+ }
+ }
+ }
+
+ .visuallyhidden {
+ border-color: initial;
+ }
+
+ .mode-button,
+ .mode-button-mobile {
+ border-color: $dm-border-color-2;
+ background-color: $dm-bg-color-4;
+ color: $dm-fg-color-1;
+ }
+
+ .contribute {
+ background-color: $dm-bg-color-4;
+ color: $dm-fg-color-1;
+ outline-color: initial;
+ border-color: initial;
+ }
+
+ .white-bg {
+ background-color: $dm-bg-color-5;
+ }
+
+ .scroll-show {
+ .select {
+ &::before {
+ background-color: $dm-bg-color-5;
+ }
+ }
+
+ .secondary-alphabet {
+ a {
+ text-decoration-color: initial;
+ color: inherit;
+ }
+ }
+ }
+
+ .contribute-mobile {
+ color: $dm-fg-color-2;
+ text-decoration-color: $dm-tdecor-color-1;
+ }
+ }
+
+ .background {
+ background-color: $dm-bg-color-5;
+ }
+
+ .background__left--thin {
+ background-color: $dm-bg-color-4;
+ }
+
+ .background__left--thick {
+ background-color: $dm-bg-color-3;
+ }
+
+ .background__stripe {
+ border-right-color: $dm-border-color-3;
+ }
+
+ .to-top__bg {
+ background-color: $dm-bg-color-5;
+ border-color: $dm-border-color-2;
+ }
+
+ .to-top__icon {
+ background-color: $dm-bg-color-4;
+
+ &::after {
+ background-color: inherit;
+ }
+
+ &::before {
+ background-color: inherit;
+ }
+ }
+
+ .to-top {
+ &:hover {
+ >.to-top__bg {
+ background-color: $dm-bg-color-4;
+
+ >.to-top__icon {
+ background-color: $dm-bg-color-5;
+ }
+ }
+ }
+ }
+
+ .back-to-top {
+ background-color: $dm-bg-color-3;
+ color: $dm-fg-color-2;
+ border-left-color: $dm-border-color-2;
+
+ .up-arrow {
+ background-color: $dm-bg-color-4;
+
+ &::before {
+ background-color: inherit;
+ }
+
+ &::after {
+ background-color: inherit;
+ }
+ }
+ }
+
+ .logo {
+ border-color: transparent;
+ }
+
+ .logo__holder {
+ background-color: $dm-bg-color-6;
+ }
+
+ .logo__text--link {
+ color: inherit;
+ text-decoration-color: initial;
+
+ &:hover {
+ text-decoration-color: initial;
+ }
+ }
+
+ .logo__download__overlay {
+ background-color: $dm-bg-color-3;
+ border-color: $dm-border-color-2;
+
+ a {
+ color: inherit;
+ text-decoration-color: initial;
+ }
+ }
+
+ .logo__download__overlay--svg {
+ background-color: transparent;
+
+ &:hover {
+ color: $dm-fg-color-1;
+ background-color: $dm-bg-color-4;
+ }
+ }
+
+ .logo__download__overlay--png {
+ background-color: transparent;
+
+ &:hover {
+ color: $dm-fg-color-1;
+ background-color: $dm-bg-color-4;
+ }
+ }
+
+ .totopbutton {
+ border-color: initial;
+ color: $dm-fg-color-1;
+ background-color: $dm-bg-color-4;
+ }
+
+ .companies-alphabet {
+ border-bottom-color: $dm-border-color-3;
+ }
+
+ .companies-alphabet-link {
+ text-decoration-color: initial;
+ }
+
+ a.companies-alphabet-link {
+ color: $dm-fg-color-2;
+ }
+
+ .result {
+ color: $dm-fg-color-3;
+ }
+
+ .typed {
+ color: $dm-fg-color-2;
+ }
+
+ @media screen and (max-width: 880px) {
+ .companies-alphabet {
+ border-bottom-color: initial;
+ }
+ }
+}
diff --git a/scss/main.scss b/scss/main.scss
index da62bc6..aef6535 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -13,3 +13,5 @@
@import 'responsive/header';
@import 'responsive/section';
@import 'responsive/footer';
+
+@import 'layout/night-mode';
diff --git a/scss/responsive/_header.scss b/scss/responsive/_header.scss
index 1acbf0e..e29b63b 100644
--- a/scss/responsive/_header.scss
+++ b/scss/responsive/_header.scss
@@ -8,6 +8,7 @@
}
}
}
+
@media screen and (max-width: 1350px) {
header {
.scroll-show {
@@ -18,6 +19,7 @@
}
}
}
+
@media screen and (max-width: 1100px) {
header {
.scroll-show {
@@ -27,6 +29,7 @@
}
}
}
+
@media screen and (max-width: 1000px) {
header {
.scroll-show {
@@ -34,21 +37,34 @@
}
}
}
+
@media screen and (max-width: 880px) {
- header{
+ .mode-button {
+ display: none;
+ }
+
+ header {
width: 90vw;
+
.contribute {
display: none;
}
+
+ .right-nav {
+ display: flex;
+ }
+
.contribute-mobile {
display: block;
}
+
.subcopy {
width: 100%;
top: 22vh;
margin-bottom: 0;
text-align: center;
}
+
.heading {
height: 45vw;
@@ -57,6 +73,7 @@
transform: translateX(-56%);
}
}
+
.searchbar {
flex-direction: column;
justify-content: space-between;
@@ -66,7 +83,7 @@
right: 50%;
transform: translateX(50%);
bottom: 3vw;
-
+
.search {
width: 100%;
margin-left: -1.2%;
@@ -83,19 +100,21 @@
border-radius: 5px;
margin-left: 5px;
}
+
.results {
top: 65px;
}
}
-
+
.select {
width: 100%;
& select {
border-radius: 5px;
}
- }
+ }
}
+
h1 {
top: 10vw;
text-align: center;
@@ -106,13 +125,15 @@
}
@media screen and (max-width: 600px) {
- header{
+ header {
.heading {
height: 80vw;
}
+
.searchbar {
bottom: 18vw;
width: 74vw;
+
.search {
margin-left: -2%;
@@ -120,20 +141,23 @@
font-size: 16px;
padding: .45em 0 .3em 1em;
}
+
.results {
right: 50%;
transform: translateX(60%);
}
}
+
.select {
& select {
font-size: 16px;
}
- }
+ }
}
+
h1 {
top: 20vw;
font-size: 16px;
}
}
-}
\ No newline at end of file
+}
${(logo.category+"").replace(","," / ")}
${`${logo.category}`.replace(',', ' / ')}