93 lines
1.5 KiB
CSS
93 lines
1.5 KiB
CSS
.main {
|
|
height: 98vh;
|
|
display: grid;
|
|
grid-template-columns: 70% auto;
|
|
grid-template-rows: 70px 40px auto 32px;
|
|
gap: 4px;
|
|
padding-left: 2%;
|
|
padding-right: 2%;
|
|
line-height: 1.5;
|
|
font-size: 16px;
|
|
font-family: sans-serif;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
/* Ensure text scales properly */
|
|
.main .content {
|
|
align-self: center;
|
|
}
|
|
|
|
.main .pane {
|
|
border-left: 1px solid #CAD5E0;
|
|
height: 100%;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* Typography */
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 12px;
|
|
font-weight: lighter;
|
|
color: #000000;
|
|
}
|
|
|
|
.large-text {
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
}
|
|
|
|
/* Active state styling */
|
|
.active {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
margin: 2px;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
.active:hover {
|
|
border-bottom-color: #4682b4;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
|
|
/* Tablets & Small Screens */
|
|
@media (max-width: 1024px) {
|
|
.main {
|
|
grid-template-columns: 60% 40%;
|
|
grid-template-rows: 60px 40px auto 32px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.large-text {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
/* Mobile Screens */
|
|
@media (max-width: 768px) {
|
|
.main {
|
|
grid-template-columns: 1fr; /* Single column layout */
|
|
grid-template-rows: auto;
|
|
height: auto;
|
|
gap: 8px;
|
|
padding: 4%;
|
|
}
|
|
|
|
.main .pane {
|
|
border-left: none;
|
|
border-top: 1px solid #CAD5E0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.large-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 10px;
|
|
}
|
|
}
|