RWD; Update a bunch of stuff which I've forgotten what it is I've done.

This commit is contained in:
Cutieguwu
2025-08-08 14:26:42 -04:00
parent c95c1c591c
commit f638c29272
28 changed files with 125 additions and 71 deletions

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_body"><p>This page has not yet been filled out. Sorry!</p></div>
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_body">
<div class="body">
<p>There are currently no acknowledgements</p>
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
<p>

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_body">
<div class="body">
<div class="header">
<h1 class="title">Blog</h1>
<p class="date">Last Edited: 03 August, 2025</p>

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_blog">
<div class="blog_body">
<div class="body">
<div class="header">
<h1 class="title">Divergent Pathways</h1>
<p class="date">Posted: 29 July, 2025</p>

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_body">
<div class="body">
<div class="header">
<h1 class="title">Disclosure</h1>
<p class="date">Last Edited: 01 August, 2025</p>

View File

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

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>401</h1>
<h2>Unauthorized!</h2>
</div>

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>403</h1>
<h2>Forbidden!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>404</h1>
<h2>Page not found!</h2>
</div>

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>500</h1>
<h2>Internal Server Error!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>501</h1>
<h2>Not Implemented!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>502</h1>
<h2>Bad Gateway!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>503</h1>
<h2>Service Unavailable!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="error_body">
<div class="body">
<h1>504</h1>
<h2>Gateway Timeout!</h2>
<hr />

View File

@@ -17,7 +17,7 @@
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_body">
<div class="body">
<div class="header">
<h1 class="title">Home</h1>
<p class="date">Last Edited: 03 August, 2025</p>

View File

@@ -1,16 +1,22 @@
.chunk_list,
.pane_main .main_body .chunk_list {
display: flex;
flex-direction: column;
padding: 0;
text-align: left;
/*
All specificities to do with Chunk Lists are a disaster.
Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
*/
.chunk_list {
display: grid;
width: 100%;
.chunk + .chunk {
margin-top: var(--spacing-horizontal);
}
.chunk {
.header {
width: inherit;
> .header {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr min-content;
@@ -24,10 +30,7 @@
text-align: start;
/*width: calc(100% - calc(var(--spacing-horizontal) * 2));*/
width: 100%;
margin: 0;
width: inherit;
.name,
.subtitle,
@@ -35,10 +38,6 @@
margin: inherit;
}
.name {
white-space: nowrap;
}
.subtitle {
display: inline-block;
@@ -58,7 +57,7 @@
}
}
.body {
> .body {
padding: 0 calc(var(--spacing-horizontal) * 2);
ul {
@@ -71,3 +70,16 @@
}
}
}
@media only screen and (max-width: 500px) {
.chunk_list .chunk {
> .header {
column-gap: var(--spacing-horizontal);
}
> .body {
/* Collapse the L/R padding to maximize usable space */
padding: 0;
}
}
}

View File

@@ -1,10 +1,9 @@
.layout_row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
display: grid;
grid-auto-flow: column;
gap: var(--spacing-horizontal);
.item {
margin: var(--spacing-horizontal);
padding: calc(var(--spacing-horizontal) * 2);
background-color: var(--background-1);
@@ -15,3 +14,13 @@
}
}
}
.layout_row + .layout_row {
margin-top: var(--spacing-horizontal);
}
@media only screen and (max-width: 500px) {
.layout_row {
grid-auto-flow: row;
}
}

View File

@@ -3,5 +3,6 @@
.recent_posts .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
}
}

View File

@@ -12,6 +12,5 @@
.location_page {
margin: 0;
padding: 0;
}
}

View File

@@ -20,8 +20,10 @@
}
}
.nav_body {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
.nav_item {
/*
Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element.
*/
color: inherit;
text-decoration: none;
@@ -30,8 +32,8 @@
transition: var(--transition-fade);
}
.nav_body:hover,
.nav_dropdown:hover .nav_body {
.nav_item:hover,
.nav_dropdown:hover .nav_item {
transform: var(--transform-scale-x);
transition: var(--transition-cut);

View File

@@ -11,7 +11,6 @@
background-color: var(--background-2);
transition: var(--transition-fade);
margin: 0;
ion-icon {
width: var(--item-size);

View File

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

View File

@@ -1,4 +1,11 @@
.website_security,
.cookies {
max-width: 44%;
width: calc(50% - calc(var(--spacing-horizontal) * 2));
}
@media only screen and (max-width: 500px) {
.website_security,
.cookies {
width: 100%;
}
}

View File

@@ -8,12 +8,12 @@
justify-content: center;
.blog_body {
> .body {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding-top: var(--spacing-horizontal);
.header {
> .header {
text-align: center;
padding: var(--spacing-horizontal);
width: min-content;
@@ -38,11 +38,10 @@
}
}
.body {
> .body {
text-align: start;
padding: 0 calc(var(--margin-pane) * 4)
calc(var(--margin-pane) * 4);
padding: 0 var(--spacing-thicc) var(--spacing-thicc);
p {
color: var(--white-1);
@@ -50,3 +49,13 @@
}
}
}
@media only screen and (max-width: 500px) {
.pane_blog {
width: 100%;
.body > .body {
padding: var(--spacing-horizontal);
}
}
}

View File

@@ -5,7 +5,7 @@
margin: auto; /* center object */
.error_body,
> .body,
.tailer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
@@ -14,3 +14,12 @@
text-align: center;
}
}
@media only screen and (max-width: 500px) {
.pane_error {
width: 100%;
margin-top: var(--margin-pane);
margin-bottom: var(--margin-pane);
}
}

View File

@@ -1,24 +1,17 @@
@use "a_tailer";
.pane_main {
flex: 1;
flex-direction: column;
margin: var(--margin-pane);
justify-content: center;
.main_body {
> .body {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
.header {
> .header {
text-align: center;
padding: var(--spacing-horizontal);
width: min-content;
white-space: nowrap;
width: max-content;
margin: 0 auto;
@@ -38,7 +31,7 @@
}
}
.body {
> .body {
text-align: start;
p {
@@ -47,3 +40,9 @@
}
}
}
@media only screen and (max-width: 500px) {
.pane_main {
width: 100%;
}
}

View File

@@ -5,20 +5,25 @@
.pane_nav {
margin: var(--margin-pane);
padding: 0;
width: min-content;
height: min-content;
display: grid;
grid-auto-flow: row;
grid-template-rows: auto auto auto 1fr max-content;
grid-template-rows: repeat(4, min-content);
gap: var(--spacing-menu-gap);
align-content: start;
position: sticky;
top: var(--margin-pane);
bottom: var(--margin-pane);
left: 0;
left: var(--margin-pane);
color: var(--accent-pink);
}
@media only screen and (max-width: 500px) {
.pane_nav {
width: 75%;
}
}

View File

@@ -1,20 +1,18 @@
.pane_spacer {
margin: 0;
padding: var(--margin-pane);
margin: var(--margin-pane);
width: min-content;
height: 100vh;
height: calc(100vh - calc(var(--margin-pane) * 2));
display: grid;
grid-auto-flow: row;
grid-auto-flow: row dense;
gap: var(--spacing-menu-gap);
position: sticky;
top: 0;
right: 0;
top: var(--margin-pane);
right: var(--margin-pane);
.spacer_container {
margin: 0;
padding: var(--spacing-horizontal);
background-color: var(--background-2);
height: 100%;
@@ -31,3 +29,9 @@
}
}
}
@media only screen and (max-width: 500px) {
.pane_spacer {
width: 100%;
}
}