|
@@ -1,26 +1,22 @@
|
|
|
@import "../bower_components/normalize-css/normalize.css";
|
|
|
$font-stack: "Tex Gyre Heros";
|
|
|
$font-color-light: #c0c0c0;
|
|
|
-
|
|
|
@font-face {
|
|
|
font-family: 'TeX Gyre Heros';
|
|
|
src: url('/fonts/texgyreheros-regular-webfont.woff') format('woff');
|
|
|
font-style: normal;
|
|
|
}
|
|
|
-
|
|
|
@font-face {
|
|
|
font-family: 'TeX Gyre Heros';
|
|
|
src: url('/fonts/texgyreheros-bold-webfont.woff') format('woff');
|
|
|
font-style: normal;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
@font-face {
|
|
|
font-family: 'TeX Gyre Heros';
|
|
|
src: url('/fonts/texgyreheros-italic-webfont.woff') format('woff');
|
|
|
font-style: italic;
|
|
|
}
|
|
|
-
|
|
|
@font-face {
|
|
|
font-family: 'TeX Gyre Heros';
|
|
|
src: url('/fonts/texgyreheros-bolditalic-webfont.woff') format('woff');
|
|
@@ -28,9 +24,115 @@ $font-color-light: #c0c0c0;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-.voffset-halb {
|
|
|
- margin-top: 0.5rem
|
|
|
+html {
|
|
|
+ font-size: 62.5%; }
|
|
|
+body {
|
|
|
+ font-size: 1.33em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
|
|
+ line-height: 1.5;
|
|
|
+ font-weight: normal;
|
|
|
+ font-family: $font-stack;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+/* Typography
|
|
|
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
|
+h1, h2, h3, h4, h5, h6 {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
|
|
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
|
|
+h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
|
|
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
|
|
+h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
|
|
+h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
|
|
+p { margin-top: 0; }
|
|
|
+
|
|
|
+page {
|
|
|
+ position: relative;
|
|
|
+ padding: 10mm 25mm 10mm 25mm;
|
|
|
+ display: block;
|
|
|
+ border: 1px solid black;
|
|
|
+ -webkit-box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
+ -moz-box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
+ box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
+}
|
|
|
+page[size="A4"][orientation="portrait"] {
|
|
|
+ width: 210mm;
|
|
|
+ height: 296.8mm;
|
|
|
+}
|
|
|
+page[size="A4"][orientation="landscape"] {
|
|
|
+ width: 296.8mm;
|
|
|
+ height: 210mm;
|
|
|
+}
|
|
|
+page[size="A3"][orientation="portrait"] {
|
|
|
+ width: 296.8mm;
|
|
|
+ height: 420mm;
|
|
|
+}
|
|
|
+page[size="A3"][orientation="landscape"] {
|
|
|
+ width: 420mm;
|
|
|
+ height: 296.8mm;
|
|
|
+}
|
|
|
+page[size="A5"][orientation="portrait"] {
|
|
|
+ width: 14.8cm;
|
|
|
+ height: 21cm;
|
|
|
+}
|
|
|
+page[size="A5"][orientation="landscape"] {
|
|
|
+ width: 21cm;
|
|
|
+ height: 14.8cm;
|
|
|
+}
|
|
|
+
|
|
|
+.grid {
|
|
|
+ display: grid;
|
|
|
+ grid-gap: 0px;
|
|
|
+ align-content: start;
|
|
|
+ grid-template-columns: auto;
|
|
|
+ grid-template-rows: auto 1fr auto;
|
|
|
+ grid-template-areas: "header"
|
|
|
+ "main"
|
|
|
+ "footer";
|
|
|
}
|
|
|
+.header {
|
|
|
+ grid-area: header;
|
|
|
+ align-self: start;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ grid-area: main;
|
|
|
+ align-self: start;
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ grid-area: footer;
|
|
|
+ align-self: end;
|
|
|
+}
|
|
|
+.main-grid {
|
|
|
+ grid-area: main;
|
|
|
+ display: grid;
|
|
|
+ grid-column-gap: 25mm;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ grid-template-rows: auto 1fr auto;
|
|
|
+ grid-template-areas: "header-left header-right"
|
|
|
+ "main-left main-right"
|
|
|
+ "footer-left footer-right";
|
|
|
+}
|
|
|
+.main-left { grid-area: main-left; }
|
|
|
+.main-right { grid-area: main-right; }
|
|
|
+.footer-grid {
|
|
|
+ grid-area: footer;
|
|
|
+ display: grid;
|
|
|
+ grid-column-gap: 25mm;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ grid-template-rows: auto;
|
|
|
+ grid-template-areas: "footer-left footer-right";
|
|
|
+}
|
|
|
+.footer-left { grid-area: footer-left; }
|
|
|
+.footer-right { grid-area: footer-right; }
|
|
|
+
|
|
|
+.flex-grid { display: flex; }
|
|
|
+.col { flex: 1; }
|
|
|
+.col-2 { flex: 2; }
|
|
|
+
|
|
|
+
|
|
|
+.voffset-halb { margin-top: 0.5rem; }
|
|
|
@for $i from 1 through 20 {
|
|
|
.voffset-#{$i} {
|
|
|
margin-top: #{$i}rem
|
|
@@ -141,128 +243,6 @@ ul.dashes {
|
|
|
box-sizing: border-box;
|
|
|
-moz-box-sizing: border-box;
|
|
|
}
|
|
|
-html {
|
|
|
- font-size: 62.5%; }
|
|
|
-body {
|
|
|
- font-size: 1.33em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
|
|
- line-height: 1.5;
|
|
|
- font-weight: normal;
|
|
|
- font-family: $font-stack;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-/* Typography
|
|
|
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
|
-h1, h2, h3, h4, h5, h6 {
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 0;
|
|
|
- font-weight: 400;
|
|
|
-}
|
|
|
-h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
|
|
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
|
|
-h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
|
|
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
|
|
-h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
|
|
-h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
|
|
-p { margin-top: 0; }
|
|
|
-
|
|
|
-page {
|
|
|
- position: relative;
|
|
|
- padding: 10mm 25mm 10mm 25mm;
|
|
|
- display: block;
|
|
|
- border: 1px solid black;
|
|
|
- -webkit-box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
- -moz-box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
- box-shadow: 5px 5px 4px 0px rgba(192,192,192,1);
|
|
|
-}
|
|
|
-page[size="A4"][orientation="portrait"] {
|
|
|
- width: 210mm;
|
|
|
- height: 296.8mm;
|
|
|
-}
|
|
|
-page[size="A4"][orientation="landscape"] {
|
|
|
- width: 296.8mm;
|
|
|
- height: 210mm;
|
|
|
-}
|
|
|
-page[size="A3"][orientation="portrait"] {
|
|
|
- width: 296.8mm;
|
|
|
- height: 420mm;
|
|
|
-}
|
|
|
-page[size="A3"][orientation="landscape"] {
|
|
|
- width: 420mm;
|
|
|
- height: 296.8mm;
|
|
|
-}
|
|
|
-page[size="A5"][orientation="portrait"] {
|
|
|
- width: 14.8cm;
|
|
|
- height: 21cm;
|
|
|
-}
|
|
|
-page[size="A5"][orientation="landscape"] {
|
|
|
- width: 21cm;
|
|
|
- height: 14.8cm;
|
|
|
-}
|
|
|
-
|
|
|
-.grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: auto;
|
|
|
- grid-template-rows: auto 1fr auto;
|
|
|
- grid-template-areas: "header"
|
|
|
- "main"
|
|
|
- "footer";
|
|
|
- grid-gap: 0px;
|
|
|
- align-content: start;
|
|
|
-}
|
|
|
-
|
|
|
-.header {
|
|
|
- grid-area: header;
|
|
|
- align-self: start;
|
|
|
-}
|
|
|
-.main {
|
|
|
- grid-area: main;
|
|
|
- align-self: start;
|
|
|
-}
|
|
|
-.footer {
|
|
|
- grid-area: footer;
|
|
|
- align-self: end;
|
|
|
-}
|
|
|
-.main-grid {
|
|
|
- grid-area: main;
|
|
|
- display: grid;
|
|
|
- grid-column-gap: 25mm;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- grid-template-rows: auto 1fr auto;
|
|
|
- grid-template-areas: "header-left header-right"
|
|
|
- "main-left main-right"
|
|
|
- "footer-left footer-right";
|
|
|
-}
|
|
|
-.main-left {
|
|
|
- grid-area: main-left;
|
|
|
-}
|
|
|
-.main-right {
|
|
|
- grid-area: main-right;
|
|
|
-}
|
|
|
-.footer-grid {
|
|
|
- grid-area: footer;
|
|
|
- display: grid;
|
|
|
- grid-column-gap: 25mm;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- grid-template-rows: auto;
|
|
|
- grid-template-areas: "footer-left footer-right";
|
|
|
-}
|
|
|
-.footer-left {
|
|
|
- grid-area: footer-left;
|
|
|
-}
|
|
|
-.footer-right {
|
|
|
- grid-area: footer-right;
|
|
|
-}
|
|
|
-
|
|
|
-.flex-grid {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.col {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-.col-2 {
|
|
|
- flex: 2;
|
|
|
-}
|
|
|
-
|
|
|
table.fixed {
|
|
|
table-layout: fixed;
|
|
|
table th, table td {
|