diff --git a/__pycache__/app.cpython-310.pyc b/__pycache__/app.cpython-310.pyc new file mode 100644 index 0000000..b1ea8a1 Binary files /dev/null and b/__pycache__/app.cpython-310.pyc differ diff --git a/app.js b/app.js deleted file mode 100644 index 8061ee6..0000000 --- a/app.js +++ /dev/null @@ -1,110 +0,0 @@ -function openTab(evt, tabName) { - var i, tabContent, navItem; - - tabContent = document.getElementsByClassName("tabContent"); - for (i = 0; i < tabContent.length; i++) { - tabContent[i].style.opacity = "0"; - tabContent[i].style.display = "none"; - } - - navItem = document.getElementsByClassName("nav-item"); - for (i = 0; i < navItem.length; i++) { - navItem[i].className = navItem[i].className.replace(" nav-item_selected", ""); - } - - document.getElementById(tabName).style.display = "block"; - setTimeout(function() { - document.getElementById(tabName).style.opacity = "1"; - }, 100); - - evt.currentTarget.className += " nav-item_selected"; - - window.history.replaceState(null, null, `?t=${tabName}`); - - document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px"; - document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px"; -} - - -// Scroll listener to change hero look -function scrollFunction(id, section) { - const scrollActivate = 220; - const selector = document.querySelector(id); - - selector.addEventListener("scroll", (event) => { - if (selector.scrollTop > scrollActivate) { - if (!$(selector).hasClass("hero_scrolled")) { - $(".hero")[section].className += " hero_scrolled"; - $(".hero")[section].style.height = ""; - } - } else { - $(".hero")[section].className = "hero"; - $(".hero")[section].style.height = `calc(20rem - ${selector.scrollTop}px)`; - $(".hero img")[section].style.filter = `blur(${2 + (selector.scrollTop / 20)}px) brightness(0.7)`; - } - }); -} - - -// Special link -document.querySelector("#refsheet").onclick = function() { $('.nav-item')[3].click(); } - -// Link to social medias -document.querySelector("#twitter_btn").onclick = function() { window.open("https://twitter.com/fluffybeanUwU", "_blank"); } -document.querySelector('#mastodon_btn').onclick = function() { window.open("https://meow.social/@Fluffy_Bean", "_blank"); } -document.querySelector("#telegram_btn").onclick = function() { window.open("http://t.me/Fluffy_Bean", "_blank"); } -document.querySelector("#github_btn").onclick = function() { window.open("https://github.com/Fluffy-Bean", "_blank"); } -document.querySelector("#discord_btn").onclick = function() { - navigator.clipboard.writeText("Fluffy Bean#5212"); - - this.innerHTML = "

Copied!

"; - this.style.backgroundColor = "#8c977d"; - this.style.color = "#151515"; - - setTimeout(() => { - this.innerHTML = "

Discord

"; - this.style.backgroundColor = ""; - this.style.color = ""; - }, 2000); -} - -window.onpopstate = function(e){ - const urlParams = new URLSearchParams(window.location.search); - const tab = urlParams.get('t').toLowerCase(); - - if (tab === "home") { - $('.nav-item')[0].click(); - } else if (tab === "hobbies") { - $('.nav-item')[1].click(); - } else if (tab === "experiance") { - $('.nav-item')[2].click(); - } else if (tab === "gallery") { - $('.nav-item')[3].click(); - } else { - $('.nav-item')[0].click(); - } -}; - -$(document).ready(function() { - // Assign scroll to all sections - scrollFunction("#Home", 0); - scrollFunction("#Hobbies", 1); - scrollFunction("#Experiance", 2); - scrollFunction("#Gallery", 3); - - const urlParams = new URLSearchParams(window.location.search); - const tab = urlParams.get('t').toLowerCase(); - - // Switch to tab on load - if (tab === "home") { - $('.nav-item')[0].click(); - } else if (tab === "hobbies") { - $('.nav-item')[1].click(); - } else if (tab === "experiance") { - $('.nav-item')[2].click(); - } else if (tab === "gallery") { - $('.nav-item')[3].click(); - } else { - $('.nav-item')[0].click(); - } -}); \ No newline at end of file diff --git a/app.py b/app.py new file mode 100644 index 0000000..caea439 --- /dev/null +++ b/app.py @@ -0,0 +1,83 @@ +from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session +from werkzeug.utils import secure_filename +import os +import random + + +app = Flask(__name__) + + +# +# ERROR HANDLERS +# +@app.errorhandler(405) +def method_not_allowed(e): + error = '405' + msg = 'Method sussy wussy' + return render_template('error.html', error=error, msg=msg), 404 + + +@app.errorhandler(404) +def page_not_found(e): + error = '404' + msg = 'Could not find what you need!' + return render_template('error.html', error=error, msg=msg), 404 + + +@app.errorhandler(403) +def forbidden(e): + error = '403' + msg = 'Go away! This is no place for you!' + return render_template('error.html', error=error, msg=msg), 403 + + +@app.errorhandler(410) +def gone(e): + error = '410' + msg = 'The page is no longer available! *sad face*' + return render_template('error.html', error=error, msg=msg), 410 + + +@app.errorhandler(500) +def internal_server_error(e): + error = '500' + msg = 'Server died inside :c' + return render_template('error.html', error=error, msg=msg), 500 + + +# +# ROUTES +# +@app.route('/') +def index(): + return render_template('index.html') + + +@app.route('/funny') +def funny(): + return render_template('funny.html') + +@app.route('/error//') +def error(error, msg): + try: + error = str(error) + except: + abort(405) + + try: + msg = str(msg) + except: + abort(405) + + return render_template('error.html', error=error, msg=msg) + + +# +# METHODS +# +@app.route('/fileList/', methods=['GET']) +def image_list(item_type): + if request.method != 'GET': + abort(405) + + #return jsonify(item_list) \ No newline at end of file diff --git a/css/_footer.scss b/css/_footer.scss deleted file mode 100644 index c7645f1..0000000 --- a/css/_footer.scss +++ /dev/null @@ -1,37 +0,0 @@ -footer { - margin: 0; - padding: 0.5rem 1rem; - - width: 100%; - height: 2.5rem; - - display: flex; - flex-direction: row; - gap: 1rem; - - justify-content: space-around; - align-items: center; - - box-sizing: border-box; - - background-color: $black-darker; - - border-radius: 0 0 0.5rem 0.5rem; - - p, - a { - margin: 0; - padding: 0; - - font-family: $font-body; - font-size: 0.8rem; - font-weight: 800; - font-stretch: semi-condensed; - - color: $white; - - display: block; - - text-transform: uppercase; - } -} diff --git a/css/_hero.scss b/css/_hero.scss deleted file mode 100644 index 5dafc03..0000000 --- a/css/_hero.scss +++ /dev/null @@ -1,120 +0,0 @@ -.heroSpacing { - margin: 0; - padding: 0; - - width: 100%; - height: 20rem; - - display: block; - - background-color: $black-darker; -} - -.hero { - margin: 0; - padding: 1rem; - - width: 100%; - height: 20rem; - - display: flex; - flex-direction: column; - gap: 1rem; - - position: absolute; - top: 3rem; - - box-sizing: border-box; - - background-color: $black; - - overflow: hidden; - - pointer-events: none; - user-select: none; - - h1 { - margin: 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 2.5rem; - font-weight: 800; - font-stretch: ultra-expanded; - - line-height: 1; - - color: $white; - border-left: 1.5rem solid $green; - - transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); - - z-index: +2; - } - p { - margin: 0; - padding: 0; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - - color: $white; - - z-index: +2; - } - - img { - margin: 0; - padding: 0; - - width: 100%; - height: 100%; - - opacity: 1; - - filter: blur(2px) brightness(0.7); - - object-fit: cover; - object-position: center; - - position: absolute; - top: 0; - left: 0; - - z-index: +1; - } -} - -.hero_scrolled { - padding: 0.5rem 1rem; - - height: 3rem; - - top: 0; - - justify-content: center; - - background-color: $black-darker; - - border-radius: 0.5rem 0.5rem 0 0; - - pointer-events: all; - - h1 { - padding: 0; - - font-size: 1.5rem; - - border-left: 0rem $black-darker solid; - } - - p { - display: none; - } - - img { - opacity: 0; - } -} diff --git a/css/_nav.scss b/css/_nav.scss deleted file mode 100644 index 0b2524b..0000000 --- a/css/_nav.scss +++ /dev/null @@ -1,86 +0,0 @@ -nav { - margin: 0; - padding: 0; - - width: 100%; - - display: flex; - flex-direction: row; - justify-content: space-between; - - position: relative; - - border-radius: 0.5rem 0.5rem 0 0; -} - -.nav-item { - margin: 0; - padding: 0.5rem; - - width: 100%; - height: 3rem; - - display: flex; - justify-content: center; - align-items: center; - - box-sizing: border-box; - - background-color: $black; - - border: none; - - user-select: none; - - &:hover { - background-color: $black-darker; - } - - p, - a { - margin: auto; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - - color: $white; - - transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); - } - - &:nth-child(1) { - border-radius: 0.5rem 0 0 0; - } - &:nth-child(4) { - border-radius: 0 0.5rem 0 0; - } -} - -.nav-item_selected { - background-color: $black-est; -} - -#nav-item_underline { - margin: 0; - padding: 0; - - width: 25%; - height: 0.3rem; - - display: block; - - position: absolute; - - bottom: 0; - left: 0; - - background-color: $green; - - transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), - width 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} diff --git a/css/_variables.scss b/css/_variables.scss deleted file mode 100644 index 16bf4b1..0000000 --- a/css/_variables.scss +++ /dev/null @@ -1,49 +0,0 @@ -// Variables -$black: #151515; -$black-darker: #121212; -$black-est: #101010; -$white: #e8e5e5; - -$red: #b66467; -$orange: #d8a657; -$yellow: #d9bc8c; -$green: #8c977d; -$blue: #8da3b9; -$purple: #a988b0; - -@font-face { - font-family: 'Mona-Sans'; - src: url('fonts/Mona-Sans.woff2') format('woff2 supports variations'), - url('fonts/Mona-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} -@font-face { - font-family: 'Hubot-Sans'; - src: url('fonts/Hubot-Sans.woff2') format('woff2 supports variations'), - url('fonts/Hubot-Sans.woff2') format('woff2-variations'); - font-weight: 200 900; - font-stretch: 75% 125%; -} - -$font-header: "Mona-Sans", sans-serif; -$font-body: "Hubot-Sans", sans-serif; - -.c_red { - color: $red; -} -.c_orange { - color: $orange; -} -.c_yellow { - color: $yellow; -} -.c_green { - color: $green; -} -.c_blue { - color: $blue; -} -.c_purple { - color: $purple; -} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 9c16015..0000000 --- a/css/style.css +++ /dev/null @@ -1,439 +0,0 @@ -@font-face { - font-family: "Mona-Sans"; - src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("fonts/Mona-Sans.woff2") format("woff2-variations"); - font-weight: 200 900; - font-stretch: 75% 125%; -} -@font-face { - font-family: "Hubot-Sans"; - src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("fonts/Hubot-Sans.woff2") format("woff2-variations"); - font-weight: 200 900; - font-stretch: 75% 125%; -} -.c_red { - color: #b66467; -} - -.c_orange { - color: #d8a657; -} - -.c_yellow { - color: #d9bc8c; -} - -.c_green { - color: #8c977d; -} - -.c_blue { - color: #8da3b9; -} - -.c_purple { - color: #a988b0; -} - -nav { - margin: 0; - padding: 0; - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - position: relative; - border-radius: 0.5rem 0.5rem 0 0; -} - -.nav-item { - margin: 0; - padding: 0.5rem; - width: 100%; - height: 3rem; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - background-color: #151515; - border: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nav-item:hover { - background-color: #121212; -} -.nav-item p, -.nav-item a { - margin: auto; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - color: #e8e5e5; - transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} -.nav-item:nth-child(1) { - border-radius: 0.5rem 0 0 0; -} -.nav-item:nth-child(4) { - border-radius: 0 0.5rem 0 0; -} - -.nav-item_selected { - background-color: #101010; -} - -#nav-item_underline { - margin: 0; - padding: 0; - width: 25%; - height: 0.3rem; - display: block; - position: absolute; - bottom: 0; - left: 0; - background-color: #8c977d; - transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), width 0.2s cubic-bezier(0.86, 0, 0.07, 1); -} - -.heroSpacing { - margin: 0; - padding: 0; - width: 100%; - height: 20rem; - display: block; - background-color: #121212; -} - -.hero { - margin: 0; - padding: 1rem; - width: 100%; - height: 20rem; - display: flex; - flex-direction: column; - gap: 1rem; - position: absolute; - top: 3rem; - box-sizing: border-box; - background-color: #151515; - overflow: hidden; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.hero h1 { - margin: 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 2.5rem; - font-weight: 800; - font-stretch: ultra-expanded; - line-height: 1; - color: #e8e5e5; - border-left: 1.5rem solid #8c977d; - transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); - z-index: 2; -} -.hero p { - margin: 0; - padding: 0; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - font-stretch: semi-expanded; - color: #e8e5e5; - z-index: 2; -} -.hero img { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - opacity: 1; - filter: blur(2px) brightness(0.7); - -o-object-fit: cover; - object-fit: cover; - -o-object-position: center; - object-position: center; - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -.hero_scrolled { - padding: 0.5rem 1rem; - height: 3rem; - top: 0; - justify-content: center; - background-color: #121212; - border-radius: 0.5rem 0.5rem 0 0; - pointer-events: all; -} -.hero_scrolled h1 { - padding: 0; - font-size: 1.5rem; - border-left: 0rem #121212 solid; -} -.hero_scrolled p { - display: none; -} -.hero_scrolled img { - opacity: 0; -} - -footer { - margin: 0; - padding: 0.5rem 1rem; - width: 100%; - height: 2.5rem; - display: flex; - flex-direction: row; - gap: 1rem; - justify-content: space-around; - align-items: center; - box-sizing: border-box; - background-color: #121212; - border-radius: 0 0 0.5rem 0.5rem; -} -footer p, -footer a { - margin: 0; - padding: 0; - font-family: "Hubot-Sans", sans-serif; - font-size: 0.8rem; - font-weight: 800; - font-stretch: semi-condensed; - color: #e8e5e5; - display: block; - text-transform: uppercase; -} - -html { - margin: 0; - padding: 0; - height: 100%; - background-color: #121212; - overflow: hidden; -} - -body { - margin: 0; - padding: 0.5rem; - height: 100%; - background-image: url("../bg.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - box-sizing: border-box; -} - -@media (max-width: 500px) { - body { - padding: 0; - background-image: none; - } -} -main { - margin: 0 auto; - padding: 0; - max-width: 769px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - position: relative; - background-color: #151515; - box-sizing: border-box; - border-radius: 0.5rem; - z-index: 1; -} - -#Home, -#Hobbies, -#Experiance, -#Gallery { - overflow-y: scroll; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; -} -#Home::-webkit-scrollbar, -#Hobbies::-webkit-scrollbar, -#Experiance::-webkit-scrollbar, -#Gallery::-webkit-scrollbar { - display: none; -} - -.main { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 1rem; - box-sizing: border-box; - overflow: hidden; -} - -.tabContent { - display: none; - height: 100%; - opacity: 0; - transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); - overflow: hidden; -} - -.content { - margin: 0; - padding: 1rem 1.5rem; - width: 100%; - height: auto; - display: flex; - flex-direction: column; - gap: 0.5rem; - box-sizing: border-box; - overflow: hidden; - background-color: #151515; -} -.content h2 { - margin: 0.5rem 0 0.5rem 0; - padding: 0; - font-family: "Mona-Sans", sans-serif; - font-size: 2rem; - font-stretch: ultra-expanded; - color: #8c977d; -} -.content h3 { - margin: 0.5rem 0 0.5rem 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 1.5rem; - font-stretch: ultra-expanded; - color: #e8e5e5; - border-left: 0.9rem solid #8c977d; -} -.content h4 { - margin: 0.5rem 0 0.25rem 0; - padding: 0 0 0 0.5rem; - font-family: "Mona-Sans", sans-serif; - font-size: 1.25rem; - font-stretch: ultra-expanded; - color: #e8e5e5; - border-left: 0.6rem solid #8c977d; -} -.content br { - margin: 0 0 2rem 0; - padding: 0; -} -.content i { - margin: 0; - padding: 0; - display: inline-block; - vertical-align: middle; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; -} -.content p { - margin: 0; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1.1rem; - font-weight: 600; - color: #e8e5e5; -} -.content a { - margin: 0; - padding: 0; - display: inline-block; - font-family: "Hubot-Sans", sans-serif; - font-size: 1rem; - font-weight: 600; - color: #e8e5e5; - -webkit-text-decoration: underline 0.3rem #8c977d; - text-decoration: underline 0.3rem #8c977d; - transition: all 0.15s ease-in-out; -} -.content a:hover { - color: #8c977d; - -webkit-text-decoration: underline 0.1px #151515; - text-decoration: underline 0.1px #151515; -} -.content img { - margin: 0 auto; - padding: 0; - max-width: 100%; - max-height: 30rem; - width: auto; - height: auto; - display: block; - -o-object-fit: contain; - object-fit: contain; - border-radius: 0.5rem; -} -.content iframe { - border-radius: 0.5rem; -} - -.matrix-list { - margin: 0; - padding: 0; - width: auto; - height: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem; -} -.matrix-list > * { - white-space: nowrap; -} -.matrix-list > *::after { - content: ","; -} -.matrix-list > *:last-child::after { - content: ""; -} - -.btn_large { - margin: 0; - padding: 0.5rem 1rem; - width: auto; - height: auto; - font-family: "Hubot-Sans", sans-serif; - font-size: 1.25rem; - font-weight: 600; - background-color: #121212; - color: #e8e5e5; - display: flex; - justify-content: end; - align-items: center; - gap: 0.5rem; - border: none; - border-left: 0.3rem solid #8c977d; - border-radius: 0; - box-sizing: border-box; - cursor: pointer; - transition: all 0.2s ease-in-out; -} -.btn_large p { - color: inherit; - font-stretch: expanded; -} -.btn_large:hover { - background-color: #101010; - color: #8c977d; - border-left: 0.9rem solid #8c977d; -} -.btn_large:hover p { - color: inherit; -}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map deleted file mode 100644 index c6fef9a..0000000 --- a/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"AAaA;EACE,wBAAA;EACE,8HAAA;EAEA,oBAAA;EACA,sBAAA;ACbJ;ADeA;EACI,yBAAA;EACA,gIAAA;EAEA,oBAAA;EACA,sBAAA;ACdJ;ADoBA;EACE,cA1BI;ACQN;;ADoBA;EACE,cA5BO;ACWT;;ADmBA;EACE,cA9BO;ACcT;;ADkBA;EACE,cAhCM;ACiBR;;ADiBA;EACE,cAlCK;ACoBP;;ADgBA;EACE,cApCO;ACuBT;;AClCA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EAEA,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,kBAAA;EAEA,gCAAA;ADiCF;;AC9BA;EACE,SAAA;EACA,eAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,sBAAA;EAEA,yBF3BM;EE6BN,YAAA;EAEA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AD2BF;ACzBE;EACE,yBFjCW;AC4Df;ACxBE;;EAEE,YAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCFhBQ;EEiBR,eAAA;EACA,gBAAA;EACA,2BAAA;EAEA,cF9CI;EEgDJ,mDAAA;ADsBJ;ACnBE;EACE,2BAAA;ADqBJ;ACnBE;EACE,2BAAA;ADqBJ;;ACjBA;EACE,yBF7DU;ACiFZ;;ACjBA;EACE,SAAA;EACA,UAAA;EAEA,UAAA;EACA,cAAA;EAEA,cAAA;EAEA,kBAAA;EAEA,SAAA;EACA,OAAA;EAEA,yBFxEM;EE0EN,+FAAA;ADcF;;AEjGA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,aAAA;EAEA,cAAA;EAEA,yBHPa;ACwGf;;AE9FA;EACE,SAAA;EACA,aAAA;EAEA,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,SAAA;EAEA,kBAAA;EACA,SAAA;EAEA,sBAAA;EAEA,yBH3BM;EG6BN,gBAAA;EAEA,oBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AF0FF;AExFE;EACE,SAAA;EACA,qBAAA;EAEA,oCHXU;EGYV,iBAAA;EACA,gBAAA;EACA,4BAAA;EAEA,cAAA;EAEA,cH1CI;EG2CJ,iCAAA;EAEA,mDAAA;EAEA,UAAA;AFqFJ;AEnFE;EACE,SAAA;EACA,UAAA;EAEA,qCH5BQ;EG6BR,eAAA;EACA,gBAAA;EACA,2BAAA;EAEA,cH1DI;EG4DJ,UAAA;AFkFJ;AE/EE;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,UAAA;EAEA,iCAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,kBAAA;EACA,MAAA;EACA,OAAA;EAEA,UAAA;AF2EJ;;AEvEA;EACE,oBAAA;EAEA,YAAA;EAEA,MAAA;EAEA,uBAAA;EAEA,yBHhGa;EGkGb,gCAAA;EAEA,mBAAA;AFoEF;AElEE;EACE,UAAA;EAEA,iBAAA;EAEA,+BAAA;AFkEJ;AE/DE;EACE,aAAA;AFiEJ;AE9DE;EACE,UAAA;AFgEJ;;AGrLA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,cAAA;EAEA,aAAA;EACA,mBAAA;EACA,SAAA;EAEA,6BAAA;EACA,mBAAA;EAEA,sBAAA;EAEA,yBJda;EIgBb,gCAAA;AHkLF;AGhLE;;EAEE,SAAA;EACA,UAAA;EAEA,qCJIQ;EIHR,iBAAA;EACA,gBAAA;EACA,4BAAA;EAEA,cJ1BI;EI4BJ,cAAA;EAEA,yBAAA;AH8KJ;;AI1MA;EACE,SAAA;EACA,UAAA;EAEA,YAAA;EAEA,yBLVa;EKYb,gBAAA;AJ0MF;;AIvMA;EACE,SAAA;EACA,eAAA;EAEA,YAAA;EAEA,kCAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EAEA,sBAAA;AJuMF;;AIpMA;EACE;IACE,UAAA;IACA,sBAAA;EJuMF;AACF;AIpMA;EACE,cAAA;EACA,UAAA;EAEA,gBAAA;EACA,WAAA;EAEA,YAAA;EAEA,aAAA;EACA,sBAAA;EAEA,kBAAA;EAEA,yBLnDM;EKqDN,sBAAA;EAEA,qBAAA;EAEA,UAAA;AJ8LF;;AI3LA;;;;EAIE,kBAAA;EACA,uBAAA;EACA,qBAAA;EACA,wBAAA;AJ8LF;AI7LE;;;;EACE,aAAA;AJkMJ;;AI9LA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,sBAAA;EACA,SAAA;EAEA,sBAAA;EAEA,gBAAA;AJ6LF;;AI1LA;EACE,aAAA;EAEA,YAAA;EAEA,UAAA;EAEA,mDAAA;EAEA,gBAAA;AJyLF;;AItLA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,sBAAA;EACA,WAAA;EAEA,sBAAA;EAEA,gBAAA;EAEA,yBLpHM;ACwSR;AIlLE;EACE,yBAAA;EACA,UAAA;EAEA,oCL/FU;EKgGV,eAAA;EACA,4BAAA;EAEA,cLtHI;ACwSR;AI/KE;EACE,yBAAA;EACA,qBAAA;EAEA,oCL1GU;EK2GV,iBAAA;EACA,4BAAA;EAEA,cLtII;EKuIJ,iCAAA;AJ+KJ;AI5KE;EACE,0BAAA;EACA,qBAAA;EAEA,oCLtHU;EKuHV,kBAAA;EACA,4BAAA;EAEA,cLlJI;EKmJJ,iCAAA;AJ4KJ;AIzKE;EACE,kBAAA;EACA,UAAA;AJ2KJ;AIxKE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,sBAAA;EAEA,qCL1IQ;EK4IR,eAAA;AJsKJ;AInKE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCLrJQ;EKsJR,iBAAA;EACA,gBAAA;EAEA,cLlLI;ACoVR;AI/JE;EACE,SAAA;EACA,UAAA;EAEA,qBAAA;EAEA,qCLlKQ;EKmKR,eAAA;EACA,gBAAA;EAEA,cL/LI;EKiMJ,iDAAA;UAAA,yCAAA;EAEA,iCAAA;AJ4JJ;AI1JI;EACE,cLjME;EKkMF,gDAAA;UAAA,wCAAA;AJ4JN;AIxJE;EACE,cAAA;EACA,UAAA;EAEA,eAAA;EACA,iBAAA;EAEA,WAAA;EACA,YAAA;EAEA,cAAA;EAEA,sBAAA;KAAA,mBAAA;EAEA,qBAAA;AJqJJ;AIlJE;EACE,qBAAA;AJoJJ;;AIhJA;EACE,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,WAAA;AJiJF;AI/IE;EACE,mBAAA;AJiJJ;AI/II;EACE,YAAA;AJiJN;AI/II;EACE,WAAA;AJiJN;;AI5IA;EACE,SAAA;EACA,oBAAA;EAEA,WAAA;EACA,YAAA;EAEA,qCLvOU;EKwOV,kBAAA;EACA,gBAAA;EAEA,yBLtQa;EKuQb,cLrQM;EKuQN,aAAA;EACA,oBAAA;EACA,mBAAA;EACA,WAAA;EAEA,YAAA;EACA,iCAAA;EACA,gBAAA;EAEA,sBAAA;EAEA,eAAA;EAEA,gCAAA;AJuIF;AIrIE;EACE,cAAA;EACA,sBAAA;AJuIJ;AIpIE;EACE,yBL7RQ;EK8RR,cLxRI;EKyRJ,iCAAA;AJsIJ;AIpII;EACE,cAAA;AJsIN","file":"style.css"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss deleted file mode 100644 index 2857f35..0000000 --- a/css/style.scss +++ /dev/null @@ -1,297 +0,0 @@ -@import 'variables'; -@import 'nav'; -@import 'hero'; -@import 'footer'; - - -html { - margin: 0; - padding: 0; - - height: 100%; - - background-color: $black-darker; - - overflow: hidden; -} - -body { - margin: 0; - padding: 0.5rem; - - height: 100%; - - background-image: url("../bg.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - - box-sizing: border-box; -} - -@media (max-width: 500px) { - body { - padding: 0; - background-image: none; - } -} - -main { - margin: 0 auto; - padding: 0; - - max-width: 769px; - width: 100%; - - height: 100%; - - display: flex; - flex-direction: column; - - position: relative; - - background-color: $black; - - box-sizing: border-box; - - border-radius: 0.5rem; - - z-index: +1; -} - -#Home, -#Hobbies, -#Experiance, -#Gallery { - overflow-y: scroll; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } -} - -.main { - margin: 0; - padding: 0; - - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; - gap: 1rem; - - box-sizing: border-box; - - overflow: hidden; -} - -.tabContent { - display: none; - - height: 100%; - - opacity: 0; - - transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); - - overflow: hidden; -} - -.content { - margin: 0; - padding: 1rem 1.5rem; - - width: 100%; - height: auto; - - display: flex; - flex-direction: column; - gap: 0.5rem; - - box-sizing: border-box; - - overflow: hidden; - - background-color: $black; - - h2 { - margin: 0.5rem 0 0.5rem 0; - padding: 0; - - font-family: $font-header; - font-size: 2rem; - font-stretch: ultra-expanded; - - color: $green; - } - - h3 { - margin: 0.5rem 0 0.5rem 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 1.5rem; - font-stretch: ultra-expanded; - - color: $white; - border-left: 0.9rem solid $green; - } - - h4 { - margin: 0.5rem 0 0.25rem 0; - padding: 0 0 0 0.5rem; - - font-family: $font-header; - font-size: 1.25rem; - font-stretch: ultra-expanded; - - color: $white; - border-left: 0.6rem solid $green; - } - - br { - margin: 0 0 2rem 0; - padding: 0; - } - - i { - margin: 0; - padding: 0; - - display: inline-block; - - vertical-align: middle; - - font-family: $font-body; - - font-size: 1rem; - } - - p { - margin: 0; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1.1rem; - font-weight: 600; - - color: $white; - } - - a { - margin: 0; - padding: 0; - - display: inline-block; - - font-family: $font-body; - font-size: 1rem; - font-weight: 600; - - color: $white; - - text-decoration: underline 0.3rem $green; - - transition: all 0.15s ease-in-out; - - &:hover { - color: $green; - text-decoration: underline 0.1px $black; - } - } - - img { - margin: 0 auto; - padding: 0; - - max-width: 100%; - max-height: 30rem; - - width: auto; - height: auto; - - display: block; - - object-fit: contain; - - border-radius: 0.5rem; - } - - iframe { - border-radius: 0.5rem; - } -} - -.matrix-list { - margin: 0; - padding: 0; - - width: auto; - height: auto; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem; - - > * { - white-space: nowrap; - - &::after { - content:","; - } - &:last-child::after { - content:""; - } - } -} - -.btn_large { - margin: 0; - padding: 0.5rem 1rem; - - width: auto; - height: auto; - - font-family: $font-body; - font-size: 1.25rem; - font-weight: 600; - - background-color: $black-darker; - color: $white; - - display: flex; - justify-content: end; - align-items: center; - gap: 0.5rem; - - border: none; - border-left: 0.3rem solid $green; - border-radius: 0; - - box-sizing: border-box; - - cursor: pointer; - - transition: all 0.2s ease-in-out; - - p { - color: inherit; - font-stretch: expanded; - } - - &:hover { - background-color: $black-est; - color: $green; - border-left: 0.9rem solid $green; - - p { - color: inherit; - } - } -} \ No newline at end of file diff --git a/img/funny.jpg b/img/funny.jpg deleted file mode 100644 index 3239b03..0000000 Binary files a/img/funny.jpg and /dev/null differ diff --git a/img/landscape.webp b/img/landscape.webp deleted file mode 100644 index f34a982..0000000 Binary files a/img/landscape.webp and /dev/null differ diff --git a/img/meet-2021.webp b/img/meet-2021.webp deleted file mode 100644 index 8a05a07..0000000 Binary files a/img/meet-2021.webp and /dev/null differ diff --git a/img/ref.png b/img/ref.png deleted file mode 100644 index 55b6f4c..0000000 Binary files a/img/ref.png and /dev/null differ diff --git a/img/sad.png b/img/sad.png deleted file mode 100644 index ae6b3a2..0000000 Binary files a/img/sad.png and /dev/null differ diff --git a/img/sneak.png b/img/sneak.png deleted file mode 100644 index fee8fcc..0000000 Binary files a/img/sneak.png and /dev/null differ diff --git a/img/taidum.png b/img/taidum.png deleted file mode 100644 index a9d4d7b..0000000 Binary files a/img/taidum.png and /dev/null differ diff --git a/index.php b/index.php deleted file mode 100644 index 50b654d..0000000 --- a/index.php +++ /dev/null @@ -1,226 +0,0 @@ - - - - - Hiiiiiii - - - - - - - - - - - - - - - - - -
- - -
-
-
- - - ".$welcome[array_rand($welcome)].""; - ?> - -

I'm a smelly Maned Wolf that goes by Fluffy Bean. I'm 17 years old that has weird interests

-
- - - -
-

Social Links

- - - - - - -
- -

Special Thanks

-

Jeetix: Helping me with learning how to make websites!

-

Carty: Teaching me how to run servers and the networking!

-

mrHDash: For the Ref Sheet and most other art on the page!

-

Zadok: Silly taidum art seen below!

-

Shep: For the free YHC!

- -
- - Orange maned wolf sona in Taidum form -
-
- -
-
- -

Hobbies

-

Hobbies hobbies hobbies hobbies hobbies hobbies dick hobbies hobbies hobbies hobbies hobbies

-
- - - -
- - -

Metal Boxes

-

My metal box

-

My second most favorite thing to play around with. Though I usually manage to break them, I like making them do things that they weren't designed todo!

-

Due to this I also use Arch Linux btw. Though I haven't used Linux for all that much, I already made some pretty cool things with it!

- Screenshot of Linux desktop environment -

Heres a screenshot of my desktop, for all you nerds thats a Qtile session, Polybar bar with a few custom scripts, Rofi for my app launcher and Dunst for my notification daemon

- -

But its not all graphical

-

I also play around with servers and have this website running on personal one! Its a small Zotac ZBOX-CI527 upgraded to 16Bs of ram with a total of 600GBs of SSD storage.

-

For the OS, I have Proxmox as its easier to avoid fuckups to the system as a whole! Also a simple Web-Interface for managing everything :3

- -
- -

Electronics

-

I also recently picked up micro controlers and other fancy things like that. I am still learning, but its been great fun and I made this!

-

A Pi Pico wired up to an LCD and Rotary encoder. Though this is simple, it was interesting learning how to get code to communicate with these parts

- LCD saying 0 days since I peed myself, attached to a pico with a rotary switch laying to the left of it - -
- -

Mah Music taste!

-

I like music! And heres what I like listening to.

-

Rock/Metal

-
-

Bring me the Horizon

-

Pink Floyd

-

Ocean Colour Scene

-

Oasis

-

Fleetwood Mac

-

Stereophonics

-

Muse

-
- -

EDM/DnB

-
-

acloudyskye

-

Conro

-

Pixel Terror

-
- -

Other

-
-

M38

-

C148

-

The Rare Occasion

-

Cavetown

-

Daughter

-

Low Roar

-

Gorillaz

-

Joywave

-

Twenty One Pilots

-
- -
- - -
-
- -
-
- -

Experiance

-

Yet still no job lol

-
- - - -
-

Experience in programming

-

I have a decent understanding of PC operating systems and now also a start on networking with setting up my own server.

-

I delved into computers from when I was very smol and started with Scratch (not BASIC like ya’ll older folks) and then progressed to Python in Secondary School where I started to also explore other possibilities.

-

ince then I attempted many thingies like HTML, CSS, PHP, JavaScript, Bash, C# and other stuffs!

-

I got into Linux just about a year ago when writing this (29th June 22) and broke many things, but that got me into configuring a lot of software! Such as Rofi, Polybar, fish and even Discord, Spotify and Firefox!

-

These stats come from my GitHub profile

- -
-
- - -
- -
-

Made by Fluffy

-

Updated at 16 Nov

-
- - -
- - - \ No newline at end of file diff --git a/static/css/_aside.scss b/static/css/_aside.scss new file mode 100644 index 0000000..fc0801f --- /dev/null +++ b/static/css/_aside.scss @@ -0,0 +1,118 @@ +@mixin aside-item($color) { + background-color: rgba($color, 0.1); + border: 1px solid rgba($color, 0.5); + color: $color; +} + +.aside { + margin: 0; + padding: 0; + + background-color: $black; + + box-sizing: border-box; + + hr { + margin: 0.5rem 0; + padding: 0; + + width: 100%; + height: 1px; + + background-color: $white; + border: none; + } + + br { + margin: 0.5rem 0; + padding: 0; + } +} +.aside-container { + margin: 0; + padding: 1rem; + + position: sticky; + top: 0; + + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.aside-item { + margin: 0; + padding: 0.75rem; + + width: 100%; + height: auto; + + background-color: transparent; + color: $white; + + text-decoration: none; + + display: flex; + align-items: center; + gap: 0.5rem; + + border: 1px solid transparent; + border-radius: 3px; + + transition: all 0.2s ease-in-out; + cursor: pointer; + + i { + opacity: 0; + transform: translateX(1rem); + transition: all 0.2s ease-in-out; + filter: blur(0.1rem); + + pointer-events: none; + } + + &:hover i { + opacity: 1; + transform: translateX(0); + filter: blur(0); + } +} +.aside-red { + @include aside-item($red); +} +.aside-yellow { + @include aside-item($yellow); +} +.aside-green { + @include aside-item($green); +} +.aside-blue { + @include aside-item($blue); +} +.aside-purple { + @include aside-item($purple); +} + +@media screen and (max-width: 768px) { + .aside { + display: block; + + position: fixed; + top: 3rem; + left: -100vw; + + width: calc(100vw - 1rem); + height: calc(100vh - 3rem); + + z-index: 68; + overflow-y: auto; + + box-shadow: 0 0 0.5rem 5px rgba($black, 0.5); + + transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; + } + + .aside-active { + opacity: 1; + left: 0; + } +} \ No newline at end of file diff --git a/static/css/_footer.scss b/static/css/_footer.scss new file mode 100644 index 0000000..7d896a1 --- /dev/null +++ b/static/css/_footer.scss @@ -0,0 +1,25 @@ +.footer { + margin: 0; + padding: 0; + + display: flex; + justify-content: center; + align-items: center; + + background-color: $black; + color: $white; + + p { + margin: 0; + padding: 0; + + font-size: 0.8rem; + } +} + +@media screen and (max-width: 768px) { + .footer { + background-color: $white; + color: $black; + } +} \ No newline at end of file diff --git a/static/css/_nav.scss b/static/css/_nav.scss new file mode 100644 index 0000000..e03b07d --- /dev/null +++ b/static/css/_nav.scss @@ -0,0 +1,56 @@ +.nav { + margin: 0; + padding: 0; + + background-color: $black; + color: $white; + + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + + position: relative; + + z-index: 69; + + p { + margin: 0 1rem; + padding: 0; + + font-size: 1rem; + } +} +.nav-toggle { + margin: 0; + padding: 0.5rem 1rem; + + display: none; + + background-color: transparent; + color: $white; + + border: none; + + i { + font-size: 1.5rem; + + display: inline-block; + + // display the hamburger icon vertically centered + line-height: 1.5rem; + } +} + +@media screen and (max-width: 768px) { + .nav { + justify-content: space-between; + + background-color: #121212; + } + .nav-toggle { + display: flex; + justify-content: center; + align-items: center; + } +} \ No newline at end of file diff --git a/static/css/_wrapper.scss b/static/css/_wrapper.scss new file mode 100644 index 0000000..c23fef1 --- /dev/null +++ b/static/css/_wrapper.scss @@ -0,0 +1,37 @@ +.wrapper { + margin: 0; + padding: 0; + + background-color: $white; + color: $black; + + border-radius: 6px 0 0 0; + + overflow: hidden; +} + +.content { + margin: 0; + padding: 0.5rem; + + height: 100vh; + + display: flex; + flex-direction: column; + gap: 1.5rem; + + position: relative; + + p, .btn { + margin: 0; + padding: 0; + + font-size: 1rem; + } +} + +@media screen and (max-width: 768px) { + .wrapper { + border-radius: 0; + } +} \ No newline at end of file diff --git a/static/css/scss/_grid.scss b/static/css/scss/_grid.scss new file mode 100644 index 0000000..fb24ddd --- /dev/null +++ b/static/css/scss/_grid.scss @@ -0,0 +1,35 @@ +body { + min-height: 100vh; + + display: grid; + grid-template-areas: 'aside nav' + 'aside wrapper' + 'footer wrapper'; + + grid-template-rows: 3rem auto 3rem; + grid-template-columns: 20rem 1fr; +} + +.nav { + grid-area: nav; +} +.wrapper { + grid-area: wrapper; +} +.aside { + grid-area: aside; +} +.footer { + grid-area: footer; +} + +@media screen and (max-width: 768px) { + body { + grid-template-areas: 'nav' + 'wrapper' + 'footer'; + + grid-template-rows: 3rem 1fr 3rem; + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/static/css/scss/_normalize.scss b/static/css/scss/_normalize.scss new file mode 100644 index 0000000..06fb2f4 --- /dev/null +++ b/static/css/scss/_normalize.scss @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; + + font-family: $font-header; + font-weight: 400; +} + +html { + margin: 0; + padding: 0; + + background-color: $black; + color: $white; + + -ms-overflow-style: none; + scrollbar-width: none; + + ::-webkit-scrollbar { + display: none; + } +} + +body { + margin: 0; + padding: 0; + + min-height: 100vh; + + background-color: $black; + + scroll-behavior: smooth; +} \ No newline at end of file diff --git a/static/css/scss/_variables.scss b/static/css/scss/_variables.scss new file mode 100644 index 0000000..2a60a42 --- /dev/null +++ b/static/css/scss/_variables.scss @@ -0,0 +1,44 @@ +$black: #151515; +$white: #e8e3e3; + +$red: #B66467; +$yellow: #D9BC8C; +$green: #8C977D; +$blue: #8DA3B9; +//$dblue: #222c45; +$purple: #A988B0; + +$primary: $green; + +@font-face { + font-family: 'Mona-Sans'; + src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'), + url('../fonts/Mona-Sans.woff2') format('woff2-variations'); + font-weight: 200 900; + font-stretch: 75% 125%; +} +@font-face { + font-family: 'Hubot-Sans'; + src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'), + url('../fonts/Hubot-Sans.woff2') format('woff2-variations'); + font-weight: 200 900; + font-stretch: 75% 125%; +} + +$font-header: "Mona-Sans", sans-serif; +$font-body: "Hubot-Sans", sans-serif; + +@function hexToRGB($hex) { + @return red($hex), green($hex), blue($hex); +} + +:root { + --red: #{hexToRGB($red)}; + --yellow: #{hexToRGB($yellow)}; + --green: #{hexToRGB($green)}; + --blue: #{hexToRGB($blue)}; + --purple: #{hexToRGB($purple)}; +} + +// I want to use this somewhere +//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%); \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..9f5b3f7 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,350 @@ +@font-face { + font-family: "Mona-Sans"; + src: url("../fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("../fonts/Mona-Sans.woff2") format("woff2-variations"); + font-weight: 200 900; + font-stretch: 75% 125%; +} +@font-face { + font-family: "Hubot-Sans"; + src: url("../fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("../fonts/Hubot-Sans.woff2") format("woff2-variations"); + font-weight: 200 900; + font-stretch: 75% 125%; +} +:root { + --red: 182, 100, 103; + --yellow: 217, 188, 140; + --green: 140, 151, 125; + --blue: 141, 163, 185; + --purple: 169, 136, 176; +} + +body { + min-height: 100vh; + display: grid; + grid-template-areas: "aside nav" "aside wrapper" "footer wrapper"; + grid-template-rows: 3rem auto 3rem; + grid-template-columns: 20rem 1fr; +} + +.nav { + grid-area: nav; +} + +.wrapper { + grid-area: wrapper; +} + +.aside { + grid-area: aside; +} + +.footer { + grid-area: footer; +} + +@media screen and (max-width: 768px) { + body { + grid-template-areas: "nav" "wrapper" "footer"; + grid-template-rows: 3rem 1fr 3rem; + grid-template-columns: 1fr; + } +} +* { + box-sizing: border-box; + font-family: "Mona-Sans", sans-serif; + font-weight: 400; +} + +html { + margin: 0; + padding: 0; + background-color: #151515; + color: #e8e3e3; + -ms-overflow-style: none; + scrollbar-width: none; +} +html ::-webkit-scrollbar { + display: none; +} + +body { + margin: 0; + padding: 0; + min-height: 100vh; + background-color: #151515; + scroll-behavior: smooth; +} + +.nav { + margin: 0; + padding: 0; + background-color: #151515; + color: #e8e3e3; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + position: relative; + z-index: 69; +} +.nav p { + margin: 0 1rem; + padding: 0; + font-size: 1rem; +} + +.nav-toggle { + margin: 0; + padding: 0.5rem 1rem; + display: none; + background-color: transparent; + color: #e8e3e3; + border: none; +} +.nav-toggle i { + font-size: 1.5rem; + display: inline-block; + line-height: 1.5rem; +} + +@media screen and (max-width: 768px) { + .nav { + justify-content: space-between; + background-color: #121212; + } + .nav-toggle { + display: flex; + justify-content: center; + align-items: center; + } +} +.aside { + margin: 0; + padding: 0; + background-color: #151515; + box-sizing: border-box; +} +.aside hr { + margin: 0.5rem 0; + padding: 0; + width: 100%; + height: 1px; + background-color: #e8e3e3; + border: none; +} +.aside br { + margin: 0.5rem 0; + padding: 0; +} + +.aside-container { + margin: 0; + padding: 1rem; + position: -webkit-sticky; + position: sticky; + top: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.aside-item { + margin: 0; + padding: 0.75rem; + width: 100%; + height: auto; + background-color: transparent; + color: #e8e3e3; + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + border: 1px solid transparent; + border-radius: 3px; + transition: all 0.2s ease-in-out; + cursor: pointer; +} +.aside-item i { + opacity: 0; + transform: translateX(1rem); + transition: all 0.2s ease-in-out; + filter: blur(0.1rem); + pointer-events: none; +} +.aside-item:hover i { + opacity: 1; + transform: translateX(0); + filter: blur(0); +} + +.aside-red { + background-color: rgba(182, 100, 103, 0.1); + border: 1px solid rgba(182, 100, 103, 0.5); + color: #B66467; +} + +.aside-yellow { + background-color: rgba(217, 188, 140, 0.1); + border: 1px solid rgba(217, 188, 140, 0.5); + color: #D9BC8C; +} + +.aside-green { + background-color: rgba(140, 151, 125, 0.1); + border: 1px solid rgba(140, 151, 125, 0.5); + color: #8C977D; +} + +.aside-blue { + background-color: rgba(141, 163, 185, 0.1); + border: 1px solid rgba(141, 163, 185, 0.5); + color: #8DA3B9; +} + +.aside-purple { + background-color: rgba(169, 136, 176, 0.1); + border: 1px solid rgba(169, 136, 176, 0.5); + color: #A988B0; +} + +@media screen and (max-width: 768px) { + .aside { + display: block; + position: fixed; + top: 3rem; + left: -100vw; + width: calc(100vw - 1rem); + height: calc(100vh - 3rem); + z-index: 68; + overflow-y: auto; + box-shadow: 0 0 0.5rem 5px rgba(21, 21, 21, 0.5); + transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; + } + .aside-active { + opacity: 1; + left: 0; + } +} +.wrapper { + margin: 0; + padding: 0; + background-color: #e8e3e3; + color: #151515; + border-radius: 6px 0 0 0; + overflow: hidden; +} + +.content { + margin: 0; + padding: 0.5rem; + height: 100vh; + display: flex; + flex-direction: column; + gap: 1.5rem; + position: relative; +} +.content p, .content .btn { + margin: 0; + padding: 0; + font-size: 1rem; +} + +@media screen and (max-width: 768px) { + .wrapper { + border-radius: 0; + } +} +.footer { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: #151515; + color: #e8e3e3; +} +.footer p { + margin: 0; + padding: 0; + font-size: 0.8rem; +} + +@media screen and (max-width: 768px) { + .footer { + background-color: #e8e3e3; + color: #151515; + } +} +h1 { + margin: 0; + padding: 0; + font-size: 2rem; + text-align: center; + font-weight: 600; +} + +h2 { + margin: 0; + padding: 0; + font-size: 1.5rem; + font-weight: 600; +} + +h3 { + margin: 0; + padding: 0; + font-size: 1rem; + font-weight: 600; +} + +.title { + margin: 0; + padding: 2rem 0; + position: relative; +} +.title img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + filter: grayscale(100%); + transition: all 0.2s ease-in-out; +} +.title img:hover { + filter: grayscale(0%); +} + +.btn { + margin: 0; + padding: 0; + width: 100%; + height: auto; + background-color: transparent; + color: #e8e3e3; + text-decoration: none; + display: flex; + justify-content: left; + align-items: center; + gap: 0.5rem; + border: none; + transition: all 0.2s ease-in-out; + cursor: pointer; +} +.btn i { + opacity: 0; + transform: translateX(1rem); + transition: all 0.2s ease-in-out; + filter: blur(0.1rem); +} +.btn:hover i { + opacity: 1; + transform: translateX(0); + filter: blur(0); +} + +#funny { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/static/css/style.css.map b/static/css/style.css.map new file mode 100644 index 0000000..797725e --- /dev/null +++ b/static/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["scss/_variables.scss","style.css","scss/_grid.scss","scss/_normalize.scss","_nav.scss","_aside.scss","_wrapper.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/static/css/style.scss b/static/css/style.scss new file mode 100644 index 0000000..c2f25de --- /dev/null +++ b/static/css/style.scss @@ -0,0 +1,102 @@ +@import 'scss/variables'; +@import 'scss/grid'; + +@import 'scss/normalize'; + +@import 'nav'; +@import 'aside'; +@import 'wrapper'; +@import 'footer'; + +h1 { + margin: 0; + padding: 0; + + font-size: 2rem; + text-align: center; + font-weight: 600; +} + +h2 { + margin: 0; + padding: 0; + + font-size: 1.5rem; + font-weight: 600; +} + +h3 { + margin: 0; + padding: 0; + + font-size: 1rem; + font-weight: 600; +} + +.title { + margin: 0; + padding: 2rem 0; + + position: relative; + + img { + width: 100%; + height: 100%; + + object-fit: cover; + + filter: grayscale(100%); + + transition: all 0.2s ease-in-out; + + &:hover { + filter: grayscale(0%); + } + } +} + +.btn { + margin: 0; + padding: 0; + + width: 100%; + height: auto; + + background-color: transparent; + color: $white; + + text-decoration: none; + + display: flex; + justify-content: left; + align-items: center; + gap: 0.5rem; + + border: none; + + transition: all 0.2s ease-in-out; + cursor: pointer; + + i { + opacity: 0; + transform: translateX(1rem); + transition: all 0.2s ease-in-out; + filter: blur(0.1rem); + } + + &:hover { + i { + opacity: 1; + transform: translateX(0); + filter: blur(0); + } + } +} + +#funny { + margin: 0; + padding: 0; + + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/css/fonts/Hubot-Sans.woff2 b/static/fonts/Hubot-Sans.woff2 similarity index 100% rename from css/fonts/Hubot-Sans.woff2 rename to static/fonts/Hubot-Sans.woff2 diff --git a/css/fonts/Mona-Sans.woff2 b/static/fonts/Mona-Sans.woff2 similarity index 100% rename from css/fonts/Mona-Sans.woff2 rename to static/fonts/Mona-Sans.woff2 diff --git a/static/images/funny.jpg b/static/images/funny.jpg new file mode 100644 index 0000000..2417b6d Binary files /dev/null and b/static/images/funny.jpg differ diff --git a/bg.jpg b/static/images/leaves.jpg similarity index 100% rename from bg.jpg rename to static/images/leaves.jpg diff --git a/templates/error.html b/templates/error.html new file mode 100644 index 0000000..854b1f1 --- /dev/null +++ b/templates/error.html @@ -0,0 +1,7 @@ +{% extends 'layout.html' %} +{% block content %} +
+

{{error}}

+

{{msg}}

+
+{% endblock %} \ No newline at end of file diff --git a/templates/funny.html b/templates/funny.html new file mode 100644 index 0000000..d93be61 --- /dev/null +++ b/templates/funny.html @@ -0,0 +1,4 @@ +{% extends 'layout.html' %} +{% block content %} + Funny +{% endblock %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..a8c4d6a --- /dev/null +++ b/templates/index.html @@ -0,0 +1,35 @@ +{% extends 'layout.html' %} +{% block content %} +
+

Special Thanks

+

Jeetix: Helping me with learning how to make websites!

+

Carty: Teaching me how to run servers and the networking!

+

mrHDash: For the Ref Sheet and most other art on the page!

+

Zadok: Silly taidum art seen below!

+

Shep: For the free YHC!

+
+ +
+

Stalk me

+ + + + + +
+{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..bed68ac --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,106 @@ + + + + + + Leggy land + + + + + + + + + +
+ {% block content %} {% endblock %} +
+ + + + + + \ No newline at end of file