133 lines
2.6 KiB
CSS
Executable File
133 lines
2.6 KiB
CSS
Executable File
/* Import all font weights and styles */
|
|
@font-face {
|
|
font-family: 'SauceCodePro NF';
|
|
src: url('fonts/SauceCodeProNerdFont-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'SauceCodePro NF';
|
|
src: url('fonts/SauceCodeProNerdFont-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'SauceCodePro NF';
|
|
src: url('fonts/SauceCodeProNerdFont-Italic.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: 'SauceCodePro NF';
|
|
src: url('fonts/SauceCodeProNerdFont-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'SauceCodePro NF';
|
|
src: url('fonts/SauceCodeProNerdFont-BoldItalic.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Base reset and layout */
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: 'SauceCodePro NF', monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #323232;
|
|
user-select: none;
|
|
}
|
|
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: url('images/bg.png') center center / cover no-repeat;
|
|
height: 100vh;
|
|
width: 100%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo-header {
|
|
font-weight: 400;
|
|
font-size: 48px;
|
|
color: white;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Grid */
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 120px);
|
|
grid-template-rows: repeat(3, 120px);
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-container {
|
|
grid-template-columns: repeat(3, 90px);
|
|
grid-template-rows: repeat(4, 90px);
|
|
gap: 20px;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
.grid-item {
|
|
background: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 12px;
|
|
font-size: 38px;
|
|
color: #333;
|
|
transition: transform 0.2s, background 0.2s;
|
|
}
|
|
|
|
.grid-item:hover {
|
|
transform: scale(0.9);
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.grid-item a.grid-link {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-size: 38px;
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
.grid-item:hover a.grid-link {
|
|
color: #000;
|
|
}
|
|
|
|
.grid-item:empty {
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 18px;
|
|
font-size: 14px;
|
|
color: #ddd;
|
|
font-weight: 300;
|
|
font-family: 'SauceCodePro NF', monospace;
|
|
z-index: 1;
|
|
} |