forked from engineering/Staff-Dashboard
61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
|
/* Global Reset */
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #222;
|
||
|
|
color: #fff;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Bento-box grid layout */
|
||
|
|
.bento-box {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Define columns */
|
||
|
|
grid-auto-rows: 200px; /* Set fixed height for squares */
|
||
|
|
grid-gap: 10px; /* Maintain gap between boxes */
|
||
|
|
width: 100vw; /* Take up full width of the viewport */
|
||
|
|
height: 100vh; /* Take up full height of the viewport */
|
||
|
|
padding: 10px; /* Slight padding around the grid */
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Bento Items */
|
||
|
|
.bento-item {
|
||
|
|
background-color: #333; /* Same background color for all */
|
||
|
|
outline: 3px solid rgba(255, 255, 255, 0.6); /* 60% opacity grey outline */
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column; /* Stack logo and text vertically */
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%; /* Match the height of grid cells */
|
||
|
|
width: 100%; /* Full width to ensure square shape */
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Logo styles */
|
||
|
|
.logo {
|
||
|
|
max-width: 70%; /* Adjust the size of the logo */
|
||
|
|
max-height: 70%; /* Ensure logos fit within the box */
|
||
|
|
margin-bottom: 10px; /* Space between logo and text */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove the corner radius */
|
||
|
|
.bento-item.large {
|
||
|
|
grid-column: span 2; /* Span 2 columns if desired */
|
||
|
|
grid-row: span 2; /* Span 2 rows if desired */
|
||
|
|
}
|
||
|
|
|
||
|
|
.bento-item:hover {
|
||
|
|
background-color: #444; /* Darken on hover */
|
||
|
|
|
||
|
|
}
|