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

Split the error styling so that it's only served to pages that need it.

Browse Source
This commit is contained in:
Cutieguwu
2025-07-23 19:08:26 -04:00
parent 0c9bb0436e
commit 0c2b2672cf
4 changed files with 126 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
build.sh
View File

@@ -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

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

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

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;
}

123
src/style.scss
View File

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