Adjust all styles for box-sizing: border-box to begin working on RWD to add Mobile support.

This commit is contained in:
Cutieguwu
2025-08-03 22:33:00 -04:00
parent 5f3a07d51f
commit 9c6b86371b
9 changed files with 294 additions and 269 deletions

View File

@@ -15,6 +15,8 @@
grid-auto-flow: row;
grid-template-columns: 1fr min-content;
column-gap: calc(var(--spacing-horizontal) * 2);
background-color: var(--background-3);
border-radius: var(--border-radius-leaf);
@@ -22,7 +24,8 @@
text-align: start;
width: calc(100% - calc(var(--spacing-horizontal) * 2));
/*width: calc(100% - calc(var(--spacing-horizontal) * 2));*/
width: 100%;
margin: 0;
@@ -48,7 +51,6 @@
.status {
align-self: center;
white-space: nowrap;
margin-left: calc(var(--spacing-horizontal) * 2);
text-decoration: none;
font-size: 1.17rem;

View File

@@ -76,6 +76,7 @@
* {
color-scheme: dark;
box-sizing: border-box;
/* outline: 1px solid red; */
}

View File

@@ -7,14 +7,11 @@
justify-content: center;
a {
height: var(--item-size);
display: grid;
background-color: var(--background-3);
border-radius: var(--border-radius-leaf);
margin: 0.5rem;
padding: var(--item-padding);
gap: var(--item-padding);
@@ -26,9 +23,6 @@
text-decoration: none;
color: var(--white-1);
/*
To colour the icons, apply inline styling.
*/
* {
margin: 0;
padding: 0;

View File

@@ -8,11 +8,14 @@
*/
a {
width: var(--item-size);
background-color: var(--background-2);
transition: var(--transition-fade);
margin: 0;
ion-icon {
width: var(--item-size);
}
}
a:hover {
@@ -21,8 +24,7 @@
}
.phantom {
width: var(--item-size);
height: var(--item-size);
width: calc(var(--item-size) + calc(var(--item-padding) * 2));
/*
Fake hiding the element.

View File

@@ -16,6 +16,13 @@
max-width: 44%;
}
.software,
.prog_languages {
* {
margin: 0.5rem;
}
}
.software {
max-width: 55%;

View File

@@ -7,7 +7,7 @@
.error_body,
.tailer {
background-color: var(--background-1);
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);

View File

@@ -1,27 +1,23 @@
.pane_spacer {
margin: var(--margin-pane);
padding: 0;
margin: 0;
padding: var(--margin-pane);
width: min-content;
height: 100vh;
display: grid;
grid-auto-flow: row;
gap: var(--spacing-menu-gap);
position: sticky;
top: var(--margin-pane);
bottom: var(--margin-pane);
top: 0;
right: 0;
.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)
);
height: 100%;
border-radius: var(--border-radius-leaf);
display: flex;