Skip to content

Instantly share code, notes, and snippets.

@firedynasty

firedynasty/index.html

Created February 25, 2023 20:51
Show Gist options
  • Save firedynasty/3bc057f160b3b6d489e5a41847df4ea3 to your computer and use it in GitHub Desktop.
Save firedynasty/3bc057f160b3b6d489e5a41847df4ea3 to your computer and use it in GitHub Desktop.
Download ZIP
template gallery
Raw
index.html
<html lang="en">
<head>
<title>SQL Inner Join</title>
</head>
<body>
<header class="header">
<p></p><div class="select">
<i class="material-icons">palette</i>
<select class="select__input" id="selTheme">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</header>
<div class="main">
<p>(-) open, (+) - close <button onclick="move_text();"><u>(move-2)</u></button> &nbsp;<button onclick="move_text2();"><u>(move-3)</u></button></p>
<button type="button" id="something">Reload!</button> <p></p> <input type="text" id="text" />
<input type="button" id="btn" value="Submit" />
<div class="container">
<div class="inner">Hello</div>
</div>
<table>
<tr><td>Dates <select id="Row1Column1">
<option value disable selected>Other</option>
<option value="A">1. </option>
<option value="B">2. </option>
</select></td><td>
&nbsp; &nbsp;Tricks
<select id="Row1Column2">
<option value disable selected>Other</option>
<option value="A">1. </option>
</select></td>
<td>
&nbsp; &nbsp;Italian Game
<select id="Row1Column3">
<option value disable selected>Other</option>
<option value="A">1. </option>
<option value="B">2. </option>
</select></td>
</tr>
<tr>
<td>Scripture Combo<select id="Row2Column1">
<option value disable selected>Other</option>
<option value="A">1. </option>
<option value="B">2. </option>
<option value="C">3. </option>
<option value="D">4. </option>
<option value="E">5. Hope</option>
<option value="F">6. W </option>
</select> </td><td>
&nbsp; &nbsp;Attack_pawn
<select id="Row2Column2">
<option value disable selected>Other</option>
<option value="A">1. </option>
<option value="B">2. </option>
</select></td>
<td>
&nbsp; &nbsp;Spanish Game
<select id="Row2Column3">
<option value disable selected>Other</option>
<option value="A">1. </option>
<option value="B">2. </option>
</select></td>
</tr>
<tr><td>Questions
<select id="Row3Column1">
<option value disable selected>Other</option>
<option value="A">1.</option>
</select> </td> <td>
&nbsp;&nbsp; Attack_bishop
<select id="Row3Column2">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.</option>
</select> </td>
<td>
&nbsp;&nbsp; Center Pawn
<select id="Row3Column3">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.</option>
</select> </td> </tr>
<tr>
<td>Free write
<select id="Row4Column1">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.Bible Project</option>
</select>
</td>
<td>&nbsp;&nbsp;Prevent castling
<select id="Row4Column2">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.</option>
</select>
</td>
</tr>
<tr>
<td>Blank
<select id="Row5Column1">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.Bible Project</option>
</select>
</td>
<td>&nbsp;&nbsp;Attack_rook
<select id="Row5Column2">
<option value disable selected>Other</option>
<option value="A">1.</option>
<option value="B">2.</option>
</select>
</td>
</tr>
</table>
<br>
<textarea id="myTextArea" rows="20" cols="110">This text gets removed</textarea>
<br>
</div>
<div id="gallery">
<div class="container">
<div id="image-gallery">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://www.dropbox.com/s/pfweem0be0ye3d9/alphabet1.jpg?raw=1"><img src="https://www.dropbox.com/s/pfweem0be0ye3d9/alphabet1.jpg?raw=1" class="img-responsive">1</a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/600"><img src="https://unsplash.it/600" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/700"><img src="https://unsplash.it/700" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/800"><img src="https://unsplash.it/800" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/900"><img src="https://unsplash.it/900" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/1000"><img src="https://unsplash.it/1000" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/1100"><img src="https://unsplash.it/1100" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="https://unsplash.it/1200"><img src="https://unsplash.it/1200" class="img-responsive"></a>
<div class="img-overlay">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
</div>
</div><!-- End row -->
</div><!-- End image gallery -->
</div><!-- End container -->
</div>
</body>
</html>
Raw
script.js
$("#btn").click( function() {
var second_str_array = $("#text").val().split(';')
for(var i = 0; i < second_str_array.length; i++) {
// Trim the excess whitespace.
second_str_array[i] = second_str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
var second_test_var_1 = jQuery('<a>').attr('href', second_str_array[i]).attr('target', '_blank').text(second_str_array[i])
$( ".inner" ).append( "<p></p>" );
$( ".inner" ).append( second_test_var_1 );
$( ".inner" ).append( "<p></p>" );
console.log('hello')
}
});
$('#something').click(function() {
location.reload();
});
function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
return replacedText;
}
var arr = `
Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
So let it be with Caesar. The noble Brutus
Hath told you Caesar was ambitious:
If it were so, it was a grievous fault,
And grievously hath Caesar answer'd it.
Here, under leave of Brutus and the rest--
For Brutus is an honourable man;
So are they all, all honourable men--
Come I to speak in Caesar's funeral.
He was my friend, faithful and just to me:
`
$('#myTextArea').val(arr);
$(document).on("keypress", function (e) {
if (e.keyCode == 45) { // Use ASCII table (-)
if ($('#myTextArea').val().length > 8) {
arr = $.trim($("#myTextArea").val());
}
$('#myTextArea').val('');
// $('#myTextArea').val(arr);
console.log($('#myTextArea').val().length)
}
});
$(document).on("keypress", function (e) {
if (e.keyCode == 61) { // Use ASCII table (+)n.
$('#myTextArea').val(arr);
}
});
var parsed_inputVal = 0
document.getElementById('Row1Column1').addEventListener('change', function() {
val = $( "#Row1Column1" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20827195117?tab=analysis;https://www.chess.com/analysis/game/live/20827215141?tab=analysis;https://www.chess.com/analysis/game/pgn/34y8hzEUfQ;https://www.chess.com/analysis/game/live/20826622455;https://www.chess.com/analysis/game/live/20826569875
07232021
1. move 13 need to watch out. can use knight to get the bishop.
queen and night hanging
better moves that you have besides thinking of another attack
pretty much you can attack the middle with the rook because of your bishop on one side.
attack with your bishop of the queen when you have night watching
`
inputVal = 0
parsed_inputVal = 2
}
if (val ==='B') {
arr = `
https://www.chess.com/analysis/game/live/20921400525;https://www.chess.com/analysis/game/live/20920811137;https://www.chess.com/analysis/game/live/20913600155
1. see move 18
2. there is an analysis after a blunder!!!
3. faster checkmate
`
}
if (val ==='C') {
arr = `
I live for the king
In the current condition
of my state of mind.
`
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row2Column1').addEventListener('change', function() {
val = $( "#Row2Column1" ).val();
console.log(val)
if(val === 'A') {
arr = `Col 3:1-4
Rom 12:1-2
Phi. 4:4-9
1 Cor 12
Identity as rooted as a group rather than an individual
`
}
if (val === 'B') {
arr = `Sexual immorality
Proverbs 14:12, Exodus 19:5, Ex. 20:14, Mat 5:27-28, Prov 5:3-5, 1 Cor. 6,
Rom 3:20, R 2:1, R 1:28-32, Lev. 26:14-18, Heb 10:28-31, R 7:18-24, James 2:10
R 7:25 - 8:1
$ 50 for sin or $ 50 for church
`
}
if (val === 'C') {
arr = `Power of God
1 Kings 7
Psalms 7:6
`
}
if (val === 'D') {
arr = `Jesus
Prophets
Luke 23:26-33
Mat 27:31-34
Mark 15:20-23
John 19:16, 17
`
}
if (val ==='E') {
arr = `Hope, Psalm 6:5
Repentance, 7:9
`
}
if (val === 'F') {
arr = `
I saw a W. no ring.
Ephesians 1:3-6
Gal. 4:3-7
Romans 1
Romans 8:15
`
}
else {
console.log('in between')
console.log(val)
}
inputVal = 0
parsed_inputVal = 2
$('#myTextArea').val(arr);
});
document.getElementById('Row3Column1').addEventListener('change', function() {
val = $( "#Row3Column1" ).val();
console.log(val)
if(val === 'A') {
arr = `Ten commandments
How do you know there is a God?
Can you swear oaths in God's name?
Matthew 5:37
`
}
else {
console.log('other')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row4Column1').addEventListener('change', function() {
val = $( "#Row4Column1" ).val();
console.log(val)
if(val === 'A') {
arr = `Romans 8:24
We do not, we can I do to interact with when she said
* no worries, I totally did not mind or wanted that recognition.
`
}
if (val ==='B') {
arr = `Bible Project the Tree Podcast
The Hebrew Bible warns against the tree of life and death.
Some people are to be avoided but righteous people are to be followed.
`
}
else {
console.log('other')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row5Column2').addEventListener('change', function() {
val = $( "#Row5Column2" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20929777333?tab=report
1. undeveloped you attack the rook on the side
`
}
if (val ==='B') {
arr = `Bible Project the Tree Podcast
The Hebrew Bible warns against the tree of life and death.
Some people are to be avoided but righteous people are to be followed.
`
}
else {
console.log('other')
}
$('#myTextArea').val(arr);
});
function move_text() {
text_val = $('#myTextArea').val();
$("#myTextArea2").val(text_val)
}
function move_text2() {
text_val = $('#myTextArea').val();
$("#myTextArea3").val(text_val)
}
document.getElementById('Row1Column2').addEventListener('change', function() {
val = $( "#Row1Column2" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20841017803
got tricked into eating the horse and then what happened?
queen got ran over.
`
inputVal = 0
parsed_inputVal = 2
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row2Column2').addEventListener('change', function() {
val = $( "#Row2Column2" ).val();
console.log(val)
if(val === 'A') {
arr = `
https://www.chess.com/analysis/game/live/20893210965;https://www.chess.com/analysis/game/live/20895663025?tab=analysis;https://www.chess.com/analysis/game/live/20903448819
pretty much move 13.
dont let him grab the center
because you got bishop attacking on the left side.
the second game got slaughtered because missed a move to attack the pawn on the right side. feign that you will attack the queen and he stopped me, need to look over there again.
attack the pawn move 17
need to study opening theory?
`
inputVal = 0
parsed_inputVal = 2
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row3Column1').addEventListener('change', function() {
val = $( "#Row3Column1" ).val();
console.log(val)
if(val === 'A') {
arr = `Ten commandments
How do you know there is a God?
Can you swear oaths in God's name?
Matthew 5:37
`
}
else {
console.log('other')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row2Column3').addEventListener('change', function() {
val = $( "#Row2Column3" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.youtube.com/watch?v=FUAvjj8McHk;https://www.chess.com/analysis/game/live/20966384407?tab=report
analysis develop your queen gets stuck study the opening
`
}
else {
console.log('other')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row1Column3').addEventListener('change', function() {
val = $( "#Row1Column3" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/pgn/4QWXpKi9kJ;https://youtu.be/w4mo8ZcMUXU;https://youtu.be/CrMNVx5DxBE
there is something in the simplicity.
always study end games because without it, see the next few moves.
3. discovery attack
`
inputVal = 0
parsed_inputVal = 2
}
if(val === 'B') {
arr = `https://www.chess.com/analysis/game/live/20995190425?tab=analysis
Guiono Piano Game aka Italian Game
`
inputVal = 0
parsed_inputVal = 2
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row3Column2').addEventListener('change', function() {
val = $( "#Row3Column2" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20896836847
instead of going for the queen, go for a lesser piece.
`
inputVal = 0
parsed_inputVal = 2
}
if (val === 'B') {
arr = `
`
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row3Column3').addEventListener('change', function() {
val = $( "#Row3Column3" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20973007869;https://www.youtube.com/watch?v=ePubEBgJIFM
center pawn; The Pride and Sorrow of Chess -- Paul Morphy.
`
inputVal = 0
parsed_inputVal = 2
}
if (val === 'B') {
arr = `
`
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
document.getElementById('Row4Column2').addEventListener('change', function() {
val = $( "#Row4Column2" ).val();
console.log(val)
if(val === 'A') {
arr = `https://www.chess.com/analysis/game/live/20897466205?tab=analysis
if you let him castle, you increase his chances of winning.
`
}
if (val === 'B') {
arr = `
`
}
else {
console.log('in between')
}
$('#myTextArea').val(arr);
});
const htmlEl = document.getElementsByTagName('html')[0];
const toggleTheme = (theme) => {
htmlEl.dataset.theme = theme;
}
function applyTheme(theme) {
document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
document.body.classList.add(`theme-${theme}`);
console.log(theme)
console.log(`theme-${theme}`)
}
// document.addEventListener("DOMContentLoaded", () => {
// const savedTheme = localStorage.getItem("theme") || "auto";
// applyTheme(savedTheme);
// for (const optionElement of document.querySelectorAll("#selTheme option")) {
// optionElement.selected = savedTheme === optionElement.value;
// }
// document.querySelector("#selTheme").addEventListener("change", function () {
// localStorage.setItem("theme", this.value);
// applyTheme(this.value);
// });
// });
var today = new Date()
var hour_now = today.getHours()
if (hour_now < 18) {
applyTheme("light")
console.log('hello_')
console.log(hour_now)
}
else {
applyTheme("dark")
}
var theme = document.getElementById('selTheme');
theme.addEventListener('change', function() {
val = $( "#selTheme" ).val();
console.log(val)
if(val === 'light') {
applyTheme("light")
console.log('yes')
}
if(val === 'dark') {
applyTheme("dark")
console.log('no')
}
});
var theme = document.getElementById('selTheme');
// Lightbox
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $prevButton = $('<div id="prevButton"><i class="fa fa-chevron-left"></i></div>');
var $nextButton = $('<div id="nextButton"><i class="fa fa-chevron-right"></i></div>');
var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');
// Add overlay
$overlay.append($image).prepend($prevButton).append($nextButton).append($exitButton);
$("#gallery").append($overlay);
// Hide overlay on default
$overlay.hide();
// When an image is clicked
$(".img-overlay").click(function(event) {
// Prevents default behavior
event.preventDefault();
// Adds href attribute to variable
var imageLocation = $(this).prev().attr("href");
// Add the image src to $image
$image.attr("src", imageLocation);
// Fade in the overlay
$overlay.fadeIn("slow");
});
// When the overlay is clicked
$overlay.click(function() {
// Fade out the overlay
$(this).fadeOut("slow");
});
// When next button is clicked
$nextButton.click(function(event) {
// Hide the current image
$("#overlay img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").next().find("img"));
// All of the images in the gallery
var $images = $("#image-gallery img");
// If there is a next image
if ($nextImg.length > 0) {
// Fade in the next image
$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
} else {
// Otherwise fade in the first image
$("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);
}
// Prevents overlay from being hidden
event.stopPropagation();
});
// When previous button is clicked
$prevButton.click(function(event) {
// Hide the current image
$("#overlay img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").prev().find("img"));
// Fade in the next image
$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
// Prevents overlay from being hidden
event.stopPropagation();
});
// When the exit button is clicked
$exitButton.click(function() {
// Fade out the overlay
$("#overlay").fadeOut("slow");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
Raw
style.css
.garamond {
font-family: Garamond, serif;
font-size:250%;
margin-left:30px;
width:60%;
}
#targeted {
opacity: 0;
}
/* textarea{
font-size:18px;
background: url(https://assets.codepen.io/1075762/codepen8.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 53px;
padding-top: 15px;
border-color:#ccc;
background-size:38px;
}
*/
button {
background-color: white;
border: none;
}
:root {
--dark-background-color: #111111;
--dark-background-color-alt: #222222;
--dark-trim-color: #333333;
--dark-text-color: #eeeeee;
}
body {
/* Light Theme */
--background-color: #ffffff;
--background-color-alt: #eeeeee;
--trim-color: #dddddd;
--text-color: #333333;
--primary-color: #009578;
--font-family: 'Quicksand', sans-serif;
margin: 60px 0 0 0;
color: var(--text-color);
font-family: var(--font-family);
background: var(--background-color);
}
body.theme-dark {
--background-color: var(--dark-background-color);
--background-color-alt: var(--dark-background-color-alt);
--trim-color: var(--dark-trim-color);
--text-color: var(--dark-text-color);
}
@media (prefers-color-scheme: dark) {
body.theme-auto {
--background-color: var(--dark-background-color);
--background-color-alt: var(--dark-background-color-alt);
--trim-color: var(--dark-trim-color);
--text-color: var(--dark-text-color);
}
}
.header {
display: flex;
justify-content: space-between;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 10px;
background: var(--background-color-alt);
border-bottom: 1px solid var(--trim-color);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.header__logo {
height: 100%;
}
.header__button {
background: none;
border: none;
outline: none;
}
.header > *:not(:last-child) {
margin-right: 10px;
}
.main {
margin: 0 auto;
max-width: 1000px;
padding: 25px;
}
.main p {
line-height: 1.6;
font-weight: 500;
}
.select {
display: inline-flex;
align-items: center;
padding: 5px 8px;
border-radius: 10px;
}
.select__input {
-webkit-appearance: none;
-moz-appearance: none;
padding: 7px 14px;
background: none;
border: none;
outline: none;
cursor: pointer;
color: var(--text-color);
font-weight: 500;
font-family: var(--font-family);
}
.select__input option {
color: #000000;
}
textarea{
font-size:18px;
border-color:#ccc;
color: var(--text-color);
font-family: var(--font-family);
background: var(--background-color);
}
button {
color: var(--text-color);
font-family: var(--font-family);
background: var(--background-color);
}
select option {
margin: 40px;
color: var(--text-color);
font-family: var(--font-family);
background: var(--background-color);
}
select {
color: var(--text-color);
font-family: var(--font-family);
background: var(--background-color);
}
#gallery {
padding-top: 40px;
@media screen and (min-width: 991px) {
padding: 60px 30px 0 30px;
}
}
.img-wrapper {
position: relative;
margin-top: 15px;
img {
width: 100%;
}
}
.img-overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
i {
color: #fff;
font-size: 3em;
}
}
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
// Removes blue highlight
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
img {
margin: 0;
width: 80%;
height: auto;
object-fit: contain;
padding: 5%;
@media screen and (min-width:768px) {
width: 60%;
}
@media screen and (min-width:1200px) {
width: 50%;
}
}
}
#nextButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
&:hover {
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
}
#prevButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
&:hover {
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
}
#exitButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
position: absolute;
top: 15px;
right: 15px;
&:hover {
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment