mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-24 12:24:56 +00:00
H
This commit is contained in:
parent
b1d8d36704
commit
6e2f592d83
4 changed files with 86 additions and 46 deletions
|
|
@ -9,7 +9,7 @@ footer {
|
|||
display: flex; flex-direction: row; flex-wrap: wrap;
|
||||
justify-content: space-around; align-items: center;
|
||||
|
||||
background-color: var(--bg); color: var(--fg);
|
||||
background-color: var(--bg-dark); color: var(--fg);
|
||||
|
||||
border-radius: var(--rad);
|
||||
|
||||
|
|
@ -24,3 +24,6 @@ footer div {
|
|||
justify-content: center; align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
footer div h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
62
css/main.css
62
css/main.css
|
|
@ -46,10 +46,13 @@ main section img {
|
|||
Gallery
|
||||
*/
|
||||
.gallery-image {
|
||||
padding: 0;
|
||||
width: 100%; height: 30rem;
|
||||
object-fit: contain;
|
||||
|
||||
background-color: #000;
|
||||
display: block;
|
||||
|
||||
background-color: var(--bg-dark);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
|
|
@ -70,27 +73,6 @@ main section img {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#gallery::before,#gallery::after {
|
||||
content: "";
|
||||
|
||||
width: 5rem; height: 10rem;
|
||||
display: block;
|
||||
|
||||
position: absolute; bottom: 1rem;
|
||||
}
|
||||
#gallery::before {
|
||||
left: 1rem;
|
||||
|
||||
background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
|
||||
}
|
||||
#gallery::after {
|
||||
right: 1rem;
|
||||
|
||||
background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
|
||||
}
|
||||
*/
|
||||
|
||||
.gallery img {
|
||||
margin: 0 0.5rem;
|
||||
|
||||
|
|
@ -114,3 +96,39 @@ main section img {
|
|||
.gallery img:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Filter
|
||||
*/
|
||||
.filter-list {
|
||||
margin: 0 0 1rem 0; padding: 0;
|
||||
width: 100%;
|
||||
display: flex; flex-direction: row;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-list div {
|
||||
margin: 0 1rem 0 0; padding: 0.5rem;
|
||||
width: 15rem; min-width: 8rem;
|
||||
height: 1.5rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center; align-items: center;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--bg-dark);
|
||||
}
|
||||
@media (max-width:750px) {
|
||||
.filter-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
.filter-list div {
|
||||
margin: 0 0 1rem 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.filter-list div:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
45
index.php
45
index.php
|
|
@ -86,12 +86,28 @@
|
|||
<p>To <span class="jeetix-colour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running!</p>
|
||||
<p>And to <span class="carty-colour">Carty</span> for teaching me how to run servers and the networking required to keep sites online!</p>
|
||||
<p><span class="mrhdash-colour">mrHDash</span> for the <a href="#refsheet">Ref Sheet</a> and most other art on the page!</p>
|
||||
<p>To <span class="zadok-colour">Zadok</span> for the silly tadium art in the nav bar!</p>
|
||||
<p>To <span class="zadok-colour">Zadok</span> for the silly taidum art in the nav bar!</p>
|
||||
</section>
|
||||
|
||||
<section id="gallery">
|
||||
<h2>Random pictures lol</h2>
|
||||
<img src="gallery/fluffy_VRchat-meet-2021.webp" class="gallery-image">
|
||||
<!--
|
||||
<div class="filter-list">
|
||||
<div>
|
||||
<p>Blur</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Grayscale</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Hue</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Saturation</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="gallery" draggable="false">
|
||||
<?php
|
||||
$images = glob("gallery/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);
|
||||
|
|
@ -131,14 +147,29 @@
|
|||
<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>
|
||||
|
||||
<h3>Artists I enjoy</h3>
|
||||
<h3>Music flavours</h3>
|
||||
<h4>Rock/Metal</h4>
|
||||
<p>Bring me the Horizon</p>
|
||||
<p>acloudyskye</p>
|
||||
<p>Gorillaz</p>
|
||||
<p>Conro</p>
|
||||
<p>Pink Floyed</p>
|
||||
<p>Ocean Colour Scene</p>
|
||||
<p>More coming soon!</p>
|
||||
<p>Oasis</p>
|
||||
<p>Fleetwood Mac</p>
|
||||
<p>Stereophonics</p>
|
||||
|
||||
<h4>EDM/Electronic</h4>
|
||||
<p>acloudyskye</p>
|
||||
<p>Conro</p>
|
||||
<p>Pixel Terror</p>
|
||||
|
||||
<h4>Other</h4>
|
||||
<p>Gorillaz</p>
|
||||
<p>M38</p>
|
||||
<p>C148</p>
|
||||
<p>The Rare Occasion</p>
|
||||
<p>Joywave</p>
|
||||
|
||||
<h3>Well...</h3>
|
||||
<p>I listen to everything, but feel free to complain to me about my choices!</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
@ -150,7 +181,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<h3>Page status</h3>
|
||||
<p>Last updated 16 Jun 2022</p>
|
||||
<p>Last updated 17 Jun 2022</p>
|
||||
<p>Made and designed by <span class="fluffy-colour">Fluffy</span></p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,6 @@
|
|||
@import "css/main.css";
|
||||
@import "css/footer.css";
|
||||
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Rubik", sans-serif;
|
||||
src: url(fonts/Rubik.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
src: url(fonts/LexendDeca.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Code', monospace;
|
||||
src: url(fonts/FiraCode.ttf) format('truetype');
|
||||
}
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #151515;
|
||||
--bg-dark: #0f0f0f;
|
||||
|
|
@ -73,7 +58,7 @@ p,a {
|
|||
font-family: "Fira Code", monospace;
|
||||
}
|
||||
|
||||
h1,h2,h3 {
|
||||
h1,h2,h3,h4 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--h);
|
||||
|
|
@ -87,6 +72,9 @@ h2 {
|
|||
h3 {
|
||||
font-size: 23px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--green);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue