From e7cd2712b1fd6294662840c584b332641b198b9d Mon Sep 17 00:00:00 2001 From: Marty Sluijtman Date: Wed, 5 Jul 2023 13:47:16 +0200 Subject: [PATCH] Some basic CSS --- brown-wall.html | 14 ++++++++------ main.js | 5 +++-- style.css | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 style.css diff --git a/brown-wall.html b/brown-wall.html index 77c352a..706772c 100644 --- a/brown-wall.html +++ b/brown-wall.html @@ -3,15 +3,17 @@ - + Brown Wall -

Brown Wall

-

A wall which has been hit with a considerable amount of faeces.

- - +
+

Brown Wall

+

A wall which has been hit with a considerable amount of faeces.

+ + +
diff --git a/main.js b/main.js index f6a3f28..ee522d9 100644 --- a/main.js +++ b/main.js @@ -13,7 +13,7 @@ const genres = [ "FPP" ] //const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ]; -const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Action Adventrue", "Lobotomy aka Idlegame" ] } ]; +const menus = [{ "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Genre", "items": ["FFP", "Action Adventrue", "Lobotomy aka Idlegame"] }]; const menuContainer = document.getElementById('menu-container'); @@ -23,7 +23,8 @@ menus.forEach( menu =>{ const dropdownSelect = document.createElement('select'); dropdownMenu.id = menu.name.toLowerCase(); - menuContainer.append(menuTitle) + dropdownMenu.className = "dropdown-menu"; + dropdownMenu.appendChild(menuTitle) menuContainer.appendChild(dropdownMenu) dropdownMenu.appendChild(dropdownSelect) diff --git a/style.css b/style.css new file mode 100644 index 0000000..fac468c --- /dev/null +++ b/style.css @@ -0,0 +1,41 @@ +body{ + background: linear-gradient(cyan,teal); + background-position: center; + background-attachment: fixed; + background-size: cover; +} +main{ + padding:10pt; + margin:50pt; +} + +@media (min-width: 1000px) { + .menu-container{ + grid-template-columns: 33% 33% 33%; + } +} + +@media (max-width: 999px) { + .menu-container{ + grid-template-columns: 50% 50%; + } +} + +.menu-container{ + transition:all 200ms; + margin:auto; + display:grid; +} + +.dropdown-menu{ + border: black 2pt solid; + border-radius: 1em; + padding:3em; + margin:1em; + transition: all 200ms; + background-color: #ddd; + filter:drop-shadow(7px 5px 4px black); +} +.dropdown-menu:hover{ + background-color: white; +}