diff options
| author | Fudgerboy <91767657+Fudgerboy@users.noreply.github.com> | 2024-07-05 10:47:46 +0000 |
|---|---|---|
| committer | Fudgerboy <91767657+Fudgerboy@users.noreply.github.com> | 2024-07-05 10:47:46 +0000 |
| commit | 0721636608e7f299a80a8e86500bbec3771031b1 (patch) | |
| tree | d7fdc85aae65d3864540dcd682fc58afaaba5c2c /wk8/pset/homepage | |
| parent | 5a95471bb37c7e0cfd966c63bcede0d666facfb9 (diff) | |
Fri, Jul 5, 2024, 3:47 AM -07:00
Diffstat (limited to 'wk8/pset/homepage')
| -rw-r--r-- | wk8/pset/homepage/art.html | 3 | ||||
| -rw-r--r-- | wk8/pset/homepage/cats.html | 3 | ||||
| -rw-r--r-- | wk8/pset/homepage/factorio.html | 3 | ||||
| -rw-r--r-- | wk8/pset/homepage/index.html | 3 | ||||
| -rw-r--r-- | wk8/pset/homepage/styles.css | 100 |
5 files changed, 68 insertions, 44 deletions
diff --git a/wk8/pset/homepage/art.html b/wk8/pset/homepage/art.html index 087466d..dd55a06 100644 --- a/wk8/pset/homepage/art.html +++ b/wk8/pset/homepage/art.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -15,6 +16,7 @@ }); </script> </head> + <body> <div id="container"> <div class="topbar"></div> @@ -58,4 +60,5 @@ </div> </div> </body> + </html> diff --git a/wk8/pset/homepage/cats.html b/wk8/pset/homepage/cats.html index e3eb666..bfb6dde 100644 --- a/wk8/pset/homepage/cats.html +++ b/wk8/pset/homepage/cats.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -15,6 +16,7 @@ }); </script> </head> + <body> <div id="container"> <div class="topbar"></div> @@ -57,4 +59,5 @@ </div> </div> </body> + </html> diff --git a/wk8/pset/homepage/factorio.html b/wk8/pset/homepage/factorio.html index 0de0715..5b0f858 100644 --- a/wk8/pset/homepage/factorio.html +++ b/wk8/pset/homepage/factorio.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -15,6 +16,7 @@ }); </script> </head> + <body> <div id="container"> <div class="topbar"></div> @@ -57,4 +59,5 @@ </div> </div> </body> + </html> diff --git a/wk8/pset/homepage/index.html b/wk8/pset/homepage/index.html index e37a2ff..fd9cdc6 100644 --- a/wk8/pset/homepage/index.html +++ b/wk8/pset/homepage/index.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -15,6 +16,7 @@ }); </script> </head> + <body> <div id="container"> <div class="topbar"></div> @@ -59,4 +61,5 @@ </div> </div> </body> + </html> diff --git a/wk8/pset/homepage/styles.css b/wk8/pset/homepage/styles.css index 7301f44..0dfe4ab 100644 --- a/wk8/pset/homepage/styles.css +++ b/wk8/pset/homepage/styles.css @@ -14,8 +14,8 @@ --banner: url("/miau.gif"); --titleBars: #551251; --text-color: white; - --border:1px solid black; - --arrows:url('/arrow.png'); + --border: 1px solid black; + --arrows: url('/arrow.png'); } .centered { @@ -34,12 +34,14 @@ body { color: var(--text-color); background-attachment: fixed; } + .topbar { background-image: var(--banner); - height:150px; - margin-bottom:var(--content-spacing); - border:var(--border); + height: 150px; + margin-bottom: var(--content-spacing); + border: var(--border); } + #container, .topbar img { max-width: 850px; @@ -58,16 +60,17 @@ body { aside { width: 30%; - margin-left:var(--content-spacing); - border-left:var(--border); + margin-left: var(--content-spacing); + border-left: var(--border); background-color: var(--background); } -.title, .sidebar-title { - background-image:var(--titleBars); - font-weight:bold; - border:var(--border); - font-size:20px; +.title, +.sidebar-title { + background-image: var(--titleBars); + font-weight: bold; + border: var(--border); + font-size: 20px; } main { @@ -76,63 +79,72 @@ main { } nav { - position:sticky; - top:20px; + position: sticky; + top: 20px; } + nav ul { - list-style-image:var(--arrows); - margin-left:0; - padding-left:30px; + list-style-image: var(--arrows); + margin-left: 0; + padding-left: 30px; } + nav ul li a { - color:var(--accent-1); + color: var(--accent-1); } .content { - padding:25px; + padding: 25px; } footer { - border:var(--border); + border: var(--border); color: red; - font-weight:bold; - height:25px; - margin-top:var(--content-spacing); - background-color:var(--titleBars); - text-align:center; + font-weight: bold; + height: 25px; + margin-top: var(--content-spacing); + background-color: var(--titleBars); + text-align: center; } @media only screen and (max-width: 640px) { nav ul { - list-style-image:none; - list-style-type:none; + list-style-image: none; + list-style-type: none; } + #flex { - flex-wrap:wrap; + flex-wrap: wrap; } + main { - width:100%; - order:2; + width: 100%; + order: 2; } + aside { - display:block; - width:100%; - order:1; - margin-left:0; + display: block; + width: 100%; + order: 1; + margin-left: 0; } + nav ul { - display:flex; - flex-wrap:wrap; + display: flex; + flex-wrap: wrap; } + nav ul li { - padding-right:10px; - } - nav ul > ul { - display:none; + padding-right: 10px; } + + nav ul>ul { + display: none; } - @media only screen and (max-height: 640px) { - nav ul > ul { - display:none; - } +} + +@media only screen and (max-height: 640px) { + nav ul>ul { + display: none; } +} |