styles.css

/* Responsive design. Add sidebar when using smaller screen. */

/* Side bar animations */
@keyframes slide_in
{
	0%   {left: -250px;}
	100% {left: 0px;}
}

@keyframes slide_out
{
	0%   {left: 0px;}
	100% {left: -250px;}
}

@keyframes highlight_tab
{
	0%   {background-color: #cccccc;}
	100% {background-color: #d9d9d9;}
}

@keyframes full_rotation
{
	0%   {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}

/* For toggling collapsedOldContent */
@keyframes fade_in
{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fade_out
{
	0%   {opacity: 1;}
	100% {opacity: 0;}
}

/* Mobile layout */
@media screen and (max-width: 800px)
{
	.PCLayout
	{
		display: none;
	}
	
	#contentCover
	{
		height: 60px;
		position: fixed;
		z-index: 1;
	}
	
	#topSpan
	{
		position: sticky;
		top: 49px;
	}
	
	#topCoverDiv
	{
		margin-top: -13px;
		z-index: 1;
	}
	
	#sidebarDiv
	{
		position: fixed;
		left: -250px;
		top: 0;
		background-color: #cccccc;
		width: 250px;
		height: 100%;
		
		/* Prevents the horizontal rule from drawing over the sidebar. */
		z-index: 3;
		
		overflow-x: hidden;
		overflow-y: scroll;
		
		/* Hide sidebar scrollbar in Firefox */
		scrollbar-width: none;
		
		/* Hide sidebar scrollbar in Edge */
		-ms-overflow-style: none;
	}
	
	/* Hide scrollbar in webkit browsers (Chrome, Safari, Opera) 
	   w3schools.com/howto/howto_css_hide_scrollbars.asp */
	#sidebarDiv::-webkit-scrollbar 
	{
		display: none;
	}
	
	#hamburger
	{
		display: block;
		width: 50px;
		cursor: pointer;
	}
	
	#hamburgerSpan
	{
		display: inline-block;
		position: sticky;
		top: 8px;
		
		z-index: 2;
	}
	
	#hamburgerSpan:hover
	{
		background-color: #d9d9d9;
	}
	
	.sidebarTab
	{
		/* Aligns sidebar tabs to the left of the screen. */
		margin-left: -8px;
		padding-left: 6px;
		
		width: 250px;
		
		display: inline-block;
		background-color: #cccccc;
	}
	
	.sidebarTab:hover
	{
		background-color: #d9d9d9;
		cursor: pointer;
		
		animation-name: highlight_tab;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}
	
	.sidebarLabel
	{
		width: 165px;
		display: inline-block;
	}
	
	.sidebarIcon
	{
		width: 60px;
		float: left;
		margin-top: 12px;
		margin-right: 10px;
	}
	
	#sidebarX
	{
		width: 50px;
		display: block;
		cursor: pointer;
	}
	
	/* Allows the sidebar's exit button to remain always accessible,
	   no matter the scroll. */
	#sidebarXDiv
	{
		background-color: #cccccc;
		position: sticky;
		top: 0;
	}
	
	#sidebarXSpan
	{
		display: inline-block;
		margin: 8px;
	}
	
	#sidebarXSpan:hover
	{
		background-color: #d9d9d9;
		
		animation-name: highlight_tab;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}
	
	#tabSpan
	{
		display: inline-block;
		margin: 8px;
		margin-top: 0px;
	}
	
	#darkModeDiv
	{
		display: inline-block;
		position: sticky;
		top: 8px;
		
		z-index: 2;
	}
	
	#darkModeButton
	{
		width: 50px;
	}
	
	#cookieSpan
	{
		margin-top: 10px;
	}
}

/* Regular layout for larger screens. */
@media screen and (min-width: 800px)
{
	.mobileLayout
	{
		display: none;
	}
	
	#contentCover
	{
		height: 12px;
		position: sticky;
		margin-bottom: -12px;
	}
	
	.sidebar
	{
		display: none;
	}

	#headImg
	{
		display: block;
		margin: auto;
		width: 150px;
	}
	
	/* This is used solely to position the horizonal rule correctly. */
	#topSpan
	{
		position: relative;
	}

	#topCoverDiv
	{
		position: relative;
		top: -5px;
	}

	#topRuleDiv
	{
		position: relative;
		top: -9px;
	}
	
	#darkModeButton
	{
		float: right;
		width: 60px;
	}
	
	#navDiv
	{
		display: flex;
		flex-direction: row;
		/* flex-wrap: no-wrap; */
		justify-content: center;
		
		position: sticky;
		top: 11px;
		
		background-color: #eeeeee;
		
		/* Keeps the navigation bar from resizing when hovering over signs. */
		height: 100px;
	}
	
	.navSignDiv
	{
		/* Allows assets to be aligned to the signs. */
		position: relative;
	}
	
	.navSignDiv:hover
	{
		cursor: pointer;
	}
	
	.navSign
	{
		width: 200px;
		margin-top: -27px;
	}
	
	/* Allows navigation signs to fall when hovered over. */
	.navSignDiv:hover .navSign
	{
		margin-top: -17px;
	}
	
	.navLabel
	{
		width: 115px;
		display: inline;
		
		/* Align the asset to the sign. */
		position: absolute;
		top: 10px;
		left: 62px;
	}
	
	/* Allows label to fall with signs on nav bar. */
	.navSignDiv:hover .navLabel
	{
		top: 20px;
	}
	
	.navIcon
	{
		width: 50px;
		display: inline;
		
		/* Align the asset to the sign. */
		position: absolute;
		top: 15px;
		left: 15px;
	}
	
	/* Allows icon to fall with signs on nav bar. */
	.navSignDiv:hover .navIcon
	{
		top: 25px;
	}
	
	/* The more sign need special treatment. */
	#moreIcon
	{
		left: 25px;
	}
	
	#moreLabel
	{
		left: 72px;
	}
	
	#moreMenu
	{
		display: none;
		
		width: 200px;
		height: 500px;
		background-color: #cccccc;
		
		/* Appears wherever the mouse is clicked. */
		position: fixed;
	}
	
	.moreMenuAnchor
	{
		display: block;
	}
	
	/* Making sure links don't change colour. */
	.moreMenuAnchor:visited, .moreMenuAnchor:link
	{
		color: black;
	}
	
	.moreMenuLink
	{
		position: relative;
		
		cursor: pointer;
	}
	
	.moreMenuLink:hover
	{
		background-color: #d9d9d9;
		
		animation-name: highlight_tab;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}
	
	.moreMenuIcon
	{
		width: 25px;
		margin-top: 5px;
		margin-left: 5px;
	}
	
	.moreMenuText
	{
		position: absolute;
		top: 8px;
	}
	
	#loadingCircle
	{
		position: relative;
		/* top: -100px; */
	}
}

/* General styling */
body
{
	background-color: #eeeeee;
	
	font-family: "Merriweather", serif;
}

.collapsedOldHeader
{
	font-size: 1.5em;
}

.collapsedOldButton
{
	/* Creating manual buttons is fun */
	width: 35px;
	height: 35px;
	padding-left: 15px;
	padding-bottom: 2px;
	
	border: 2px solid #bbbbbb;
	
	float: right;
	transition: background-color 0.2s;
	
	font-size: 2em;
	
	/* w3schools.com/howto/howto_css_disable_text_selection.asp */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* Internet Explorer */
	user-select: none; /* Default */
}

.collapsedOldButton:hover
{
	background-color: #d9d9d9;
	cursor: pointer;
}

.collapsedOldContent
{
	display: none;
	opacity: 0;
	
	animation-duration: 0.5s;
}

.newsImage
{
	max-width: 50%;
	display: block;
	margin: auto;
	
	border: 5px solid grey;
}

#contentCover
{
	width: 98%;
	background-color: #eeeeee;
	top: 0;
}

/* Used so that the navigation sign boards hide behind the horizontal rule. */
#topCoverDiv
{
	height: 30px;
	display: block;
	background-color: #eeeeee;
	
	z-index: 1;
}

#topRuleDiv
{
	/* This positions the div so that the horizontal rule goes at the edge of the top cover. */
	height: 20px;
	margin-top: -10px;
	z-index: 2;

	/* This is the actual horizontal rule image. */
	background-image: url("assets/hrule.png");
	background-repeat: repeat-x;
	background-position: top;
}

#darkModeButton
{
	position: relative;
	z-index: 2;
	cursor: pointer;
}

#darkModeButton:hover
{
	background: #d9d9d9;
}

/* For the landing page. */
#defaultMessage
{
	text-align: center;
}

/* For any pages. */
#content
{	
	width: 80%;
	margin: auto;
	margin-top: 30px;
}

#content p
{
	text-align: left;
	text-indent: 25px;
	line-height: 1.7;
}

#content a
{
	text-decoration: none;
}

#content a:hover
{
	text-decoration: underline;
}

#content a:visited
{
	color: #2299cc;
}

#loadingCircle
{
	width: 10%;
	display: block;
	margin: auto;
	
	animation-name: full_rotation;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
}

#cookieBannerDiv
{
	display: flex;
	
	justify-content: space-around;
	align-items: center;
	
	position: fixed;
	bottom: 0;
	left: 0;
	
	height: 100px;
	background: #cccccc;
	z-index: 2;
}

#cookieSpan
{
	display: inline-block;
	/* background: red; */
	position: relative;
	left: 25px;
}

#cookieButton
{
	font-size: 1.5em;
	background: yellow;
	margin-left: 20px;
	padding: 15px;
	height: 20px;
	
	border-radius: 5px;
	cursor: pointer;
	
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

footer
{
	text-align: center;
	font-size: 0.75em;
	color: #888888;
}

.lightText
{
	color: #444444;
}

/* Fixing transition between mobile and PC... partially */
@media screen and (width: 800px)
{
	.PCLayout
	{
		display: none;
	}
	
	.mobileLayout
	{
		display: none !important;
	}
	
	#contentCover
	{
		height: 12px;
		position: sticky;
		margin-bottom: -12px;
	}
	
	#darkModeButton
	{
		display: none;
	}
	
	.sidebar
	{
		display: none;
	}
	
	#headImg
	{
		display: none;
	}
}