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:2fcc4307adcda72586b4528223e408b7d327f277
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main

17 Commits
main ... 2fcc4307ad

Author SHA1 Message Date
Cutieguwu
2fcc4307ad Update index.html 2025-07-24 18:39:31 -04:00
Cutieguwu
7659269b8e Complete #42, 41; Support text in Quick Links, Quick Links Cloud body. 2025-07-24 18:39:25 -04:00
Cutieguwu
0d3aa50a14 Complete #43; Introduce generic nomenclature for common partials. 2025-07-24 10:59:40 -04:00
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
30 changed files with 937 additions and 506 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/a_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>

27
src/includes/nav_quick_links.html
View File

@@ -1,17 +1,34 @@
<div class="nav_quick_links"> <div class="quick_links">
<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>
<a class="phantom"></a>
</div> </div>

265
src/index.html
View File

@@ -5,24 +5,257 @@
<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>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex
sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis
convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla
lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer
nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean
sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit.
Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl
malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem
ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc
posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora
torquent per conubia nostra inceptos himenaeos.
</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>

126
src/partials/_a_common.scss Normal file
View File

@@ -0,0 +1,126 @@
@use "pane_main";
@use "pane_nav";
@use "pane_spacer";
@use "a_quick_links";
: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;
}

39
src/partials/_a_quick_links.scss Normal file
View File

@@ -0,0 +1,39 @@
.quick_links {
--item-padding: 0.35rem;
--item-size: calc(1rem + var(--item-padding));
display: flex;
justify-content: center;
justify-content: center;
flex-wrap: wrap;
a {
height: var(--item-size);
display: grid;
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
margin: 0.5rem;
padding: var(--item-padding);
gap: var(--item-padding);
align-items: center;
justify-content: center;
grid-auto-flow: column;
text-decoration: none;
color: var(--white-1);
/*
To colour the icons, apply inline styling.
*/
* {
margin: 0;
padding: 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 {

66
src/partials/_nav_quick_links.scss
View File

@@ -1,54 +1,36 @@
.nav_quick_links { .pane_nav .quick_links {
--cols: 5; --item-padding: 0.25rem;
--item-padding: 0.35rem;
--item-edge-length: 1.25rem; justify-content: space-between;
--item-size: calc(
var(--item-edge-length) + calc(var(--item-padding) * 2)
);
/* /*
display: flex; To colour the icons, apply inline styling.
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 { a {
width: var(--item-size);
background-color: var(--background-2);
transition: var(--transition-fade);
margin: 0;
}
.phantom {
width: var(--item-size); width: var(--item-size);
height: var(--item-size); height: var(--item-size);
* { /*
width: var(--item-edge-length); Fake hiding the element.
height: var(--item-edge-length);
padding: var(--item-padding);
background-color: var(--background-2); Due to how flexboxes function, settings `display: none`
border-radius: var(--border-radius-small) will result in the box just scaling as if the element
var(--border-radius-large); never existed.
} */
background-color: inherit;
}
.icon_gitea { a:hover {
color: var(--accent-green); transition: var(--transition-cut);
} transform: var(--transform-scale-x) var(--transform-scale-y);
.icon_github {
color: var(--accent-blue);
}
.icon_license {
color: var(--accent-purple);
}
} }
} }

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/a_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>