Egg/brown-wall
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Some basic CSS

Browse source
This commit is contained in:
Nox Sluijtman 2023-07-05 13:47:16 +02:00
parent 89bffd0f62
commit e7cd2712b1
3 changed files with 52 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
brown-wall.html
View file

@ -3,15 +3,17 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="vieport" content="width=device-width, initial-scale=1"/> <meta name="vieport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="/style.css"/> <link rel="stylesheet" type="text/css" href="style.css"/>
<title>Brown Wall</title> <title>Brown Wall</title>
</head> </head>
<body> <body>
<main>
<h1>Brown Wall</h1> <h1>Brown Wall</h1>
<h3>A wall which has been hit with a considerable amount of faeces.</h3> <h3>A wall which has been hit with a considerable amount of faeces.</h3>
<noscript>Enable JS to use this application.</noscript> <noscript>Enable JS to use this application.</noscript>
<div id="menu-container" class="menu-container"> <div id="menu-container" class="menu-container">
</div> </div>
</main>
</body> </body>
<script src="main.js"></script> <script src="main.js"></script>
</html> </html>

5
main.js
View file

@ -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", "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'); const menuContainer = document.getElementById('menu-container');
@ -23,7 +23,8 @@ menus.forEach( menu =>{
const dropdownSelect = document.createElement('select'); const dropdownSelect = document.createElement('select');
dropdownMenu.id = menu.name.toLowerCase(); dropdownMenu.id = menu.name.toLowerCase();
menuContainer.append(menuTitle) dropdownMenu.className = "dropdown-menu";
dropdownMenu.appendChild(menuTitle)
menuContainer.appendChild(dropdownMenu) menuContainer.appendChild(dropdownMenu)
dropdownMenu.appendChild(dropdownSelect) dropdownMenu.appendChild(dropdownSelect)

41
style.css Normal file
View file

@ -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;
}