1a029dcfad
With this change, the default size of content in the new text format is increased a bit, but the content will also increase in size to try and fit all its lines properly. This is especially useful with stuff like guitar tab which looks terrible if it's wrapped
115 lines
2 KiB
SCSS
115 lines
2 KiB
SCSS
.main-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.main-wrapper--mac {
|
|
margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
|
|
}
|
|
|
|
.main-wrapper__inner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
min-height: calc(100vh - var(--header-height));
|
|
max-width: var(--page-max-width);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: var(--header-height);
|
|
padding: var(--spacing-large);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
.main {
|
|
position: relative;
|
|
width: calc(100% - var(--side-nav-width) - var(--spacing-large));
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.main--file-page {
|
|
position: relative;
|
|
|
|
.grid-area--content {
|
|
max-height: var(--inline-player-max-height);
|
|
}
|
|
|
|
.grid-area--info {
|
|
margin-right: var(--spacing-large);
|
|
width: 52.5%;
|
|
}
|
|
|
|
.grid-area--related {
|
|
width: calc(47.5% - var(--spacing-large));
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
overflow-x: hidden;
|
|
|
|
.grid-area--related,
|
|
.grid-area--info {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main--auth-page {
|
|
max-width: 60rem;
|
|
margin-top: var(--spacing-main-padding);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.main--empty {
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-top: 100px;
|
|
margin-bottom: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.main--launching {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.main--contained {
|
|
margin: auto;
|
|
margin-top: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
max-width: 40rem;
|
|
text-align: left;
|
|
|
|
& > * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.main--full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.main__document-wrapper {
|
|
max-width: 100%;
|
|
min-width: 80%;
|
|
/* margin: auto needs a set width */
|
|
width: 0;
|
|
margin: auto;
|
|
margin-bottom: var(--spacing-xlarge);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 100%;
|
|
}
|
|
}
|