mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-14 07:42:15 +00:00
:3
This commit is contained in:
parent
03c1d99567
commit
a3d1ec57ce
33 changed files with 408 additions and 203 deletions
26
css/footer.css
Normal file
26
css/footer.css
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
Footer
|
||||||
|
*/
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: auto; padding: 1rem;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
display: flex; flex-direction: row; flex-wrap: wrap;
|
||||||
|
justify-content: space-around; align-items: center;
|
||||||
|
|
||||||
|
background-color: var(--bg); color: var(--fg);
|
||||||
|
|
||||||
|
border-radius: var(--rad);
|
||||||
|
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
footer * {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
footer div {
|
||||||
|
width: 18rem;
|
||||||
|
justify-content: center; align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
94
css/main.css
Normal file
94
css/main.css
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
/*
|
||||||
|
Main
|
||||||
|
*/
|
||||||
|
main section {
|
||||||
|
margin: 3rem 0; padding: 1rem;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
background-color: var(--bg); color: var(--fg);
|
||||||
|
|
||||||
|
border-radius: var(--rad);
|
||||||
|
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
main section * {
|
||||||
|
margin: 0 0 0.7rem; padding: 0;
|
||||||
|
max-width: 100%; width: auto; min-width: none;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
main section *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
I hate CSS
|
||||||
|
*/
|
||||||
|
#intro {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#experiance img {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#spotify {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Sona colours
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
.cFF7700{background-color: var(--bandana-0);}
|
||||||
|
.cFFDC00{background-color: var(--bandana-1);}
|
||||||
|
.c00D621{background-color: var(--bandana-2);}
|
||||||
|
.c0088FF{background-color: var(--bandana-3);}
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
Gallery
|
||||||
|
*/
|
||||||
|
.gallery-image {
|
||||||
|
width: 100%; height: 30rem;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
height: 10rem;
|
||||||
|
|
||||||
|
display: flex; flex-direction: row;
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.gallery::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.gallery img {
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
|
||||||
|
height: 10rem; width: 12rem;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
transition: transform 0.1s ease-out;
|
||||||
|
}
|
||||||
|
.gallery img:hover {
|
||||||
|
margin: -0.25rem 0.25rem;
|
||||||
|
border: 0.25rem var(--green) solid;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.gallery img:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.gallery img:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
40
css/nav.css
Normal file
40
css/nav.css
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
/*
|
||||||
|
Nav
|
||||||
|
*/
|
||||||
|
nav {
|
||||||
|
margin: auto; padding: 1rem;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
position: sticky; top: 1rem;
|
||||||
|
|
||||||
|
display: flex; flex-direction: row;
|
||||||
|
justify-content: space-between; align-items: center;
|
||||||
|
|
||||||
|
background-color: var(--bg-alt); color: var(--fg-dark);
|
||||||
|
|
||||||
|
border-radius: var(--rad);
|
||||||
|
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
nav * {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
nav img {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
height: 2rem; width: auto;
|
||||||
|
|
||||||
|
transform: rotate(-25deg) scale(3.2);
|
||||||
|
|
||||||
|
filter: drop-shadow(1px 0 0 var(--bg-alt))
|
||||||
|
drop-shadow(0 1px 0 var(--bg-alt))
|
||||||
|
drop-shadow(-1px 0 0 var(--bg-alt))
|
||||||
|
drop-shadow(0 -1px 0 var(--bg-alt));
|
||||||
|
}
|
||||||
|
|
||||||
|
nav div * {
|
||||||
|
margin: 0 0.2rem; padding: 0;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
BIN
fonts/FiraCode.ttf
Normal file
BIN
fonts/FiraCode.ttf
Normal file
Binary file not shown.
BIN
fonts/LexendDeca.ttf
Normal file
BIN
fonts/LexendDeca.ttf
Normal file
Binary file not shown.
BIN
fonts/Rubik.ttf
Normal file
BIN
fonts/Rubik.ttf
Normal file
Binary file not shown.
BIN
gallery/big_boy_fluffy.jpg
Executable file
BIN
gallery/big_boy_fluffy.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
gallery/boi.jpg
Normal file
BIN
gallery/boi.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
gallery/corruption.jpg
Executable file
BIN
gallery/corruption.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
gallery/doggy.gif
Normal file
BIN
gallery/doggy.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 MiB |
BIN
gallery/doggys.webp
Normal file
BIN
gallery/doggys.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
gallery/fire.jpg
Executable file
BIN
gallery/fire.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 MiB |
BIN
gallery/friend.jpg
Executable file
BIN
gallery/friend.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
BIN
gallery/funny.jpg
Executable file
BIN
gallery/funny.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
gallery/funny_v2.jpg
Executable file
BIN
gallery/funny_v2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
gallery/goob.webp
Normal file
BIN
gallery/goob.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
gallery/landscape.jpg
Executable file
BIN
gallery/landscape.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
BIN
gallery/photo_2022-04-20_20-46-58.webp
Normal file
BIN
gallery/photo_2022-04-20_20-46-58.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
gallery/sad.png
Normal file
BIN
gallery/sad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
BIN
gallery/stars.jpg
Executable file
BIN
gallery/stars.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
gallery/sunset_beach.jpg
Executable file
BIN
gallery/sunset_beach.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
BIN
gallery/sunset_in_town.jpg
Executable file
BIN
gallery/sunset_in_town.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
gallery/vrc_christmas_meetup_2021.webp
Normal file
BIN
gallery/vrc_christmas_meetup_2021.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
gallery/webcam.webp
Normal file
BIN
gallery/webcam.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
images/bg-alt.png
Normal file
BIN
images/bg-alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
BIN
images/bg.jpg
Normal file
BIN
images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/fluffy.png
Normal file
BIN
images/fluffy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
images/ref.png
Normal file
BIN
images/ref.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
images/sussywussy.png
Normal file
BIN
images/sussywussy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
171
index.php
171
index.php
|
|
@ -3,62 +3,141 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="description" content="Welcome to Fluffys hell!">
|
<meta name="description" content="Hell">
|
||||||
<link rel="shortcut icon" type="image/png" href="pfp.jpg"/>
|
<meta name="theme-color">
|
||||||
<title>Fluffy's Epic Site</title>
|
<title>Fluffy's funky website</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="images/fluffy.png">
|
||||||
|
<!-- Style -->
|
||||||
<link rel="stylesheet" href="stylesheet.css">
|
<link rel="stylesheet" href="stylesheet.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="rootContainer">
|
|
||||||
<div class="profileContainer">
|
<nav>
|
||||||
<img src="pfp.jpg">
|
<img src="images/fluffy.png">
|
||||||
<h2> Find me! </h2>
|
<div>
|
||||||
<div class="profileLinks">
|
<a href="https://twitter.com/fluffybeanUwU">Twitter</a>
|
||||||
<a href="https://twitter.com/fluffybeanUwU" class="twitterColour"> Twitter </a>
|
<a href="http://t.me/Fluffy_Bean">Telegram</a>
|
||||||
<a href="http://t.me/Fluffy_Bean" class="telegramColour"> Telegram </a>
|
<a href="https://github.com/Fluffy-Bean">Github</a>
|
||||||
<a href="https://github.com/Fluffy-Bean" class="githubColour"> Github </a>
|
<p>Discord: Fluffy Bean#5212</p>
|
||||||
<a href="https://steamcommunity.com/id/Fluffy_Bean/" class="steamColour"> Steam </a>
|
|
||||||
<p class="discord"> <span class="discordColour">Discord:</span> Fluffy Bean#5212 </p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
<div class="textContainer">
|
|
||||||
<div class="textBody">
|
|
||||||
<header>
|
|
||||||
<h1> Welcome to my site! </h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
<div id="aboutText">
|
<section id="intro">
|
||||||
<h2> About Me </h2>
|
<h1>Fluffy's Swagger Website</h1>
|
||||||
<p class="paragraph"> Hi! I'm <span class="fluffyColour">Fluffy Bean</span>. I'm a 17 year old who found himself on the internet one day and became a furry! </p>
|
<p>This is supposed to be a descriptive intro line, but I don't feel like writing this</p>
|
||||||
</div>
|
</section>
|
||||||
<div id="interestsText">
|
|
||||||
|
<section id="about">
|
||||||
|
<h2>About me</h2>
|
||||||
|
<p>Hi! I'm <span class="fluffyColour">Fluffy Bean</span>. I'm a 17 year old who found himself on the internet one day and became a furry! (And a developer)</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="interests">
|
||||||
<h2>My interests</h2>
|
<h2>My interests</h2>
|
||||||
<p class="paragraph"> Apart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself </p>
|
<p>Appart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself</p>
|
||||||
<p class="paragraph"> I also enjoy using Linux (Arch btw) which gives me access to do things such as customise my entire system! </p>
|
<p>I also enjoy using Linux (Arch btw) which gives me access to do things such as custormise my entire system!</p>
|
||||||
<p class="paragraph"> Another thing I enjoy doing is playing games, some of my favourite tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD </p>
|
<p>Another thing I enjoy doing is playing games, some of my favroute tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD</p>
|
||||||
</div>
|
</section>
|
||||||
<div id="experiaceText">
|
|
||||||
<h2> Experience in programming </h2>
|
<section id="experiance">
|
||||||
<p class="paragraph"> I have a decently wide range of knowledge on computers and programming </p>
|
<h2>Experiance in programming</h2>
|
||||||
<p class="paragraph"> Since I was young I delved into computers head first, and breaking a lot on the way. I started with Scratch, then progressed to Python in Secondary School where I really started my programming adventure! </p>
|
<p>I have a decently wide range of knowlage on computers and programming </p>
|
||||||
<p class="paragraph"> Since then I tried many programming languages and programming-related stuff, I currently know Python, HTML and CSS but am also learning PHP, C# and soon JavaScript </p>
|
<p>Since I was young I delved into computers head first, and breaking a lot on the way. I started with Scratch, then progressed to Python in Secondary School where I really started my programming adventure!</p>
|
||||||
<p class="paragraph"> I also got into Linux since the start was rough with me breaking a terminal emulator, locking a harddrive and many others. Then after a few months Manjaro gave into my messing around and I broke Gnome Display Manager along with Gnome itself. Since then I've been using Arch (btw) and happily configuring Rofi, Polybar, fish and even theming Discord, Spotify and Firefox! </p>
|
<p>Since then I tried many programming languages and programming-related stuff, I currently know Python, HTML and CSS but am also learning PHP and C#</p>
|
||||||
</div>
|
<p>I also got into Linux since, the start was rough with me breaking a bunch of stuff. But since then I've been using Arch (btw) and happily configuring Rofi, Polybar, fish and even theming Discord, Spotify and Firefox!</p>
|
||||||
<div id="thanksText">
|
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Fluffy-Bean&layout=compact">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
<h2>Special Thanks</h2>
|
<h2>Special Thanks</h2>
|
||||||
<p class="paragraph"> To <span class="jeetixColour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running! </p>
|
<p>To <span class="jeetixColour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running!</p>
|
||||||
<p class="paragraph"> And to <span class="cartyColour">Carty</span> for teaching me how to run servers and the networking required to keep sites online! </p>
|
<p>And to <span class="cartyColour">Carty</span> for teaching me how to run servers and the networking required to keep sites online!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery">
|
||||||
|
<h2>Random pictures lol</h2>
|
||||||
|
<img src="gallery/vrc_christmas_meetup_2021.webp" class="gallery-image">
|
||||||
|
<div class="gallery" draggable="false">
|
||||||
|
<?php
|
||||||
|
$images = glob("gallery/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);
|
||||||
|
foreach ($images as $i) {
|
||||||
|
printf('<img src="gallery/%s" draggable="false"/>',
|
||||||
|
basename($i)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
?>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div id="exampleText">
|
<script src="scripts/gallery.js"></script>
|
||||||
<h2> Example Header </h2>
|
</section>
|
||||||
<p class="paragraph"> Example text </p>
|
|
||||||
</div> -->
|
<section id="refsheet">
|
||||||
|
<h2>Refsheet</h2>
|
||||||
|
<img src="images/ref.png" alt="Refsheet containing an orange anthro Maned Wolf.">
|
||||||
|
<h3>Bandana</h3>
|
||||||
|
<p>#FF7700 - #FFDC00 - #00D621 - #0088FF</p>
|
||||||
|
<h3>Fur</h3>
|
||||||
|
<p>#ff851b - #fff3bb - #613700</p>
|
||||||
|
<h3>Beans / Eyes</h3>
|
||||||
|
<p>#febbec - #c859c9</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="jokes">
|
||||||
|
<h2>Funny jokes!</h2>
|
||||||
|
<h3>Cow joke</h3>
|
||||||
|
<p>What did the cow say to the other cow that took up all the space? "Mooooove over"!</p>
|
||||||
|
<h3>Eel joke</h3>
|
||||||
|
<p>Why can't electric eels get depresed? Because they're always positive!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pc">
|
||||||
|
<h2>System configuration</h2>
|
||||||
|
<h3>Operating system</h3>
|
||||||
|
<img src="images/sussywussy.png" alt="Screenshot of Linux desktop enviroment">
|
||||||
|
<p>My main operating system is Arch Linux, in this screenshot you can see a "rice" of Rofi and Polybar! Which you can see <a href="https://github.com/Fluffy-Bean/dots">here</a>!</p>
|
||||||
|
<p>My secondary system is Windows 10 Pro just for VR</p>
|
||||||
|
|
||||||
|
<h3>Hardware</h3>
|
||||||
|
<p>For my PC case, I'm using an NZXT H510 (white) covered with a bunch of stickers and magnets.</p>
|
||||||
|
<p>But for whats inside is a bit more interesting. I am using a Gigabyte X570 AORUS ELITE motherboard, pared with an AMD 5 3600. Cooling that is a be quiet! Pure Rock 2.</p>
|
||||||
|
<p>Thats with 16GBs (2x8) of DDR4-3600 ram from Corsair, with an Nvidia GTX1060 (6gb) Zotac AMP edition.</p>
|
||||||
|
<p>Which is all powered by a Corsair 550W 80+ Gold power supply.</p>
|
||||||
|
<p>For storage I am using a Hitachi Deskstar that has 2TBs of storage for my games and larger files. For my boot SSD I am using a Samsung 980 1TB M.2 NVMe.</p>
|
||||||
|
|
||||||
|
<h3>Equipment</h3>
|
||||||
|
<p>My keyboard is a Razer Blackwiddow X Chroma that has been through too much. To go with that I have a Logitech g502 mouse with a Hyena Agenda mousemat.</p>
|
||||||
|
<p>For my monitor I have a BenQ MOBIUZ EX2510. For VR I have a normal CV1 with 2 cameras.</p>
|
||||||
|
|
||||||
|
<h3>Server</h3>
|
||||||
|
<p>My server is a simple Zotac ZBOX-CI527.</p>
|
||||||
|
<p>It still has the base 8GBs of ram and i5-7200U CPU. But I upgraded it with a 120GB SSD.</p>
|
||||||
|
<p>And it is running a Proxmox server with many many LXC containters because why not :3</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="spotify">
|
||||||
|
<h2>Mah Spotify playlist!</h2>
|
||||||
|
<iframe src="https://open.spotify.com/embed/playlist/5e4iqBdioVN56hz1KCYWNi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
|
||||||
|
<iframe src="https://open.spotify.com/embed/playlist/37vWcad8w7GBvNIZUkDxEi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
<footer>
|
<footer>
|
||||||
<!-- Nothing for you to see here Carty UwU -->
|
<div>
|
||||||
|
<h3>Direct Contact</h3>
|
||||||
|
<a href="http://t.me/Fluffy_Bean">Telegram</a>
|
||||||
|
<a href="https://twitter.com/fluffybeanUwU">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Page status</h3>
|
||||||
|
<p>Last updated 15 Jun 2022</p>
|
||||||
|
<p>Made and designed by Fluffy</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Other works</h3>
|
||||||
|
<a href="https://github.com/Fluffy-Bean">Github</a>
|
||||||
|
<a href="https://testing.fluffybean.gay">Testing Page</a>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
28
scripts/gallery.js
Normal file
28
scripts/gallery.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
document.querySelectorAll(".gallery img").forEach(image =>{
|
||||||
|
image.onclick = () =>{
|
||||||
|
document.querySelector(".gallery-image").src = image.getAttribute("src");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const slider = document.querySelector(".gallery");
|
||||||
|
let isDown = false;
|
||||||
|
let startX;
|
||||||
|
let scrollLeft;
|
||||||
|
|
||||||
|
slider.addEventListener("mousedown", (e) => {
|
||||||
|
isDown = true;
|
||||||
|
startX = e.pageX - slider.offsetLeft;
|
||||||
|
scrollLeft = slider.scrollLeft;
|
||||||
|
});
|
||||||
|
slider.addEventListener("mouseleave", () => {
|
||||||
|
isDown = false;
|
||||||
|
});
|
||||||
|
slider.addEventListener("mouseup", () => {
|
||||||
|
isDown = false;
|
||||||
|
});
|
||||||
|
slider.addEventListener("mousemove", (e) => {
|
||||||
|
if (!isDown) return;
|
||||||
|
const x = e.pageX - slider.offsetLeft;
|
||||||
|
const walk = x - startX;
|
||||||
|
slider.scrollLeft = scrollLeft - walk;
|
||||||
|
});
|
||||||
226
stylesheet.css
226
stylesheet.css
|
|
@ -1,177 +1,115 @@
|
||||||
/* Page style */
|
@import "css/nav.css";
|
||||||
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5.2/distr/fira_code.css);
|
@import "css/main.css";
|
||||||
|
@import "css/footer.css";
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
src: url(fonts/Rubik.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
src: url(fonts/LexendDeca.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
src: url(fonts/FiraCode.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-size: 17px;
|
|
||||||
--bg: #151515;
|
--bg: #151515;
|
||||||
--bg-alt: #E8E3E3;
|
--bg-alt: #E8E3E3;
|
||||||
|
|
||||||
|
--h: #8C977D;
|
||||||
--fg:#E8E3E3;
|
--fg:#E8E3E3;
|
||||||
--rad: 20px;
|
--fg-dark: #151515;
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
--shadow: 6px 6px 10px #15151588;
|
||||||
}
|
--rad: 15px;
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
--orange: #FF7700;
|
||||||
|
--orange-alt: #E0863E;
|
||||||
|
--green: #8C977D;
|
||||||
|
|
||||||
|
/* refsheet colours */
|
||||||
|
--bandana-0: #FF7700;
|
||||||
|
--bandana-1: #FFDC00;
|
||||||
|
--bandana-2: #00D621;
|
||||||
|
--bandana-3: #0088FF;
|
||||||
|
|
||||||
|
--fur-0: #FF851B;
|
||||||
|
--fur-1: #FFF3BB;
|
||||||
|
--fur-2: #613700;
|
||||||
|
|
||||||
|
--beans: #FEBBEC;
|
||||||
|
--eye: #C859C9;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
font-family: 'Fira Code', monospace;
|
font-family: "Fira Code", monospace;
|
||||||
font-weight: 369;
|
font-weight: 450;
|
||||||
color: var(--fg);
|
|
||||||
transition-timing-function: ease-out;
|
|
||||||
transition: 0.1s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
|
||||||
|
background-color: var(--bg-alt);
|
||||||
|
background-image: url("images/bg-alt.png");
|
||||||
|
|
||||||
@media (max-width:1200px) {
|
background-position: center;
|
||||||
.rootContainer{
|
background-size: cover;
|
||||||
display: flex;
|
background-repeat: no-repeat;
|
||||||
flex-direction: column;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 2vh;
|
margin: 0 auto; padding: 1rem;
|
||||||
}
|
max-width: 969px; width: auto; min-width: none;
|
||||||
img {
|
|
||||||
width: 169px;
|
background-color: var(--bg-alt);
|
||||||
}
|
background: none;
|
||||||
.textContainer {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.textContainer,
|
|
||||||
.profileContainer {
|
|
||||||
padding: 1vh;
|
|
||||||
}
|
|
||||||
.paragraph {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width:1200px) {
|
|
||||||
.rootContainer{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
min-height: 86vh;
|
|
||||||
margin: 6vh;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 269px;
|
|
||||||
}
|
|
||||||
.textContainer {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.textContainer,
|
|
||||||
.profileContainer {
|
|
||||||
padding: 2vh;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,h2,h3 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
img {
|
font-weight: 600;
|
||||||
margin: 2em;
|
color: var(--h);
|
||||||
border-radius: 50%;
|
}
|
||||||
box-shadow: 0px 2px 15px #000000;
|
h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.profileLinks {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
a {
|
a {
|
||||||
font-weight: 500;
|
color: var(--green);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
font-weight: 800;
|
color: var(--orange);
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
a:focus {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
a:active {
|
||||||
|
color: var(--orange-alt);
|
||||||
}
|
}
|
||||||
a:visited {
|
a:visited {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
a.button {
|
|
||||||
display: block;
|
|
||||||
padding: 0.35em 1.2em;
|
|
||||||
border: 0.12em solid var(--fg);
|
|
||||||
margin: 0 0.3em 0.3em 0;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-weight: 450;
|
|
||||||
color: #E0863E;
|
|
||||||
}
|
|
||||||
/* Funky colours */
|
|
||||||
.cartyColour {
|
.cartyColour {
|
||||||
color: #C29356;
|
color: #C29356;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jeetixColour {
|
.jeetixColour {
|
||||||
color: cadetblue;
|
color: cadetblue;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fluffyColour {
|
.fluffyColour {
|
||||||
color: #FB9645;
|
color: #FB9645;
|
||||||
}
|
font-weight: bold;
|
||||||
.cartyColour,
|
|
||||||
.jeetixColour,
|
|
||||||
.fluffyColour {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Link colours */
|
|
||||||
.twitterColour {
|
|
||||||
color: #1D9BF0;
|
|
||||||
}
|
|
||||||
.telegramColour {
|
|
||||||
color: #1C93E3;
|
|
||||||
}
|
|
||||||
.githubColour {
|
|
||||||
color: #F0F6FC;
|
|
||||||
}
|
|
||||||
.steamColour {
|
|
||||||
color: #C5C3C0;
|
|
||||||
}
|
|
||||||
.discordColour {
|
|
||||||
color: #5865F2;
|
|
||||||
}
|
|
||||||
.discord,
|
|
||||||
.discordColour {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.paragraph {
|
|
||||||
margin: 12px;
|
|
||||||
color: #DADADA;
|
|
||||||
}
|
|
||||||
.textContainer,
|
|
||||||
.profileContainer {
|
|
||||||
padding: 2vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.profileContainer {
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
footer {
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: var(--bg);
|
|
||||||
box-shadow: 0px 4px 20px var(--bg);
|
|
||||||
border-radius: 1em;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: var(--bg-alt);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue