Adjust all styles for box-sizing: border-box to begin working on RWD to add Mobile support.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
|
||||
* {
|
||||
color-scheme: dark;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* outline: 1px solid red; */
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -16,6 +16,13 @@
|
||||
max-width: 44%;
|
||||
}
|
||||
|
||||
.software,
|
||||
.prog_languages {
|
||||
* {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.software {
|
||||
max-width: 55%;
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user