syndicate-lang
/
syndicate-2017
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Shuffle CSS around

This commit is contained in:
Tony Garnock-Jones 2021-04-05 11:50:38 +02:00
parent 349fb7fc89
commit 347e5f59bd
6 changed files with 137 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_layouts/skeleton.html
View File

@ -3,8 +3,8 @@
<head>
<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">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/normalize.css" title="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/style.css" title="stylesheet">
{% for sheet in page.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/{{ sheet }}">
{% endfor %}
@ -25,7 +25,7 @@
<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>
<li><a href="https://github.com/syndicate-lang/">Github</a></li>
</ul>
</nav>
</div>
@ -36,9 +36,13 @@
<div class="clear"></div>
</main>
<footer>
<p>
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a>
</p>
<div class="outer-wrapper">
<div class="inner-wrapper">
<p>
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a>
</p>
</div>
</div>
</footer>
</body>
</html>

3
font-definitions.css → css/font-definitions.css
View File

@ -33,4 +33,7 @@ layout:
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: italic; src: url("/fonts/IBMPlexMono-SemiBoldItalic.ttf"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 300; font-style: normal; src: url("/fonts/IBMPlexSerif-Light.ttf"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; src: url("/fonts/IBMPlexSerif-Regular.ttf"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: normal; src: url("/fonts/IBMPlexSerif-Medium.ttf"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 300; font-style: italic; src: url("/fonts/IBMPlexSerif-LightItalic.ttf"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: italic; src: url("/fonts/IBMPlexSerif-MediumItalic.ttf"); }

0
normalize.css → css/normalize.css vendored
View File

135
style.css → css/style.css
View File

@ -1,20 +1,23 @@
---
layout:
display-font: '"Bebas Neue"'
display-font: '"Bebas Neue", sans'
nav-font: '"Inconsolata Regular"'
heading-font: '"IBM Plex Serif"'
heading-font-small: '"IBM Plex Mono"'
horizontal-border-width: "0.25rem"
heading-font: '"IBM Plex Serif", serif'
heading-font-small: '"IBM Plex Mono", monospace'
skinny-header-margin: "1rem"
body-font: '"IBM Plex Sans"'
body-font: '"IBM Plex Sans", sans'
body-margin: "2rem"
body-lhs: "10rem"
body-lhs-inset: "8rem"
body-lhs-border: "1rem"
body-lhs-border-indent: "7rem"
code-font: '"IBM Plex Mono"'
code-font: '"IBM Plex Mono", monospace'
---
@import 'font-definitions.css';
@ -45,10 +48,93 @@ main {
clear: both;
}
main ul.boxes {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
margin: -0.5rem -1.5rem 1rem;
margin-bottom: 1rem;
padding: 0;
}
main ul.boxes > li {
background: white;
display: flex;
flex-direction: column;
border: solid black;
border-width: {{ page.horizontal-border-width }};
margin: 0.5rem;
padding: 0 0.75rem;
}
main ul.boxes > li > * {
margin: 0.5rem 0;
}
main ul.boxes > li > *.read-more {
display: flex;
align-items: flex-end;
align-self: flex-end;
flex-grow: 1;
}
main ul.boxes > li > h1 {
font-family: {{ page.display-font }};
font-style: normal;
font-weight: normal;
border-bottom: solid black {{ page.horizontal-border-width }};
background: lightcyan;
margin: 0 -0.75rem;
}
main ul.boxes > li > h1 > a {
display: block;
padding: 0.25rem 0.75rem 0;
}
main > hr {
background: white;
height: 0;
border: none;
border-top: solid black 0.125rem;
border-bottom: solid black 0.125rem;
margin: 2rem auto;
width: calc({{ page.body-margin }} + {{ page.body-lhs-border }});
}
.logos {
display: flex;
flex-wrap: wrap;
margin-left: -0.25rem;
margin-top: -0.25rem;
}
.logos > * {
flex-grow: 1;
flex-shrink: 1;
min-width: 64px;
width: auto;
height: auto;
margin-left: 0.25rem;
margin-top: 0.25rem;
}
.logos3 > * { flex-basis: calc(100% / 3 - 0.25rem); }
.logos2 > * { flex-basis: calc(100% / 2 - 0.25rem); }
pre {
font-size: 0.9rem;
}
.frontpage_code_examples {
margin: 0 -{{ page.body-margin }};
padding: 0 {{ page.body-lhs-border }};
}
*:target {
background: yellow;
}
@ -56,7 +142,7 @@ pre {
h1, h2, h3, h4, h5, h6 {
font-family: {{ page.heading-font }};
font-style: italic;
font-weight: bold;
font-weight: 300;
clear: both;
}
@ -81,7 +167,7 @@ header {
display: flex;
margin-top: 0;
margin-bottom: 0;
border-bottom: solid black 0.25rem;
border-bottom: solid black {{ page.horizontal-border-width }};
}
header .outer-wrapper {
@ -133,20 +219,27 @@ nav a {
footer {
border-top: solid black 0.25rem;
padding: 0 {{ page.skinny-header-margin }};
clear: both;
padding-top: 2rem;
font-size: 0.5rem;
text-align: right;
}
footer .outer-wrapper {
padding: 2rem 0 0.5rem;
border-right: solid cyan {{ page.skinny-header-margin }};
}
footer .inner-wrapper {
padding: 0 {{ page.skinny-header-margin }};
}
img {
max-width: 100%;
}
@media all and (min-width: 960px) {
html {
font-size: 16pt;
font-size: 15pt;
}
header {
@ -169,21 +262,41 @@ img {
flex-direction: row;
}
footer .outer-wrapper {
border-right: solid cyan 4rem;
}
main {
border-left: solid black {{ page.body-lhs-border }};
padding: 1rem 0 1rem {{ page.body-margin }};
margin: 0 0 0 {{ page.body-lhs-border-indent }};
}
main ul.boxes {
flex-direction: row;
margin: -0.5rem -4.75rem -0.5rem -9.5rem;
}
main ul.boxes > li {
width: calc(100%/3 - 2 * 0.5rem);
}
main > hr {
margin-left: calc(-{{ page.body-margin }} - {{ page.body-lhs-border }});
height: 1rem;
}
.rightfloat { float: right; margin-left: 1rem; margin-bottom: 1rem; }
.leftfloat { float: left; margin-right: 1rem; margin-bottom: 1rem; }
.frontpage_code_examples {
margin: 0;
display: flex;
justify-content: center;
align-items: stretch;
}
.frontpage_code_examples > div {
padding: 0 0.5rem;
flex: 1;
}
}

0
syndicate.png → img/syndicate.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

0
syndicate.svg → img/syndicate.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB