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> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{% if page.title %}{{ page.title }}—{% else %}{% endif %}{{ site.title }}</title> <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 }}/css/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/style.css" title="stylesheet">
{% for sheet in page.stylesheets %} {% for sheet in page.stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/{{ sheet }}"> <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/{{ sheet }}">
{% endfor %} {% endfor %}
@ -25,7 +25,7 @@
<li><a href="{{ site.baseurl }}/#documentation">Docs</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 }}/examples/">Demos</a></li>
<li><a href="{{ site.baseurl }}/install/">Installing Syndicate</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> </ul>
</nav> </nav>
</div> </div>
@ -36,9 +36,13 @@
<div class="clear"></div> <div class="clear"></div>
</main> </main>
<footer> <footer>
<p> <div class="outer-wrapper">
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a> <div class="inner-wrapper">
</p> <p>
Copyright &copy; 2009&ndash;2021 <a href="https://leastfixedpoint.com/">Tony Garnock-Jones</a>
</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </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 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: 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: 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: layout:
display-font: '"Bebas Neue"' display-font: '"Bebas Neue", sans'
nav-font: '"Inconsolata Regular"' nav-font: '"Inconsolata Regular"'
heading-font: '"IBM Plex Serif"' horizontal-border-width: "0.25rem"
heading-font-small: '"IBM Plex Mono"'
heading-font: '"IBM Plex Serif", serif'
heading-font-small: '"IBM Plex Mono", monospace'
skinny-header-margin: "1rem" skinny-header-margin: "1rem"
body-font: '"IBM Plex Sans"' body-font: '"IBM Plex Sans", sans'
body-margin: "2rem" body-margin: "2rem"
body-lhs: "10rem"
body-lhs-inset: "8rem" body-lhs-inset: "8rem"
body-lhs-border: "1rem" body-lhs-border: "1rem"
body-lhs-border-indent: "7rem" body-lhs-border-indent: "7rem"
code-font: '"IBM Plex Mono"' code-font: '"IBM Plex Mono", monospace'
--- ---
@import 'font-definitions.css'; @import 'font-definitions.css';
@ -45,10 +48,93 @@ main {
clear: both; 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 { pre {
font-size: 0.9rem; font-size: 0.9rem;
} }
.frontpage_code_examples {
margin: 0 -{{ page.body-margin }};
padding: 0 {{ page.body-lhs-border }};
}
*:target { *:target {
background: yellow; background: yellow;
} }
@ -56,7 +142,7 @@ pre {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: {{ page.heading-font }}; font-family: {{ page.heading-font }};
font-style: italic; font-style: italic;
font-weight: bold; font-weight: 300;
clear: both; clear: both;
} }
@ -81,7 +167,7 @@ header {
display: flex; display: flex;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: solid black 0.25rem; border-bottom: solid black {{ page.horizontal-border-width }};
} }
header .outer-wrapper { header .outer-wrapper {
@ -133,20 +219,27 @@ nav a {
footer { footer {
border-top: solid black 0.25rem; border-top: solid black 0.25rem;
padding: 0 {{ page.skinny-header-margin }};
clear: both; clear: both;
padding-top: 2rem;
font-size: 0.5rem; font-size: 0.5rem;
text-align: right; 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 { img {
max-width: 100%; max-width: 100%;
} }
@media all and (min-width: 960px) { @media all and (min-width: 960px) {
html { html {
font-size: 16pt; font-size: 15pt;
} }
header { header {
@ -169,21 +262,41 @@ img {
flex-direction: row; flex-direction: row;
} }
footer .outer-wrapper {
border-right: solid cyan 4rem;
}
main { main {
border-left: solid black {{ page.body-lhs-border }}; border-left: solid black {{ page.body-lhs-border }};
padding: 1rem 0 1rem {{ page.body-margin }}; padding: 1rem 0 1rem {{ page.body-margin }};
margin: 0 0 0 {{ page.body-lhs-border-indent }}; 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; } .rightfloat { float: right; margin-left: 1rem; margin-bottom: 1rem; }
.leftfloat { float: left; margin-right: 1rem; margin-bottom: 1rem; } .leftfloat { float: left; margin-right: 1rem; margin-bottom: 1rem; }
.frontpage_code_examples { .frontpage_code_examples {
margin: 0;
display: flex; display: flex;
justify-content: center; align-items: stretch;
} }
.frontpage_code_examples > div { .frontpage_code_examples > div {
padding: 0 0.5rem; 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