diff --git a/assets/style.css b/assets/style.css index 5e5c243..e79f886 100644 --- a/assets/style.css +++ b/assets/style.css @@ -63,51 +63,24 @@ body { padding: 4rem 2rem; background-color: #000; - background-repeat: no-repeat; - background-position: top center; - background-size: 100% auto; - background-image: url(bg.jpg); + background-repeat: no-repeat, no-repeat, repeat-y; + background-position: center, center, top center; + background-size: 100% auto, 100% 100%, 100% auto; + background-image: url(texture.png), linear-gradient(to bottom, transparent 0%, #000 100%), url(bg.jpg); color: #fff; display: flex; align-items: center; justify-content: center; } -body:before, -body:after { - content: ''; - display: block; - width: 100%; - height: auto; - margin: 0; - padding: 0; - aspect-ratio: 1284 / 1920; - position: absolute; - top: 0; - right: 0; - bottom: auto; - left: 0; -} -body:before { - z-index: 10; - background-image: linear-gradient(to bottom, transparent 0%, #000 100%), url(bg.jpg); -} -body:after { - z-index: 20; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: 100% auto; - background-image: url(texture.png); -} main { width: 1140px; max-width: 100%; margin: auto; - padding: 4rem 2rem 2rem; + padding: 3rem 2rem; position: relative; - z-index: 30; + z-index: 2; background: rgba(0, 0, 0, .75); } main > *:first-child { @@ -134,6 +107,10 @@ h1 { font-size: 2em; margin-bottom: .5em; } +h1 + p { + text-align: center; + font-weight: bold; +} h2 { font-size: 1.5em; @@ -145,10 +122,12 @@ h2 { h3 { font-family: var(--font-family--sans-serif); - font-size: 1.25em; + font-size: 2em; line-height: 1; font-weight: normal; color: var(--color--orange); + text-align: center; + margin-block-end: .75em; } h4 { @@ -182,8 +161,9 @@ img { figure { width: 100%; max-width: 940px; - margin: 0 auto .5em; - border-bottom: 10px solid rgba(248, 154, 49, .7); + padding-block-end: 1.5rem; + margin: 0 auto 1rem; + border-bottom: .4em solid rgba(248, 154, 49, .3); } a { @@ -201,39 +181,22 @@ a:active { } a:hover, a:active { - box-shadow: 0px 2px 0px currentColor; + box-shadow: 0 .08em 0 currentColor; outline: 0; } -@media (min-width: 1921px) { - body:before, - body:after { - height: 100%; - padding: 0; - position: fixed; - bottom: 0; - background-attachment: fixed; - } - body:before { - background-size: cover; - } -} - @media (max-width: 768px) { body { - padding-top: 0; - padding-bottom: 0; + padding: 0; background-image: none; } - body:before, - body:after { - content: none; - display: none; - visibility: hidden; - } - main { padding-inline: 1rem; - padding-bottom: 4rem; + } +} + +@media (max-width: 480px) { + html { + font-size: 16px; } }