tsv
/
tabletop-companion
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve layout

This commit is contained in:
Trevor Vallender 2024-06-27 15:40:51 +01:00
parent 2170122805
commit 314c89acf4
1 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/stylesheets/layout.css
View File

@ -8,18 +8,25 @@ body {
font-size: 1.1em; font-size: 1.1em;
background-color: var(--background-color); background-color: var(--background-color);
min-width: 30em; min-width: 30em;
padding: 0;
margin: 0;
} }
main { main {
background: linear-gradient(180deg, rgba(227,220,190,1) 0%, rgba(255,248,238,1) 100%); background: linear-gradient(180deg, rgba(227,220,190,1) 0%, rgba(255,248,238,1) 100%);
max-width: 80vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em 1em 4em 1em; padding: 1em 1em 4em 1em;
margin: 0 auto;
min-height: calc(100vh - var(--header-height)); min-height: calc(100vh - var(--header-height));
} }
@media(min-width: 800px) {
main, footer, header {
margin: 0 auto;
max-width: 80vw;
}
}
aside.flash { aside.flash {
background-color: var(--notice-bg-color); background-color: var(--notice-bg-color);
color: var(--notice-text-color); color: var(--notice-text-color);
@ -46,26 +53,11 @@ h1, h2 {
header { header {
background: linear-gradient(180deg, rgba(34,45,113,1) 0%, rgba(22,90,157,1) 100%); background: linear-gradient(180deg, rgba(34,45,113,1) 0%, rgba(22,90,157,1) 100%);
position: relative;
padding: 0 50px;
margin-right: 2em;
height: var(--header-height); height: var(--header-height);
} }
/* Angled banner end */
header:before {
content: "";
width: 0;
height: 0;
border-top: calc(var(--header-height) / 2) solid transparent;
border-bottom: calc(var(--header-height) / 2) solid transparent;
border-right: calc(var(--header-height) / 2) solid var(--background-color);
position: absolute;
right:0;
}
header h1 { header h1 {
padding: 1em 0; margin: 0;
padding: 1em;
} }
header h1 a:link, header h1 a:visited { header h1 a:link, header h1 a:visited {
@ -77,6 +69,8 @@ header nav {
ul { ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0;
padding: 0;
} }
li { li {
list-style-type: none; list-style-type: none;
@ -172,7 +166,6 @@ footer {
padding: 1em; padding: 1em;
margin: 0 auto; margin: 0 auto;
font-size: .8em; font-size: .8em;
max-width: 80vw;
a:link, a:visited { a:link, a:visited {
color: var(--header-text-color); color: var(--header-text-color);
text-decoration: none; text-decoration: none;