diff --git a/.gitignore b/.gitignore index b6e4761..09add58 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# temporarily remove image folder +static/images + # Byte-compiled / optimized / DLL files __pycache__/ *.py[cod] diff --git a/app.py b/app.py new file mode 100644 index 0000000..8f770b3 --- /dev/null +++ b/app.py @@ -0,0 +1,91 @@ +from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session +from werkzeug.utils import secure_filename +import os + + +# Get database stuff +DB_USER = os.environ.get('USERNAME') +DB_PASS = os.environ.get('PASSWORD') +DB_HOST = os.environ.get('HOST') +DB_PORT = os.environ.get('PORT') + +DB = os.environ.get('DATABASE') + + +# Set flask config +BASE_DIR = os.path.dirname(os.path.abspath(__file__)) +IMAGE_DIR = os.path.join(BASE_DIR, 'static/images') + +app = Flask(__name__) +app.config['IMAGE_DIR'] = IMAGE_DIR + + +# +# 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 home(): + image_list = os.listdir(app.config['IMAGE_DIR']) + return render_template('home.html', images = image_list) + +@app.route('/image/') +def image(id): + try: + id = int(id) + except ValueError: + abort(404) + + image_list = os.listdir(app.config['IMAGE_DIR']) + fileName = image_list[id] + + return render_template('image.html', fileName = fileName, id = id) + + +# +# METHODS +# +@app.route('/fileList', methods = ['GET']) +def imageList(): + image_list = os.listdir(app.config['IMAGE_DIR']) + return jsonify(image_list) + +@app.route('/file/', methods = ['GET']) +def pfp(filename): + if (request.method == 'GET'): + return send_from_directory(app.config['IMAGE_DIR'], filename) + else: + return None \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..a24a283 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,325 @@ +@font-face { + font-family: "Mona-Sans"; + src: url("f../onts/Mona-Sans.woff2") format("woff2 supports variations"), url("../fonts/Mona-Sans.woff2") format("woff2-variations"); + font-weight: 200 900; + font-stretch: 75% 125%; + font-display: swap; +} +@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-display: swap; +} +html, body { + margin: 0; + padding: 0; + min-height: 100vh; + background-color: #151515; + scroll-behavior: smooth; +} + +nav { + margin: 0; + padding: 0; + max-width: calc(100vw - 3.5rem); + width: 3.5rem; + height: 100dvh; + display: flex; + flex-direction: column; + justify-content: space-between; + position: fixed; + top: 0; + left: 0; + background-color: rgba(16, 16, 16, 0.6); + color: #e8e3e3; + -webkit-backdrop-filter: blur(5rem) saturate(200%); + backdrop-filter: blur(5rem) saturate(200%); + box-sizing: border-box; + z-index: 2; + overflow: hidden; + transition: width 0.4s ease-in-out, background-color 0.3s ease-in-out; +} +nav:hover { + width: 25rem; + background-color: #101010; +} +nav:hover a span { + opacity: 1; +} +nav div { + display: flex; + flex-direction: column; + gap: 0.25rem; +} +nav div a { + margin: 0; + padding: 1rem 1rem 1rem 0.7rem; + width: 100%; + height: 3.5rem; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; + text-decoration: none; + color: #e8e3e3; + border-left: 0.3rem solid rgba(0, 0, 0, 0); + box-sizing: border-box; +} +nav div a i { + margin: 0; + font-size: 1.5rem; + color: #e8e3e3; +} +nav div a span { + display: block; + font-family: "Mona-Sans", sans-serif; + font-size: 1.25rem; + font-stretch: expanded; + font-weight: 500; + color: #e8e3e3; + opacity: 0; + transition: opacity 0.3s ease-in-out; +} +nav div a:hover { + background-color: #121212; + border-left: 0.3rem solid #8C977D; +} +nav div a:hover * { + color: #8C977D; +} + +main { + margin: 0; + padding: 0; + background-color: #151515; + color: #e8e3e3; + min-height: 100vh; + overflow-y: auto; + box-sizing: border-box; +} +main header { + margin: 0 0 -15rem 0; + padding: 0; + width: 100%; + height: 40vh; + background-color: #121212; + position: fixed; + top: 0; + box-sizing: border-box; +} +main header img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +main header span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #151515); + -webkit-backdrop-filter: blur(0.5rem); + backdrop-filter: blur(0.5rem); + z-index: 1; +} + +#topButton { + margin: 0; + padding: 0.25rem; + position: fixed; + bottom: 1rem; + right: -3rem; + font-size: 3rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background-color: #101010; + opacity: 0; + z-index: 2; + cursor: pointer; + transition: all 0.2s ease-in-out; +} +#topButton:hover { + background-color: #121212; + color: #8C977D; +} + +.app { + margin: 10rem 1rem 0 4.5rem; + padding: 1rem; + width: auto; + min-height: calc(150vh - 10rem); + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + background-color: #151515; + color: #e8e3e3; + border-radius: 0.5rem 0.5rem 0 0; + box-sizing: border-box; + z-index: 1; + overflow: unset; +} +.app h1 { + margin: 0; + padding: 0; + font-family: "Hubot-Sans", sans-serif; + font-size: 2.5rem; + font-stretch: ultra-expanded; + font-weight: 600; + color: #8C977D; +} + +.gallery { + margin: 0; + padding: 0; + width: 100%; + display: grid; + grid-template-columns: auto auto auto auto auto auto; + gap: 0.5rem; +} +.gallery .gallery__item { + margin: 0; + padding: 0; + height: auto; + position: relative; + background-color: #121212; + border-radius: 0.25rem; + box-sizing: border-box; + overflow: hidden; +} +.gallery .gallery__item:after { + content: ""; + display: block; + padding-bottom: 100%; +} +.gallery .gallery__item .gallery__item-info { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(21, 21, 21, 0.8)); + z-index: 1; + opacity: 0; + transform: scale(1.05); + transition: all 0.35s ease-in-out; +} +.gallery .gallery__item .gallery__item-info h2 { + margin: 0; + padding: 0 1rem 0.5rem; + font-family: "Hubot-Sans", sans-serif; + font-size: 1rem; + font-stretch: ultra-expanded; + font-weight: 600; + color: #8C977D; + text-overflow: ellipsis; + overflow: hidden; + opacity: 0; + transition: all 0.35s ease-in-out; +} +.gallery .gallery__item .gallery__item-info p { + margin: 0; + padding: 0 1rem 0.5rem; + font-family: "Mona-Sans", sans-serif; + font-size: 0.8rem; + font-weight: 500; + color: #e8e3e3; + text-overflow: ellipsis; + overflow: hidden; + opacity: 0; + transition: all 0.35s ease-in-out; +} +.gallery .gallery__item .gallery__item-info:hover { + opacity: 1; + transform: scale(1); +} +.gallery .gallery__item .gallery__item-info:hover h2, .gallery .gallery__item .gallery__item-info:hover p { + opacity: 1; +} +.gallery .gallery__item .gallery__item-image { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; + border-radius: 0.5rem; +} + +.image__container { + margin: 0; + padding: 0; + width: 100%; + height: calc(100vh - 12rem); + position: -webkit-sticky; + position: sticky; + top: 0; + display: flex; + border-radius: 0.25rem; + background-color: #121212; + box-sizing: border-box; +} +.image__container img { + margin: auto; + padding: 0; + max-width: 100%; + max-height: 100%; + -o-object-fit: contain; + object-fit: contain; + -o-object-position: center; + object-position: center; + border-radius: 0.25rem; +} + +.image__info { + margin: 0; + padding: 0; + width: 100%; + display: flex; + flex-direction: column; + background-color: #121212; + border-radius: 0.25rem; + box-sizing: border-box; +} +.image__info h2 { + margin: 0; + padding: 0 1rem 0.5rem; + font-family: "Hubot-Sans", sans-serif; + font-size: 1rem; + font-stretch: ultra-expanded; + font-weight: 600; + color: #8C977D; + text-overflow: ellipsis; + overflow: hidden; +} +.image__info p { + margin: 0; + padding: 0 1rem 0.5rem; + font-family: "Mona-Sans", sans-serif; + font-size: 0.8rem; + font-weight: 500; + color: #e8e3e3; + text-overflow: ellipsis; + overflow: hidden; +}/*# 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..7b25819 --- /dev/null +++ b/static/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAiBA;EACE,wBAAA;EACA,oIAAA;EAEA,oBAAA;EACA,sBAAA;EACA,kBAAA;ACjBF;ADmBA;EACE,yBAAA;EACA,sIAAA;EAEA,oBAAA;EACA,sBAAA;EACA,kBAAA;AClBF;ADqBA;EACI,SAAA;EACA,UAAA;EAEA,iBAAA;EAEA,yBAxCO;EA0CP,uBAAA;ACtBJ;;ADyBA;EACI,SAAA;EACA,UAAA;EAEA,+BAAA;EACA,aAAA;EACA,cAAA;EAEA,aAAA;EACA,sBAAA;EACA,8BAAA;EAEA,eAAA;EACA,MAAA;EACA,OAAA;EAEA,uCAAA;EACA,cA1DO;EA2DP,kDAAA;UAAA,0CAAA;EAEA,sBAAA;EACA,UAAA;EACA,gBAAA;EACA,qEAAA;AC3BJ;AD6BI;EACI,YAAA;EAEA,yBAvEG;AC2CX;AD8BQ;EACI,UAAA;AC5BZ;ADgCI;EACI,aAAA;EACA,sBAAA;EACA,YAAA;AC9BR;ADgCQ;EACI,SAAA;EACA,8BAAA;EAEA,WAAA;EACA,cAAA;EAEA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EAEA,qBAAA;EACA,cA9FD;EA+FC,0CAAA;EAEA,sBAAA;AClCZ;ADqCY;EACI,SAAA;EAEA,iBAAA;EAEA,cAzGL;ACoEX;ADuCY;EACI,cAAA;EAEA,oCAnGJ;EAoGI,kBAAA;EACA,sBAAA;EACA,gBAAA;EAEA,cAnHL;EAoHK,UAAA;EAEA,oCAAA;ACxChB;AD2CY;EACI,yBA7HL;EA8HK,iCAAA;ACzChB;AD2CgB;EACI,cAzHZ;ACgFR;;ADgDA;EACI,SAAA;EACA,UAAA;EAEA,yBA7IO;EA8IP,cA1IO;EA4IP,iBAAA;EAEA,gBAAA;EACA,sBAAA;AChDJ;ADkDI;EACI,oBAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,yBA3JG;EA4JH,eAAA;EACA,MAAA;EAEA,sBAAA;ACnDR;ADqDQ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EAEA,WAAA;EACA,YAAA;EAEA,oBAAA;KAAA,iBAAA;ACrDZ;ADuDQ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EAEA,WAAA;EACA,YAAA;EAEA,uEAAA;EACA,qCAAA;UAAA,6BAAA;EAEA,UAAA;ACxDZ;;AD6DA;EACI,SAAA;EACA,gBAAA;EAEA,eAAA;EACA,YAAA;EACA,YAAA;EAEA,eAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,kBAAA;EACA,yBAzMO;EA0MP,UAAA;EAEA,UAAA;EAEA,eAAA;EAEA,gCAAA;ACjEJ;ADmEI;EACI,yBApNG;EAqNH,cA7MA;AC4IR;;ADqEA;EACI,2BAAA;EACA,aAAA;EAEA,WAAA;EACA,+BAAA;EAEA,kBAAA;EAEA,aAAA;EACA,sBAAA;EACA,SAAA;EAEA,yBAvOO;EAwOP,cApOO;EAqOP,gCAAA;EAEA,sBAAA;EACA,UAAA;EACA,eAAA;ACvEJ;ADyEI;EACI,SAAA;EACA,UAAA;EAEA,qCArOM;EAsON,iBAAA;EACA,4BAAA;EACA,gBAAA;EAEA,cA/OA;ACsKR;;AD6EA;EACI,SAAA;EACA,UAAA;EAEA,WAAA;EAEA,aAAA;EACA,oDAAA;EACA,WAAA;AC5EJ;AD8EI;EACI,SAAA;EACA,UAAA;EAEA,YAAA;EAEA,kBAAA;EAEA,yBA7QG;EA8QH,sBAAA;EAEA,sBAAA;EACA,gBAAA;AChFR;ADkFQ;EACI,WAAA;EACA,cAAA;EACA,oBAAA;AChFZ;ADmFQ;EACI,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,OAAA;EACA,SAAA;EAEA,aAAA;EACA,sBAAA;EACA,yBAAA;EAEA,qFAAA;EAEA,UAAA;EAEA,UAAA;EACA,sBAAA;EACA,iCAAA;ACvFZ;ADyFY;EACI,SAAA;EACA,sBAAA;EAEA,qCAvSF;EAwSE,eAAA;EACA,4BAAA;EACA,gBAAA;EAEA,cAjTR;EAmTQ,uBAAA;EACA,gBAAA;EAEA,UAAA;EACA,iCAAA;AC3FhB;AD8FY;EACI,SAAA;EACA,sBAAA;EAEA,oCAxTJ;EAyTI,iBAAA;EACA,gBAAA;EAEA,cAvUL;EAyUK,uBAAA;EACA,gBAAA;EAEA,UAAA;EACA,iCAAA;AChGhB;ADmGY;EACI,UAAA;EACA,mBAAA;ACjGhB;ADmGgB;EACI,UAAA;ACjGpB;ADsGQ;EACI,SAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,qBAjWN;ACyPN;;AD8GA;EACI,SAAA;EACA,UAAA;EAEA,WAAA;EACA,2BAAA;EAEA,wBAAA;EAAA,gBAAA;EACA,MAAA;EAEA,aAAA;EAEA,sBAAA;EACA,yBAhYO;EAkYP,sBAAA;AChHJ;ADkHI;EACI,YAAA;EACA,UAAA;EAEA,eAAA;EACA,gBAAA;EAEA,sBAAA;KAAA,mBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,sBAAA;ACnHR;;ADsHA;EACI,SAAA;EACA,UAAA;EAEA,WAAA;EAEA,aAAA;EACA,sBAAA;EAEA,yBA1ZO;EA2ZP,sBAAA;EAEA,sBAAA;ACvHJ;ADyHI;EACI,SAAA;EACA,sBAAA;EAEA,qCAtZM;EAuZN,eAAA;EACA,4BAAA;EACA,gBAAA;EAEA,cAhaA;EAkaA,uBAAA;EACA,gBAAA;AC1HR;AD4HI;EACI,SAAA;EACA,sBAAA;EAEA,oCAnaI;EAoaJ,iBAAA;EACA,gBAAA;EAEA,cAlbG;EAobH,uBAAA;EACA,gBAAA;AC7HR","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..4d304cc --- /dev/null +++ b/static/css/style.scss @@ -0,0 +1,444 @@ +$black100: #151515; +$black200: #121212; +$black300: #101010; + +$white100: #e8e3e3; + +$red: #B66467; +$orange: #D8A657; +$yellow: #D9BC8C; +$green: #8C977D; +$blue: #8DA3B9; +$purple: #A988B0; + +$rad: 0.5rem; +$font-header: "Hubot-Sans", sans-serif; +$font-body: "Mona-Sans", sans-serif; + +@font-face { + font-family: "Mona-Sans"; + src: url("f../onts/Mona-Sans.woff2") format("woff2 supports variations"), + url("../fonts/Mona-Sans.woff2") format("woff2-variations"); + font-weight: 200 900; + font-stretch: 75% 125%; + font-display: swap; +} +@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-display: swap; +} + +html, body { + margin: 0; + padding: 0; + + min-height: 100vh; + + background-color: $black100; + + scroll-behavior: smooth; +} + +nav { + margin: 0; + padding: 0; + + max-width: calc(100vw - 3.5rem); + width: 3.5rem; + height: 100dvh; + + display: flex; + flex-direction: column; + justify-content: space-between; + + position: fixed; + top: 0; + left: 0; + + background-color: rgba($black300, 0.6); + color: $white100; + backdrop-filter: blur(5rem) saturate(200%); + + box-sizing: border-box; + z-index: 2; + overflow: hidden; + transition: width 0.4s ease-in-out, background-color 0.3s ease-in-out; + + &:hover { + width: 25rem; + + background-color: $black300; + + a span { + opacity: 1; + } + } + + div { + display: flex; + flex-direction: column; + gap: 0.25rem; + + a { + margin: 0; + padding: 1rem 1rem 1rem 0.7rem; + + width: 100%; + height: 3.5rem; + + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; + + text-decoration: none; + color: $white100; + border-left: 0.3rem solid #00000000; + + box-sizing: border-box; + + + i { + margin: 0; + + font-size: 1.5rem; + + color: $white100; + } + span { + display: block; + + font-family: $font-body; + font-size: 1.25rem; + font-stretch: expanded; + font-weight: 500; + + color: $white100; + opacity: 0; // hidden + + transition: opacity 0.3s ease-in-out; + } + + &:hover { + background-color: $black200; + border-left: 0.3rem solid $green; + + * { + color: $green; + } + } + } + } +} + +main { + margin: 0; + padding: 0; + + background-color: $black100; + color: $white100; + + min-height: 100vh; + + overflow-y: auto; + box-sizing: border-box; + + header { + margin: 0 0 -15rem 0; + padding: 0; + + width: 100%; + height: 40vh; + + background-color: $black200; + position: fixed; + top: 0; + + box-sizing: border-box; + + img { + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + object-fit: cover; + } + span { + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-image: linear-gradient(to bottom, #00000000, rgba($black100, 1)); + backdrop-filter: blur(0.5rem); + + z-index: +1; + } + } +} + +#topButton { + margin: 0; + padding: 0.25rem; + + position: fixed; + bottom: 1rem; + right: -3rem; + + font-size: 3rem; + + display: flex; // hidden + justify-content: center; + align-items: center; + + border-radius: 50%; + background-color: $black300; + opacity: 0; // hidden + + z-index: 2; + + cursor: pointer; + + transition: all 0.2s ease-in-out; + + &:hover { + background-color: $black200; + color: $green; + } +} + +.app { + margin: 10rem 1rem 0 4.5rem; + padding: 1rem; + + width: auto; + min-height: calc(150vh - 10rem); + + position: relative; + + display: flex; + flex-direction: column; + gap: 1rem; + + background-color: $black100; + color: $white100; + border-radius: $rad $rad 0 0; + + box-sizing: border-box; + z-index: 1; + overflow: unset; + + h1 { + margin: 0; + padding: 0; + + font-family: $font-header; + font-size: 2.5rem; + font-stretch: ultra-expanded; + font-weight: 600; + + color: $green; + } +} + +.gallery { + margin: 0; + padding: 0; + + width: 100%; + + display: grid; + grid-template-columns: auto auto auto auto auto auto; + gap: 0.5rem; + + .gallery__item { + margin: 0; + padding: 0; + + height: auto; + + position: relative; + + background-color: $black200; + border-radius: calc($rad / 2); + + box-sizing: border-box; + overflow: hidden; + + &:after { + content: ""; + display: block; + padding-bottom: 100%; + } + + .gallery__item-info { + margin: 0; + padding: 0; + + width: 100%; + height: 100%; + + position: absolute; + left: 0; + bottom: 0; + + display: flex; + flex-direction: column; + justify-content: flex-end; + + background-image: linear-gradient(to bottom, #00000000, rgba($black100, 0.8)); + + z-index: +1; + + opacity: 0; // hide + transform: scale(1.05); // scale up + transition: all 0.35s ease-in-out; + + h2 { + margin: 0; + padding: 0 1rem 0.5rem; + + font-family: $font-header; + font-size: 1rem; + font-stretch: ultra-expanded; + font-weight: 600; + + color: $green; + + text-overflow: ellipsis; + overflow: hidden; + + opacity: 0; // hide + transition: all 0.35s ease-in-out; + } + + p { + margin: 0; + padding: 0 1rem 0.5rem; + + font-family: $font-body; + font-size: 0.8rem; + font-weight: 500; + + color: $white100; + + text-overflow: ellipsis; + overflow: hidden; + + opacity: 0; // hide + transition: all 0.35s ease-in-out; + } + + &:hover { + opacity: 1; + transform: scale(1); + + h2, p { + opacity: 1; + } + } + } + + .gallery__item-image { + margin: 0; + padding: 0; + + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + object-fit: cover; + object-position: center; + + border-radius: $rad; + } + } + +} + +.image__container { + margin: 0; + padding: 0; + + width: 100%; + height: calc(100vh - 12rem); + + position: sticky; + top: 0; + + display: flex; + + border-radius: calc($rad / 2); + background-color: $black200; + + box-sizing: border-box; + + img { + margin: auto; + padding: 0; + + max-width: 100%; + max-height: 100%; + + object-fit: contain; + object-position: center; + + border-radius: calc($rad / 2); + } +} +.image__info { + margin: 0; + padding: 0; + + width: 100%; + + display: flex; + flex-direction: column; + + background-color: $black200; + border-radius: calc($rad / 2); + + box-sizing: border-box; + + h2 { + margin: 0; + padding: 0 1rem 0.5rem; + + font-family: $font-header; + font-size: 1rem; + font-stretch: ultra-expanded; + font-weight: 600; + + color: $green; + + text-overflow: ellipsis; + overflow: hidden; + } + p { + margin: 0; + padding: 0 1rem 0.5rem; + + font-family: $font-body; + font-size: 0.8rem; + font-weight: 500; + + color: $white100; + + text-overflow: ellipsis; + overflow: hidden; + } +} \ No newline at end of file diff --git a/static/fonts/Hubot-Sans.woff2 b/static/fonts/Hubot-Sans.woff2 new file mode 100644 index 0000000..5089fc4 Binary files /dev/null and b/static/fonts/Hubot-Sans.woff2 differ diff --git a/static/fonts/Mona-Sans.woff2 b/static/fonts/Mona-Sans.woff2 new file mode 100644 index 0000000..8208a50 Binary files /dev/null and b/static/fonts/Mona-Sans.woff2 differ diff --git a/templates/error.html b/templates/error.html new file mode 100644 index 0000000..5c48b60 --- /dev/null +++ b/templates/error.html @@ -0,0 +1,10 @@ +{% extends 'layout.html' %} +{% block content %} +
+ leaves +
+
+

{{error}}

+

{{msg}}

+
+{% endblock %} \ No newline at end of file diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..703e711 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,33 @@ +{% extends 'layout.html' %} +{% block content %} +
+ leaves + +
+
+

Gallery

+ +
+ +{% endblock %} \ No newline at end of file diff --git a/templates/image.html b/templates/image.html new file mode 100644 index 0000000..5739b08 --- /dev/null +++ b/templates/image.html @@ -0,0 +1,16 @@ +{% extends 'layout.html' %} +{% block content %} +
+ leaves + +
+
+
+ +
+
+

{{ fileName }}

+

{{ id }}

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