168 lines
2.7 KiB
CSS
168 lines
2.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
|
|
|
|
*
|
|
{
|
|
font-family: "Roboto Light", sans-serif;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*
|
|
------------------------------------------------------------------------------------------
|
|
Desktop
|
|
------------------------------------------------------------------------------------------
|
|
*/
|
|
/*basic li a and button setup*/
|
|
li, a, button
|
|
{
|
|
font-weight: 500;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*title bar*/
|
|
header
|
|
{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30px 10%;
|
|
background-color: #41423f;
|
|
}
|
|
|
|
/*IO Game Studios button (only navigation)*/
|
|
header button
|
|
{
|
|
padding: 20px;
|
|
border-radius: 50px;
|
|
border-style: none;
|
|
background-color: #88b3ae;
|
|
cursor: pointer;
|
|
}
|
|
|
|
header button:hover
|
|
{
|
|
background-color: rgba(136, 179, 174, 0.5);
|
|
}
|
|
|
|
/*List Element Style (only navigation)*/
|
|
nav li
|
|
{
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
nav li:hover
|
|
{
|
|
color: #88b3ae;
|
|
}
|
|
|
|
/*Dropdown*/
|
|
nav ul li div
|
|
{
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #41423f;
|
|
border-radius: 50px;
|
|
padding-top: 70px;
|
|
margin-left: -40px;
|
|
}
|
|
|
|
.menuDropdownDesktop:hover div
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
nav ul li div ul
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav ul li div ul li
|
|
{
|
|
padding: 0 0 20px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
nav ul li div ul li button
|
|
{
|
|
padding: 10px;
|
|
}
|
|
|
|
/*Mobile Excluded*/
|
|
nav > button
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
menu
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
------------------------------------------------------------------------------------------
|
|
Mobile
|
|
------------------------------------------------------------------------------------------
|
|
*/
|
|
|
|
@media (max-width: 18cm)
|
|
{
|
|
|
|
/*Hide the default navigation*/
|
|
nav ul
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/*Show the Mobile menu button*/
|
|
nav button
|
|
{
|
|
display: blocK;
|
|
margin-right: -20px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/*Style the Menu Icon*/
|
|
nav svg
|
|
{
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
|
|
menu div
|
|
{
|
|
float: right;
|
|
background-color: #41423f;
|
|
height: 100vh;
|
|
}
|
|
|
|
menu div ul
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style: none;
|
|
}
|
|
|
|
menu div ul li
|
|
{
|
|
text-align: center;
|
|
padding: 20px 30px 20px 30px;
|
|
margin: 5px 30px;
|
|
cursor: pointer;
|
|
border-radius: 50px;
|
|
background-color: rgba(136, 179, 174, 1);
|
|
}
|
|
|
|
menu div ul li:hover
|
|
{
|
|
background-color: rgba(136, 179, 174, 0.5);
|
|
}
|
|
|
|
} |