From ce6e83928169440a8f4af1eaa60419bdedc55d68 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 1 Jan 2023 14:31:28 +0000 Subject: [PATCH] Sass compiling Database manager --- .gitignore | 1 + app.py | 61 +-- packages/onlylegsDB.py | 50 +++ packages/onlylegsSass.py | 28 ++ static/css/style.css | 349 +----------------- static/css/style.css.map | 1 - templates/layout.html | 10 +- example.env => usr/example.env | 0 usr/themes/default/buttons/btn.scss | 53 +++ {static/css => usr/themes/default}/style.scss | 4 +- 10 files changed, 160 insertions(+), 397 deletions(-) create mode 100644 packages/onlylegsDB.py create mode 100644 packages/onlylegsSass.py delete mode 100644 static/css/style.css.map rename example.env => usr/example.env (100%) create mode 100644 usr/themes/default/buttons/btn.scss rename {static/css => usr/themes/default}/style.scss (99%) diff --git a/.gitignore b/.gitignore index 782016b..319e95d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # Remove all development files uploads/ +static/css/style.css # remove all PyCharm files .idea diff --git a/app.py b/app.py index 625d672..5a495b3 100644 --- a/app.py +++ b/app.py @@ -1,40 +1,22 @@ +# Import required OnlyLegs packages +import os +import sys +sys.path.insert(1, './packages') + +# Import database manager +import onlylegsDB +onlylegsDB = onlylegsDB.DBmanager() +# Import sass compiler +import onlylegsSass +onlylegsSass = onlylegsSass.Sassy('default') + +# Import flask from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session from werkzeug.utils import secure_filename -import mysql.connector -from mysql.connector import Error -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_NAME = os.environ.get('DATABASE') - -try: - DB = mysql.connector.connect(host=DB_HOST, - port=DB_PORT, - database=DB_NAME, - user=DB_USER, - password=DB_PASS) - if DB.is_connected(): - db_Info = DB.get_server_info() - print("Connected to MySQL Server version ", db_Info) - - cursor = DB.cursor() - cursor.execute("select database();") - - record = cursor.fetchone() - print("You're connected to database: ", record) - -except Error as e: - print("Error while connecting to MySQL", e) - # Set flask config BASE_DIR = os.path.dirname(os.path.abspath(__file__)) -UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads') +UPLOAD_FOLDER = os.path.join(BASE_DIR, 'usr', 'uploads') app = Flask(__name__) app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER @@ -94,16 +76,11 @@ def image(request_id): except ValueError: abort(404) - # SQL injection prevention - sql = "SELECT imagename FROM images WHERE id = %s" - img_id = (request_id,) + result = onlylegsDB.getImage(request_id) - # Get image details - cursor = DB.cursor() - cursor.execute(sql, img_id) - result = cursor.fetchone() - - return render_template('image.html', fileName=result[0], id=request_id) + print (result) + + return render_template('image.html', fileName=result[1], id=request_id) # @@ -114,7 +91,7 @@ def image_list(item_type): if request.method != 'GET': abort(405) - cursor = DB.cursor() + cursor = onlylegsDB.cursor() cursor.execute("SELECT id,imagename FROM images ORDER BY id DESC") item_list = cursor.fetchall() diff --git a/packages/onlylegsDB.py b/packages/onlylegsDB.py new file mode 100644 index 0000000..2abb817 --- /dev/null +++ b/packages/onlylegsDB.py @@ -0,0 +1,50 @@ +import sys +import os + +class DBmanager(): + def __init__(self): + try: + import mysql.connector + from mysql.connector import Error + from dotenv import load_dotenv + except ImportError: + print("Error: could not import required modules") + sys.exit(1) + + try: + load_dotenv(os.path.join('usr', '.env')) + + database = mysql.connector.connect(host=os.environ.get('HOST'), + port=os.environ.get('PORT'), + database=os.environ.get('DATABASE'), + user=os.environ.get('USERNAME'), + password=os.environ.get('PASSWORD') + ) + + if database.is_connected(): + db_Info = database.get_server_info() + print("Connected to MySQL Server version: ", db_Info) + + cursor = database.cursor() + cursor.execute("select database();") + + record = cursor.fetchone() + print("You're connected to database: ", record) + + except Error as e: + print("Error while connecting to MySQL\n", e) + sys.exit(1) + + self.database = database + + def cursor(self): + return self.database.cursor() + + def getImage(self, id): + sql = "SELECT * FROM images WHERE id = %s" + img = (id,) + + cursor = self.cursor() + cursor.execute(sql, img) + + return cursor.fetchone() \ No newline at end of file diff --git a/packages/onlylegsSass.py b/packages/onlylegsSass.py new file mode 100644 index 0000000..8daf712 --- /dev/null +++ b/packages/onlylegsSass.py @@ -0,0 +1,28 @@ +import sys +import os + +class Sassy(): + def __init__(self, theme): + try: + import sass + except ImportError: + print("Error: sass not found") + sys.exit(1) + + path_to_sass = os.path.join('./usr', 'themes', theme, 'style.scss') + + if os.path.exists(path_to_sass): + print("Sass found at: " + path_to_sass) + self.sass = sass + self.loadTheme(path_to_sass) + else: + print("Error: theme not found") + sys.exit(1) + + def loadTheme (self, theme): + with open('static/css/style.css', 'w') as f: + try: + f.write(self.sass.compile(filename=theme, output_style='compressed')) + print("Sass compiled successfully to: " + f.name) + except self.sass.CompileError as e: + print("Error: sass compilation failed:\n", e) \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 9fbe1df..c4dc7eb 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,348 +1 @@ -@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: #101010; - color: #e8e3e3; - box-sizing: border-box; - z-index: 2; - overflow: hidden; - transition: width 0.4s cubic-bezier(0.86, 0, 0.07, 1), background-color 0.3s ease-in-out; -} -nav:hover { - width: 30rem; -} -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 calc(1rem - 2px); - width: 100%; - height: 3.5rem; - display: flex; - flex-direction: row; - align-items: center; - gap: 0.5rem; - text-decoration: none; - color: #e8e3e3; - border-left: 2px 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: 2px 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; - padding: 0; - width: 100%; - height: 40vh; - position: relative; - background-color: #121212; - border-radius: 8px; - box-sizing: border-box; -} -main header img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - filter: blur(0.5rem); - -o-object-fit: cover; - object-fit: cover; - -o-object-position: center 0px; - object-position: center 0px; -} -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); - z-index: 1; -} - -#topButton { - margin: 0; - padding: 0.25rem; - position: fixed; - bottom: 0.75rem; - 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 cubic-bezier(0.86, 0, 0.07, 1); -} -#topButton:hover { - background-color: #121212; - color: #8C977D; -} - -.app { - margin: 0 0 0 3.5rem; - padding: 0.5rem; - width: auto; - min-height: 100vh; - position: relative; - display: flex; - flex-direction: column; - gap: 1rem; - background-color: #151515; - color: #e8e3e3; - 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; -} - -@-webkit-keyframes imgLoading { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } -} - -@keyframes imgLoading { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } -} -.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: linear-gradient(-45deg, #151515, #0e0e0e, #151515); - background-size: 400% 400%; - border-radius: 4px; - -webkit-animation: imgLoading 10s ease infinite; - animation: imgLoading 10s ease infinite; - 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.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); -} -.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.2s 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.2s 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: 4px; -} - -.image__container { - margin: 0; - padding: 0; - width: 100%; - height: auto; - position: -webkit-sticky; - position: sticky; - top: 0; - display: flex; - overflow: hidden; - border-radius: 4px; - box-sizing: border-box; -} -.image__container img { - margin: auto; - padding: 0; - max-width: 100%; - max-height: 75vh; - -o-object-fit: contain; - object-fit: contain; - -o-object-position: center; - object-position: center; - border-radius: 4px; -} - -.image__info { - margin: 0; - padding: 0; - width: 100%; - display: flex; - flex-direction: column; - background-color: #121212; - border-radius: 4px; - 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 +@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}.btn{padding:0.5rem 1rem;border-radius:0.25rem;border:1px solid rgba(232,227,227,0.3);background-color:rgba(232,227,227,0);color:#e8e3e3;transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}.btn:hover{background-color:rgba(232,227,227,0.2)}.btn:active{border-color:#e8e3e3;background-color:rgba(232,227,227,0.5);color:#e8e3e3}.btn.red{border-color:rgba(182,100,103,0.3);background-color:rgba(182,100,103,0);color:#B66467}.btn.red:hover{background-color:rgba(182,100,103,0.2)}.btn.red:active{border-color:#b66467;background-color:rgba(182,100,103,0.5);color:#B66467}.btn.orange{border-color:rgba(216,166,87,0.3);background-color:rgba(216,166,87,0);color:#D8A657}.btn.orange:hover{background-color:rgba(216,166,87,0.2)}.btn.orange:active{border-color:#d8a657;background-color:rgba(216,166,87,0.5);color:#D8A657}.btn.yellow{border-color:rgba(217,188,140,0.3);background-color:rgba(217,188,140,0);color:#D9BC8C}.btn.yellow:hover{background-color:rgba(217,188,140,0.2)}.btn.yellow:active{border-color:#d9bc8c;background-color:rgba(217,188,140,0.5);color:#D9BC8C}.btn.green{border-color:rgba(140,151,125,0.3);background-color:rgba(140,151,125,0);color:#8C977D}.btn.green:hover{background-color:rgba(140,151,125,0.2)}.btn.green:active{border-color:#8c977d;background-color:rgba(140,151,125,0.5);color:#8C977D}.btn.blue{border-color:rgba(141,163,185,0.3);background-color:rgba(141,163,185,0);color:#8DA3B9}.btn.blue:hover{background-color:rgba(141,163,185,0.2)}.btn.blue:active{border-color:#8da3b9;background-color:rgba(141,163,185,0.5);color:#8DA3B9}.btn.purple{border-color:rgba(169,136,176,0.3);background-color:rgba(169,136,176,0);color:#A988B0}.btn.purple:hover{background-color:rgba(169,136,176,0.2)}.btn.purple:active{border-color:#a988b0;background-color:rgba(169,136,176,0.5);color:#A988B0}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:#101010;color:#e8e3e3;box-sizing:border-box;z-index:2;overflow:hidden;transition:width 0.4s cubic-bezier(0.86, 0, 0.07, 1),background-color 0.3s ease-in-out}nav:hover{width:30rem}nav:hover a span{opacity:1}nav div{display:flex;flex-direction:column;gap:0.25rem}nav div a{margin:0.5rem;padding:1rem 1rem 1rem calc(1rem - 2px);width:100%;height:3.5rem;display:flex;flex-direction:row;align-items:center;gap:0.5rem;text-decoration:none;color:#e8e3e3;border-left:2px solid #00000000;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:2px 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;padding:0;width:100%;height:40vh;position:relative;background-color:#121212;border-radius:8px;box-sizing:border-box}main header img{position:absolute;top:0;left:0;width:100%;height:100%;filter:blur(0.5rem);object-fit:cover;object-position:center 0px}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);z-index:+1}#topButton{margin:0;padding:0.25rem;position:fixed;bottom:0.75rem;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 cubic-bezier(0.86, 0, 0.07, 1)}#topButton:hover{background-color:#121212;color:#8C977D}.app{margin:0 0 0 3.5rem;padding:0.5rem;width:auto;min-height:100vh;position:relative;display:flex;flex-direction:column;gap:1rem;background-color:#151515;color:#e8e3e3;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}@keyframes imgLoading{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.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:linear-gradient(-45deg, #151515, #0e0e0e, #151515);background-size:400% 400%;border-radius:calc($rad / 2);animation:imgLoading 10s ease infinite;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.5s cubic-bezier(0.79, 0.14, 0.15, 0.86)}.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.2s 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.2s 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;object-fit:cover;object-position:center;border-radius:calc($rad / 2)}.image__container{margin:0;padding:0;width:100%;height:auto;position:sticky;top:0;display:flex;overflow:hidden;border-radius:calc($rad / 2);box-sizing:border-box}.image__container img{margin:auto;padding:0;max-width:100%;max-height:75vh;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:#121212;border-radius:calc($rad / 2);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} diff --git a/static/css/style.css.map b/static/css/style.css.map deleted file mode 100644 index 0119fc8..0000000 --- a/static/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 84dbc0f..85eaee9 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -15,13 +15,13 @@
diff --git a/example.env b/usr/example.env similarity index 100% rename from example.env rename to usr/example.env diff --git a/usr/themes/default/buttons/btn.scss b/usr/themes/default/buttons/btn.scss new file mode 100644 index 0000000..2907c12 --- /dev/null +++ b/usr/themes/default/buttons/btn.scss @@ -0,0 +1,53 @@ +@mixin button($color) { + border-color: rgba($color, 0.3); + background-color: rgba($color, 0); + color: $color; + + &:hover { + background-color: rgba($color, 0.2); + } + &:active { + border-color: rgba($color, 1); + background-color: rgba($color, 0.5); + color: $color; + } +} + +.btn { + padding: 0.5rem 1rem; + border-radius: 0.25rem; + + border: 1px solid rgba($white100, 0.3); + background-color: rgba($white100, 0); + color: $white100; + + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; + + &:hover { + background-color: rgba($white100, 0.2); + } + &:active { + border-color: rgba($white100, 1); + background-color: rgba($white100, 0.5); + color: $white100; + } + + &.red { + @include button($red); + } + &.orange { + @include button($orange); + } + &.yellow { + @include button($yellow); + } + &.green { + @include button($green); + } + &.blue { + @include button($blue); + } + &.purple { + @include button($purple); + } +} \ No newline at end of file diff --git a/static/css/style.scss b/usr/themes/default/style.scss similarity index 99% rename from static/css/style.scss rename to usr/themes/default/style.scss index 346e978..dcebeaf 100644 --- a/static/css/style.scss +++ b/usr/themes/default/style.scss @@ -33,6 +33,8 @@ $font-body: "Mona-Sans", sans-serif; font-display: swap; } +@import 'buttons/btn'; + html, body { margin: 0; padding: 0; @@ -82,7 +84,7 @@ nav { gap: 0.25rem; a { - margin: 0; + margin: 0.5rem; padding: 1rem 1rem 1rem calc(1rem - 2px); width: 100%;