Skip to content

Commit

Permalink
i
Browse files Browse the repository at this point in the history
  • Loading branch information
@i1li
i1li committed Nov 29, 2024
1 parent 8e096f2 commit 2d8a718
Show file tree
Hide file tree
Showing 12 changed files with 83 additions and 93 deletions.
2 changes: 2 additions & 0 deletions dist/bundle-8c260.css
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/bundle-8c260.js
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions dist/bundle-b47a0.css
View file

This file was deleted.

2 changes: 0 additions & 2 deletions dist/bundle-b47a0.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion dist/index.html
View file

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions src/css/dark-mode.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
body.dark-mode {color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,.3), 0 0 .3em rgba(22,22,22,.5), 0 0 1em rgba(255,0,0,.4);}
a:link.dark-mode, a:visited.dark-mode {color: #00eeff;
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
filter: drop-shadow(0 0 .1em rgba(255, 100, 100, .3));
text-decoration: underline dashed;
text-decoration-thickness: 1px;
padding: .1em;
margin: .1em;
padding-top:0;
padding-bottom:0;
border: .1em rgba(22,22,22,.15) groove;
background: linear-gradient(to top, rgba(22,222,222, .1), rgba(222, 222, 222, 0.1));
border-radius: 1em;}
a:hover.dark-mode {text-decoration: dotted underline;
text-decoration-thickness: 2px;
border: .1em rgba(22,22,22,.1) ridge;
background: linear-gradient(to top, rgba(22,22,222, .5), rgba(222, 222, 222, .1));}
a, a.dark-mode, button {font-weight:600; opacity: .8;}
#draw.dark-mode a {color: #00eeff;
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
filter: drop-shadow(0 0 .1em rgba(255, 100, 100, .3));
text-decoration: underline dashed;
text-decoration-thickness: 1px;
padding: .1em;
margin: .1em;
padding-top:0;
padding-bottom:0;
border: .1em rgba(22,22,22,.15) groove;
background: linear-gradient(to top, rgba(22,222,222, .1), rgba(222, 222, 222, 0.1));
border-radius: 1em;}
#draw.dark-mode a:hover {text-decoration: dotted underline;
text-decoration-thickness: 2px;
border: .1em rgba(22,22,22,.1) ridge;
background: linear-gradient(to top, rgba(22,22,222, .5), rgba(222, 222, 222, .1));}
.article-header.dark-mode {background-image: url("../img/bginvert.png"); filter: opacity(85%) brightness(50%) contrast(250%) saturate(250%)}
.article-content-wrapper.dark-mode {background-image: url("../img/bginvert.png");
background-attachment: fixed;
border: inset .15em rgba(100,100,100,.2);
border-bottom:solid .1em rgba(255,0,0,.4);
border-top:0;}
.article-content:hover.dark-mode {background: radial-gradient(rgba(0, 0, 0, .2), rgba(128, 128, 128, 0.2));}
.article-content.dark-mode {border: solid 1px rgba(255,0,0,.2);
background-image: url("../img/bg.png");
background-attachment: scroll;
background-size: 22000px;
background-position-x: -200px;
padding: 0 0 1em .2em;
margin:0;
backdrop-filter: brightness(70%) contrast(200%) grayscale(50%) blur(.1em) saturate(150%);}
89 changes: 17 additions & 72 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,25 @@
opacity: 1;
}
#header-verse {
position: fixed;
left: 20%;
top: -.8em;
width: 80%;
font-size: 92%;
position: absolute;
left: 7%;
top: -.6em;
width: 93%;
font-size: 95%;
line-height: 90%;
text-align: center;
opacity: .7;
opacity: .65;
transition: all 1s;
text-shadow:
0 0 1px currentColor,
0 0 2px rgba(0, 0, 255, 0.8),
0 0 3px currentColor,
0 0 4px currentColor;
0 0 4px currentColor,
0 0 5px rgba(255, 0, 0, 0.8),
0 0 2px rgb(255, 255, 255),
0 0 3px rgb(255, 255, 255);
}
.scrolled-down #header-verse, .scrolled-down #next-verse { display:none;}
#next-verse {opacity: .5;}
.scrolled-down #header-verse {display:none;}
header:hover {background: linear-gradient(to bottom, rgba(255, 0, 0, .4) 0%, rgba(0, 222, 0, .15) 6%, rgba(128, 22, 128, 0.3) 94%, rgba(255, 0, 0, .4) 100%);}
header {position: fixed;
top: 0;
Expand Down Expand Up @@ -72,10 +76,6 @@ header {position: fixed;
top: 0;
left: 0;
height: 6em;
text-align: center!important;
align-content: start!important;
vertical-align: top!important;
justify-content: center!important;
}
.scrolled-down h1 {font-size: 140%; position: absolute; left:0; filter: drop-shadow(0 0 1rem white);}
.scrolled-down .img-header {height: 2.9rem; filter: drop-shadow(0 0 1rem rgba(127, 127, 127, 0.45))}
Expand All @@ -94,9 +94,9 @@ header {position: fixed;
font-size: 120%;
transition: all .2s ease-in-out;
z-index: 2;}
#site-title {margin-left:-.1em; display: flex; align-items: center;} .scrolled-down #site-title {margin-top: -.25em;}
#site-title {margin-left:-.1em; margin-top:.3em;display: flex; align-items: center;} .scrolled-down #site-title {margin-top: -.25em;}
#site-title-text:hover {opacity:.77;}
#site-title-text {opacity:.55;}
#site-title-text {opacity:.55; margin-top:.3em}
.img-header {height: 4rem; transition: all 1s ease;
filter: drop-shadow(0 0 1rem rgba(127, 127, 127, 0.75));}
.img-header:hover {filter: invert(100%) !important; transition: all .5s ease-in-out; scale:1.07;}
Expand Down Expand Up @@ -140,18 +140,6 @@ a:link, a:visited {text-shadow: 1px 2px 1em rgba(141, 0, 12, .5), 0 0 .3em rgba(
border: .1em rgba(22,22,22,.15) groove;
background: linear-gradient(to bottom, rgba(222,222,222, .5), rgba(128, 128, 128, 0.1));
border-radius: 1em;}
a:link.dark-mode, a:visited.dark-mode {color: #00eeff;
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
filter: drop-shadow(0 0 .1em rgba(255, 100, 100, .3));
text-decoration: underline dashed;
text-decoration-thickness: 1px;
padding: .1em;
margin: .1em;
padding-top:0;
padding-bottom:0;
border: .1em rgba(22,22,22,.15) groove;
background: linear-gradient(to top, rgba(22,222,222, .1), rgba(222, 222, 222, 0.1));
border-radius: 1em;}
h1 {margin:0;
padding:0;
text-align: left;
Expand Down Expand Up @@ -181,38 +169,15 @@ body {transition: all .3s ease-in-out;
max-width: 100vw;
overflow-x: hidden;
text-shadow: 1px 1px 1px rgba(222,222,222,.3), 0 0 .3em rgba(255,255,255,.5), 0 0 1em rgba(255,255,0,.1);}
body.dark-mode {
color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,.3), 0 0 .3em rgba(22,22,22,.5), 0 0 1em rgba(255,0,0,.4);}
.unstyled-link {all: unset !important; cursor: pointer !important;}
a:hover.dark-mode {text-decoration: dotted underline;
text-decoration-thickness: 2px;
border: .1em rgba(22,22,22,.1) ridge;
background: linear-gradient(to top, rgba(22,22,222, .5), rgba(222, 222, 222, .1));}
#draw.dark-mode a {color: #00eeff;
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
filter: drop-shadow(0 0 .1em rgba(255, 100, 100, .3));
text-decoration: underline dashed;
text-decoration-thickness: 1px;
padding: .1em;
margin: .1em;
padding-top:0;
padding-bottom:0;
border: .1em rgba(22,22,22,.15) groove;
background: linear-gradient(to top, rgba(22,222,222, .1), rgba(222, 222, 222, 0.1));
border-radius: 1em;}
#draw.dark-mode a:hover {text-decoration: dotted underline;
text-decoration-thickness: 2px;
border: .1em rgba(22,22,22,.1) ridge;
background: linear-gradient(to top, rgba(22,22,222, .5), rgba(222, 222, 222, .1));}
a:hover {text-decoration: dotted underline;
text-decoration-thickness: 2px;
border: .1em rgba(22,22,22,.1) ridge;
background: linear-gradient(to top, rgba(22,22,222, .2), rgba(22, 222, 222, .5));}
article {min-height:80vh; border: dotted 1px rgba(255,255,0,.1);}
.article-header {background-image: url("../img/bg.png");
transition: all 1.1s ease-in;
background-size: 191px;
background-size: 35%;
background-attachment: scroll;
border: solid 1px rgba(0,255,0,.15);
border-right: outset 3px rgba(255, 0, 0, 0.6);
Expand Down Expand Up @@ -289,13 +254,6 @@ article {min-height:80vh; border: dotted 1px rgba(255,255,0,.1);}
border: inset .15em rgba(100,100,100,.2);
border-bottom:solid .2em rgba(255,0,0,.2);
border-top:0;}
.article-content-wrapper.dark-mode {background-image: url("../img/bginvert.png");
background-size: 20000px;
background-position-x: -222px;
background-attachment: fixed;
border: inset .15em rgba(100,100,100,.2);
border-bottom:solid .1em rgba(255,0,0,.4);
border-top:0;}
.article-content {border: solid 1px rgba(255,0,0,.2);
background-image: url("../img/bginvert.png");
background-attachment: fixed;
Expand All @@ -306,15 +264,6 @@ article {min-height:80vh; border: dotted 1px rgba(255,255,0,.1);}
backdrop-filter: brightness(90%) contrast(250%) grayscale(50%) blur(.1em) saturate(120%);}
.article-content:hover {background: radial-gradient(rgba(128, 128, 128, 0.1), rgba(0, 0, 0, 0.1));
backdrop-filter: brightness(95%) contrast(200%) grayscale(50%) blur(.1em) saturate(120%);}
.article-content:hover.dark-mode {background: radial-gradient(rgba(0, 0, 0, .2), rgba(128, 128, 128, 0.2));}
.article-content.dark-mode {border: solid 1px rgba(255,0,0,.2);
background-image: url("../img/bg.png");
background-attachment: scroll;
background-size: 22000px;
background-position-x: -200px;
padding: 0 0 1em .2em;
margin:0;
backdrop-filter: brightness(70%) contrast(200%) grayscale(50%) blur(.1em) saturate(150%);}
#toTop {transition: all .45s;
z-index: 5;
pointer-events: none;
Expand Down Expand Up @@ -353,10 +302,6 @@ blockquote {background: linear-gradient(to left, rgba(0, 0, 0, .15), rgba(128, 1
margin-bottom:0.3em;
padding-bottom:0.3em;
border: inset .2em rgba(100,100,100,.2);}
a, a.dark-mode, button {font-size: 110%;
font-weight:600;
opacity: .8;
color: black;}
button {font-size: 80%;
padding: .2em .4em;
outline: none;
Expand Down Expand Up @@ -497,5 +442,5 @@ details > summary:hover {cursor: pointer; text-decoration: underline;}
opacity: 1;
cursor: pointer;
}
#search-text {opacity: .65;}
#search-text {opacity: .65; font-size: 93%;}
.scrolled-down #search-text {opacity: 0;}
5 changes: 3 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>html {background-color: rgb(128,128,128);}</style>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/dark-mode.css">
<link rel="stylesheet" type="text/css" href="/css/background.css">
<link rel="stylesheet" type="text/css" href="/yt/youtube-embed.css">
</head><body>

<div id="welcome-overlay"><div class="welcome-overlay-content">
<h1>Jesus Christ is King!</h1>
<p>"<span class="bible-verse-text"></span>" - <a class="bible-verse-link" href=""></a></p>
<p>"<span class="bible-verse-text"></span>" <nobr>- <a class="bible-verse-link" href=""></a></nobr></p>
<p>God bless!</p>
</div></div>

Expand All @@ -33,7 +34,7 @@ <h1>Jesus Christ is King!</h1>
<h1><span id="site-title"><a href="/" class="no-bg" title="Home"><img alt="Home" class="img-header img-opaq" decoding="async" src="/img/yinyang.png"></a>
<a href="/" id="site-title-text" class="no-bg" title="Home">i&i</a></span></h1></td><td style="width:50%;">
<span id="toolbar"><span id="search" title="Search"><span id="search-text">Search</span>🔍</span><button id="zoom-out" title="Zoom Out">−</button><button id="zoom-in" title="Zoom In">+</button>
<span class="mode-toggle"><button id="mode-toggle" title="Dark / Light">🌙 / ☀️</button></span></span>
<span class="dark-light"><button id="dark-light" title="Dark / Light">🌙 / ☀️</button></span></span>
</td></tr></table></header><div id="header-filler"></div>

<div class="row justify-content-center"><div class="col-md-9">
Expand Down
12 changes: 4 additions & 8 deletions src/js/light-dark.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@

// Light / Dark
function applyDarkMode(isDarkMode) {
document.body.classList.toggle("dark-mode", isDarkMode);
document.querySelectorAll('a, a:hover, a:visited, a:link, .article-content, .article-content:hover, .article-content-wrapper, #bg-wrapper, #bg-img, #draw').forEach((element) => {
document.querySelectorAll('*').forEach((element) => {
element.classList.toggle('dark-mode', isDarkMode);
});
}
Expand All @@ -12,18 +10,16 @@ function toggleDarkMode() {
localStorage.setItem('darkMode', darkMode);
}
let darkMode;
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
const savedMode = localStorage.getItem('darkMode');
if (savedMode !== null) {
darkMode = savedMode === 'true';
} else if (userPrefersDark) {
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
darkMode = true;
} else if (userPrefersLight) {
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
darkMode = false;
} else {
darkMode = true;
}
applyDarkMode(darkMode);
const modeToggle = document.getElementById('mode-toggle');
const modeToggle = document.getElementById('dark-light');
modeToggle.addEventListener('click', toggleDarkMode);
2 changes: 1 addition & 1 deletion src/js/scroll.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Sticky Header & Go to top
// Sticky Header, Go to top of page, & update URL on scroll
const toTop = document.getElementById("toTop");
const header = document.querySelector('header');
const headerHeight = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
Expand Down
1 change: 0 additions & 1 deletion src/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ function search() {
const articles = document.querySelectorAll('article');
const searchResultsContainer = document.getElementById('searchResults');
searchResultsContainer.innerHTML = '';

if (searchQuery.length === 0) {
searchResultsContainer.innerHTML = '<p>Enter a search term</p>';
searchResultsContainer.style.display = 'block';
Expand Down
7 changes: 3 additions & 4 deletions src/js/zoom.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// Zoom In / Out
function adjustZoom(isZoomIn) {
function pageZoom(isZoomIn) {
const zoomFactor = isZoomIn ? 1.05 : 0.95;
const zoom = document.querySelectorAll("html");
zoom.forEach(function(element) {
Expand All @@ -15,8 +14,8 @@ function adjustZoom(isZoomIn) {
document.documentElement.style.fontSize = savedFontSize + 'px';
}
document.getElementById("zoom-in").addEventListener("click", function() {
adjustZoom(true);
pageZoom(true);
});
document.getElementById("zoom-out").addEventListener("click", function() {
adjustZoom(false);
pageZoom(false);
});

0 comments on commit 2d8a718

Please sign in to comment.