cv-online/scss/section.scss

$ArticleMaxWidth: 800px;


@keyframes UnwrapHeader {
	from {
		margin-left: 40%;
		margin-right: 40%;
	}
	to {
		margin-left: 40px;
		margin-right: 40px;
	}
}


$ArticleBorderWidth: 4px;
$ArticlePadding: 20px;
$ArticleBorderRadius: 20px;
$ArticleFinalMargins: #{$ArticleBorderWidth + $ArticleBorderRadius};


#section-main{
	position: absolute;
	left: 20px;
	right: 0px;
	transition-property: left;
	transition-duration: 0.2s;
	transition-delay: 0.1s;


	header{
		margin: 30px 30px 60px 30px;

		color: $ClrWhite;

		font-family: $FontText;
		font-style: italic;
		font-size: 1.3em;
		text-align: center;
		text-shadow: 0 0 10px $ClrTrueBlack;

		border-style: solid;
		border-width: 0 5px 0 5px;
		border-color: $ClrWhite;
		border-radius: 20px;

		overflow: hidden;
		animation: UnwrapHeader 1.5s;
		white-space: nowrap;
	}

	article{
		margin-left: auto;
		margin-right: auto;
		padding: $ArticlePadding;
		padding-top: 0;
		margin-bottom: 10vh;

		color: $ClrBlack;

		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		border-style: solid;
		border-width: $ArticleBorderWidth;
		border-color: #FFFFFF;
		border-radius: $ArticleBorderRadius;
		background-color: $ClrWhite;

		max-width: $ArticleMaxWidth;

		font-size: 0.6em;
		line-height: 1.3em;

		transition-property: border-radius;
		transition-duration: 0.5s;



		h1:first-child{
			margin: 0;
			margin-top: -$ArticleFinalMargins;
			margin-left: -$ArticleFinalMargins;
			width: 100%;
			padding: 0.6em $ArticleFinalMargins;

			border-radius: $ArticleBorderRadius $ArticleBorderRadius 0 0;


			background-color: #215D9C;
			background-image: url("#{$ImgPath}/ui/stripes.png");


			color: $ClrWhite;
			font-family: $FontTitle;
			font-weight: bold;
			font-size: 1.7em;
			text-align: left;

			letter-spacing: -0.03em;


			transition-property: border-radius;
			transition-duration: 0.5s;


			img{
				border: none;
				float: right;
				display: inline;
				margin: auto;
				height: 1em;
			}
		}

		h2{
			margin: 0 -$ArticleFinalMargins;
			padding: 0.4em $ArticleFinalMargins;
			border-top: 1px solid #d5d5d5;
			border-bottom: 1px solid #d5d5d5;

			background-image: url("#{$ImgPath}/ui/stripes.png");

			color: $ClrText;
			font-family: $FontTitle;
			// padding-left: 10px;
			font-size: x-large;

			a, a:visited{
				color: $ClrText;
			}
		}


		h3
		{
			color: $ClrText;
			font-family: $FontTitle;
			margin-bottom: 0.5em;
			font-size: large;
		}

		h4
		{
			color: $ClrText;
			font-family: $FontTitle;
			margin-bottom: 0.5em;
		}

		hr
		{
			margin-left: -$ArticleFinalMargins;
			width: calc(100% + #{$ArticleFinalMargins + $ArticleFinalMargins});

			border-style: solid;
			border-width: 5px;
			border-color: rgba(0,0,0,0.1);
			border-radius: 1px;
		}

		blockquote{
			position:relative;

			padding: 1px 20px;
			margin: 10px;

			background-color: #eee;
			border-radius: 0.2em;
			font-style: italic;
		}
		blockquote:after {
			display:block;
			position:absolute;

			content:"";

			width: 0;
			top: 20px;
			left: -20px;

			border-style: solid;
			border-width: 15px 20px 15px 0;
			border-color: transparent #eee;
		}

		img, video, iframe{
			&:not(.raw){
				max-height: 150px;
				width: auto;
				vertical-align: middle;

				margin: 5px;

				border: 3px solid black;
				border-radius: 2px;
				transition-property: border-color;
				transition-duration: 0.3s;
			}
		}
		video{
			width: 80%;
			height: auto;
		}

		a{
			color: #215D9C;
			img:hover, video:hover, iframe:hover{
				border-color: #808080;
			}
		}
		a:hover{
			color: #2B7ACC;
		}

		strong{
			color: #2F3A45;
		}

		img.nostyle{
			height: auto;
			border: 0;
			border-radius: 0;
		}

		img.fill{
			width: 100%;
			height: auto;
		}

		.cinema{
			margin: 0;
			margin-left: -$ArticleFinalMargins;
			width: 100%;
			padding: 10px $ArticleFinalMargins;

			border-top: 1px solid #000;
			border-bottom: 1px solid #000;

			color: $ClrWhite;

			background-image: url("#{$ImgPath}/ui/bgdark.png");
			box-shadow: 0px 0px 10px #000 inset;


			img, video, iframe{
				border-width: 1px;
				border-radius: 0;

				margin: -1px 4px 0px -5px;
				border-left: 5px solid #000;
				border-right: 5px solid #000;
			}
			a{
				img:hover, video:hover, iframe:hover{
					border-color: #333;
				}
			}

			&:first-child{
				margin-top: -$ArticleFinalMargins;
				padding-top: 20px;
				border-radius: 20px 20px 0 0;
			}
			&:last-child{
				margin-bottom: -$ArticleFinalMargins;
				padding-bottom: 20px;
				border-radius: 0 0 20px 20px;
			}

		}

		code {
			font-size: 0.9em;
			padding: 0 0.3em;
			border-radius: 5px;

			background-color: #ccc;
			border: 1px solid #888;
		}

		// Code blocks
		pre {
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
			padding: 0.5em;
			border-radius: 10px;

			display: inline-block;
			vertical-align: top;
			margin: 0;

			color: $ClrWhite;

			background-image: url("#{$ImgPath}/ui/bggray.png");
			box-shadow: 0px 0px 10px #000 inset;

			code, pre{
				margin-bottom: 0px;

				padding: 0;
				border-radius: 0;
				background: none;
				border: none;
			}
		}
		> pre{
			display: block;
			margin-left: -$ArticleFinalMargins;
			width: 100%;
			padding: 10px $ArticleFinalMargins;
		}




		figure{
			margin-bottom: 15px;

			figcaption{
				font-size: small;
				font-style: italic;
				text-decoration: none;
			}
		}
		ul{
			margin-top: 5px
		}
		li{
			margin-bottom: 5px;
		}
		a.gototop{
			display: block;
			width: 100%;
			height: 28px;
			background-image: url(#{$ImgPath}/ui/gototop.svg);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}

		.center{
			text-align: center;
		}


		.canvas-container {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			justify-content: space-around;

			> * {
				align-self: center;
			}
		}

		img.avatar {
			border: none;
			border-radius: 100%;
			max-height: 200px;
		}
	}





}

body[data-width="small"]{
	#section-main{
		article{
			max-width: 100%;
			border-radius: 0;
			h1{
				border-radius: 0;
			}
		}
	}
}

.spacer
{
	height: 60vh;
}