mirror of
https://github.com/xtzws/isaac.run.git
synced 2025-12-16 21:10:32 +01:00
isaac
93ad69ab5f
Replaced corporate typeface Satoshi with TeX Gyre Pagella because while Satoshi was absolutely beautiful, it was cumbersome to use. Customizing it for the web is really easy with font-feature-settings but getting it to look the same in Word is impossible without breaking the terms of the license. Pagella is under a more permissive license so I can develop better cohesiveness going forward.
163 lines
3.4 KiB
CSS
163 lines
3.4 KiB
CSS
@font-face {
|
|
font-family: "TeX Gyre Pagella";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url("https://cdn.isaac.run/brand/carattere/TeXGyrePagella-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "TeX Gyre Pagella";
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url("https://cdn.isaac.run/brand/carattere/TeXGyrePagella-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "TeX Gyre Pagella";
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
src: url("https://cdn.isaac.run/brand/carattere/TeXGyrePagella-Italic.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "TeX Gyre Pagella";
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
src: url("https://cdn.isaac.run/brand/carattere/TeXGyrePagella-BoldItalic.woff2") format("woff2");
|
|
}
|
|
/* Fonts available under the GUST Font License <https://www.gust.org.pl/projects/e-foundry/licenses/GUST-FONT-LICENSE.txt/view>
|
|
For the purposes of the LaTeX Project Public License, these fonts are a "Compiled Work" based on the original Work of the
|
|
TeX Gyre maintainers and contributors. The woff2 files have been built from the source Spline Font Database files. */
|
|
|
|
:root {
|
|
--isaac-blue: #0E4385;
|
|
--logy-lightblue: rgb(179, 236, 252);
|
|
--isaac-red: #C52947;
|
|
--minimal-background: antiqueWhite;
|
|
--lec-brown: rgb(81, 52, 36);
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--logy-lightblue);
|
|
}
|
|
|
|
html {
|
|
font-family: "TeX Gyre Pagella", "Palatino", "Times New Roman", serif;
|
|
font-size: 1.05em;
|
|
text-wrap: pretty;
|
|
background-color: var(--minimal-background);
|
|
color: var(--lec-brown);
|
|
}
|
|
|
|
body {
|
|
max-width: 750px;
|
|
margin-inline: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
h1 {
|
|
text-decoration-line: underline;
|
|
text-decoration-color: var(--isaac-blue);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
h2 {
|
|
text-decoration-line: underline;
|
|
text-decoration-color: var(--isaac-red);
|
|
text-decoration-style: solid;
|
|
}
|
|
|
|
h3 {
|
|
text-decoration-line: underline;
|
|
text-decoration-color: var(--isaac-blue);
|
|
text-decoration-style: double;
|
|
}
|
|
|
|
table {
|
|
border: 1px solid var(--lec-brown);
|
|
margin-inline: auto;
|
|
border-collapse: separate;
|
|
border-radius: 10px;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
td, th {
|
|
border-bottom: 1px solid var(--lec-brown);
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
|
|
td:first-child {font-feature-settings: "tnum" 1;}
|
|
tr:last-child th {border-bottom: 0px;}
|
|
tr:hover {background-color: var(--logy-lightblue);}
|
|
|
|
.btm-row td {
|
|
/* https://stackoverflow.com/a/24268998 "The sorcery of CSS" */
|
|
border-bottom: none;
|
|
}
|
|
|
|
.btm-left {border-radius: 0 0 0 9px;}
|
|
.btm-right {border-radius: 0 0 9px 0;}
|
|
.top-left {border-radius: 9px 0 0 0;}
|
|
.top-right {border-radius: 0 9px 0 0;}
|
|
.table {overflow-x: auto;}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
margin-block: 1lh;
|
|
}
|
|
|
|
a {
|
|
color: var(--isaac-red);
|
|
}
|
|
|
|
li {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.clref {text-align: center;}
|
|
.clfooter {margin-top: 1lh;}
|
|
.climg {
|
|
max-width: 31px;
|
|
display: block;
|
|
margin-inline: auto;
|
|
margin-top: 1em;
|
|
margin-block-end: -1lh;
|
|
}
|
|
.clmain {
|
|
margin-block: 1lh;
|
|
}
|
|
|
|
caption {
|
|
margin-top: .5lh;
|
|
margin-left: 5px;
|
|
caption-side: bottom;
|
|
text-align: left;
|
|
}
|
|
|
|
mark {
|
|
background-color: var(--logy-lightblue);
|
|
color: var(--lec-brown);
|
|
font-style: italic;
|
|
}
|
|
|
|
hr {
|
|
border: 1px solid var(--lec-brown);
|
|
}
|
|
|
|
.badges img {
|
|
image-rendering: pixelated;
|
|
width: 88px;
|
|
height: 31px;
|
|
text-decoration: none;
|
|
}
|
|
.badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
}
|