Files
alfieking.dev/static/css/terminal.css
Alfie King 0d367e43a6
All checks were successful
Deploy website / deploy (push) Successful in 26s
audio "fix"
2026-03-04 21:54:21 +00:00

131 lines
2.7 KiB
CSS

@font-face {
font-family:"Ultrafont2";
src:url("/static/content/fonts/ultrakill-font-2.woff2") format("woff2");
font-weight:normal;
font-style:normal;
}
#terminal {
aspect-ratio: 4/3;
padding: 0;
font-family: "Ultrafont2";
font-size: 1.2rem;
color: #ffffff;
border: none;
}
.smileos-header {
height: 9%;
border-image: url(/static/content/smileos/SmileOS_2_Header.webp) 3 fill / 9px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
font-size: 1.4rem;
font-weight: 900;
padding-left: 7px;
padding-right: 7px;
image-rendering: pixelated;
}
.smileos-header img {
height: 100%;
object-fit: contain;
}
#terminal-container {
border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
height: 100%;
display: grid;
grid-template-areas:
"logo window"
"buttons window";
grid-template-columns: 40% 1fr;
grid-template-rows: 25% 1fr;
padding: 15px;
box-sizing: border-box;
image-rendering: pixelated;
}
#smileos-logo {
width: 250px;
grid-area: logo;
margin: auto;
image-rendering: pixelated;
}
#terminal-window {
height: 100%;
grid-area: window;
}
#window-container {
border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
height: 91%;
padding: 35px;
box-sizing: border-box;
image-rendering: pixelated;
}
#window-content {
border-image: url(/static/content/smileos/SmileOS_2_inset_panel.webp) 1 fill / 3px;
height: 100%;
box-sizing: border-box;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
image-rendering: pixelated;
}
.red {
color: #ff4343;
}
#terminal-buttons {
grid-area: buttons;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.terminal-button {
border-image: url(/static/content/smileos/SmileOS_2_Button_transparent.png) 2 / 9px;
background: url(/static/content/smileos/SmileOS_2_Button_Background.png);
background-repeat: repeat-x;
background-size: 100% 100%;
border-radius: 15px;
height: 75px;
width: 270px;
image-rendering: pixelated;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-family: "Ultrafont2";
font-size: 1.2rem;
color: #ffffff;
}
.terminal-button:hover {
filter: contrast(110%);
}
.terminal-button:active {
filter: contrast(125%);
}
#smileos-window-content img {
width: 100%;
}
#smileos-restart-music {
color: #FF4343;
cursor: pointer;
}
#smileos-restart-music:hover {
font-weight: 700;
}