Compare commits
11 Commits
4f19218e28
...
689354fc7b
| Author | SHA1 | Date | |
|---|---|---|---|
|
689354fc7b | ||
|
|
2bd92e6fdc | ||
|
|
ee8b173ac4 | ||
|
|
a85dbb4474 | ||
|
|
e8497d7e28 | ||
|
|
4bb634f920 | ||
|
|
799da71198 | ||
|
|
c8e7889d34 | ||
|
|
c79d6cd075 | ||
|
|
de5289bcab | ||
|
|
aab6e59287 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1 +1 @@
|
||||
|
||||
**/target
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 Olivia Bridie Alexandria Millicent Ivette Brooks
|
||||
Copyright (c) 2025 Olivia Brooks
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Acknowledgements | Cutieguwu</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
|
||||
<meta name="description" content="Cutieguwu's Official website" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0"
|
||||
/>
|
||||
<meta name="keywords" content="cutieguwu" />
|
||||
</head>
|
||||
<body class="viewport">
|
||||
<nav class="nav_pane">
|
||||
<h2 class="nav_logo">Cutieguwu</h2>
|
||||
|
||||
<ul class="nav_menu">
|
||||
<li class="nav_body"><a class="nav_title" href="">Home</a></li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">About</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title" href="#">Minecraft</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="#">Bearock SMP</a>
|
||||
<a class="nav_title" href="#">Rebirth SMP</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title">Links</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
|
||||
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
|
||||
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
|
||||
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
|
||||
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<a class="nav_title" href="https://pronouns.page/@Cutieguwu"
|
||||
>Pronoun Pages</a
|
||||
>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
|
||||
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Other</a>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Other 2</a>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Super long titled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="main_pane">
|
||||
<p>There are currently no acknowledgements</p>
|
||||
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
|
||||
<p>
|
||||
I will get my thanks to various open projects in here in time, but I'm still busy
|
||||
getting the basics handled.
|
||||
</p>
|
||||
</div>
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
|
||||
></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
balloon.py
Normal file
107
balloon.py
Normal file
@@ -0,0 +1,107 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from dataclasses import dataclass
|
||||
from types import NoneType
|
||||
from typing import Optional
|
||||
from result import Result, Ok, Err
|
||||
from icecream import ic
|
||||
import os
|
||||
|
||||
from typing import TYPE_CHECKING
|
||||
if TYPE_CHECKING:
|
||||
from _typeshed import StrPath
|
||||
|
||||
WORK_DIR: StrPath = os.getcwd()
|
||||
|
||||
@dataclass
|
||||
class Tag:
|
||||
value: str
|
||||
trail: Optional[str]
|
||||
|
||||
def __post_init__(self) -> None:
|
||||
self.trail = self.trail if (self.trail is not None) and (self.trail.strip() != '') else None
|
||||
|
||||
# Returns the type of tag.
|
||||
def type(self) -> str:
|
||||
type = str()
|
||||
|
||||
for c in self.value:
|
||||
if c.isspace():
|
||||
break
|
||||
|
||||
type += c
|
||||
|
||||
return type
|
||||
|
||||
def get_param(self, param: str) -> Optional[str]:
|
||||
pos = self.value.find(param) + param.__len__() + len('="')
|
||||
|
||||
if pos == -1:
|
||||
return None
|
||||
|
||||
param_value = str()
|
||||
|
||||
for idx in range(pos, (self.value.__len__() - param.__len__())):
|
||||
param_value += self.value[idx]
|
||||
|
||||
return param_value
|
||||
|
||||
def write(self) -> str:
|
||||
return f'<{self.value}>{self.trail if self.trail != None else ''}'
|
||||
|
||||
@dataclass
|
||||
class HTML:
|
||||
value: str
|
||||
|
||||
# Returns all tags in order in the html file.
|
||||
def tags(self) -> list[Tag]:
|
||||
tag = str()
|
||||
trail: Optional[str] = str()
|
||||
tags = list()
|
||||
record = False
|
||||
|
||||
for c in self.value:
|
||||
if c == '<' and tag != '':
|
||||
tags.append(Tag(tag, trail))
|
||||
tag = str()
|
||||
trail = str()
|
||||
|
||||
if c == '<' or c == '>':
|
||||
record = not record # why can't I have ! operator...
|
||||
elif record == True:
|
||||
tag += c
|
||||
else:
|
||||
trail += c
|
||||
|
||||
tags.append(Tag(tag, trail))
|
||||
return tags
|
||||
|
||||
def inflate(self) -> Result[str, str]:
|
||||
file = str()
|
||||
|
||||
for tag in self.tags():
|
||||
if tag.type() == 'include':
|
||||
chunk = tag.get_param('src')
|
||||
if isinstance(chunk, NoneType):
|
||||
return Err('FileNotFoundError')
|
||||
|
||||
html = HTML(open(str(WORK_DIR) + '/src/' + chunk, 'rt').read())
|
||||
file += html.inflate().expect('FileNotFoundError')
|
||||
else:
|
||||
file += tag.write()
|
||||
|
||||
return Ok(file)
|
||||
|
||||
# Convert the HTML obj into a str to write to file.
|
||||
def write(self) -> str:
|
||||
return self.inflate().unwrap()
|
||||
|
||||
|
||||
def main() -> None:
|
||||
with open(str(WORK_DIR) + '/src/index.html', 'rt') as f:
|
||||
html_src = HTML(f.read())
|
||||
with open(str(WORK_DIR) + '/target/index.html', 'w') as f:
|
||||
f.write(html_src.write())
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
275
colour_theme.svg
Normal file
275
colour_theme.svg
Normal file
@@ -0,0 +1,275 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="335mm"
|
||||
height="225mm"
|
||||
viewBox="0 0 335 225"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
sodipodi:docname="colour_theme.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.7046647"
|
||||
inkscape:cx="603.12373"
|
||||
inkscape:cy="523.65331"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1042"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Background Layer"
|
||||
style="fill:#ffffff;fill-opacity:1">
|
||||
<rect
|
||||
style="fill:#353535;fill-opacity:1;stroke-width:0.290862"
|
||||
id="rect1"
|
||||
width="225"
|
||||
height="335"
|
||||
x="-280"
|
||||
y="-55"
|
||||
transform="rotate(-90,-2.9791666e-7,-55.000001)"
|
||||
inkscape:label="bg" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Foreground Layer"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
transform="translate(55.000001,-55.000001)">
|
||||
<rect
|
||||
style="fill:#f5f5f5;fill-opacity:1;stroke-width:0.246609;stroke:none;stroke-opacity:1"
|
||||
id="rect2-0-2"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="170"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="white-3" />
|
||||
<rect
|
||||
style="fill:#e5e5e5;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1"
|
||||
id="rect3-9-3"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="170"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="white-2" />
|
||||
<rect
|
||||
style="fill:#d9d9d9;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1"
|
||||
id="rect4-3-6"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="170"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="white-1" />
|
||||
<rect
|
||||
style="fill:#944db6;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect2"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="225"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="highlight-hover" />
|
||||
<rect
|
||||
style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.247;stroke-dasharray:none;stroke:#000000;stroke-opacity:1"
|
||||
id="rect5-6-1"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="170"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="white-0" />
|
||||
<rect
|
||||
style="fill:#272727;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect3-5-6"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="115"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="block-2" />
|
||||
<rect
|
||||
style="fill:#1a1a1a;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect4-6-2"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="115"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="block-1" />
|
||||
<rect
|
||||
style="fill:#0d0d0d;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect5-2-6"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="115"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="block-0" />
|
||||
<rect
|
||||
style="fill:#2a223e;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect2-3-0"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="115"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="background-4" />
|
||||
<rect
|
||||
style="fill:#211635;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect3-9"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="60"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="background-3" />
|
||||
<rect
|
||||
style="fill:#231833;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect4-3"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="60"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="background-2" />
|
||||
<rect
|
||||
style="fill:#170d28;fill-opacity:1;stroke-width:0.247;stroke-dasharray:none"
|
||||
id="rect5-6"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="60"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="background-1" />
|
||||
<rect
|
||||
style="fill:#130b21;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect2-0"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="60"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="background-0" />
|
||||
<rect
|
||||
style="display:inline;fill:#aa7ab7;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect4"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="-50"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="accent-purple" />
|
||||
<rect
|
||||
style="fill:#868ab7;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect3"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="-50"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="accent-blue" />
|
||||
<rect
|
||||
style="fill:#ff9f9f;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect5-2"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="-50"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="accent-pink" />
|
||||
<rect
|
||||
style="fill:#cfeb9e;fill-opacity:1;stroke-width:0.246609"
|
||||
id="rect5"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="-50"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="accent-green" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect4-6-2-9"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="225"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect4-6"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-110"
|
||||
y="5"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect2-3"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="5"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect3-5"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="5"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect2-3-0-7"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-275"
|
||||
y="225"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect3-5-6-5"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-220"
|
||||
y="225"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
<rect
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
|
||||
id="rect5-2-6-2"
|
||||
width="50"
|
||||
height="50"
|
||||
x="-165"
|
||||
y="5"
|
||||
transform="rotate(-90)"
|
||||
inkscape:label="unused" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
82
index.html
82
index.html
@@ -1,82 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Home | Cutieguwu</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
|
||||
<meta name="description" content="Cutieguwu's Official website" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0"
|
||||
/>
|
||||
<meta name="keywords" content="cutieguwu" />
|
||||
</head>
|
||||
<body class="viewport">
|
||||
<nav class="nav_pane">
|
||||
<h2 class="nav_logo">Cutieguwu</h2>
|
||||
|
||||
<ul class="nav_menu">
|
||||
<li class="nav_body"><a class="nav_title" href="">Home</a></li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">About</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title" href="#">Minecraft</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="#">Bearock SMP</a>
|
||||
<a class="nav_title" href="#">Rebirth SMP</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title">Links</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
|
||||
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
|
||||
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
|
||||
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
|
||||
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<a class="nav_title" href="https://pronouns.page/@Cutieguwu"
|
||||
>Pronoun Pages</a
|
||||
>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
|
||||
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Other</a>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Other 2</a>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<a class="nav_title" href="#">Super long titled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="main_pane">
|
||||
<p>lorem ipsum etc idk what else there is in this latin phrase</p>
|
||||
</div>
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
|
||||
></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
20
src/acknowledgements.html
Normal file
20
src/acknowledgements.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<title>Acknowledgements | Cutieguwu</title>
|
||||
<include src="includes/meta.html" />
|
||||
</head>
|
||||
<body class="viewport">
|
||||
<include src="includes/nav.html" />
|
||||
<div class="main_pane">
|
||||
<p>There are currently no acknowledgements</p>
|
||||
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
|
||||
<p>
|
||||
I will get my thanks to various open projects in here in time, but I'm still busy
|
||||
getting the basics handled.
|
||||
</p>
|
||||
</div>
|
||||
<include src="includes/scripts.html" />
|
||||
</body>
|
||||
</html>
|
||||
107
src/balloon.py
Normal file
107
src/balloon.py
Normal file
@@ -0,0 +1,107 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from dataclasses import dataclass
|
||||
from types import NoneType
|
||||
from typing import Optional
|
||||
from result import Result, Ok, Err
|
||||
from icecream import ic
|
||||
import os
|
||||
|
||||
from typing import TYPE_CHECKING
|
||||
if TYPE_CHECKING:
|
||||
from _typeshed import StrPath
|
||||
|
||||
WORK_DIR: StrPath = os.getcwd()
|
||||
|
||||
@dataclass
|
||||
class Tag:
|
||||
value: str
|
||||
trail: Optional[str]
|
||||
|
||||
def __post_init__(self) -> None:
|
||||
self.trail = self.trail if (self.trail is not None) and (self.trail.strip() != '') else None
|
||||
|
||||
# Returns the type of tag.
|
||||
def type(self) -> str:
|
||||
type = str()
|
||||
|
||||
for c in self.value:
|
||||
if c.isspace():
|
||||
break
|
||||
|
||||
type += c
|
||||
|
||||
return type
|
||||
|
||||
def get_param(self, param: str) -> Optional[str]:
|
||||
pos = self.value.find(param) + param.__len__() + len('="')
|
||||
|
||||
if pos == -1:
|
||||
return None
|
||||
|
||||
param_value = str()
|
||||
|
||||
for idx in range(pos, (self.value.__len__() - param.__len__())):
|
||||
param_value += self.value[idx]
|
||||
|
||||
return param_value
|
||||
|
||||
def write(self) -> str:
|
||||
return f'<{self.value}>{self.trail if self.trail != None else ''}'
|
||||
|
||||
@dataclass
|
||||
class HTML:
|
||||
value: str
|
||||
|
||||
# Returns all tags in order in the html file.
|
||||
def tags(self) -> list[Tag]:
|
||||
tag = str()
|
||||
trail: Optional[str] = str()
|
||||
tags = list()
|
||||
record = False
|
||||
|
||||
for c in self.value:
|
||||
if c == '<' and tag != '':
|
||||
tags.append(Tag(tag, trail))
|
||||
tag = str()
|
||||
trail = str()
|
||||
|
||||
if c == '<' or c == '>':
|
||||
record = not record # why can't I have ! operator...
|
||||
elif record == True:
|
||||
tag += c
|
||||
else:
|
||||
trail += c
|
||||
|
||||
tags.append(Tag(tag, trail))
|
||||
return tags
|
||||
|
||||
def inflate(self) -> Result[str, str]:
|
||||
file = str()
|
||||
|
||||
for tag in self.tags():
|
||||
if tag.type() == 'include':
|
||||
chunk = tag.get_param('src')
|
||||
if isinstance(chunk, NoneType):
|
||||
return Err('FileNotFoundError')
|
||||
|
||||
html = HTML(open(str(WORK_DIR) + '/src/' + chunk, 'rt').read())
|
||||
file += html.inflate().expect('FileNotFoundError')
|
||||
else:
|
||||
file += tag.write()
|
||||
|
||||
return Ok(file)
|
||||
|
||||
# Convert the HTML obj into a str to write to file.
|
||||
def write(self) -> str:
|
||||
return self.inflate().unwrap()
|
||||
|
||||
|
||||
def main() -> None:
|
||||
with open(str(WORK_DIR) + '/src/index.html', 'rt') as f:
|
||||
html_src = HTML(f.read())
|
||||
with open(str(WORK_DIR) + '/target/index.html', 'w') as f:
|
||||
f.write(html_src.write())
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
11
src/includes/meta.html
Normal file
11
src/includes/meta.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<meta name="description" content="Cutieguwu's Official website" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0"
|
||||
/>
|
||||
<meta name="keywords" content="cutieguwu" />
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
1
src/includes/nav_logo.html
Normal file
1
src/includes/nav_logo.html
Normal file
@@ -0,0 +1 @@
|
||||
<h2 class="nav_logo">Cutieguwu</h2>
|
||||
78
src/includes/nav_menu.html
Normal file
78
src/includes/nav_menu.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<ul class="nav_menu">
|
||||
<!-- Home -->
|
||||
<li class="nav_body"><a class="nav_title" href="#">Home</a></li>
|
||||
|
||||
<!-- Minecraft -->
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title" href="#">Minecraft</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="#">Bearock SMP</a>
|
||||
<a class="nav_title" href="#">Rebirth SMP</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- About -->
|
||||
<li class="nav_body"><a class="nav_title" href="#">About</a></li>
|
||||
|
||||
<!-- Pronoun Pages -->
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
|
||||
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- External Links -->
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title">External Links</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
|
||||
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Public Services -->
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title">Public Services</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Services -->
|
||||
<li class="dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<p class="nav_title">Services</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
|
||||
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
|
||||
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
|
||||
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
|
||||
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Website Disclosure -->
|
||||
<li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
|
||||
</ul>
|
||||
17
src/includes/nav_quick_links.html
Normal file
17
src/includes/nav_quick_links.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<div class="nav_quick_links">
|
||||
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
|
||||
<ion-icon
|
||||
name="git-branch-outline"
|
||||
class="icon_gitea"
|
||||
alt="(Gitea) Website Source"
|
||||
></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
|
||||
<ion-icon name="logo-github" class="icon_github" alt="(Mirror) Website Source"></ion-icon>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
|
||||
title="MIT License"
|
||||
><ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon
|
||||
></a>
|
||||
</div>
|
||||
2
src/includes/scripts.html
Normal file
2
src/includes/scripts.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
||||
28
src/index.html
Normal file
28
src/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<title>Home | Cutieguwu</title>
|
||||
<include src="includes/meta.html" />
|
||||
</head>
|
||||
<body class="viewport">
|
||||
<nav class="pane_nav">
|
||||
<include src="includes/nav_logo.html" />
|
||||
<include src="includes/nav_menu.html" />
|
||||
<div class="location">
|
||||
<p class="location_header">You are here:</p>
|
||||
<p class="location_page">Home</p>
|
||||
</div>
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<h1>Home</h1>
|
||||
<p>lorem ipsum idk what else there is in this latin phrase</p>
|
||||
</div>
|
||||
<div class="pane_spacer">
|
||||
<div class="spacer_container"><p>#AD</p></div>
|
||||
<div class="spacer_container"><p>#AD</p></div>
|
||||
</div>
|
||||
<include src="includes/scripts.html" />
|
||||
</body>
|
||||
</html>
|
||||
18
src/partials/_nav_location.scss
Normal file
18
src/partials/_nav_location.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.location {
|
||||
margin: 0;
|
||||
padding: var(--spacing-horizontal);
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-small)
|
||||
var(--border-radius-large);
|
||||
text-align: center;
|
||||
|
||||
.location_header {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.location_page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
5
src/partials/_nav_logo.scss
Normal file
5
src/partials/_nav_logo.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.nav_logo {
|
||||
font-family: var(--font-family-generic);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
99
src/partials/_nav_menu.scss
Normal file
99
src/partials/_nav_menu.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
.nav_menu {
|
||||
/*
|
||||
Remove default padding and style applied to ul for bullets.
|
||||
*/
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
gap: var(--spacing-menu-gap);
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
|
||||
hr {
|
||||
border-color: var(--accent-pink);
|
||||
margin: 0 var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
.nav_body {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-small);
|
||||
transition: var(--transition-fade);
|
||||
}
|
||||
|
||||
.dropdown:hover .nav_body,
|
||||
.dropdown .nav_body:hover,
|
||||
.nav_body:hover {
|
||||
transform: var(--transform-scale-x);
|
||||
transition: var(--transition-cut);
|
||||
|
||||
.nav_title,
|
||||
ion-icon {
|
||||
color: var(--highlight-hover);
|
||||
transition: var(--transition-cut);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
align-items: center;
|
||||
|
||||
ion-icon {
|
||||
/*
|
||||
This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
|
||||
*/
|
||||
margin-right: 0.5rem;
|
||||
|
||||
align-self: center;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown_body {
|
||||
display: none;
|
||||
border-bottom-left-radius: var(--border-radius-small);
|
||||
border-bottom-right-radius: var(--border-radius-small);
|
||||
background-color: var(--background-1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover {
|
||||
.dropdown_header {
|
||||
transform: var(--transform-scale-x);
|
||||
|
||||
ion-icon {
|
||||
rotate: 90deg;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown_body {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_body,
|
||||
.dropdown .nav_body,
|
||||
.dropdown .dropdown_body {
|
||||
.nav_title {
|
||||
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
|
||||
color: inherit;
|
||||
|
||||
text-decoration: none;
|
||||
font-family: var(--font-family-generic);
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
margin: 0 var(--spacing-horizontal);
|
||||
transition: var(--transition-fade);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav_title:hover {
|
||||
color: var(--highlight-hover);
|
||||
transition: var(--transition-cut);
|
||||
}
|
||||
}
|
||||
}
|
||||
54
src/partials/_nav_quick_links.scss
Normal file
54
src/partials/_nav_quick_links.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.nav_quick_links {
|
||||
--cols: 5;
|
||||
--item-padding: 0.35rem;
|
||||
--item-edge-length: 1.25rem;
|
||||
--item-size: calc(
|
||||
var(--item-edge-length) + calc(var(--item-padding) * 2)
|
||||
);
|
||||
|
||||
/*
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
margin-right: auto;
|
||||
*/
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--item-size) var(--item-size) var(--item-size)
|
||||
var(--item-size) var(--item-size);
|
||||
align-items: center;
|
||||
|
||||
gap: var(--spacing-menu-gap)
|
||||
calc(
|
||||
calc(100% - calc(var(--item-size) * var(--cols))) /
|
||||
calc(var(--cols) - 1)
|
||||
);
|
||||
|
||||
a {
|
||||
width: var(--item-size);
|
||||
height: var(--item-size);
|
||||
|
||||
* {
|
||||
width: var(--item-edge-length);
|
||||
height: var(--item-edge-length);
|
||||
padding: var(--item-padding);
|
||||
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-small)
|
||||
var(--border-radius-large);
|
||||
}
|
||||
|
||||
.icon_gitea {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.icon_github {
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.icon_license {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/partials/_pane_error.scss
Normal file
6
src/partials/_pane_error.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.pane_error {
|
||||
width: max-content;
|
||||
margin: auto; /* center object */
|
||||
text-align: center;
|
||||
background-color: var(--background-2);
|
||||
}
|
||||
10
src/partials/_pane_main.scss
Normal file
10
src/partials/_pane_main.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.pane_main {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: var(--background-2);
|
||||
margin: var(--margin-pane);
|
||||
padding: 0;
|
||||
|
||||
border-radius: var(--border-radius-small)
|
||||
var(--border-radius-large);
|
||||
}
|
||||
17
src/partials/_pane_nav.scss
Normal file
17
src/partials/_pane_nav.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@use "nav_logo";
|
||||
@use "nav_menu";
|
||||
@use "nav_location";
|
||||
@use "nav_quick_links";
|
||||
|
||||
.pane_nav {
|
||||
--spacing-horizontal: 0.75rem;
|
||||
--transform-scale-x: scaleX(1.15);
|
||||
|
||||
margin: var(--margin-pane);
|
||||
padding: 0;
|
||||
gap: var(--spacing-menu-gap);
|
||||
width: min-content;
|
||||
align-content: start;
|
||||
display: grid;
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
31
src/partials/_pane_spacer.scss
Normal file
31
src/partials/_pane_spacer.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.pane_spacer {
|
||||
margin: var(--margin-pane);
|
||||
padding: 0;
|
||||
width: 10vw;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
gap: var(--spacing-menu-gap);
|
||||
|
||||
.spacer_container {
|
||||
margin: 0;
|
||||
background-color: var(--background-2);
|
||||
height: calc(
|
||||
50vh - var(--margin-pane) - calc(
|
||||
var(--spacing-menu-gap) / 2
|
||||
)
|
||||
);
|
||||
flex: 1;
|
||||
border-radius: var(--border-radius-small)
|
||||
var(--border-radius-large);
|
||||
|
||||
/* Vertical Text Align */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
2
src/robots.txt
Normal file
2
src/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
83
src/style.scss
Normal file
83
src/style.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
@use "partials/pane_main";
|
||||
@use "partials/pane_nav";
|
||||
@use "partials/pane_spacer";
|
||||
|
||||
@use "partials/pane_error";
|
||||
|
||||
:root {
|
||||
/*
|
||||
0: Base of an element. Example: the viewport class.
|
||||
|
||||
The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
|
||||
|
||||
Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
|
||||
Eg. Current dropdown menu.
|
||||
|
||||
*/
|
||||
font-size: var(--font-size-generic);
|
||||
|
||||
--accent-green: #cfeb9eff;
|
||||
--accent-pink: #ff9f9fff;
|
||||
--accent-blue: #868ab7ff;
|
||||
--accent-purple: #aa7ab7ff;
|
||||
|
||||
--background-0: #130b21ff;
|
||||
--background-1: #170d28ff;
|
||||
--background-2: #231833ff;
|
||||
--background-3: #211635ff;
|
||||
--background-4: #2a223eff;
|
||||
|
||||
--block-0: #0d0d0dff;
|
||||
--block-1: #1a1a1aff;
|
||||
--block-2: #272727ff;
|
||||
|
||||
--highlight-hover: #944db6ff;
|
||||
|
||||
--white-0: #bfbfbfff;
|
||||
--white-1: #d9d9d9ff;
|
||||
--white-2: #e5e5e5ff;
|
||||
--white-3: #f5f5f5ff;
|
||||
|
||||
--font-size-generic: 1.65vh;
|
||||
--font-family-generic: Arial, Sans-Serif, Helvetica;
|
||||
|
||||
--transition-fade: 0.4s ease-out;
|
||||
--transition-cut: none;
|
||||
|
||||
--border-radius-large: 1rem;
|
||||
--border-radius-small: calc(var(--border-radius-large) / 2);
|
||||
|
||||
--margin-pane: 1.5rem;
|
||||
|
||||
--spacing-menu-gap: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 3.3vh;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
/* Adds a margin otherwise for some reason. */
|
||||
margin: 0;
|
||||
|
||||
background-color: var(--background-0);
|
||||
color: var(--white-3);
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
157
style.css
157
style.css
@@ -1,157 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/*outline: 1px solid red;*/
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.3vh;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.65vh;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.65vh;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.25vh;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-image: url(img/background.png);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-blend-mode: multiply;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.nav_pane {
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
width: min-content;
|
||||
align-content: start;
|
||||
display: grid;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav_logo {
|
||||
color: lightpink;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.nav_menu {
|
||||
list-style: none;
|
||||
min-width: fit-content;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
row-gap: 1em;
|
||||
}
|
||||
|
||||
.nav_body {
|
||||
background-color: rgba(0, 0, 0, 50%);
|
||||
border-radius: 50cqh;
|
||||
height: auto;
|
||||
transition: 0.4s ease-out;
|
||||
}
|
||||
|
||||
.nav_body:hover {
|
||||
transform: scaleX(1.15);
|
||||
transition: 0s ease-in;
|
||||
}
|
||||
|
||||
.nav_body:hover * {
|
||||
color: darkviolet;
|
||||
transition: 0s ease-out;
|
||||
}
|
||||
|
||||
.nav_title:hover {
|
||||
color: darkviolet;
|
||||
transition: 0s ease-out;
|
||||
}
|
||||
|
||||
.nav_title {
|
||||
text-decoration-line: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
font-size: 1.65vh;
|
||||
padding-left: 1cqw;
|
||||
padding-right: 1cqw;
|
||||
transition: 0.4s ease-out;
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
color: lightpink;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown .dropdown_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.dropdown_header ion-icon {
|
||||
margin-right: 0.5vw;
|
||||
align-self: center;
|
||||
width: 1.65vh;
|
||||
height: 1.65vh;
|
||||
float: right;
|
||||
color: lightpink;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
|
||||
.dropdown_body {
|
||||
display: none;
|
||||
border-bottom-left-radius: 1em;
|
||||
border-bottom-right-radius: 1em;
|
||||
background-color: rgba(0, 0, 0, 50%);
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown_body {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown_header {
|
||||
transform: scaleX(1.15);
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown_header ion-icon {
|
||||
rotate: 90deg;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
|
||||
.dropdown_body:hover {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.main_pane {
|
||||
padding: 1rem;
|
||||
background-color: rgba(0, 0, 0, 50%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error_pane {
|
||||
padding: 1rem;
|
||||
width: max-content;
|
||||
margin: auto; /* center object */
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 50%);
|
||||
color: white;
|
||||
border-radius: 1cqh;
|
||||
}
|
||||
Reference in New Issue
Block a user