2022_WEBSITE_kosmopolit/styles/global.css

/*---------------------------------------------*/
/*GLOBAL VARIABLE*/
:root {
	--gap-unit: 10px;
	--max-screen: 1500px;
	--base-font-size: 10px;
	--nav-height: 40px;
	--base-back-color: white;
	--aside-left-width: 200px;
	--aside-right-width: 200px;
	--aside-margin: 30px;
}


/*DEBUG*/
/* borders on mains elements of pages for debugging*/
body * {
	/*
	border: 1px solid red;
	*/
}
body > *, body > .container_main > * {
	/*
	border: 1px solid red;
	*/
}

/*---------------------------------------------*/
/*global settings*/
/*
	 ---------------------    --------------------- 
	'         NAV         '  '         NAV         '
	'---------------------'  '---------------------'
	' ------------------- '  ' S '    PATHS    ' A '
	''     CONTAINER     ''  ' U '    -----    ' S '
	'' ---  -------  --- ''  ' M '    TITLE    ' I '
	''' S '' PATHS '' A '''  ' M '    -----    ' D '
	''' U '' ----- '' S '''  ' A '      M      ' E '
	''' M '' TITLE '' I '''  ' R '      A      ' S '
	''' M '' ----- '' D '''  ' Y '      I      '   '
	''' A ''   M   '' E '''  '   '      N      '   '
	''' R ''   A   '' S '''  '---------------------'
	''' Y ''   I   ''   '''  '        FOOTER       '
	'''   ''   N   ''   '''  '---------------------'
	'''---''-------''---'''
	''-------------------''
	'        FOOTER       '
	'---------------------'

	navbar			->	nav
	container		->	.container_main
		summary		->	aside.page_content
		main		->	main
			paths	->	.page.path
			title	->	.page_title
		asides		->	aside.relative_content
	footer			->
*/

/*ALL*/
/* by default all elements are verticals*/
body, body * {
	display: flex;
	flex-direction: column;
}
body aside, body main {
	padding: calc(var(--gap-unit) / 2);
}

/*HTML*/
html {
	scroll-behavior: smooth;
	/*default font-size for rem*/
	font-size: var(--base-font-size);
}

/*BODY*/
/* the page is designed for a maximum screen*/
body {
	max-width: var(--max-screen);
	margin: auto;
	background-color: var(--base-back-color);
}

/*NAVBAR*/
body nav {
	flex-direction: row;
	/*we have to set the height to use the height % for childs elements*/
	height: var(--nav-height);
	border-bottom: 1px solid lightgrey;
	background-color: var(--base-back-color);
	z-index: 10;
}
body nav * {
	display: flex;
	flex-direction: row;
	margin: auto;
	max-height: 100%;
}
/* nav_left is used for links to pages*/
body nav .nav_left  {
	/*we have to set the height to use the height % for childs elements*/
	height: 100%;
	margin-left: 0px;
	margin-right: auto;
}
/* nav_right is used for actions such as connection, search or language*/
body nav .nav_right {
	height: 100%;
	margin-left: auto;
	margin-right: 0px;
}
/* appearence on hover and click*/
body nav a {
	/*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
	padding: 0px calc(var(--gap-unit) * 1.5);
	height: 100%;
}
body nav a:hover, body nav a:focus {
	background-color: lightgrey;
}
/* special settings for the logo*/
body nav a.nav_logo {
	padding: 0px;
	width: var(--aside-left-width);
}

/*CONTAINER*/
body .container_main {
	flex-direction: row;
}

/*ASIDE LEFT SUMMARY*/
/* aside left is for page table of content */
body aside.page_content {
	top: calc(var(--nav-height) + 1px);
	height: calc(100vh - var(--nav-height));
	margin-right: var(--aside-margin);
	/*
	border-right: 1px solid lightgrey;
	*/
}
/* asides elements only have width if they have a child*/
body aside.page_content .table_box {
	width: calc(var(--aside-left-width) - 2 * var(--aside-margin));
	margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
	/*border-box so changing padding has no effect on total width*/
	box-sizing: border-box;
	padding: var(--gap-unit);
	/*for style*/
	/*
	*/
	border-left: 1px solid lightgrey;
}
/*to put space between elements*/
body aside.page_content .table_box > * {
	margin-bottom: var(--gap-unit);
}

/*MAIN*/
body main {
}
body main > * {
	margin: var(--gap-unit) 0px;
}
body main h1 {
	padding: 70px 0px;
	border-bottom: 1px solid lightgrey;
}
body main h2 {
	padding: 10px 0px;
	border-bottom: 1px solid lightgrey;
}

/*PATH*/
body main .page_path {
	margin-top: 0px;
}

/*TITLE*/
body main .page_title {
	position: relative;
}
body main .page_title .date {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

/*ASIDE RIGHT RELATIVES*/
/* aside right is for links to relatives content*/
body aside.relative_content {
}
/* asides elements only have width if they have a child*/
body aside.relative_content *:first-child {
	width: var(--aside-right-width);
}
body aside.relative_content .relative_box {
	margin: var(--aside-margin);
	padding: var(--gap-unit);
	width: fit-content;
	border: 1px solid lightgrey;
}
body aside.relative_content .box_name {
	border-bottom: 1px solid lightgrey;
	padding-bottom: var(--gap-unit);
}
body aside.relative_content .relative_box > * {
	margin-bottom: var(--gap-unit);
}

/*FOOTER*/
body footer.page_footer {
	height: 100px;
	border-top: 1px solid lightgrey;
}


/*---------------------------------------------*/
/*DESIGN KEYWORDS*/
/* contains elements oriented vertically (default) or horizontally*/
.vertical {
	flex-direction: column;
}
/* horizontal is only in web version, it becomes vertical in mobile design*/
.horizontal {
	flex-direction: row;
}
/* self position of elements to the left, the right, or the center of their container*/
.right {
	margin-right: 0px;
	margin-left: auto;
	text-align: right;
}
.left > * {
	margin-left: 0px;
}
.center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.sticky {
	position: -webkit-sticky; /*safari*/
	position: sticky;
	top: 0;
}