127 lines
2.2 KiB
CSS
127 lines
2.2 KiB
CSS
:root {
|
|
font-family: "nasin-nanpa", "TX-02";
|
|
--text-color: #ebf6ff;
|
|
--text-color-alt: #c1c7db;
|
|
--background-color: #010206;
|
|
--background-color-alt: #1e1b30;
|
|
--link-color: #2a97b1;
|
|
--line-height: 1.5rem;
|
|
--page-width: 100ch;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--text-color: #1e1b30;
|
|
--text-color-alt: #010206;
|
|
--background-color: #ebf6ff;
|
|
--background-color-alt: #c1c7db;
|
|
}
|
|
}
|
|
|
|
a:link,
|
|
a:visited {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
body {
|
|
max-width: calc(min(var(--page-width), round(down, 100%, 1ch)));
|
|
}
|
|
|
|
*+* {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.alert {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alert-todo td {
|
|
background-color: var(--base0b);
|
|
color: var(--background-color);
|
|
border-color: var(--base0b);
|
|
}
|
|
|
|
.alert-tip td {
|
|
background-color: var(--base0c);
|
|
border-color: var(--base0c);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
.alert-note td {
|
|
background-color: var(--base0c);
|
|
border-color: var(--base0c);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
.alert-quote td {
|
|
background-color: var(--base01);
|
|
border-color: var(--base01);
|
|
}
|
|
|
|
p mjx-container {
|
|
background-color: rgba(from var(--background-color-alt) r g b / 0.75);
|
|
}
|
|
|
|
.about-me {
|
|
width: min-content;
|
|
margin: auto;
|
|
|
|
td {
|
|
text-align: center;
|
|
line-height: 1rem;
|
|
|
|
h1 {
|
|
line-height: 1rem;
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.socials {
|
|
--social-icon-size: 4ch;
|
|
--social-name-size: 12ch;
|
|
|
|
th {
|
|
text-align: center;
|
|
height: 1em;
|
|
}
|
|
|
|
.social-icon {
|
|
width: var(--social-icon-size);
|
|
min-width: var(--social-icon-size);
|
|
}
|
|
|
|
.social-name {
|
|
width: var(--social-name-size);
|
|
min-width: var(--social-name-size);
|
|
max-width: var(--social-name-size);
|
|
}
|
|
|
|
.social-link {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: calc(var(--page-width) / 2 - var(--social-icon-size) - var(--social-name-size) - 2ch);
|
|
max-width: calc(var(--page-width) / 2 - var(--social-icon-size) - var(--social-name-size) - 2ch);
|
|
}
|
|
}
|
|
|
|
.social-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
}
|
|
|
|
.socials-text {
|
|
text-align: center;
|
|
display: flex;
|
|
}
|
|
|
|
.btn-88x31 {
|
|
border: none !important;
|
|
|
|
img {
|
|
width: 88px;
|
|
height: 31px;
|
|
}
|
|
}
|