Grid layout added/set up
This commit is contained in:
40
styles.css
40
styles.css
@ -83,11 +83,11 @@ header {
|
||||
padding: var(--spacing-large) var(--spacing-large);
|
||||
box-shadow: var(--shadow);
|
||||
border-bottom: 3px solid var(--accent-blue);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-bottom: var(--spacing-small);
|
||||
text-align: center;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@ -121,8 +121,10 @@ main {
|
||||
margin: 0 2rem;
|
||||
padding: var(--spacing-large);
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
|
||||
article {
|
||||
background-color: var(--background-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
@ -223,4 +225,40 @@ tr:hover {
|
||||
margin-top: var(--spacing-large);
|
||||
border-top: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
/* Additions for this page */
|
||||
|
||||
.visualization-area {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
#swerve-canvas {
|
||||
border: 2px solid var(--accent-blue);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-secondary);
|
||||
margin-top: var(--spacing-small);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.controls-panel {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.module-states {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.documentation {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 4 / 5;
|
||||
}
|
||||
Reference in New Issue
Block a user