2016/views/page.scss

@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');
  font-style: italic;
  font-weight: bold;
}

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
}}

.text-center { text-align: center !important; }

hr {
  border: 0;
  border-top: 1px solid #eee;
  border-color: #000;
  height: 1px;
  margin: 3px 0;
  &.hr-rot {
    border-color: #ff2700;
    margin: 8px 0;
  }
  &.hr-grau {
    border-color: rgb(100,100,100) !important;
  }
}
.table-eng {
  margin-bottom: 0px;
  td {
    padding: 1px !important;
    font-size: 9pt;
  }
}
.table-noten {
  width: 100%;
  margin-bottom: 1em;
}
.fach-bezeichnung {
  padding-left: 10mm;
  &.padding-5 {
    padding-left: 2em;
  }
}
.td-fach-note {
  padding: 0;
  width: 12em;
  span {
    background-color: #dcdcdc !important;
    text-align: center;
    width: 10em;
    display: block;
    vertical-align: middle;
    margin:0 auto;
    &.e-note {
      background-color: white !important;
      width: 17em;
      margin: 0;
      padding: 0;
    }
  }
}
.td-padding-extra {
  padding: 2mm 0 2mm 0;
}
.fachgruppe-margin {
  padding-top: 0.3em;
}
.fett {
  font-weight: bolder;
}
.lernfeld-lernbereich {
  padding-left: 2em;
}
.lernbereich {
  padding-left: 20mm;
}
.klein {
  font-size: smaller;
}
.eng {
  line-height: 1.3em;
}
.grau *{
  color: rgb(100,100,100) !important;
}
ul.dashes {
  margin: 0;
  list-style-type: none;
  padding-left: 1em;
  li:before {
    content: "–";
    position: absolute;
    margin-left: -1em;
  }
}
.schulnummer {
  text-align: right;
}
.wasserzeichen {
  position: absolute;
  opacity: 0.5;
  z-index: 99;
  color: red;
  font-size: 96pt;
}

.seitenlogo {
  position: absolute;
  bottom: 10mm;
  left: 10mm;
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
table.fixed {
  table-layout: fixed;
  table th, table td {
    overflow: hidden;
  }
}

@media print {
  * {
    //alles was Farbe hat mitdrucken
    -webkit-print-color-adjust: exact;
  }
  page {
    page-break-after: always;
    margin: 0px;
    border: none;
    margin-bottom: 0px;
    -webkit-box-shadow:initial;
    -moz-box-shadow:initial;
    box-shadow: initial;
  }
  @page {
    page[size="A4"][orientation="portrait"] {
      size: A4 portrait;
    }
    page[size="A4"][orientation="landscape"] {
      size: A4 landscape;
    }
    page[size="A3"][orientation="portrait"] {
      size: A3 portrait;
    }
    page[size="A3"][orientation="landscape"] {
      size: A3 landscape;
    }
  }
}