mirror of
https://github.com/Misterio77/Foundry.git
synced 2026-08-24 10:04:09 -05:00
feat(projects/website): redesign site
Replace Water.css with a classless technical-editorial design for the about, blog, publications, CV, and post pages. Add responsive document and listing layouts, Fira Sans Condensed display typography, semantic page regions, and a persistent JavaScript-gated colorscheme picker. Assisted-by: pi (gpt-5.6-sol)
This commit is contained in:
Gabriel Fontes
@@ -1,7 +1,3 @@
|
||||
- label: Change colorscheme
|
||||
class: colorscheme
|
||||
link: /colorscheme/
|
||||
|
||||
- text: about
|
||||
link: /
|
||||
- text: blog
|
||||
|
||||
@@ -1,28 +1,36 @@
|
||||
<address>
|
||||
<p>
|
||||
Emails:
|
||||
<a href="mailto:hi@m7.rs">hi@m7.rs</a>;
|
||||
<a href="mailto:gabriel@gsfontes.com">gabriel@gsfontes.com</a>;
|
||||
<a href="mailto:eu@misterio.me">eu@misterio.me</a>
|
||||
<br />
|
||||
<span class="pgp">PGP:
|
||||
<a href="/pgp.asc">
|
||||
<span>7088 C742 1873 E0DB 97FF 17C2</span> 245C AB70 B4C2 25E9
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Social:
|
||||
<a href="https://github.com/misterio77" class="github">github</a>;
|
||||
<a rel="me" href="https://fosstodon.org/@misterio" class="mastodon">mastodon</a>;
|
||||
<a href="https://linkedin.com/in/misterio7" class="linkedin">linkedin</a>;
|
||||
<a href="https://t.me/misterio7x" class="telegram">telegram</a>;
|
||||
<a href="https://matrix.to/#/@misterio:matrix.org" class="matrix">matrix</a>;
|
||||
<a href="https://orcid.org/0009-0002-3194-9828" class="orcid">orcid</a>;
|
||||
</p>
|
||||
|
||||
<p class="copyleft">Copyleft <a href="/">Gabriel Fontes</a> (<a href="https://github.com/Misterio77/website">source code</a>)</p>
|
||||
Emails:
|
||||
<a href="mailto:hi@m7.rs">hi@m7.rs</a>;
|
||||
<a href="mailto:gabriel@gsfontes.com">gabriel@gsfontes.com</a>;
|
||||
<a href="mailto:eu@misterio.me">eu@misterio.me</a>
|
||||
<br />
|
||||
<span class="pgp">PGP:
|
||||
<a href="/pgp.asc">
|
||||
<span>7088 C742 1873 E0DB 97FF 17C2</span> 245C AB70 B4C2 25E9
|
||||
</a>
|
||||
</span>
|
||||
</address>
|
||||
|
||||
<nav aria-label="Social links">
|
||||
Social:
|
||||
<a href="https://github.com/misterio77" class="github">github</a>;
|
||||
<a rel="me" href="https://fosstodon.org/@misterio" class="mastodon">mastodon</a>;
|
||||
<a href="https://linkedin.com/in/misterio7" class="linkedin">linkedin</a>;
|
||||
<a href="https://t.me/misterio7x" class="telegram">telegram</a>;
|
||||
<a href="https://orcid.org/0009-0002-3194-9828" class="orcid">orcid</a>;
|
||||
</nav>
|
||||
|
||||
<p class="copyleft">Copyleft <a href="/">Gabriel Fontes</a> (<a href="https://github.com/Misterio77/website">source code</a>)</p>
|
||||
|
||||
<label for="scheme-select" hidden>
|
||||
<span>Colors</span>
|
||||
<select id="scheme-select" name="scheme">
|
||||
{%- for scheme in site.data.colorscheme.schemes %}
|
||||
{%- if scheme[0] != "print" %}
|
||||
<option value="{{ scheme[0] }}">{{ scheme[0] | capitalize }}</option>
|
||||
{%- endif %}
|
||||
{%- endfor %}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<p class="print-site-link"><small>Also available at <a href="{{ site.url }}{{ page.url }}">my website</a>.</small></p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="title">{ <a href="/">Gabriel Fontes</a> }</div>
|
||||
<a href="/" rel="home">{ Gabriel Fontes }</a>
|
||||
<nav>
|
||||
<ul>
|
||||
{% for item in site.data.navigation %}
|
||||
|
||||
@@ -27,7 +27,9 @@ layout: root.html
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
{{ content }}
|
||||
<section>
|
||||
{{ content }}
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,335 +1,619 @@
|
||||
@import "vendor/normalize";
|
||||
@import "vendor/water";
|
||||
|
||||
@import "highlight";
|
||||
@import "typography";
|
||||
@import "utils";
|
||||
|
||||
// =============
|
||||
// General stuff
|
||||
// =============
|
||||
|
||||
// Remove water.css emojis
|
||||
a[href^="mailto\:"]:before {
|
||||
content: "";
|
||||
}
|
||||
a[href^="tel\:"]:before {
|
||||
content: "";
|
||||
}
|
||||
a[href^="sms\:"]:before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Color roles
|
||||
:root {
|
||||
// Map water.css variables to material colors
|
||||
--background-body: color-mix(in srgb, var(--surface_container_low) 85%, var(--primary) 15%);
|
||||
--background: color-mix(in srgb, var(--surface_container_highest) 85%, var(--primary) 15%);
|
||||
--background-alt: color-mix(in srgb, var(--surface_container_high) 80%, var(--tertiary) 20%);
|
||||
--background: var(--surface_container);
|
||||
--background-alt: var(--surface_container_high);
|
||||
--selection: color-mix(in srgb, var(--primary) 30%, transparent 70%);
|
||||
--text-main: var(--on_background);
|
||||
--text-bright: var(--on_surface);
|
||||
--text-muted: var(--on_surface_variant);
|
||||
--links: var(--primary);
|
||||
--links: var(--blue);
|
||||
--focus: var(--primary);
|
||||
--border: color-mix(in srgb, var(--outline_variant) 80%, var(--primary) 20%);
|
||||
--code: var(--on_background);
|
||||
--animation-duration: 0.13s;
|
||||
--button-hover: color-mix(in srgb, var(--surface_container_highest) 70%, var(--secondary) 30%);
|
||||
--scrollbar-thumb: color-mix(in srgb, var(--outline) 30%, var(--primary) 70%);
|
||||
--scrollbar-thumb-hover: var(--primary);
|
||||
--form-placeholder: var(--outline);
|
||||
--form-text: var(--on_background);
|
||||
--variable: var(--green);
|
||||
--highlight: var(--magenta);
|
||||
--page-width: min(56.25rem, calc(100vw - 3rem));
|
||||
--content-width: 56.25rem;
|
||||
|
||||
// Additional variables
|
||||
--blockquote-color: var(--primary);
|
||||
--links-files: var(--green);
|
||||
--links-external: var(--blue);
|
||||
--links-mail: var(--magenta);
|
||||
--negative: var(--error);
|
||||
--positive: var(--green);
|
||||
--warning: var(--yellow);
|
||||
@media (max-width: 700px) {
|
||||
--page-width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
// Jump fragment indicator
|
||||
:target {
|
||||
background: var(--background-alt);
|
||||
// Base
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Make current navigation item inactive
|
||||
[aria-current="page"],
|
||||
.active {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
// Add prettier border
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: var(--background-alt) dashed 2px;
|
||||
&:focus {
|
||||
box-shadow: 2px 2px var(--background);
|
||||
border-color: var(--text-muted);
|
||||
border-style: solid;
|
||||
}
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
color: var(--text-main);
|
||||
background: var(--surface_container);
|
||||
font: inherit;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--focus);
|
||||
&.positive {
|
||||
border-color: var(--positive);
|
||||
}
|
||||
&.negative {
|
||||
border-color: var(--negative);
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
// Make fieldset look nicer and more discreet
|
||||
fieldset {
|
||||
legend {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
border: 2px dashed var(--background);
|
||||
}
|
||||
// Make form have no styling, so it is more flexible
|
||||
form {
|
||||
display: inline;
|
||||
}
|
||||
// Inline block is better
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select {
|
||||
display: inline-block;
|
||||
}
|
||||
// Change first and second layer of details
|
||||
details {
|
||||
&[open] > summary {
|
||||
font-style: italic;
|
||||
}
|
||||
background-color: var(--background);
|
||||
summary {
|
||||
background-color: var(--background-alt);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
& > ul details {
|
||||
background-color: var(--background-body);
|
||||
summary {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make figure a scroller (stolen from picocss)
|
||||
figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: 1em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
// ===================
|
||||
// More specific stuff
|
||||
// ===================
|
||||
|
||||
// Special icons and colors
|
||||
|
||||
label {
|
||||
&.colorscheme {
|
||||
@media not print {
|
||||
@include add-icon-label("palette");
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.random {
|
||||
@media not print {
|
||||
@include add-icon-button("shuffle");
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.restore {
|
||||
@media not print {
|
||||
@include add-icon-button("restore");
|
||||
}
|
||||
}
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.35rem;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
&.negative {
|
||||
border-left-color: var(--negative);
|
||||
margin: 1.5rem 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
padding: 0.15rem 0.3rem;
|
||||
background: var(--surface_container);
|
||||
color: var(--text-main);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
background: var(--surface_container_low);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
&.positive {
|
||||
border-left-color: var(--positive);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background-body);
|
||||
color: var(--text-main);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
body {
|
||||
width: var(--page-width);
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
padding: 1.75rem 0 2.6rem;
|
||||
background: var(--background-body);
|
||||
color: var(--text-main);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
padding-top: 1.1rem;
|
||||
}
|
||||
&.warning {
|
||||
border-left-color: var(--warning);
|
||||
|
||||
@media print {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
font-size: 11pt;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--selection);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
:target {
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
a {
|
||||
&.external {
|
||||
color: var(--links-external);
|
||||
@media not print {
|
||||
@include add-icon("external");
|
||||
}
|
||||
color: var(--links);
|
||||
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.14em;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&[href^="mailto"] {
|
||||
color: var(--links-mail);
|
||||
@media not print {
|
||||
@include add-icon("mail");
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 1px solid var(--primary);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
&.feed {
|
||||
color: var(--links-files);
|
||||
@media not print {
|
||||
@include add-icon("rss", $margin: 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.doi {
|
||||
color: var(--links-external);
|
||||
@media not print {
|
||||
@include add-icon("doi", $margin: 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.file {
|
||||
color: var(--links-files);
|
||||
&[href^="mailto:"]::before,
|
||||
&[href^="tel:"]::before,
|
||||
&[href^="sms:"]::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
nav a.colorscheme {
|
||||
@include set-icon("palette", $size: 1.4rem);
|
||||
h1 {
|
||||
max-width: 56.25rem;
|
||||
margin: 0 0 1rem;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.pgp {
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main > article {
|
||||
max-width: var(--content-width);
|
||||
margin: 0 auto;
|
||||
|
||||
> header {
|
||||
margin: 0;
|
||||
padding: 2.65rem 0 0.35rem;
|
||||
|
||||
p {
|
||||
margin: 0.2rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
> section {
|
||||
> h2 {
|
||||
margin: 3.4rem 0 1.3rem;
|
||||
padding-top: 1.35rem;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--primary);
|
||||
font-size: 2.3rem;
|
||||
line-height: 1.2;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 2.5rem 0 0.75rem;
|
||||
color: var(--primary);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
margin: 1.6rem 0 0.55rem;
|
||||
color: var(--text-main);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 1rem 0 1.5rem;
|
||||
padding-left: 1.35rem;
|
||||
|
||||
li + li {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
> h2,
|
||||
> h3,
|
||||
> h4 {
|
||||
@media print {
|
||||
break-after: avoid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Site header
|
||||
body > header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 0;
|
||||
padding: 0 0 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
> a[rel="home"] {
|
||||
color: var(--primary);
|
||||
font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.015em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body > header nav {
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: clamp(1.5rem, 3.5vw, 3rem);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
justify-content: flex-start;
|
||||
gap: clamp(1rem, 4vw, 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@media not print {
|
||||
@include add-icon("key", $position: right);
|
||||
}
|
||||
color: var(--links-files);
|
||||
}
|
||||
|
||||
// Expanding
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
transition: max-width .5s;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover span {
|
||||
max-width: 14em;
|
||||
text-decoration: underline;
|
||||
padding: 0.25rem 0.1rem;
|
||||
color: var(--primary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
|
||||
&[aria-current="page"] {
|
||||
color: var(--text-main);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--primary);
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 0.35em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3em;
|
||||
.copyleft {
|
||||
// Article listings
|
||||
main > article:has(> section > article) {
|
||||
position: relative;
|
||||
|
||||
> header {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
> section {
|
||||
> p:first-child {
|
||||
position: absolute;
|
||||
top: 8.9rem;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
position: static;
|
||||
margin: -1.5rem 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
> article {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 11.5625rem minmax(0, 1fr);
|
||||
gap: 0 2.5rem;
|
||||
margin: 0;
|
||||
padding: 1.75rem 0 1.9rem;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 700px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
> header {
|
||||
display: contents;
|
||||
|
||||
> p {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
color: var(--primary);
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: "Fira Sans", system-ui, sans-serif;
|
||||
font-size: clamp(1.35rem, 2vw, 1.75rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.16em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> section,
|
||||
> footer {
|
||||
grid-column: 2;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> section {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> footer {
|
||||
grid-row: 3;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
> header > p,
|
||||
h2,
|
||||
> section,
|
||||
> footer {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
> header > p {
|
||||
grid-row: 1;
|
||||
|
||||
small {
|
||||
display: inline;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> section {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
> footer {
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer and theme picker
|
||||
body > footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.4rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
> address {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
> nav {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> .copyleft {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
p.print-site-link {
|
||||
|
||||
> address,
|
||||
> nav,
|
||||
> .copyleft,
|
||||
> label {
|
||||
@media (max-width: 700px) {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
> address {
|
||||
@media (max-width: 700px) {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
display: flex;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
min-width: 7.5rem;
|
||||
margin: 0;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
color: var(--text-main);
|
||||
background: var(--surface_container);
|
||||
font: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .print-site-link {
|
||||
display: none;
|
||||
|
||||
@media print {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 2em;
|
||||
@media print {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
& > nav:last-child {
|
||||
// Add some border when header has a nav
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
body {
|
||||
// Increase width a bit
|
||||
max-width: 55em;
|
||||
@media(min-width: 360px) {
|
||||
padding: 1em;
|
||||
}
|
||||
@media(min-width: 480px) {
|
||||
padding: 1.5em;
|
||||
}
|
||||
@media(min-width: 720px) {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
margin: 1.2em auto;
|
||||
@media print {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
// Navigation menu
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
margin-top: 1em;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
font-size: 1.1em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
article header {
|
||||
// Remove top margin from post info
|
||||
margin-bottom: 0;
|
||||
h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// If it's main article
|
||||
body > main > article > header {
|
||||
// Decrease margin between p's
|
||||
p {
|
||||
margin-block-start: 0.2em;
|
||||
margin-block-end: 0.4em;
|
||||
}
|
||||
// Add some padding after it
|
||||
padding-bottom: 0.5em;
|
||||
@media print {
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep colors if printing with colors
|
||||
// Printing
|
||||
@media print {
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,99 +1,48 @@
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('/assets/FiraSans/Regular.woff2') format('woff2');
|
||||
@mixin font-face($family, $file, $style: normal, $weight: 400) {
|
||||
@font-face {
|
||||
font-family: $family;
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
src: url("/assets/#{$file}.woff2") format("woff2");
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
src: url('/assets/FiraSans/Italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: url('/assets/FiraSans/Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
src: url('/assets/FiraSans/BoldItalic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('/assets/FiraCode/Regular.woff2') format('woff2');
|
||||
}
|
||||
@include font-face("Fira Sans", "FiraSans/Regular");
|
||||
@include font-face("Fira Sans", "FiraSans/Italic", italic);
|
||||
@include font-face("Fira Sans", "FiraSans/Bold", normal, 700);
|
||||
@include font-face("Fira Sans", "FiraSans/BoldItalic", italic, 700);
|
||||
@include font-face("Fira Code", "FiraCode/Regular");
|
||||
@include font-face("Fira Sans Condensed", "FiraSansCondensed/SemiBold", normal, 600);
|
||||
|
||||
body {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-family: "Fira Sans", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
// Code font
|
||||
code {
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-size: .90em;
|
||||
}
|
||||
|
||||
// Site logo
|
||||
.title {
|
||||
// Name itself
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
// Decorations around
|
||||
color: var(--text-muted);
|
||||
&:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
font-size: 2.2em;
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif;
|
||||
font-weight: 600;
|
||||
@media(max-width: 325px) {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-style: italic;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: clamp(2.65rem, 4.25vw, 3.8rem);
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.08;
|
||||
|
||||
&::before {
|
||||
color: var(--primary);
|
||||
content: "> ";
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.9em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.1em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
&::after {
|
||||
color: var(--text-muted);
|
||||
content: "_";
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -2,79 +2,88 @@
|
||||
layout: null
|
||||
---
|
||||
|
||||
function setCookie(name,value,days) {
|
||||
var schemes = {{ site.data.colorscheme.schemes | jsonify }};
|
||||
var schemeNames = Object.keys(schemes).filter(function (name) {
|
||||
return name !== "print";
|
||||
});
|
||||
var chosenSchemeStyle = null;
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
if (days < 0) {
|
||||
expires = "; Expires=Thu, 01 Jan 1970 00:00:01 GMT"
|
||||
} else {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days*24*60*60*1000));
|
||||
expires = "; Expires=" + date.toUTCString();
|
||||
}
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
expires = "; Expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; Path=/";
|
||||
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; Path=/; SameSite=Lax";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
var prefix = name + "=";
|
||||
var cookies = document.cookie.split(";");
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim();
|
||||
if (cookie.indexOf(prefix) === 0) {
|
||||
return decodeURIComponent(cookie.substring(prefix.length));
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function eraseCookie(name) {
|
||||
setCookie(name, "", -1);
|
||||
document.cookie = name + "=; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/; SameSite=Lax";
|
||||
}
|
||||
|
||||
var schemes = {{ site.data.colorscheme.schemes | jsonify }};
|
||||
var chosen_scheme_style = null;
|
||||
|
||||
// Set a given scheme
|
||||
function setTheme(scheme) {
|
||||
function setTheme(scheme, persist) {
|
||||
var colors = schemes[scheme];
|
||||
if (!colors) return;
|
||||
if (!colors || scheme === "print") return;
|
||||
|
||||
if (!chosen_scheme_style) {
|
||||
chosen_scheme_style = document.createElement("style");
|
||||
chosen_scheme_style.id = "theme-css";
|
||||
document.head.appendChild(chosen_scheme_style);
|
||||
if (!chosenSchemeStyle) {
|
||||
chosenSchemeStyle = document.createElement("style");
|
||||
chosenSchemeStyle.id = "theme-css";
|
||||
document.head.appendChild(chosenSchemeStyle);
|
||||
}
|
||||
|
||||
var css = ":root {\n";
|
||||
for (var key in colors) {
|
||||
if (colors.hasOwnProperty(key)) {
|
||||
if (Object.prototype.hasOwnProperty.call(colors, key)) {
|
||||
css += " --" + key + ": " + colors[key] + ";\n";
|
||||
}
|
||||
}
|
||||
css += "}";
|
||||
chosen_scheme_style.textContent = css;
|
||||
setCookie("fontes_theme", scheme);
|
||||
chosenSchemeStyle.textContent = css;
|
||||
|
||||
var picker = document.getElementById("scheme-select");
|
||||
if (picker) picker.value = scheme;
|
||||
if (persist !== false) setCookie("fontes_theme", scheme, 365);
|
||||
}
|
||||
|
||||
// Get currently applied scheme
|
||||
function getTheme() {
|
||||
var theme = getCookie("fontes_theme");
|
||||
|
||||
if (theme != "null") {
|
||||
return theme;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
return schemeNames.indexOf(theme) >= 0 ? theme : null;
|
||||
}
|
||||
|
||||
// Reset scheme to default
|
||||
function resetTheme() {
|
||||
if (chosen_scheme_style) {
|
||||
chosen_scheme_style.remove();
|
||||
chosen_scheme_style = null;
|
||||
if (chosenSchemeStyle) {
|
||||
chosenSchemeStyle.remove();
|
||||
chosenSchemeStyle = null;
|
||||
}
|
||||
eraseCookie("fontes_theme");
|
||||
|
||||
var picker = document.getElementById("scheme-select");
|
||||
if (picker) picker.value = "{{ site.default_scheme }}";
|
||||
}
|
||||
|
||||
// Get stored scheme from cookies and reapply it
|
||||
var stored = getTheme();
|
||||
if (stored) {
|
||||
setTheme(stored);
|
||||
}
|
||||
var storedTheme = getTheme();
|
||||
if (storedTheme) setTheme(storedTheme, false);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var picker = document.getElementById("scheme-select");
|
||||
if (!picker) return;
|
||||
|
||||
picker.parentElement.hidden = false;
|
||||
picker.value = storedTheme || "{{ site.default_scheme }}";
|
||||
picker.addEventListener("change", function () {
|
||||
setTheme(picker.value);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,13 +9,16 @@ permalink: /blog/
|
||||
{% for post in site.posts %}
|
||||
<article>
|
||||
<header>
|
||||
<h2><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.language }})</h2>
|
||||
<p>
|
||||
<time datetime="{{ post.date | date_to_xmlschema }}">
|
||||
{{ post.date | date_to_long_string: "ordinal" }}
|
||||
</time>
|
||||
<small>({{ post.language }})</small>
|
||||
</p>
|
||||
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
</header>
|
||||
<p>
|
||||
<time datetime="{{ post.date | date_to_xmlschema }}">
|
||||
{{ post.date | date_to_long_string: "ordinal" }}
|
||||
</time>
|
||||
</p>
|
||||
<p>{{ post.excerpt | strip_html }}</p>
|
||||
<section>
|
||||
<p>{{ post.excerpt | strip_html }}</p>
|
||||
</section>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
@@ -7,13 +7,18 @@ permalink: /publications/
|
||||
{% for pub in site.data.publications %}
|
||||
<article id="{{ pub.slug }}">
|
||||
<header>
|
||||
<h2><a class="file" href="{{ pub.file }}">{{ pub.title }}</a></h2><a class="doi" href="https://doi.org/{{ pub.doi }}">{{ pub.doi }}</a>
|
||||
<p>
|
||||
<time datetime="{{ pub.date | date_to_xmlschema }}">
|
||||
{{ pub.date | date_to_long_string: "ordinal" }}
|
||||
</time>
|
||||
</p>
|
||||
<h2><a class="file" href="{{ pub.file }}">{{ pub.title }}</a></h2>
|
||||
</header>
|
||||
{% if pub.venue %}<p>{{ pub.venue }}</p>{% endif %}
|
||||
<p>
|
||||
<time datetime="{{ pub.date | date_to_xmlschema }}">
|
||||
{{ pub.date | date_to_long_string: "ordinal" }}
|
||||
</time>
|
||||
</p>
|
||||
<section>
|
||||
{% if pub.venue %}<p>{{ pub.venue }}</p>{% endif %}
|
||||
</section>
|
||||
<footer>
|
||||
<p><a class="doi" href="https://doi.org/{{ pub.doi }}">{{ pub.doi }}</a></p>
|
||||
</footer>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user