Skip to content
This repository has been archived by the owner on Jan 15, 2025. It is now read-only.

Commit

Permalink
UPDATE - 08-09-2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@CasieBarie
CasieBarie committed Sep 8, 2024
1 parent 8386706 commit 8804212
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 59 deletions.
46 changes: 27 additions & 19 deletions assets/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
/*UNCOMMENT FOR DEBUG*/ /*outline: 1px solid #f00 !important;*/
}

::-webkit-scrollbar {width: 1.3vh;}
::-webkit-scrollbar {width: 1vh; height: 1vh;}
::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-thumb {
background: var(--gray-color);
Expand Down Expand Up @@ -153,8 +153,8 @@ body.fixed-position {

.text {
border-radius: 30px;
padding: 2em;
font-size: 1.2em;
padding: 1.3em;
font-size: 1.1em;
backdrop-filter: blur(4px);
box-shadow: 10px 10px 20px black;
}
Expand All @@ -180,7 +180,7 @@ h2 {
}

h3 {
font-size: clamp(1ex, 4vw, 3ex);
font-size: clamp(2ex, 3vw, 3ex);
padding-bottom: .5em;
text-decoration: underline var(--secondary-color);
}
Expand Down Expand Up @@ -263,37 +263,45 @@ a.shield img:hover {opacity: 0.7;}
opacity: .8;
}

.modal-image:hover, .modal:hover {
cursor: pointer;
}

.modal {
display: none;
position: fixed;
z-index: 200;
z-index: 50;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
}

.modal-content, #caption {
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
animation: zoom 0.6s;
-webkit-animation: zoom 0.6s;
-moz-animation: zoom 0.6s;
-o-animation: zoom 0.6s;
max-height: 80%;
max-width: 80%;
object-fit: scale-down;
}

#caption {
.modal-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
height: 150px;
}

.modal-content, .modal-caption {
animation: zoom .6s;
-webkit-animation: zoom .6s;
-moz-animation: zoom .6s;
-o-animation: zoom .6s;
}

@keyframes zoom {
Expand Down
2 changes: 1 addition & 1 deletion assets/css/projects.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.projects {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2em;
}

Expand Down
17 changes: 17 additions & 0 deletions assets/js/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@ function loaded() {

copy();
for(let i = 0; i < 10; i++) {$('#circles').append('<li></li>');}

$('.modal-image').each(function() {
const $image = $(this);
const $modal = $image.next('.modal');
const $modalImg = $modal.find('.modal-content');
const $caption = $modal.find('.modal-caption');
$modalImg.attr('src', $image.attr('src'));
$caption.text($image.attr('alt'));
$image.on('click', function() {
$modal.show();
toggle();
});
$modal.on('click', function() {
$modal.hide();
toggle();
});
});
}

function copy() {
Expand Down
21 changes: 5 additions & 16 deletions discord/inosso.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@
<link href="/assets/css/default.css" rel="stylesheet"/>
<script defer src="https://kit.fontawesome.com/0c4268d390.js" crossorigin="anonymous"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#music-preview:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="background" style="background-image: url('/images/discord/discord.webp');"></div>
Expand Down Expand Up @@ -61,11 +56,11 @@ <h2>Features</h2>
</div>
</div>
<div class="right">
<img src="/images/discord/inosso/music.webp" id="music-preview" alt="Music Preview" width="782" height="354"/>
</div>
<div id="music-preview-modal" class="modal">
<img width="782" height="354" loading="lazy" class="modal-content" alt="Music Preview" src="/images/discord/inosso/music.webp">
<div id="caption">Preview of the UpdateChecker</div>
<img src="/images/discord/inosso/music.webp" class="modal-image" alt="Music Preview" width="782" height="354"/>
<div class="modal">
<img class="modal-content" alt="" src="">
<div class="modal-caption"></div>
</div>
</div>
</div>
</div>
Expand All @@ -74,11 +69,5 @@ <h2>Features</h2>
</div>
<ul id="circles"></ul>
<script src="/assets/js/default.js"></script>
<script>
const modal = document.getElementById("music-preview-modal");
const img = document.getElementById("music-preview");
img.onclick = function(){modal.style.display = "block"; toggle()}
modal.onclick = function(){modal.style.display = "none"; toggle()}
</script>
</body>
</html>
51 changes: 38 additions & 13 deletions discord/keesiebernie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
.collapsible {
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
Expand All @@ -27,22 +26,43 @@
background: transparent;
}

.collapsible:after {
content: '\002B';
.collapsible-icon {
font-weight: bold;
float: right;
margin-left: 5px;
margin-right: 1em;
display: inline-block;
position: relative;
}

.collapsible-active:after {
content: "\2212";
.collapsible-icon::before, .collapsible-icon::after {
content: "";
position: absolute;
width: 1em;
height: .16em;
top: calc( (1em / 2 ) - .08em );
background-color: white;
transition: .3s all;
border-radius: 0.03em;
}

.collapsible-icon::after {
transform: rotate(90deg);
}

.collapsible-active .collapsible-icon::after {
transform: rotate(180deg);
}


.collapsible-active .collapsible-icon::before {
transform: rotate(90deg) scale(0);
}

.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height .3s ease-out;
transition: all .3s ease-out;
text-align: left;
border-radius: 25px;
margin-bottom: 5px;
Expand Down Expand Up @@ -78,10 +98,10 @@ <h1>KeesieBernie</h1>
</div>
</div>

<div class="row bottom">
<div class="center left">
<div class="row">
<div class="center">
<div class="text">
<button class="collapsible">Terms Of Service</button>
<button class="collapsible">Terms Of Service <span class="collapsible-icon"></span></button>
<div class="content" id="termsofservice">
<div class="contenttext">
<p class="gray">
Expand Down Expand Up @@ -133,7 +153,14 @@ <h3>6. Contact Information</h3>
<p class="gray">This document is intended to outline the basic rules and guidelines for using KeesieBernie. For any specific issues not covered here, please reach out to the appropriate contact listed above.</p>
</div>
</div>
<button class="collapsible">Privacy Policy</button>
</div>
</div>
</div>

<div class="row bottom">
<div class="center">
<div class="text">
<button class="collapsible">Privacy Policy <span class="collapsible-icon"></span></button>
<div class="content" id="privacypolicy">
<div class="contenttext">
<p class="gray">
Expand Down Expand Up @@ -224,10 +251,8 @@ <h3>9. Contact Information</h3>
const content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
content.style.border = "";
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.style.border = "2px solid black";
}
});
}
Expand Down
19 changes: 9 additions & 10 deletions minecraft/keeslib.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,11 @@ <h2>Methods</h2>
</div>

<div class="row bottom">
<div class="center-left">
<div class="left">
<div class="text">
<h2>Update Checker</h2>
<p>This library also has a fancy <a id="uc-preview">Update Checker <i class="fa-regular fa-image"></i></a>. The ultimate tool for ensuring your plugin users are always up-to-date with the latest features, bug fixes, and improvements.<br><br></p>
<p>This library also has a fancy Update Checker. The ultimate tool for ensuring your plugin users are always up-to-date with the latest features, bug fixes, and improvements.<br><br></p>

<p class="gray">Initialise the update checker using this and specify your Spigot resourceid:</p>
<pre><code class="lang-java">new keeslib.updateChecker(Integer recourceID)</code></pre>
<p class="gray">After that you can customize your update checker using these methods:</p>
Expand All @@ -178,9 +179,12 @@ <h2>Update Checker</h2>
<p class="gray">After the customization you start the updatechecker by calling:</p>
<pre><code class="lang-java">.startChecking();</code></pre>
</div>
<div id="uc-preview-modal" class="modal">
<img width="873" height="325" loading="lazy" class="modal-content" id="uc" alt="UpdateChecker" src="/images/minecraft/keeslib/uc.webp">
<div id="caption">Preview of the UpdateChecker</div>
</div>
<div class="right">
<img src="/images/minecraft/keeslib/uc.webp" class="modal-image" alt="Music Preview" width="873" height="325"/>
<div class="modal">
<img class="modal-content" alt="" src="">
<div class="modal-caption"></div>
</div>
</div>
</div>
Expand All @@ -192,11 +196,6 @@ <h2>Update Checker</h2>
<script src="/assets/js/default.js"></script>
<script src="/assets/js/highlight.js"></script>
<script>
const modal = document.getElementById("uc-preview-modal");
const img = document.getElementById("uc-preview");
img.onclick = function(){modal.style.display = "block"; toggle()}
modal.onclick = function(){modal.style.display = "none"; toggle()}

if (document.readyState !== 'loading') {snipped();
} else {document.addEventListener('DOMContentLoaded', function () {snipped();});}
function snipped() {
Expand Down

0 comments on commit 8804212

Please sign in to comment.