diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index b4a1fa5..64e04ea 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -8,18 +8,25 @@ body { font-size: 1.1em; background-color: var(--background-color); min-width: 30em; + padding: 0; + margin: 0; } main { background: linear-gradient(180deg, rgba(227,220,190,1) 0%, rgba(255,248,238,1) 100%); - max-width: 80vw; display: flex; flex-direction: column; padding: 1em 1em 4em 1em; - margin: 0 auto; min-height: calc(100vh - var(--header-height)); } +@media(min-width: 800px) { + main, footer, header { + margin: 0 auto; + max-width: 80vw; + } +} + aside.flash { background-color: var(--notice-bg-color); color: var(--notice-text-color); @@ -46,26 +53,11 @@ h1, h2 { header { 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); } - -/* 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 { - padding: 1em 0; + margin: 0; + padding: 1em; } header h1 a:link, header h1 a:visited { @@ -77,6 +69,8 @@ header nav { ul { display: flex; justify-content: center; + margin: 0; + padding: 0; } li { list-style-type: none; @@ -172,7 +166,6 @@ footer { padding: 1em; margin: 0 auto; font-size: .8em; - max-width: 80vw; a:link, a:visited { color: var(--header-text-color); text-decoration: none;