ola4doc/sys/scss/main.scss

@font-face {
    font-family: 'ola';
    src: url('fonts/ola/olasans-webfont.eot');
    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');
    font-weight: normal;
    font-style: normal;

}

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 17, 2016 */
@font-face {
    font-family: 'vollkorn';
    src: url('fonts/volkorn/vollkorn-bold-webfont.woff2') format('woff2'),
         url('fonts/volkorn/vollkorn-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'vollkorn';
    src: url('fonts/volkorn/vollkorn-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/volkorn/vollkorn-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'vollkorn';
    src: url('fonts/volkorn/vollkorn-italic-webfont.woff2') format('woff2'),
         url('fonts/volkorn/vollkorn-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'vollkorn';
    src: url('fonts/volkorn/vollkorn-regular-webfont.woff2') format('woff2'),
         url('fonts/volkorn/vollkorn-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family: 'vollkorn',sans-serif;
	max-width: 100%;
	height:100%;
	margin: 30px 0;
	font-size:14px;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'ola',sans-serif;
	margin:0;
}

#main{

	h1, h2{
		// border: 2px solid #000;
		// padding: 5px;
		// display: inline-block;
		// position: absolute;
	}

	h1{
		// text-transform: uppercase;
		// padding: 5px 1rem;
		// top: 100px;
    font-size: 2em;
		white-space: nowrap;
	}

	h2{
		// top:0;
    font-size: 1.3em;
		white-space: nowrap;
		// padding: 5px 1rem;
		font-size: 1rem;
	}
}


p{
	font-size: 1.5em;
}

ul{margin:0; padding:0;}
li{
	list-style: none;
}

img{max-width:100%;}

code{
	// border: 1px solid #000;
	padding: 5px;
}


header#header{
	width: 18%;
	min-width: 200px;
	position:fixed;
	padding: 0 1rem;
	h1{
		font-size: 1rem;
		// border-bottom: 2px solid #000;
		margin-bottom: 1em;
	}
	#menu{
		li{
			p{
				margin-top: 0;
				margin-bottom:0.2em;
				font-size: 1em;
			}
			a{

				color: #000;
			}
		}
	}
}

div.user{
	position:relative;
	width: 55%;
	max-width: 800px;
	margin:0 auto 5rem auto;
  overflow-x: hidden;
  // outline: 1px solid red;

  header{
  	min-height: 200px;
  }

	.content{
		// border: 2px solid #000;
		padding: 1rem;
		width: 100%;
		margin-bottom: 2rem;
	}
	section.images ul{
		width: 105%;
		li{
			line-height: 0;
			margin: 1rem 0;
			// border: 2px solid #000;
			img{
				max-width: 100%;
				width: 100%;
			}
		}
	}
	p{
		img{
			border:none;
		}
	}

  video{
    max-width: 100%;
    max-height: 600px;
  }

}

@media print {
	@page {
		margin: 1cm;
		size: A4;
	}

	// div {

	// }
	div.user{
		width: 17cm;
		margin-top: 2cm;
		page-break-after: always;
		max-width: 19cm;
		p, code {
			// page-break-after: always;
			page-break-inside: avoid;
		}
		section.images ul{
			li{
				page-break-inside: avoid;
				margin-top: 1cm;
			}
		}
	}


}