Our current theme might be written as

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{{title}}
{{base}}
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">
<link rel="stylesheet" type="text/css" href="{{root}}_observablehq/style.css">
{{preloads}}
{{module}}
{{sidebar}}
{{toc}}
<div id="observablehq-center">
<main id="observablehq-main" class="observablehq">
{{main}}
</main>
<footer id="observablehq-footer">
{{pager}}
{{copyright}}
</footer>
</div>

If we just need to add a dashboard.css, we might want to do something like this instead:

<link rel="stylesheet" type="text/css" href="{{root}}_observablehq/base.css">
+ <link rel="stylesheet" type="text/css" href="{{root}}_observablehq/{{custom}}.css">

In the long run, I'd like the whole template to be customizable. Maybe my project will not want google fonts, or I'll want a different HTML structure altogether. Making the whole template editable (outside the src file) is easy (#253); however, it means that these {{xxx}} tags become part of the API, so I'm not sure it's wise at this stage. But it seems obvious that having to rely only on css to customize the page will quickly feel inadequate.

Named themes #60

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions