pages/styles/styles.css

97 lines
No EOL
1.5 KiB
CSS

:root {
background-color: black;
color: white;
font-family: IBMWeb, monospace;
font-size: 1.0em;
/* Variables */
--margin-inline-text: 0px;
--margin-inline: 16px;
--margin-block: 6px;
/* Used for padding and gap */
--spacing: 6px;
--spacing-medium: calc(var(--spacing) * 2);
--spacing-large: calc(var(--spacing) * 4);
--foreground: hsl(0, 0%, 65%);
}
body {
margin: 0px;
padding: 0px;
}
body div.wrapper {
padding: var(--spacing-medium);
margin: auto;
max-width: 702px;
box-shadow: 0px 0px 48px white;
}
@font-face {
font-family: IBMWeb;
src: url('/fonts/ibm9x16.woff');
}
/* Margin Normalisation */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-inline: var(--margin-inline-text);
margin-block: var(--margin-block);
}
/* Font normalization */
button,
code {
font-size: inherit;
font-family: inherit;
}
p,
ul,
ol,
li,
summary {
color: var(--foreground);
}
a {
color: #287bff;
}
a:hover,
a:hover:visited {
color: white;
background-color: #287bff;
}
/* make sure the 88x31 buttons don't have a background color applied, lol */
.webButton:hover {
background-color: transparent;
}
/* actually did not look that good */
/* a:visited {
color: #e600ff;
} */
button {
border: 2px solid white;
border-radius: 2px;
background-color: inherit;
color: inherit;
font-family: IBMWeb, monospace;
}
code p {
outline: 1px solid var(--foreground);
width: fit-content;
padding: var(--spacing-medium);
}
summary {
cursor: pointer;
}