From f8a12761bdc9a9d60922aa4908f3ee763308a1af Mon Sep 17 00:00:00 2001 From: HEJOK254 <90698026+HEJOK254@users.noreply.github.com> Date: Wed, 4 Sep 2024 01:39:55 +0200 Subject: [PATCH] Footer Redesign --- index.html | 54 +++++--- resources/images/logos/daily-dev-white.svg | 19 +++ resources/scripts/random.js | 82 +++++++++++- resources/styles/footer.css | 143 +++++++++++++++++++-- 4 files changed, 262 insertions(+), 36 deletions(-) create mode 100644 resources/images/logos/daily-dev-white.svg diff --git a/index.html b/index.html index c2fbac8..4ceda3d 100644 --- a/index.html +++ b/index.html @@ -106,25 +106,43 @@

Five nights at freddy's

diff --git a/resources/images/logos/daily-dev-white.svg b/resources/images/logos/daily-dev-white.svg new file mode 100644 index 0000000..b7c5230 --- /dev/null +++ b/resources/images/logos/daily-dev-white.svg @@ -0,0 +1,19 @@ + + + + Logo/White + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/resources/scripts/random.js b/resources/scripts/random.js index c42ec9a..9d31113 100644 --- a/resources/scripts/random.js +++ b/resources/scripts/random.js @@ -1,5 +1,5 @@ // Credit: Takos c: (he came up with all those random strings) -const strings = [ +const longStrings = [ "Hejok254 was here", "I am a foot", "I own an elbow!", @@ -67,10 +67,82 @@ const strings = [ "69th message hehe", // Not really because I've removed some lmao "dawg" ]; +const shortStrings = [ + "Hejok254 was here", + "I am a foot", + "I own an elbow!", + "Peter, the horse is here", + "you know what that means... F I S H", + "Le fish au chocolat", + "#CAOE68", + "awesome website moment", + "holy moly", + ":)", + "Dash all day, dash all night", + "Im going to sleep", + "wake up", + "She garten on my banban til i opila bird", + "did you ever saw a so fast dog?", + "i love cp (creator points [gd])", + "Hejok69420 swag", + "Your home security is great... or is it?", + "yes", + "is water wet?", + "bowomp", + "*instert message here*", + "McDonald fries hit different", + "rtyhn mju.j8ikl", + "meow", + "https://www.youtube.com/watch?v=dQw4w9WgXcQ", + "baller", + "i got that rgbtq keyboard", + ":3", + "thats so awesome sauce", + "an apple a day keeps the doctor away", + "chroma core 2027", + "𝓯𝓻𝓮𝓪𝓴𝔂", + "fish jumpscare", + "MILF - Man I Love Frogs", + "come kiss me on my hot mouth, im feeling romantical", + "CAREFUL SPONGEBOB, CAREFUL SPONGEBOB, CAREFUL SPONGEBOB!!!", + "what the dog doing?", + "Everybody asks what the dog doing, but not how the dog doing :(", + "stop edging me like this lil bro", + "John H. Backlights", + "¯\\_(ツ)_/¯", + "chat, get his address", + "Takos reference", + ">>>> TIDAL >>>>", + "<<<< WAVE <<<<", + "woah, a pipe bomb!", + "153.383.61.563", + "har har har har har har har har har har", + "KILLBOT", + "The banana spoke in riddles", + "Pidgeons are not real", + "The heavy is dead?!!", + "GOLF!", + "i love money", + "We need to cook jesse", + "oh damn it, the monkey escaped", + "LETS GO GAMBLING!", + "aw dang it", + "i cant stop winning!", + "michael jackson", + "bo'ohw'o'wo'er", + "help me", + "69th message hehe", // Not really because I've removed some lmao + "dawg" +]; -const randomElements = document.querySelectorAll(".randomText"); -const stringCount = strings.length; +const randomLongElements = document.querySelectorAll(".randomText"); +const randomShortElements = document.querySelectorAll(".randomTextShort"); +const longStringCount = longStrings.length; +const shortStringCount = longStrings.length; -randomElements.forEach((element) => { - element.innerHTML = strings[Math.floor(Math.random() * stringCount)]; +randomLongElements.forEach((element) => { + element.innerHTML = longStrings[Math.floor(Math.random() * longStringCount)]; +}); +randomShortElements.forEach((element) => { + element.innerHTML = shortStrings[Math.floor(Math.random() * shortStringCount)]; }); diff --git a/resources/styles/footer.css b/resources/styles/footer.css index cd3eb55..a2dc503 100644 --- a/resources/styles/footer.css +++ b/resources/styles/footer.css @@ -1,29 +1,146 @@ +:root { + --footer-title-size: 4rem; + --footer-mobile-title-size: 3.5rem; + --footer-small-title-size: 1.25rem; + --footer-icon-size: 2rem; +} + footer { - padding: 16px; + padding: 0; bottom: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; - text-align: center; + text-align: left; background-color: black; + overflow: hidden; + + display: flex; + flex-direction: column; + align-items: center; + + .mainContainer { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-end; + box-sizing: border-box; + padding: 4rem; + width: 100%; + + @media screen and (max-width: 791px) { + padding: 1rem; + } + + div { + padding: 2rem; + padding-top: 1rem; + } + + .contentContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0; + } + + #footerTitle { + flex-grow: 1; + + /* I have no idea how to make it scale properly lol */ + .randomTextShort { + color: lightgray; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 35vw; + + @media screen and (max-width: 791px) { + max-width: 80vw; + } + } + } + } + + h1 { + color: white; + font-size: var(--footer-title-size); + font-weight: 500; + margin: 0; + margin-bottom: 0.5rem; + padding: 0; + + /* Shorten and scale down the title on mobile displays */ + @media screen and (max-width: 791px) { + span { + display: none; + } + &::after { + content: "I'm a footer."; + font-size: var(--footer-mobile-title-size); + } + } + } + + h2 { + color: white; + font-size: var(--footer-small-title-size); + font-weight: 400; + margin: 0; + margin-bottom: 0.1rem; + padding: 0; + } + + p { + padding: 0; + margin: 0; + } + + .bottomPanel { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin: 1rem; + + * { + margin: 0 1rem; + padding: 0; + } + } +} + +.footerIcon { + --accent-color: white; + img { + vertical-align: middle; + width: var(--footer-icon-size); + height: var(--footer-icon-size); + } + padding: 0; + margin: 0; + border: none; } footer hr { background-color: aliceblue; border: none; border-radius: 2px; - height: 2px; + height: 1px; + width: 80%; } -footer a.button { - background-color: #1e20ad; - padding: 8px; - border-radius: 8px; - color: aliceblue; +footer a { + --accent-color: lightgray; + color: var(--accent-color); text-decoration: none; -} + border-bottom: 2px dotted lightgray; + + /* Sick glow effect controlled by --accent-color */ + @media (hover: hover) { + transition: all 0.8s ease; -.footerLogo { - width: 32px; - height: 32px; - padding: 8px; + &:hover { + filter: drop-shadow(0 0 0.75rem var(--accent-color)); + } + } }