Another restyle

This commit is contained in:
Tony Garnock-Jones 2021-03-31 11:18:29 +02:00
parent d46e523c30
commit 58593eece4
7 changed files with 102 additions and 95 deletions

View File

@ -5,7 +5,8 @@ defaults:
values:
layout: page
title: "Dataspace-Oriented Programming"
title: "Dataspaces"
subtitle: "and Conversational Concurrency"
# syn·di·cate
# a language for interactive programs"

View File

@ -1,6 +0,0 @@
<!-- -*- html -*- -->
<footer>
<p>
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a>
</p>
</footer>

View File

@ -1,5 +0,0 @@
<!-- -*- html -*- -->
<header>
<h1><a href="{{ site.baseurl }}/"><span class="title">{{ site.title }}</span></a> <span class="subtitle">{{ site.subtitle }}</span></h1>
{% include common_nav %}
</header>

View File

@ -1,15 +0,0 @@
<!-- -*- html -*- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/normalize.css" title="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" title="stylesheet" media="screen">
{% for sheet in page.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/{{ sheet }}" media="screen">
{% endfor %}
<link href="//fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<meta name="author" content="Tony Garnock-Jones">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if page.feed %}
<link rel="alternate" type="application/atom+xml" href="{{ page.feed }}" title="Atom feed" />
{% endif %}

View File

@ -1,10 +0,0 @@
<!-- -*- html -*- -->
<nav class="mainmenu">
<ul>
<li><a href="{{ site.baseurl }}/">Home</a></li>
<li><a href="{{ site.baseurl }}/#documentation">Docs</a></li>
<li><a href="{{ site.baseurl }}/examples/">Demos</a></li>
<li><a href="{{ site.baseurl }}/install/">Installation</a></li>
<li><a href="https://github.com/tonyg/syndicate">Github</a></li>
</ul>
</nav>

View File

@ -1,14 +1,43 @@
<!DOCTYPE html>
<html>
<head>
{% include common_html_headers %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{% if page.title %}{{ page.title }}—{% else %}{% endif %}{{ site.title }}</title>
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/normalize.css" title="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" title="stylesheet">
{% for sheet in page.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/{{ sheet }}">
{% endfor %}
<meta name="author" content="Tony Garnock-Jones">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if page.feed %}
<link rel="alternate" type="application/atom+xml" href="{{ page.feed }}" title="Atom feed" />
{% endif %}
</head>
<body class="{{ page.class }}">
{% include common_header %}
<header>
<div class="outer-wrapper">
<div class="inner-wrapper">
<h1><a href="{{ site.baseurl }}/"><span class="title">{{ site.title }}</span></a> <span class="subtitle">{{ site.subtitle }}</span></h1>
<nav>
<ul>
<li><a href="{{ site.baseurl }}/">Home</a></li>
<li><a href="{{ site.baseurl }}/#documentation">Docs</a></li>
<li><a href="{{ site.baseurl }}/examples/">Demos</a></li>
<li><a href="{{ site.baseurl }}/install/">Installing Syndicate</a></li>
<li><a href="https://github.com/tonyg/syndicate">Github</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main class="content">
{{ content }}
</main>
{% include common_footer %}
<footer>
<p>
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a>
</p>
</footer>
</body>
</html>

123
style.css
View File

@ -1,42 +1,57 @@
---
layout:
display-font: '"Libre Barcode 39 Text"'
display-font: '"Bebas Neue"'
nav-font: '"Inconsolata Regular"'
heading-font: '"Inconsolata Regular"'
heading-font: '"IBM Plex Serif"'
heading-font-small: '"IBM Plex Mono"'
skinny-header-margin: "1rem"
body-font: '"IBM Plex Sans"'
body-margin: "2rem"
body-lhs-margin: "10rem"
body-lhs-inset: "8rem"
code-font: '"IBM Plex Mono"'
---
@import 'font-definitions.css';
html, body, * { box-sizing: border-box; }
html {
margin: 0;
padding: 0;
font-size: 14pt;
}
html, body, * { box-sizing: border-box; }
body {
font-family: {{ page.body-font }};
font-weight: 300;
margin: 0 {{ page.body-margin }};
margin: 0;
padding: 0;
background: white;
}
main {
max-width: 960px;
clear: both;
margin: {{ page.body-margin }};
}
pre {
font-size: 0.9rem;
}
*:target {
background: yellow;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: {{ page.heading-font }};
font-style: italic;
font-weight: bold;
clear: both;
}
@ -49,26 +64,6 @@ h1 { font-size: 1.56rem; }
h2 { font-size: 1.25rem; }
h3, h4, h5, h6 { font-size: 1rem; }
h3, h4, h5, h6 {
text-transform: uppercase;
font-family: {{ page.heading-font-small }};
font-style: italic;
font-weight: 500;
margin: 2rem 0 0 0;
}
h3 { text-decoration: underline; font-weight: 600; }
main h1, main h2 {
font-family: {{ page.heading-font }};
text-transform: uppercase;
letter-spacing: 0.33em;
margin-top: 2rem;
border-left: solid magenta 1rem;
padding-left: 0.5rem;
margin-left: -1.5rem;
border-bottom: solid magenta 0.26em;
}
pre, code {
font-family: {{ page.code-font }};
}
@ -78,45 +73,52 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
}
header {
margin: 0 -{{ page.body-margin }};
display: flex;
margin-top: 0;
margin-bottom: 0;
border-bottom: solid black 0.25rem;
}
header .outer-wrapper {
border-left: solid magenta {{ page.skinny-header-margin }};
}
header .inner-wrapper {
padding: 0 {{ page.skinny-header-margin }};
}
header h1 {
background: black;
color: white;
font-family: {{ page.display-font }};
font-size: 3.75rem;
color: yellow;
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
font-size: 4rem;
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1;
border-bottom: solid magenta 0.125rem;
}
nav {
font-family: {{ page.nav-font }};
text-transform: uppercase;
letter-spacing: 0.33em;
header h1 span {
display: inline-block;
}
header h1 span.subtitle {
font-size: 2rem;
}
nav > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-end;
padding: 0;
margin: 0;
background: black;
color: white;
margin-bottom: 0.5rem;
}
nav > ul > li {
display: block;
width: auto;
padding-left: 0.33em;
margin: 0 0 0 1rem;
border-bottom: solid cyan 0.25rem;
margin: 0;
padding: 0;
margin-right: 1rem;
}
nav a {
@ -124,16 +126,12 @@ nav a {
color: inherit;
}
main, footer {
max-width: 960px;
margin: 0 auto;
clear: both;
}
footer {
border-top: solid black 0.25rem;
padding: 0 {{ page.skinny-header-margin }};
clear: both;
margin-top: 2rem;
font-size: 0.9rem;
font-size: 0.5rem;
text-align: right;
}
@ -146,9 +144,24 @@ img {
font-size: 16pt;
}
nav > ul {
header {
margin: 0;
margin-right: {{ page.body-margin }};
}
header .outer-wrapper {
display: flex;
width: 100%;
margin: 0;
min-height: {{ page.body-lhs-inset }};
border-left: solid magenta {{ page.body-lhs-inset }};
align-items: flex-end;
}
header .inner-wrapper {
width: 100%;
padding-left: {{ page.body-margin }};
flex-direction: row;
align-items: flex-start;
}
.rightfloat { float: right; margin-left: 1rem; margin-bottom: 1rem; }