/* This is a fork of petrapixel's layout generator, edited by sparrowweaver */ /* -------------------------------------------------------- */ /* BASICS */ /* -------------------------------------------------------- */ body { display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; font-size: 18px; /* headings etc can be sized relative to this */ margin: 0; padding: 20px; color: #000000; /* black */ font-family: "Monaco", monospace; line-height: 1.5; background: var(--greyish); background-image: url("./assets/bird-trees.jpg"); background-size: cover; } ::selection { /* (Text highlighted by the user) */ background: rgba(0, 0, 0, 0.2); /* slightly transparent light grey */ } mark { /* Text highlighted by using the element */ text-shadow: 1px 1px 4px var(--blurple); background-color: inherit; color: #000000; /* black */ } /* Links: */ a { text-decoration: underline; } a, a:visited { color: #638CBA; text-decoration: underline; font-weight: bold; } a:hover, a:focus { color: #b1b2c7; text-decoration: underline; font-weight: bold; } /* -------------------------------------------------------- */ /* LAYOUT */ /* -------------------------------------------------------- */ .layout { width: 900px; display: grid; grid-gap: 20px; grid-template: "header" auto "main" auto "footer" auto; /* sidebar width */ /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } main { grid-area: main; overflow-y: auto; padding: 40px; background: #ffffff; /* white */ border: none; } hr.divider { border-top: 2px dotted #b1b2c7; padding-top: 0px; padding-bottom: 0px; } /* -------------------------------------------------------- */ /* PLAIN: use for pages that are iframed onto other pages */ /* -------------------------------------------------------- */ body.plain { padding: 0px; margin: 0px; background: none; } main.plain { padding: 0px; margin: 0px; background: none; } /* -------------------------------------------------------- */ /* HEADER */ /* -------------------------------------------------------- */ header { grid-area: header; font-size: 1.8em; border: none; background: #46548C; justify-content: space-between; align-items: center; position: relative; font-size: 24px; font-weight: 700; display: flex; padding: 40px; gap: 50px; } .header-title { font-family: "Monaco", monospace; font-size: 1.8em; font-weight: bold; color: #ffffff; /* white */ } .header-image img { width: 100%; height: auto; } nav a, nav a:visited { color: #ffffff; /* white */ text-decoration: none; } nav a:hover, nav a:focus { color: #b1b2c7; text-decoration: underline; } /* -------------------------------------------------------- */ /* FOOTER */ /* -------------------------------------------------------- */ footer { grid-area: footer; border: var(--border); overflow: hidden; padding: 30px; background: #46548C; color: #ffffff; display: flex; justify-content: center; } footer a, footer a:visited { color: #ffffff; } footer a:hover, footer a:focus { color: #7780ec; } /* -------------------------------------------------------- */ /* NAVIGATION */ /* -------------------------------------------------------- */ nav ul { margin: 0 -5px; padding: 0; list-style: none; user-select: none; } nav > ul li > a, nav > ul li > strong { display: inline-block; } nav > ul li > a, nav > ul li > details summary, nav > ul li > strong { padding: 5px 25px; } /* NAVIGATION IN HEADER */ nav ul { display: flex; flex-wrap: wrap; margin: 0; } nav ul li { position: relative; } nav ul li:first-child > a { padding-left: 0; } nav ul li:last-child > a { padding-right: 0; } /* -------------------------------------------------------- */ /* CONTENT */ /* -------------------------------------------------------- */ main blockquote { background: none; padding: 15px; margin: 1em 0; border: 2px dotted #b1b2c7; } main iframe { border: 2px dotted #b1b2c7; } main hr { border: 0; border-top: none; /* default hr is just for spacing */ margin: 1.5em 0; } /* HEADINGS: */ main h1, main h2, main h3, main h4, main h5, main h6 { color: #638CBA; line-height: 1.5; padding-bottom: 0px; } main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child { margin-top: 0; } /* -------------------------------------------------------- */ /* ACCESSIBILITY */ /* -------------------------------------------------------- */ /* please do not remove this. */ #skip-to-content-link { position: fixed; top: 0; left: 0; display: inline-block; padding: 0.375rem 0.75rem; line-height: 1.5; font-size: 1.25rem; background-color: #ffffff; color: #000000; transform: translateY(-3rem); transition: transform 0.1s ease-in; z-index: 99999999999; } #skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); }