Loading style.css +88 −0 Original line number Diff line number Diff line Loading @@ -199,6 +199,94 @@ header nav li:hover > ul { display: block; } /* ==== General styles: Articles ==== */ article { padding: 2em; } article .content p { margin: 1em 0; } article .content img { max-width: 100%; height: auto; } article .content h1, article .content h2 { margin: 0.25em 0em; padding: 0.25em; border-style: solid; border-color: var(--accent-color); border-width: 0px 0px 0px 2px; } article > header h1 { display: inline-block; padding: 0.5em; background-color: rgba(0, 0, 0, 0.8); border-style: solid; border-color: var(--accent-color); border-width: 0 0 0 2px; box-shadow: 0 0 3px var(--shadow-color); text-align: left; font-family: "Inconsolata", monospace; font-weight: normal; color: #fff; margin-bottom: -2.5em; } /* ==== Custom styles: Articles on their own page (page.php or single.php) ==== */ article:only-of-type { display: grid; grid-template-rows: max-content 1fr max-content; } article:only-of-type > header { width: 100%; height: 200px; margin: -2em 0 0 -2em; padding: 2em; background-image: url("img/header.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 0px 15px var(--shadow-color) inset; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; justify-items: left; align-items: end; } article:only-of-type > footer { margin: 2em -2em -2em -2em; padding: 1em; background-color: rgba(153, 0, 0, 0.5); text-align: right; color: #fff; } article:only-of-type .content { position: relative; margin-top: 3.5em; } article:only-of-type .content::after { content: ""; display: block; position: absolute; right: -2em; width: 0; height: 0; bottom: -62px; border-width: 30px 0 0 30px; border-style: solid; border-color: #fff transparent; } /* ==== Custom styles: Landing page ==== */ main.landing > header { height: 260px; Loading Loading
style.css +88 −0 Original line number Diff line number Diff line Loading @@ -199,6 +199,94 @@ header nav li:hover > ul { display: block; } /* ==== General styles: Articles ==== */ article { padding: 2em; } article .content p { margin: 1em 0; } article .content img { max-width: 100%; height: auto; } article .content h1, article .content h2 { margin: 0.25em 0em; padding: 0.25em; border-style: solid; border-color: var(--accent-color); border-width: 0px 0px 0px 2px; } article > header h1 { display: inline-block; padding: 0.5em; background-color: rgba(0, 0, 0, 0.8); border-style: solid; border-color: var(--accent-color); border-width: 0 0 0 2px; box-shadow: 0 0 3px var(--shadow-color); text-align: left; font-family: "Inconsolata", monospace; font-weight: normal; color: #fff; margin-bottom: -2.5em; } /* ==== Custom styles: Articles on their own page (page.php or single.php) ==== */ article:only-of-type { display: grid; grid-template-rows: max-content 1fr max-content; } article:only-of-type > header { width: 100%; height: 200px; margin: -2em 0 0 -2em; padding: 2em; background-image: url("img/header.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 0px 15px var(--shadow-color) inset; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; justify-items: left; align-items: end; } article:only-of-type > footer { margin: 2em -2em -2em -2em; padding: 1em; background-color: rgba(153, 0, 0, 0.5); text-align: right; color: #fff; } article:only-of-type .content { position: relative; margin-top: 3.5em; } article:only-of-type .content::after { content: ""; display: block; position: absolute; right: -2em; width: 0; height: 0; bottom: -62px; border-width: 30px 0 0 30px; border-style: solid; border-color: #fff transparent; } /* ==== Custom styles: Landing page ==== */ main.landing > header { height: 260px; Loading