Fix bad code with less bad code
This commit is contained in:
@ -24,7 +24,7 @@ $(document).ready(function(){
|
||||
<div style="margin-top: 10%;"></div><!-- Separator -->
|
||||
|
||||
<main>
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1>Colormatic: A non-profit project for creation.</h1>
|
||||
<p class="justify">Colormatic is a non-profit project for creating a curated collection of sub-projects that match a high-quality, high attention to detail standard.</p>
|
||||
<p class="justify">Colormatic Studios is a creative studio dedicated to giving life to maximum effort projects.</p>
|
||||
|
||||
@ -52,8 +52,8 @@ flex: 1;
|
||||
text-align: center;
|
||||
min-width: 40%;
|
||||
max-width: 50%;
|
||||
background-color: #ffffff44;
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box h1 a {
|
||||
|
||||
@ -101,6 +101,15 @@ nav div.inline {
|
||||
}
|
||||
}
|
||||
|
||||
div.container {
|
||||
color: var(--text-color);
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
main div.heading {
|
||||
color: var(--text-color);
|
||||
font-size: 200%;
|
||||
@ -108,16 +117,10 @@ main div.heading {
|
||||
}
|
||||
|
||||
main div.hero {
|
||||
color: var(--text-color);
|
||||
width: 60%;
|
||||
margin: 16px auto 16px auto;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
background-color: #ffffff44;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
@ -21,15 +21,15 @@ $(document).ready(function(){
|
||||
<div id="particle-container"></div>
|
||||
<script src="/js/bg.js"></script>
|
||||
<header id="navbar"></header>
|
||||
<div style="margin-top: 10%;"></div><!-- Separator -->
|
||||
<div style="margin-top: 8%;"></div><!-- Separator -->
|
||||
|
||||
<main>
|
||||
<div class="heading">Featured Colormatic Studios Projects:</div>
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
|
||||
<p>An actually good first person controller for the Godot Engine.</p>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1>ColorQuest</h1>
|
||||
<p>A simple MMORPG in your browser.</p>
|
||||
<p>Currently in <a href="https://en.wikipedia.org/wiki/Software_release_life_cycle#Pre-alpha" target="_blank" rel="noopener noreferrer">pre-alpha</a>.</p>
|
||||
@ -37,7 +37,7 @@ $(document).ready(function(){
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div style="margin-top: 10%;"></div><!-- Separator -->
|
||||
<div style="margin-top: 8%;"></div><!-- Separator -->
|
||||
<footer id="footer"></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
52
js/bg.js
52
js/bg.js
@ -22,7 +22,7 @@ class Particle {
|
||||
this.speedY = (Math.random() - 0.5) * 0.2;
|
||||
this.growthSpeed = (Math.random() * 0.02) + 0.01; // Growth speed for breathing effect
|
||||
this.shape = ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]; // Randomly decide shape
|
||||
this.angle = Math.random() * 360; // Initial rotation angle for squares
|
||||
this.angle = Math.random() * 360; // Initial rotation angle for squares and triangles
|
||||
this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@ class Particle {
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.update();
|
||||
ctx.fillStyle = '#bbb';
|
||||
ctx.save();
|
||||
ctx.translate(this.x, this.y);
|
||||
@ -116,21 +115,6 @@ class Gradient {
|
||||
this.dAlpha = (Math.random() - 0.5) * 0.01;
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.update();
|
||||
const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
|
||||
gradient.addColorStop(0, this.color);
|
||||
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
|
||||
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1.0;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
@ -151,15 +135,29 @@ class Gradient {
|
||||
}
|
||||
this.y = clamp(0, this.y, canvas.height);
|
||||
}
|
||||
|
||||
draw() {
|
||||
const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
|
||||
gradient.addColorStop(0, this.color);
|
||||
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
|
||||
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
let gradients = [];
|
||||
let gradientsArray = [];
|
||||
|
||||
function getRandomColor() {
|
||||
const r = Math.floor((Math.random() * 100) + 155);
|
||||
const g = Math.floor((Math.random() * 100) + 155);
|
||||
const b = Math.floor((Math.random() * 100) + 155);
|
||||
return `rgba(${r}, ${g}, ${b}, 1)`;
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
|
||||
function init() {
|
||||
@ -167,18 +165,24 @@ function init() {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
particlesArray.push(new Particle());
|
||||
}
|
||||
gradients = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
gradients.push(new Gradient());
|
||||
gradientsArray = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
gradientsArray.push(new Gradient());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
gradients.forEach(gradient => gradient.draw());
|
||||
gradientsArray.forEach((gradient) => {
|
||||
gradient.update();
|
||||
gradient.draw();
|
||||
});
|
||||
|
||||
particlesArray.forEach(particle => particle.draw());
|
||||
particlesArray.forEach((particle) => {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
@ -27,21 +27,21 @@ $(document).ready(function(){
|
||||
<div class="heading"><h1>Colormatic Studios</h1></div>
|
||||
|
||||
<div class="project-grid-container">
|
||||
<div class="project-grid-box">
|
||||
<div class="project-grid-box container">
|
||||
<h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img src="https://raw.githubusercontent.com/ColormaticStudios/quality-godot-first-person-2/refs/heads/main/icon.svg">
|
||||
<p>An actually good first person controller for the Godot Engine.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-grid-box">
|
||||
<div class="project-grid-box container">
|
||||
<h1>A Silly Game</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img src="/studios/img/hatcat.webp">
|
||||
<p>This is a silly little game project to get us started.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-grid-box">
|
||||
<div class="project-grid-box container">
|
||||
<h1>ColorQuest</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img src="/studios/img/colorquest.png" class="pixelart">
|
||||
@ -50,7 +50,7 @@ $(document).ready(function(){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1>Links:</h1>
|
||||
<div class="double-linktree">
|
||||
<ul class="linktree">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
div.videocontainer {
|
||||
div.video.container {
|
||||
display: flex;
|
||||
color: var(--text-color);
|
||||
width: 90%;
|
||||
@ -7,23 +7,23 @@ div.videocontainer {
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
background-color: #ffffff44;
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
div.videocontainer video#videoplayer {
|
||||
div.video.container video#videoplayer {
|
||||
flex-grow: 1;
|
||||
border-radius: 12px;
|
||||
height: auto;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
div.videocontainer div.videoobjects {
|
||||
div.video.container div.videoobjects {
|
||||
display: grid;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
div.videocontainer div.videodetails h1#videotitle {
|
||||
div.video.container div.videodetails h1#videotitle {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ div.dropdown-container {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown {
|
||||
div.video.container div.download-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
@ -44,16 +44,16 @@ div.videocontainer div.download-dropdown {
|
||||
transition-duration: 0.35s;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown:hover {
|
||||
div.video.container div.download-dropdown:hover {
|
||||
box-shadow: 1px 1px 8px #00000088;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown img {
|
||||
div.video.container div.download-dropdown img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown div.dropdown-content {
|
||||
div.video.container div.download-dropdown div.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
@ -64,37 +64,37 @@ div.videocontainer div.download-dropdown div.dropdown-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown:hover div.dropdown-content {
|
||||
div.video.container div.download-dropdown:hover div.dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown div.dropdown-content ul {
|
||||
div.video.container div.download-dropdown div.dropdown-content ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown div.dropdown-content ul li {
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown div.dropdown-content ul li:hover {
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li:hover {
|
||||
background-color: #dcdfdf;
|
||||
}
|
||||
|
||||
div.videocontainer div.download-dropdown div.dropdown-content ul li a {
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
div.videocontainer {
|
||||
div.video.container {
|
||||
display: block;
|
||||
}
|
||||
div.videocontainer video#videoplayer {
|
||||
div.video.container video#videoplayer {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
div.videocontainer div.download-dropdown {
|
||||
div.video.container div.download-dropdown {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@ -23,7 +23,7 @@ $(document).ready(function(){
|
||||
<script src="/js/bg.js"></script>
|
||||
<header class="container" id="navbar"></header>
|
||||
|
||||
<div class="videocontainer">
|
||||
<div class="video container">
|
||||
<video id="videoplayer" controls></video>
|
||||
<div class="videoobjects">
|
||||
<div class="videodetails">
|
||||
|
||||
@ -26,7 +26,7 @@ $(document).ready(function(){
|
||||
<main>
|
||||
<img class="banner" src="/img/zakarya-banner.png">
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1>Links:</h1>
|
||||
<ul class="linktree">
|
||||
<li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
|
||||
@ -37,7 +37,7 @@ $(document).ready(function(){
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero container">
|
||||
<h1>Featured Videos:</h1>
|
||||
<ul class="videolist">
|
||||
<li><a href="/video?c=zakarya&v=the-way-forward">
|
||||
|
||||
Reference in New Issue
Block a user