main.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <style type="text/css">
  2. @font-face {
  3. font-family: 'ola';
  4. src: url("fonts/ola/olasans-webfont.eot");
  5. src: url("fonts/ola/olasans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/ola/olasans-webfont.woff2") format("woff2"), url("fonts/ola/olasans-webfont.woff") format("woff"), url("fonts/ola/olasans-webfont.ttf") format("truetype");
  6. font-weight: normal;
  7. font-style: normal; }
  8. /* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 17, 2016 */
  9. @font-face {
  10. font-family: 'vollkorn';
  11. src: url("fonts/volkorn/vollkorn-bold-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bold-webfont.woff") format("woff");
  12. font-weight: bold;
  13. font-style: normal; }
  14. @font-face {
  15. font-family: 'vollkorn';
  16. src: url("fonts/volkorn/vollkorn-bolditalic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bolditalic-webfont.woff") format("woff");
  17. font-weight: bold;
  18. font-style: italic; }
  19. @font-face {
  20. font-family: 'vollkorn';
  21. src: url("fonts/volkorn/vollkorn-italic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-italic-webfont.woff") format("woff");
  22. font-weight: normal;
  23. font-style: italic; }
  24. @font-face {
  25. font-family: 'vollkorn';
  26. src: url("fonts/volkorn/vollkorn-regular-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-regular-webfont.woff") format("woff");
  27. font-weight: normal;
  28. font-style: normal; }
  29. body {
  30. font-family: 'vollkorn',sans-serif;
  31. max-width: 100%;
  32. height: 100%;
  33. margin: 30px 0;
  34. font-size: 14px; }
  35. h1, h2, h3, h4, h5, h6 {
  36. font-family: 'ola',sans-serif;
  37. margin: 0; }
  38. #main h1 {
  39. font-size: 2em;
  40. white-space: nowrap; }
  41. #main h2 {
  42. font-size: 1.3em;
  43. white-space: nowrap;
  44. font-size: 1rem; }
  45. p {
  46. font-size: 1.5em; }
  47. ul {
  48. margin: 0;
  49. padding: 0; }
  50. li {
  51. list-style: none; }
  52. img {
  53. max-width: 100%; }
  54. code {
  55. padding: 5px; }
  56. header#header {
  57. width: 18%;
  58. min-width: 200px;
  59. position: fixed;
  60. padding: 0 1rem; }
  61. header#header h1 {
  62. font-size: 1rem;
  63. margin-bottom: 1em; }
  64. header#header #menu li p {
  65. margin-top: 0;
  66. margin-bottom: 0.2em;
  67. font-size: 1em; }
  68. header#header #menu li a {
  69. color: #000; }
  70. div.user {
  71. position: relative;
  72. width: 55%;
  73. max-width: 800px;
  74. margin: 0 auto 5rem auto;
  75. overflow-x: hidden; }
  76. div.user header {
  77. min-height: 200px; }
  78. div.user .content {
  79. padding: 1rem;
  80. width: 100%;
  81. margin-bottom: 2rem;
  82. box-sizing: border-box; }
  83. div.user section.images ul {
  84. width: 105%; }
  85. div.user section.images ul li {
  86. line-height: 0;
  87. margin: 1rem 0; }
  88. div.user section.images ul li img {
  89. max-width: 100%;
  90. width: 100%; }
  91. div.user section.sources {
  92. padding: 1rem;
  93. box-sizing: 100%;
  94. width: 100%; }
  95. div.user section.sources a {
  96. color: #000; }
  97. div.user p img {
  98. border: none; }
  99. div.user video {
  100. max-width: 100%;
  101. max-height: 600px; }
  102. @media print {
  103. @page {
  104. margin: 1cm;
  105. size: A4; }
  106. div.user {
  107. width: 17cm;
  108. margin-top: 2cm;
  109. page-break-after: always;
  110. max-width: 19cm; }
  111. div.user p, div.user code {
  112. page-break-inside: avoid; }
  113. div.user section.images ul li {
  114. page-break-inside: avoid;
  115. margin-top: 1cm; } }
  116. </style>