Skip to content

Commit

Permalink
Merge pull request #70 from bellshade/staging
Browse files Browse the repository at this point in the history 
Staging
  • Loading branch information
@dipras
dipras authored Nov 28, 2021
2 parents d01216c + 3d6796d commit 2fc65ce
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 23 deletions.
78 changes: 58 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,37 +29,59 @@
<meta property="og:image:height" content="856" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body class="bg-gray-100">
<body class="bg-gray-100 dark:bg-gray-900 dark:text-white">
<!-- Wrapper -->
<div class="container max-w-6xl mx-auto">
<!-- Navbar -->
<nav class="z-10 fixed left-0 right-0 flex flex-wrap lg:flex-nowrap items-center justify-evenly w-full py-2 px-5 lg:px-32 bg-white">
<a href="#" class="p-2 mr-4 flex items-center">
<img class="w-40 lg:w-60" src="/nav-logo-light.jpg" alt="bellshade" title="Bellshade - Learn with Our Community" />
</a>
<button class="inline-flex p-2 text-gray-700 bg-gray-100 text-lg hover:bg-gray-900 rounded lg:hidden ml-auto mr-4 hover:text-white outline-none nav-toggler" data-target="#navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg>
</button>
<nav class="z-10 fixed left-0 right-0 flex flex-wrap lg:flex-nowrap items-center justify-evenly w-full py-2 px-5 lg:px-32 bg-white dark:bg-black">
<div class="flex flex-row justify-between md:justify-start">
<a class="lg:hidden lg:inline-block lg:w-auto px-3 py-2 mt-2.5 rounded text-gray-700 md:mt-6 md:mr-32">
<div class="flex items-center justify-start w-full mb-1" id="toggle">
<label for="toggleB" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleB" class="sr-only" />

<div class="doticon w-11 h-11 rounded-full transition"></div>
</div>
</label>
</div>
</a>
<a href="#" class="p-2 md:-mr-4 mr-4 flex items-center">
<img class="w-30 lg:w-60 lg:h-16 md:h-24 md:w-auto h-16" src="/nav-logo-light2.png" id="navImg" alt="bellshade" title="Bellshade - Learn with Our Community" />
</a>

<div class="hidden w-full lg:inline-flex lg:flex-grow lg:w-full lg:justify-center" id="navigation">
<button
class="inline-flex md:ml-32 p-2 dark:bg-black dark:text-white text-gray-700 bg-gray-100 text-lg hover:bg-gray-900 rounded lg:hidden ml-auto mr-1 hover:text-white outline-none nav-toggler w-11 h-11 mt-4 md:mt-8"
data-target="#navigation"
>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
</button>
</div>
<div class="hidden w-full lg:inline-flex lg:flex-grow lg:w-full lg:justify-center lg:ml-0" id="navigation">
<div class="lg:inline-flex lg:flex-row lg:w-auto w-full lg:items-center items-start text-lg flex flex-col lg:h-auto">
<a href="#homes" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<a href="#homes" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Home</span>
</a>
<a href="#about" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<a href="#about" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>About</span>
</a>
<a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<a href="#" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Projects</span>
</a>
<a href="#team" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<a href="#team" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Our Team</span>
</a>
<a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<a href="#" class="dark:text-white dark:hover:bg-white dark:hover:text-black lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-700 items-center justify-center hover:bg-gray-900 hover:text-white">
<span>Contact</span>
</a>

<a
href="https://github.com/bellshade"
target="_blank"
Expand All @@ -69,11 +91,27 @@
>
</div>
</div>
<a class="hidden lg:inline-block lg:w-auto w-full px-3 py-2 rounded text-gray-700 mt-2">
<div class="flex items-center justify-center w-full mb-1" id="toggle">
<label for="toggleLg" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleLg" class="sr-only" />
<!-- line -->
<div class="block bg-gray-600 w-14 h-8 rounded-full" id="line"></div>
<!-- dot -->
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
</div>
</label>
</div>
</a>

<a
href="https://github.com/bellshade"
target="_blank"
rel="noopener noreferrer"
class="hidden text-white lg:inline-block px-4 py-1 lg:ml-10 bg-blue-600 text-lg hover:bg-gray-900 rounded lg:right-8 hover:text-white outline-none"
class="hidden text-white lg:inline-block px-4 py-1 lg:ml-4 bg-blue-600 text-lg hover:bg-gray-900 rounded lg:right-8 hover:text-white outline-none"
>Github</a
>
</nav>
Expand All @@ -94,7 +132,7 @@
<!-- Carousel -->
<div class="page" data-modal-state="closed">
<div class="container-page flex flex-col">
<div class="flex items-center justify-center pt-16 pb-5">
<div class="flex items-center justify-center pt-16 pb-5 mt-20">
<h1 class="tagline font-extrabold uppercase text-center">
Learn with Our <br />
Community
Expand Down Expand Up @@ -217,7 +255,7 @@ <h1 class="tagline font-extrabold uppercase text-center">
</div>
<div class="overlay"></div>
<div class="modal-wrapper flex">
<div class="modal">
<div class="modal dark:bg-gray-900 dark:text-gray-100">
<button class="modal__close-button" type="button">
<svg class="icon icon-cross">
<use xlink:href="#icon-cross"></use>
Expand Down Expand Up @@ -289,7 +327,7 @@ <h1 class="text-6xl font-extrabold top-0">Meet Our Team</h1>
</div>
</main>

<footer class="bg-blue-600 text-white mt-24 rounded-t-2xl text-center p-4">
<footer class="bg-blue-600 dark:bg-blue-300 dark:text-black text-white mt-24 rounded-t-2xl text-center p-4">
<h1 class="mb-2 text-xl font-bold">Bellshade</h1>
<p>&copy; 2021 Bellshade. All rights reserved</p>
</footer>
Expand Down
40 changes: 40 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,3 +178,43 @@ getPublicMembers().then((members) => {
const appender = appendMember(membersContainer, observer)
members.forEach(appender)
})

// darkmode switch
document.querySelectorAll('input[type="checkbox"]').forEach((data) => {
data.addEventListener('change', (event) => {
bgSwitch(event)
})
})

const html = document.querySelector('html')
const toggle = document.querySelectorAll("input[type='checkbox']")
const imgNav = document.getElementById('navImg')
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
html.classList.add('dark')
imgNav.setAttribute('src', '/nav-logo-dark.png')
toggle.forEach((data) => {
data.checked = true
})
} else {
html.classList.remove('dark')
imgNav.setAttribute('src', '/nav-logo-light2.png')
toggle.forEach((data) => {
data.checked = false
})
}

const bgSwitch = (event) => {
if (event.target.checked) {
html.classList.add('dark')
imgNav.setAttribute('src', '/nav-logo-dark.png')
localStorage.theme = 'dark'
} else {
html.classList.remove('dark')
imgNav.setAttribute('src', '/nav-logo-light2.png')
localStorage.theme = 'light'
}
}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"husky": "^7.0.0",
"js-tokens": "^7.0.0",
"lint-staged": "^11.1.2",
"postcss": "^8.3.11",
"prettier": "^2.4.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
Expand Down
Binary file added public/nav-logo-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/nav-logo-light2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 43 additions & 1 deletion src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ html {
}

.modal__content {
@apply p-8 text-gray-600 leading-6;
@apply p-8 text-gray-600 dark:text-white leading-6;
}

/* [data-modal-state='closed'] .modal-wrapper, */
Expand Down Expand Up @@ -227,3 +227,45 @@ html {
.group {
scroll-margin-top: 100px;
}

input:checked ~ .dot {
transform: translateX(100%);
}

input:checked ~ #line {
background-color: lightskyblue;
}

input:checked ~ #line::before {
content: '\01F31E';
margin-top: 5px !important;
position: absolute;
}

input:not(:checked) ~ #line::before {
content: '\01F319';
transform: translateX(100%);
position: absolute;
margin-top: 5px;
margin-left: 5px;
}

.doticon {
width: 40px;
height: 40px;
font-size: 30px;
}

input:not(:checked) ~ .doticon::after {
width: 35px !important;
height: 35px !important;
content: '\01F319';
font-size: 30px;
}

input:checked ~ .doticon::after {
content: '\01F31E';
width: 35px !important;
height: 35px !important;
font-size: 30px;
}
2 changes: 1 addition & 1 deletion src/js/appendMember.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const appendMember = (membersContainer, observer) => (res) => {
<a class="absolute bottom-0 right-0 flex justify-center items-center rounded-full w-6 h-6 bg-white" href="${
res.html_url
}" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
purge: ['./index.html', './main.js', './src/js/**/*.js'],
darkMode: false, // or 'media' or 'class'
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
screens: {
Expand Down

0 comments on commit 2fc65ce

Please sign in to comment.