Cutieguwu/cutieguwu-site
1
0
Fork 0
Code Issues 10 Pull Requests Projects 1 Releases Activity

Compare commits

base: Cutieguwu:main
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main
..
compare: Cutieguwu:93ecade2f49bc2088369527722c86fd42bdc8326
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main

14 Commits
main ... 93ecade2f4

Author SHA1 Message Date
Cutieguwu
93ecade2f4 Add scaling on hover for Quick Links; A bit of clean up. 2025-07-23 21:58:33 -04:00
Cutieguwu
9f13c31424 Complete #24-29, #31; Added some base styling for h1-6, p. 2025-07-23 21:25:24 -04:00
Cutieguwu
915423256f Resolve #39; Make footer sticky to viewport. 2025-07-23 21:19:03 -04:00
Cutieguwu
6df54559e2 Resolve #38; Fix styling of error pages. 2025-07-23 19:37:59 -04:00
Cutieguwu
0c2b2672cf Split the error styling so that it's only served to pages that need it. 2025-07-23 19:08:26 -04:00
Cutieguwu
0c9bb0436e Update the other pages with footers; Do some clean up. 2025-07-23 18:48:05 -04:00
Cutieguwu
131b5f5e55 Add Footer as an include. 2025-07-23 18:30:35 -04:00
Cutieguwu
bfcbd971ea Add var for leaf border; Switch to Liberation Sans; Scale Quick Links. 2025-07-23 18:25:48 -04:00
Cutieguwu
1f8ff1ae10 Complete #16, adding YouTube link. 2025-07-23 14:20:39 -04:00
Cutieguwu
120d7fb6b1 Complete #18. 2025-07-23 14:14:54 -04:00
Cutieguwu
6d1a530001 Complete #17 2025-07-23 14:12:30 -04:00
Cutieguwu
9995094d66 Add new accent colours; Clean up Quick Links code. 2025-07-23 13:59:41 -04:00
Cutieguwu
c0b98a1f1d Add Quick Link to report issues with the site. 2025-07-22 22:39:47 -04:00
Cutieguwu
881027b292 Clean output of build script. 2025-07-22 21:39:04 -04:00
29 changed files with 656 additions and 487 deletions
Expand all files Collapse all files

15
build.sh
View File

@@ -29,7 +29,7 @@ do
for html in "${files[@]}" for html in "${files[@]}"
do do
echo -e " $cyan$html -> target/" echo -e " $cyan$html"
eval $python 'balloon.py' $html eval $python 'balloon.py' $html
done done
@@ -38,9 +38,16 @@ do
then then
echo -e "$green"Styling... echo -e "$green"Styling...
sass src/style.scss target/style.css files=(
'style'
'errors/style'
)
echo -e "$cyan"' src/style.scss -> target/style.css' for stylesheet in "${files[@]}"
do
echo -e "$cyan src/$stylesheet.scss -> target/$stylesheet.css"
sass src/$stylesheet.scss target/$stylesheet.css
done
elif [ "$x" == 'copy' ] elif [ "$x" == 'copy' ]
then then
@@ -54,7 +61,7 @@ do
for item in "${files[@]}" for item in "${files[@]}"
do do
echo -e "$cyan src/$item -> target/$item" echo -e "$cyan src/$item"
cp -R src/$item target/$item cp -R src/$item target/$item
done done

308
colour_theme.svg
View File

@@ -2,9 +2,9 @@
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="335mm" width="390mm"
height="225mm" height="225mm"
viewBox="0 0 335 225" viewBox="0 0 390 225"
version="1.1" version="1.1"
id="svg1" id="svg1"
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)" inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
@@ -23,253 +23,323 @@
inkscape:pagecheckerboard="1" inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050" inkscape:deskcolor="#505050"
inkscape:document-units="mm" inkscape:document-units="mm"
inkscape:zoom="0.7046647" inkscape:zoom="0.7"
inkscape:cx="603.12373" inkscape:cx="602.85714"
inkscape:cy="523.65331" inkscape:cy="397.14286"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1042" inkscape:window-height="1042"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="0" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="layer1" /> inkscape:current-layer="layer1"
showguides="true" />
<defs <defs
id="defs1" /> id="defs1" />
<g <g
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer2" id="layer2"
inkscape:label="Background Layer" inkscape:label="Background"
style="fill:#ffffff;fill-opacity:1"> style="fill:#ffffff;fill-opacity:1"
inkscape:highlight-color="#ffa7ec">
<rect <rect
style="fill:#353535;fill-opacity:1;stroke-width:0.290862" style="fill:#353535;fill-opacity:1;stroke:none;stroke-width:0.313829"
id="rect1" id="rect1"
width="225" width="225"
height="335" height="390"
x="-280" x="-225"
y="-55" y="7.0208336e-07"
transform="rotate(-90,-2.9791666e-7,-55.000001)" transform="rotate(-90)"
inkscape:label="bg" /> inkscape:label="bg" />
</g> </g>
<g <g
inkscape:label="Foreground Layer" inkscape:label="Colour Swatches"
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1" id="layer1"
style="fill:#ffffff;fill-opacity:1" style="fill:#ffffff;fill-opacity:1"
transform="translate(55.000001,-55.000001)"> transform="translate(55,-55.000001)"
inkscape:highlight-color="#c6ff8b">
<rect <rect
style="fill:#f5f5f5;fill-opacity:1;stroke-width:0.246609;stroke:none;stroke-opacity:1" style="fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-0-2" id="rect2-0-2"
width="50" width="50"
height="50" height="50"
x="-275" x="-275"
y="170" y="225"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="white-3" /> inkscape:label="white-3" />
<rect <rect
style="fill:#e5e5e5;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1" style="fill:#e5e5e5;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect3-9-3" id="rect3-9-3"
width="50" width="50"
height="50" height="50"
x="-220" x="-220.00002"
y="170" y="225"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="white-2" /> inkscape:label="white-2" />
<rect <rect
style="fill:#d9d9d9;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1" style="fill:#d9d9d9;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect4-3-6" id="rect4-3-6"
width="50" width="50"
height="50" height="50"
x="-165" x="-165.00002"
y="170" y="225"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="white-1" /> inkscape:label="white-1" />
<rect <rect
style="fill:#944db6;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="fill:#bfbfbf;fill-opacity:1;stroke:none;stroke-width:0.247;stroke-dasharray:none;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" id="rect5-6-1"
width="50" width="50"
height="50" height="50"
x="-110" x="-110"
y="170" y="225"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="white-0" /> inkscape:label="white-0" />
<rect <rect
style="fill:#272727;fill-opacity:1;stroke-width:0.246609" style="fill:#944db6;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-35"
width="50"
height="50"
x="-110"
y="280.12329"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="highlight-hover" />
<rect
style="fill:#272727;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect3-5-6" id="rect3-5-6"
width="50" width="50"
height="50" height="50"
x="-220" x="-220.00002"
y="115" y="170"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="block-2" /> inkscape:label="block-2" />
<rect <rect
style="fill:#1a1a1a;fill-opacity:1;stroke-width:0.246609" style="fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect4-6-2" id="rect4-6-2"
width="50" width="50"
height="50" height="50"
x="-165" x="-165.00002"
y="115" y="170"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="block-1" /> inkscape:label="block-1" />
<rect <rect
style="fill:#0d0d0d;fill-opacity:1;stroke-width:0.246609" style="fill:#0d0d0d;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect5-2-6" id="rect5-2-6"
width="50" width="50"
height="50" height="50"
x="-110" x="-110"
y="115" y="170"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="block-0" /> inkscape:label="block-0" />
<rect <rect
style="fill:#2a223e;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1" style="display:inline;fill:#2a223e;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-3-0" id="rect2-3-0"
width="50" width="50"
height="50" height="50"
x="-275" x="-275"
y="115" y="170"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="background-4" /> inkscape:label="background-4" />
<rect <rect
style="fill:#211635;fill-opacity:1;stroke-width:0.246609" style="fill:#211635;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect3-9" id="rect3-9"
width="50" width="50"
height="50" height="50"
x="-275" x="-275"
y="60" y="115"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="background-3" /> inkscape:label="background-3" />
<rect <rect
style="fill:#231833;fill-opacity:1;stroke-width:0.246609" style="fill:#231833;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect4-3" id="rect4-3"
width="50" width="50"
height="50" height="50"
x="-220" x="-220.00002"
y="60" y="115"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="background-2" /> inkscape:label="background-2" />
<rect <rect
style="fill:#170d28;fill-opacity:1;stroke-width:0.247;stroke-dasharray:none" style="fill:#170d28;fill-opacity:1;stroke:none;stroke-width:0.247;stroke-dasharray:none"
id="rect5-6" id="rect5-6"
width="50" width="50"
height="50" height="50"
x="-165" x="-165.00002"
y="60" y="115"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="background-1" /> inkscape:label="background-1" />
<rect <rect
style="fill:#130b21;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="fill:#130b21;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-0" id="rect2-0"
width="50" width="50"
height="50" height="50"
x="-110" x="-110"
y="60" y="115"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="background-0" /> inkscape:label="background-0" />
<rect <rect
style="display:inline;fill:#aa7ab7;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="fill:#ff9f9f;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect5-2"
width="50"
height="50"
x="-165.00002"
y="60"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="accent-pink" />
<rect
style="fill:#df67df;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect4-6-2-9"
width="50"
height="50"
x="-110"
y="60"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="accent-magenta" />
<rect
style="fill:#a355d3;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect4" id="rect4"
width="50" width="50"
height="50" height="50"
x="-275" x="-275"
y="-50" y="5.0000033"
transform="rotate(-90)" transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="accent-purple" /> inkscape:label="accent-purple" />
<rect <rect
style="fill:#868ab7;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="fill:#874ac0;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect3" id="rect2"
width="50" width="50"
height="50" height="50"
x="-220" x="-220"
y="-50" y="5.0000033"
transform="rotate(-90)" transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="accent-blue" /> inkscape:label="accent-indigo" />
<rect <rect
style="fill:#ff9f9f;fill-opacity:1;stroke-width:0.246609" style="fill:#5f62e2;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect5-2" id="rect3"
width="50" width="50"
height="50" height="50"
x="-165" x="-165"
y="-50" y="5.0000024"
transform="rotate(-90)" transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="accent-pink" /> inkscape:label="accent-blue" />
<rect <rect
style="fill:#cfeb9e;fill-opacity:1;stroke-width:0.246609" style="display:inline;fill:#a7edef;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect5" id="rect2-3"
width="50" width="50"
height="50" height="50"
x="-110" x="-110"
y="5.0000024"
transform="rotate(-90)"
inkscape:label="accent-cyan" />
<rect
style="fill:#c5e689;fill-opacity:1;stroke:none;stroke-width:0.246609"
id="rect5"
width="50"
height="50"
x="-275"
y="-50" y="-50"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="accent-green" /> inkscape:label="accent-green" />
<rect <rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="display:inline;fill:#e4d281;fill-opacity:1;stroke:none;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" id="rect3-5"
width="50" width="50"
height="50" height="50"
x="-220" x="-220"
y="5" y="-50"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="unused" /> inkscape:label="accent-yellow" />
<rect <rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1" style="display:inline;fill:#e18142;fill-opacity:1;stroke:none;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" id="rect5-2-6-2"
width="50" width="50"
height="50" height="50"
x="-165" x="-165"
y="5" y="-50"
transform="rotate(-90)"
inkscape:label="accent-orange" />
<rect
style="display:inline;fill:#cb4c4c;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect4-6"
width="50"
height="50"
x="-110"
y="-50"
transform="rotate(-90)"
inkscape:label="accent-red" />
<rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-3-0-7-6"
width="50"
height="50"
x="-275"
y="280.12329"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="unused" />
<rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect3-5-6-5-2"
width="50"
height="50"
x="-220"
y="280.12329"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="unused" />
<rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect4-6-2-9-9"
width="50"
height="50"
x="-165"
y="280.12329"
transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
inkscape:label="unused" />
<rect
style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
id="rect2-3-0-7"
width="50"
height="50"
x="-275"
y="60"
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="rect3-5-6-5"
width="50"
height="50"
x="-220"
y="60"
transform="rotate(-90)" transform="rotate(-90)"
inkscape:label="unused" /> inkscape:label="unused" />
</g> </g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Separators"
inkscape:highlight-color="#ff9254">
<path
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
d="M 112.5,57.500015 V 277.50002"
id="path1"
inkscape:label="Accent/Background"
transform="translate(55.000001,-55.000001)" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
d="M 277.5,57.499996 V 277.50001"
id="path1-9"
inkscape:label="White/CSS States"
transform="translate(55.000001,-55.000001)" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
d="M 222.5,57.500001 V 277.50001"
id="path2"
inkscape:label="Block U Background/White"
transform="translate(55.000001,-55.000001)" />
<path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
d="M 167.5,57.500001 V 222.5 h 55"
id="path3"
sodipodi:nodetypes="cc"
inkscape:label="Background/Block"
transform="translate(55.000001,-55.000001)" />
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 11 KiB

43
src/acknowledgements.html
View File

@@ -5,28 +5,31 @@
<title>Acknowledgements | Cutieguwu</title> <title>Acknowledgements | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">Acknowledgements</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">Acknowledgements</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<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>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<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>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

45
src/errors/400.html
View File

@@ -5,29 +5,32 @@
<title>400 | Cutieguwu</title> <title>400 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">400</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">400</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>400</h1>
<h2>Bad Request!</h2>
<hr />
<p>
The server cannot or will not process this request due to apparent client-side
error or deception.
</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="error_pane">
<h1>400</h1>
<h2>Bad Request!</h2>
<hr />
<p>
The server cannot or will not process this request due to apparent client-side error
or deception.
</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

35
src/errors/401.html
View File

@@ -5,24 +5,27 @@
<title>401 | Cutieguwu</title> <title>401 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">401</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">401</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>401</h1>
<h2>Unauthorized!</h2>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>401</h1>
<h2>Unauthorized!</h2>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

39
src/errors/403.html
View File

@@ -5,26 +5,29 @@
<title>403 | Cutieguwu</title> <title>403 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">403</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">403</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>403</h1>
<h2>Forbidden!</h2>
<hr />
<p>The server is refusing to act upon your request.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>403</h1>
<h2>Forbidden!</h2>
<hr />
<p>The server is refusing to act upon your request.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

35
src/errors/404.html
View File

@@ -5,24 +5,27 @@
<title>404 | Cutieguwu</title> <title>404 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">404</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">404</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>404</h1>
<h2>Page not found!</h2>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>404</h1>
<h2>Page not found!</h2>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

39
src/errors/500.html
View File

@@ -5,26 +5,29 @@
<title>500 | Cutieguwu</title> <title>500 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">500</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">500</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>500</h1>
<h2>Internal Server Error!</h2>
<hr />
<p>The server has no clue WTF happened here.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>500</h1>
<h2>Internal Server Error!</h2>
<hr />
<p>The server has no clue WTF happened here.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

39
src/errors/501.html
View File

@@ -5,26 +5,29 @@
<title>501 | Cutieguwu</title> <title>501 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">501</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">501</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>501</h1>
<h2>Not Implemented!</h2>
<hr />
<p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>501</h1>
<h2>Not Implemented!</h2>
<hr />
<p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

39
src/errors/502.html
View File

@@ -5,26 +5,29 @@
<title>502 | Cutieguwu</title> <title>502 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">502</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">502</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>502</h1>
<h2>Bad Gateway!</h2>
<hr />
<p>This service may be offline.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>502</h1>
<h2>Bad Gateway!</h2>
<hr />
<p>This service may be offline.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

39
src/errors/503.html
View File

@@ -5,26 +5,29 @@
<title>503 | Cutieguwu</title> <title>503 | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">503</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">503</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>503</h1>
<h2>Service Unavailable!</h2>
<hr />
<p>The server may be overloaded or down for maintenance.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>503</h1>
<h2>Service Unavailable!</h2>
<hr />
<p>The server may be overloaded or down for maintenance.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

45
src/errors/504.html
View File

@@ -5,29 +5,32 @@
<title>Error Template | Cutieguwu</title> <title>Error Template | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">Error Template</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">Error Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>504</h1>
<h2>Gateway Timeout!</h2>
<hr />
<p>
The server acted as a proxy and didn't receive a timely response from the
upstream server.
</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>504</h1>
<h2>Gateway Timeout!</h2>
<hr />
<p>
The server acted as a proxy and didn't receive a timely response from the upstream
server.
</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

3
src/errors/style.scss Normal file
View File

@@ -0,0 +1,3 @@
@use "../partials/common";
@use "../partials/pane_error";

1
src/includes/footer.html Normal file
View File

@@ -0,0 +1 @@
<p class="footer">Made with love in Canada 🇨🇦</p>

6
src/includes/meta.html
View File

@@ -1,11 +1,9 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="Cutieguwu's Official website" /> <meta name="description" content="Cutieguwu's Official website" />
<meta <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0"
/>
<meta name="keywords" content="cutieguwu" /> <meta name="keywords" content="cutieguwu" />
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" /> <link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />

7
src/includes/nav_menu.html
View File

@@ -40,8 +40,9 @@
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </div>
<div class="dropdown_body"> <div class="dropdown_body">
<a class="nav_title" href="https://github.com/Cutieguwu">Github</a> <a class="nav_title" href="https://github.com/Cutieguwu">Github (Mirror)</a>
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a> <a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
<a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a>
</div> </div>
</li> </li>
@@ -66,10 +67,6 @@
</div> </div>
<div class="dropdown_body"> <div class="dropdown_body">
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a> <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> </div>
</li> </li>

24
src/includes/nav_quick_links.html
View File

@@ -2,16 +2,32 @@
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source"> <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
<ion-icon <ion-icon
name="git-branch-outline" name="git-branch-outline"
class="icon_gitea"
alt="(Gitea) Website Source" alt="(Gitea) Website Source"
style="color: var(--accent-green)"
></ion-icon> ></ion-icon>
</a> </a>
<a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source"> <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> <ion-icon
name="logo-github"
alt="(Mirror) Website Source"
style="color: var(--accent-blue)"
></ion-icon>
</a> </a>
<a <a
href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE" href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
title="MIT License" title="MIT License"
><ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon >
></a> <ion-icon
name="book-outline"
alt="MIT License"
style="color: var(--accent-indigo)"
></ion-icon>
</a>
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
<ion-icon
name="alert-circle-outline"
alt="Report Issues"
style="color: var(--accent-magenta)"
></ion-icon>
</a>
</div> </div>

35
src/index.html
View File

@@ -5,24 +5,27 @@
<title>Home | Cutieguwu</title> <title>Home | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">Home</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">Home</h5>
</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> </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> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

125
src/partials/_common.scss Normal file
View File

@@ -0,0 +1,125 @@
@use "pane_main";
@use "pane_nav";
@use "pane_spacer";
: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-red: #cb4c4cff;
--accent-orange: #e18142ff;
--accent-yellow: #e4d281ff;
--accent-green: #c5e689ff;
--accent-cyan: #a7edefff;
--accent-blue: #5f62e2ff;
--accent-indigo: #874ac0ff;
--accent-purple: #a355d3ff;
--accent-magenta: #df67dfff;
--accent-pink: #ff9f9fff;
--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.85vh;
--font-family-generic: "Liberation Sans", Arial, Sans-Serif;
--font-family-title: "Liberation Serif", Arial, Sans-Serif;
--border-radius-small: calc(var(--border-radius-large) / 2);
--border-radius-large: 1rem;
--border-radius-leaf: var(--border-radius-small)
var(--border-radius-large);
--margin-pane: 1.5rem;
--spacing-horizontal: 0.75rem;
--spacing-menu-gap: 1rem;
--transition-fade: 0.4s ease-out;
--transition-cut: none;
--transform-scale-x: scaleX(1.15);
--transform-scale-y: scaleY(1.15);
body {
background-color: var(--background-0);
margin: 0;
color: var(--white-3);
}
}
/*
* {
outline: 1px solid red;
}
*/
h1 {
font-size: 3.3vh;
font-family: var(--font-family-title);
}
h2 {
font-size: 2.5vh;
font-family: var(--font-family-title);
}
h3,
h4,
h5,
h6,
p,
a {
font-family: var(--font-family-generic);
}
ion-icon {
width: 1rem;
height: 1rem;
}
.viewport {
/* Adds a margin otherwise for some reason. */
margin: inherit;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.footer {
margin: 0;
padding: var(--spacing-horizontal);
width: min-content;
background-color: var(--background-2);
border-top-right-radius: var(--border-radius-large);
font-size: 1.65vh;
white-space: nowrap;
position: sticky;
bottom: 0;
}

3
src/partials/_nav_location.scss
View File

@@ -2,8 +2,7 @@
margin: 0; margin: 0;
padding: var(--spacing-horizontal); padding: var(--spacing-horizontal);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-small) border-radius: var(--border-radius-leaf);
var(--border-radius-large);
text-align: center; text-align: center;
.location_header { .location_header {

39
src/partials/_nav_quick_links.scss
View File

@@ -1,18 +1,11 @@
.nav_quick_links { .nav_quick_links {
--cols: 5; --cols: 5;
--item-padding: 0.35rem; --item-padding: 0.3rem;
--item-edge-length: 1.25rem; --item-edge-length: 1.15rem;
--item-size: calc( --item-size: calc(
var(--item-edge-length) + calc(var(--item-padding) * 2) var(--item-edge-length) + calc(var(--item-padding) * 2)
); );
/*
display: flex;
flex-flow: row wrap;
align-items: center;
margin-right: auto;
*/
display: grid; display: grid;
grid-template-columns: grid-template-columns:
var(--item-size) var(--item-size) var(--item-size) var(--item-size) var(--item-size) var(--item-size)
@@ -29,26 +22,24 @@
width: var(--item-size); width: var(--item-size);
height: var(--item-size); height: var(--item-size);
* { transition: var(--transition-fade);
ion-icon {
/*
To colour the icons, apply inline styling.
*/
width: var(--item-edge-length); width: var(--item-edge-length);
height: var(--item-edge-length); height: var(--item-edge-length);
padding: var(--item-padding); padding: var(--item-padding);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-small) border-radius: var(--border-radius-leaf);
var(--border-radius-large);
}
.icon_gitea {
color: var(--accent-green);
}
.icon_github {
color: var(--accent-blue);
}
.icon_license {
color: var(--accent-purple);
} }
} }
a:hover {
transition: var(--transition-cut);
transform: var(--transform-scale-x) var(--transform-scale-y);
}
} }

2
src/partials/_nav_title.scss
View File

@@ -9,7 +9,7 @@
margin: inherit; margin: inherit;
padding: 0 var(--spacing-horizontal); padding: 0 var(--spacing-horizontal);
transition: var(--transition-fade); transition: var(--transition-fade);
text-transform: uppercase; /*text-transform: uppercase;*/
display: block; display: block;
} }

6
src/partials/_pane_error.scss
View File

@@ -1,6 +1,10 @@
.pane_error { .pane_error {
width: max-content; width: max-content;
margin: auto; /* center object */
text-align: center; text-align: center;
background-color: var(--background-2); background-color: var(--background-2);
margin: auto; /* center object */
padding: var(--spacing-horizontal);
border-radius: var(--border-radius-leaf);
} }

6
src/partials/_pane_main.scss
View File

@@ -1,10 +1,10 @@
.pane_main { .pane_main {
flex: 1; flex: 1;
text-align: center; text-align: center;
background-color: var(--background-2); background-color: var(--background-2);
margin: var(--margin-pane); margin: var(--margin-pane);
padding: 0; padding: var(--spacing-horizontal);
border-radius: var(--border-radius-small) border-radius: var(--border-radius-leaf);
var(--border-radius-large);
} }

7
src/partials/_pane_nav.scss
View File

@@ -4,14 +4,15 @@
@use "nav_quick_links"; @use "nav_quick_links";
.pane_nav { .pane_nav {
--spacing-horizontal: 0.75rem;
--transform-scale-x: scaleX(1.15);
margin: var(--margin-pane); margin: var(--margin-pane);
padding: 0; padding: 0;
gap: var(--spacing-menu-gap); gap: var(--spacing-menu-gap);
width: min-content; width: min-content;
align-content: start; align-content: start;
display: grid; display: grid;
grid-auto-flow: row;
grid-template-rows: auto auto auto 1fr max-content;
color: var(--accent-pink); color: var(--accent-pink);
} }

6
src/partials/_pane_spacer.scss
View File

@@ -8,15 +8,15 @@
.spacer_container { .spacer_container {
margin: 0; margin: 0;
padding: var(--spacing-horizontal);
background-color: var(--background-2); background-color: var(--background-2);
height: calc( height: calc(
50vh - var(--margin-pane) - calc( 50vh - var(--margin-pane) - calc(
var(--spacing-menu-gap) / 2 var(--spacing-menu-gap) / 2
) ) - calc(var(--spacing-horizontal) * 2)
); );
flex: 1; flex: 1;
border-radius: var(--border-radius-small) border-radius: var(--border-radius-leaf);
var(--border-radius-large);
/* Vertical Text Align */ /* Vertical Text Align */
display: flex; display: flex;

84
src/style.scss
View File

@@ -1,83 +1 @@
@use "partials/pane_main"; @use "partials/common";
@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;
}

39
src/templates/error.html
View File

@@ -5,26 +5,29 @@
<title>Error Template | Cutieguwu</title> <title>Error Template | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">Error Template</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">Error Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>Error Code</h1>
<h2>Error Title</h2>
<hr />
<p>Error details and explaination.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<h1>Error Code</h1>
<h2>Error Title</h2>
<hr />
<p>Error details and explaination.</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>

29
src/templates/main.html
View File

@@ -5,21 +5,24 @@
<title>Main Template | Cutieguwu</title> <title>Main Template | Cutieguwu</title>
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body class="viewport"> <body>
<nav class="pane_nav"> <div class="viewport">
<include src="includes/nav_logo.html" /> <nav class="pane_nav">
<include src="includes/nav_menu.html" /> <include src="includes/nav_logo.html" />
<div class="location"> <include src="includes/nav_menu.html" />
<p class="location_header">You are here:</p> <div class="location">
<p class="location_page">Main Template</p> <h4 class="location_header">You are here:</h4>
<h5 class="location_page">Main Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main"></div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main"></div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>
</html> </html>