improved examples page layout (e108a2d3) · Commits · github_fork / Clip

examples/examples.yaml

+8 −8

Original line number	Diff line number	Diff line
		- section: Standard Charts
		files:
		- file: charts-basic/scatterplot
		- file: charts-basic/linechart_timeseries
		- file: charts-basic/barchart_groups
		- file: charts-basic/scatterplot_with_labels
		- file: charts-basic/custom_font

		- section: Scientific Charts
		files:
		- file: charts-scientific/vectorfield
		@@ -16,6 +8,14 @@
		- file: charts-scientific/scatterplot_colors
		- file: charts-scientific/streamgraph

		- section: Standard Charts
		files:
		- file: charts-basic/scatterplot
		- file: charts-basic/linechart_timeseries
		- file: charts-basic/barchart_groups
		- file: charts-basic/scatterplot_with_labels
		- file: charts-basic/custom_font

		- section: Editorial Charts
		files:
		- file: charts-editorial/chart_i18n

manual/frontpage.md

+1 −1

Original line number	Diff line number	Diff line
		@@ -17,7 +17,7 @@ libraries.
		<a href="/download">Download</a>
		</div>

		<div style="margin-top: 2em; background: #f2f2f2; padding: 10pt; max-width: 900px; box-sizing: border-box;">
		<div style="margin-top: 2em; background: #f2f7ff; padding: 10pt; max-width: 900px; box-sizing: border-box;">
		<b>BETA:</b> Please note that fviz is pre-1.0 software under active development;
		It is usable, but things might generally still be a bit rough around the edges.
		To see what already works, have a look at the <a href="/examples">Examples</a> page.

manual/web/build_examples.py

+10 −10

Original line number	Diff line number	Diff line
		@@ -28,24 +28,24 @@ def build_example_list(examples):
		<h1 style="margin-bottom: 0;">Examples</h1>

		{{#list}}
		<div style="margin-bottom: 6em; margin-top: -1em;">
		<h2>{{section}}</h2>
		<h3>{{section}}</h3>
		<section class="examples-list">
		{{#files}}
		<section>
		<div>
		<h3>Example: <a href="/examples/{{file}}" class="link"><code>examples/{{file}}</code></a></h3>
		<div class="example">
		<figure>
		<a href="/examples/{{file}}"><img src="/examples/{{file}}.svg"></a>
		</figure>
		</div>
		</section>
		{{/files}}
		</div>
		</section>
		{{/list}}
		"""
		env = {
		"list": examples,
		}

		write_page("/examples", TPL.render(tpl, env), title="Example Gallery")
		write_page("/examples", TPL.render(tpl, env), title="Example Gallery", article_class="full-width")

		def main():
		examples = yaml.load(Path("examples/examples.yaml").read_text())

manual/web/build_layout.py

+1 −0

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ tpl = """
		<title>{{title_seo}}</title>
		<link href='/documentation.css' type='text/css' rel='stylesheet' />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
		<meta name="google-site-verification" content="zhyGsSQu1HANExonMZDMr0LppXCCv47inMKRXiZS8aQ" />
		</head>

manual/web/documentation.css

+57 −33

Original line number	Diff line number	Diff line
		@@ -28,29 +28,30 @@ h1, h2, h3, h4, h5, h6 {
		h1, h2, h3 { line-height: 1.3; }
		h1 { font-size: 38.5px; }
		h2 { font-size: 22px; }
		h3 { font-size: 18px; }
		h4 { font-size: 100%; font-weight: 500; }
		h3 { font-size: 18px; font-weight: 600; }
		h4 { font-size: 18px; font-weight: 500; }
		h5 { font-size: 100%; font-weight: 500; }

		h4 a { color: #000; }

		h3 {
		margin-bottom: 0;
		h3, h4 {
		margin-top: 1em;
		padding-top: 0;
		font-weight: 500;
		color: #333;
		}

		h2, a h2 {
		box-sizing: border-box;
		border-bottom: 2px solid #ddd;
		line-height: 1;
		margin-top: 2em;
		margin-bottom: .8em;
		font-weight: 500;
		font-weight: 600;
		font-size: 18px;
		background: #f2f2f2;
		padding: .5em .6em .2em .6em;
		background: #f2f7ff;
		color: #1a2c58;
		box-sizing: border-box;
		border-bottom: 2px solid #e7ebf2;
		padding: .6rem .6em .4rem .6em;
		display: block;
		}

		h4 em {
		@@ -62,21 +63,11 @@ h4 em {
		font-weight: bold;
		}


		h3.section {
		font-size: 19px;
		margin-top: 2em;
		margin-bottom: 1em;
		border-bottom: 1px solid #ddd;
		font-weight: 500;
		}

		h4 code {
		font-size: 96%;
		}

		section {
		border-top: 1px solid #ddd;
		margin-bottom: 2em;
		}

		@@ -104,14 +95,14 @@ ul li p {
		}

		nav {
		border-bottom: 1px solid #ddd;
		border-bottom: 1pt solid #ced3e0;
		overflow: auto;
		margin: 0 2em;
		padding: 1.6em 0 0 0;
		}

		nav ul.crumbs {
		border-top: 1px solid #ddd;
		border-top: 1pt solid #ced3e0;
		margin: 1em 0 0 0;
		padding: .8em 0 .6em 0;
		font-size: 90%;
		@@ -162,15 +153,7 @@ article {
		padding: 2em 0;
		}

		article p,
		article h1,
		article h2,
		article h3,
		article h4,
		article h5,
		article pre,
		article table,
		article hr {
		article:not(.full-width) {
		max-width: 900px;
		}

		@@ -262,7 +245,7 @@ article img {
		code {
		padding: 2px 5px;
		font-family: "Monaco", monospace;
		background-color: #f6f6f6;
		background-color: #f6f8fa;
		border-radius: 3px;
		text-shadow: 0 1px 0 #fff;
		overflow: auto;
		@@ -438,6 +421,47 @@ article .color_legend {
		margin-right: .4em;
		}

		article .example {
		.examples-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(36em, 1fr));
		margin-bottom: 3em;
		margin-top: 1em;
		border-left: 1pt solid #ced3e0;
		border-top: 1pt solid #ced3e0;
		}

		.examples-list > div {
		display: flex;
		flex-direction: column;
		height: 100%;
		border-bottom: 1pt solid #ced3e0;
		border-right: 1pt solid #ced3e0;
		box-sizing: border-box;
		}

		.examples-list h3 {
		background: #f8faff;
		color: #111;
		font-weight: 500;
		margin-top: 0;
		padding: .4em .6em;
		border-bottom: 1px solid #ddd;
		font-size: 90%;
		}

		.examples-list h3 code {
		background: transparent;
		}

		.examples-list figure {
		margin: 1em;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		}

		.examples-list figure img {
		max-width: 100%;
		}

Admin message