Skip to content

Commit 2cc98ce

Browse files
atextoratextor
authored
Merge pull request #10 from bci-oss/main
Update style
2 parents 9171822 + 75f65e1 commit 2cc98ce

File tree

9 files changed

+107
-2
lines changed

9 files changed

+107
-2
lines changed

‎src/css/doc.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
}
3434

3535
.doc h1 {
36-
color: var(--esmf-primary);
36+
color: var(--esmf-tertiary);
3737
}
3838

3939
.doc > h1.page:first-child {

‎src/css/footer.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ footer.footer {
44
font-size: calc(15 / var(--rem-base) * 1rem);
55
line-height: var(--footer-line-height);
66
padding: 1.5rem;
7+
position: relative;
8+
float: left;
9+
width: 100%;
710
}
811

912
.footer p {

‎src/css/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@
1919
@import "search.css";
2020
@import "esmf-variables.css";
2121
@import "typeface-cairo.css";
22+
@import "tiles.css";

‎src/css/tiles.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* Sectionbody */
2+
3+
.doc.tiles-page .sectionbody {
4+
display: flex;
5+
position: relative;
6+
float: left;
7+
width: 100%;
8+
grid-gap: 2rem;
9+
flex-wrap: wrap;
10+
}
11+
12+
.doc.tiles-page .sectionbody > hr {
13+
display: none;
14+
}
15+
16+
/* Tiles */
17+
18+
.tile {
19+
/* margin: 20px 40px 20px 0; */ /* activate if only 2 tiles per row is preferred */
20+
padding: 1rem;
21+
width: calc((100% / 3) - 1.35rem);
22+
border-top: 8px solid var(--tile-border-top-color);
23+
background-color: var(--tile-background-color);
24+
}
25+
26+
.tile .content {
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: stretch;
30+
height: 100%;
31+
}
32+
33+
.tile .content .paragraph {
34+
margin: 0;
35+
width: 100%;
36+
}
37+
38+
@media screen and (max-width: 1140px) {
39+
.tile {
40+
width: calc((100% / 2) - 1rem);
41+
}
42+
}
43+
44+
@media screen and (max-width: 640px) {
45+
.tile {
46+
width: 100%;
47+
}
48+
}
49+
50+
.tile .title p {
51+
color: var(--tile-title-font-color);
52+
font-style: normal;
53+
}
54+
55+
.tile .text p {
56+
margin-top: 10px;
57+
font-size: calc(15.5 / var(--rem-base) * 1rem);
58+
font-style: normal;
59+
}
60+
61+
.tile .content .paragraph.text {
62+
margin-bottom: 1rem;
63+
}
64+
65+
.tile .content .paragraph.link {
66+
margin-top: auto;
67+
}
68+
69+
.tile .link p {
70+
width: 100%;
71+
font-size: calc(15.5 / var(--rem-base) * 1rem);
72+
}

‎src/css/vars.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
--panel-border-color: var(--color-smoke-90);
3838
--scrollbar-thumb-color: var(--color-gray-10);
3939
/* navbar */
40-
--navbar-background: var(--esmf-primary);
40+
--navbar-background: var(--esmf-tertiary);
4141
--navbar-font-color: var(--color-white);
4242
--navbar_hover-background: var(--color-black);
4343
--navbar-button-background: var(--color-white);
@@ -116,6 +116,10 @@
116116
--toc-heading-font-color: var(--doc-font-color);
117117
--toc-border-color: var(--panel-border-color);
118118
--toc-line-height: 1.2;
119+
/* tiles */
120+
--tile-border-top-color: var(--esmf-tertiary);
121+
--tile-background-color: var(--esmf-secondary);
122+
--tile-title-font-color: var(--body-font-color);
119123
/* footer */
120124
--footer-line-height: var(--doc-line-height);
121125
--footer-background: var(--esmf-secondary);

‎src/layouts/tiles.hbs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
{{> head defaultPageTitle='Untitled'}}
5+
</head>
6+
<body class="article">
7+
{{> header}}
8+
{{> tiles-body}}
9+
{{> footer}}
10+
</body>
11+
</html>

‎src/partials/tiles-body.hbs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="body">
2+
{{> nav}}
3+
{{> tiles-main}}
4+
</div>

‎src/partials/tiles-main.hbs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<main>
2+
{{> toolbar}}
3+
{{> tiles-page}}
4+
</main>

‎src/partials/tiles-page.hbs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<article class="doc tiles-page"><a name="section-top"></a>
2+
{{#if page.title}}
3+
<h1 class="page">{{{page.title}}}</h1>
4+
{{/if}}
5+
{{{page.contents}}}
6+
</article>

0 commit comments

Comments
 (0)