diff options
| -rw-r--r-- | config.py | 1 | ||||
| -rw-r--r-- | main/assets/css/main.css | 6 | ||||
| -rw-r--r-- | main/assets/js/main.js | 80 | ||||
| -rw-r--r-- | main/templates/main_base.html.j2 | 9 | ||||
| -rw-r--r-- | modules/main_generate.py | 2 |
5 files changed, 95 insertions, 3 deletions
@@ -15,6 +15,7 @@ class Config: # MAIN MAIN_ROOT_URL = "https://wazul.moe" MAIN_NAME = "Wazul's website" + MAIN_ASSETS_SOURCE_DIR = os.path.join(__DIR, "main/assets") # BLOG BLOG_ROOT_URL = "https://blog.wazul.moe" diff --git a/main/assets/css/main.css b/main/assets/css/main.css new file mode 100644 index 0000000..856b5ab --- /dev/null +++ b/main/assets/css/main.css @@ -0,0 +1,6 @@ +canvas.canvas_bg { + position: fixed; + top: 0; + left: 0; + z-index: -1; +}
\ No newline at end of file diff --git a/main/assets/js/main.js b/main/assets/js/main.js new file mode 100644 index 0000000..de090d1 --- /dev/null +++ b/main/assets/js/main.js @@ -0,0 +1,80 @@ +"use strict" +const canvas_bg = document.getElementById("canvas_bg"); +const ctx = canvas_bg.getContext("2d"); +const ORANGE_COLOR = "#fe8b00ff"; +const WHITE_COLOR = "#ffffffff"; +const CELL_WIDTH = 256; + +const WALLPAPER_FONT = "30px Arial"; +const WALLPAPER_COL = 30; +const WALLPAPER_ROW = 50; + +const UNDERLINE_COL_START = 25; +const UNDERLINE_COL_END = CELL_WIDTH - UNDERLINE_COL_START; +const UNDERLINE_ROW = 60; + +const SIZE_TEXT_FONT = "36px Arial"; +const SIZE_TEXT_COL = 25; +const SIZE_TEXT_ROW = 96; + +function drawCanvasBg() { + ctx.clearRect(0, 0, canvas_bg.width, canvas_bg.height); + ctx.fillStyle = ORANGE_COLOR; + ctx.fillRect(0, 0, canvas_bg.width, canvas_bg.height); + + var largerSize = Math.max(canvas_bg.width, canvas_bg.height); + var width = Math.max(3, Math.ceil(largerSize / 1000) + 1); + + ctx.fillStyle = WHITE_COLOR; + ctx.fillRect(0, 0, width, canvas_bg.height); + ctx.fillRect(0, 0, canvas_bg.width, width); + ctx.fillRect(canvas_bg.width - width, 0, canvas_bg.width, canvas_bg.height); + ctx.fillRect(0, canvas_bg.height - width, canvas_bg.width, canvas_bg.height); + + var lineWidth = 1; + var lineOffset = 0.5; + if (largerSize > 5000) { + lineWidth = 2; + lineOffset = 0; + } + + ctx.strokeStyle = WHITE_COLOR; + ctx.lineWidth = lineWidth; + + var currentColPos = CELL_WIDTH + lineOffset; + + while (currentColPos < canvas_bg.width) { + ctx.moveTo(currentColPos, 0); + ctx.lineTo(currentColPos, canvas_bg.height); + ctx.stroke(); + currentColPos += CELL_WIDTH; + } + + var currentRowPos = CELL_WIDTH + lineOffset; + + while (currentRowPos < canvas_bg.height) { + ctx.moveTo(0, currentRowPos); + ctx.lineTo(canvas_bg.width, currentRowPos); + ctx.stroke(); + currentRowPos += CELL_WIDTH; + } + + ctx.font = WALLPAPER_FONT; + ctx.fillText("WALLPAPER", WALLPAPER_COL, WALLPAPER_ROW); + + ctx.moveTo(UNDERLINE_COL_START + lineOffset, UNDERLINE_ROW); + ctx.lineTo(UNDERLINE_COL_END + lineOffset, UNDERLINE_ROW); + ctx.stroke(); + + ctx.font = SIZE_TEXT_FONT; + ctx.fillText(canvas_bg.width + "x" + canvas_bg.height, SIZE_TEXT_COL, SIZE_TEXT_ROW); +} + +function onResize() { + canvas_bg.width = window.innerWidth; + canvas_bg.height = window.innerHeight; + drawCanvasBg(); +} + +onResize(); +window.addEventListener("resize", onResize);
\ No newline at end of file diff --git a/main/templates/main_base.html.j2 b/main/templates/main_base.html.j2 index 6eb6f91..6bac9c3 100644 --- a/main/templates/main_base.html.j2 +++ b/main/templates/main_base.html.j2 @@ -1,5 +1,10 @@ {% extends "base.html.j2" %} {% block page_title %}{{ main.main_name }}{% endblock %} {% block og_page_title %}{{ main.main_name }}{% endblock %} -{% block body %}{{ super() }} -<p>Hello world.</p>{% endblock %} +{% block head_extra %}{{ super() }} + <link rel="stylesheet" href="{{ site.assets_path }}/css/main.css" />{% endblock %} +{% block body %}<canvas id="canvas_bg" class="canvas_bg"></canvas> +{{ super() }} +<footer> + <script src="/assets/js/main.js"></script> +</footer>{% endblock %} diff --git a/modules/main_generate.py b/modules/main_generate.py index f8aae67..550c77c 100644 --- a/modules/main_generate.py +++ b/modules/main_generate.py @@ -27,4 +27,4 @@ def generate(jinja_env: jinja2.Environment, output_root_path: str, local: bool): with open(os.path.join(output_root_path, "index.html"), "w") as f: f.write(root_template.render({"url" : Config.MAIN_ROOT_URL})) - shutil.copytree(Config.CODENAMES_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)
\ No newline at end of file + shutil.copytree(Config.MAIN_ASSETS_SOURCE_DIR, output_root_path + Config.ASSETS_IMPORT_PATH)
\ No newline at end of file |