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

Compare commits

base: Cutieguwu:0c9bb0436e434c65eb3c4b626ab83b2795f8f15c
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main
...
compare: Cutieguwu:6df54559e242c43632668107eba501d5492d110e
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main

2 Commits
0c9bb0436e ... 6df54559e2

Author SHA1 Message Date
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
9 changed files with 138 additions and 132 deletions
Expand all files Collapse all files

11
build.sh
View File

@@ -38,9 +38,16 @@ do
then
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' ]
then

2
src/errors/400.html
View File

@@ -16,7 +16,7 @@
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="error_pane">
<div class="pane_error">
<h1>400</h1>
<h2>Bad Request!</h2>
<hr />

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

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

6
src/includes/meta.html
View File

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

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

@@ -0,0 +1,113 @@
@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;
--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);
body {
background-color: var(--background-0);
margin: 0;
color: var(--white-3);
}
}
/*
* {
outline: 1px solid red;
}
*/
h1 {
font-size: 3.3vh;
}
h2 {
font-size: 2.5vh;
}
p {
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);
background-color: var(--background-2);
border-top-right-radius: var(--border-radius-large);
font-size: 1.65vh;
position: absolute;
bottom: 0;
}

6
src/partials/_pane_error.scss
View File

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

3
src/partials/_pane_main.scss
View File

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

3
src/partials/_pane_spacer.scss
View File

@@ -8,11 +8,12 @@
.spacer_container {
margin: 0;
padding: var(--spacing-horizontal);
background-color: var(--background-2);
height: calc(
50vh - var(--margin-pane) - calc(
var(--spacing-menu-gap) / 2
)
) - calc(var(--spacing-horizontal) * 2)
);
flex: 1;
border-radius: var(--border-radius-leaf);

123
src/style.scss
View File

@@ -1,122 +1 @@
@use "partials/pane_main";
@use "partials/pane_nav";
@use "partials/pane_spacer";
@use "partials/pane_error";
/*
@font-face {
font-family: Syncopate;
src: url(syncopate.woff);
}
*/
: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;
--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);
body {
background-color: var(--background-0);
margin: 0;
color: var(--white-3);
}
}
/*
* {
outline: 1px solid red;
}
*/
h1 {
font-size: 3.3vh;
}
h2 {
font-size: 2.5vh;
}
p {
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);
background-color: var(--background-2);
border-top-right-radius: var(--border-radius-large);
font-size: 1.65vh;
position: absolute;
bottom: 0;
}
@use "partials/common";