237 γραμμές
		
	
	
		
			2.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			237 γραμμές
		
	
	
		
			2.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| body
 | |
| {
 | |
| 	padding: 0;
 | |
| 	margin: 0;
 | |
| 	font-family: Verdana;
 | |
| 	background-color: white;
 | |
| 	display: grid;
 | |
| 	min-height: 100vh;
 | |
| 	grid-template-rows: auto 1fr auto;
 | |
| 	grid-template-areas: "nav nav"
 | |
| 						 "main side"
 | |
| 						 "footer footer";
 | |
| 	grid-template-columns: 1fr auto;
 | |
| }
 | |
| 
 | |
| header
 | |
| {
 | |
| 	margin: 0;
 | |
| 	paddin: 0;
 | |
| }
 | |
| 
 | |
| h1, h2, h3
 | |
| {
 | |
| 	margin: 0;
 | |
| 	padding: 0;
 | |
| 	display: inline;
 | |
| }
 | |
| 
 | |
| nav
 | |
| {
 | |
| 	padding: 0px;
 | |
| 	margin: 0px;
 | |
| 	display: flex;
 | |
| 	background-color: #062463;
 | |
| 	justify-content: space-between;
 | |
| 	flex-wrap: wrap;
 | |
| 	grid-area: nav;
 | |
| 
 | |
| }
 | |
| 
 | |
| nav ul
 | |
| {
 | |
| 	background-color: #062463;
 | |
| 	color: white;
 | |
| 	margin: 0;
 | |
| 	padding: 0;
 | |
| 	list-style-type: none;
 | |
| 	display: flex;
 | |
| 	align-items: center;
 | |
| 	flex-wrap: wrap;
 | |
| }
 | |
| 
 | |
| nav li
 | |
| {
 | |
| 	margin: 0;
 | |
| 	padding: 0;
 | |
| }
 | |
| 
 | |
| nav a, nav a:visited
 | |
| {
 | |
| 	padding: 10px;
 | |
| 	text-decoration: none;
 | |
| 	color: white;
 | |
| 	display: block;
 | |
| 	font-weight: bold;
 | |
| 	text-align: center;
 | |
| 	line-height: 100%;
 | |
| }
 | |
| 
 | |
| nav a:hover, nav a:focus
 | |
| {
 | |
| 	padding: 10px;
 | |
| 	text-decoration: none;
 | |
| 	background-color: white;
 | |
| 	color: #062463;
 | |
| 	display: block;
 | |
| 	font-weight: bold;
 | |
| }
 | |
| 
 | |
| a, a:visited
 | |
| {
 | |
| 	color: #062463;;
 | |
| }
 | |
| 
 | |
| a:hover
 | |
| {
 | |
| 	background-color: #062463;
 | |
| 	color: white;
 | |
| }
 | |
| 
 | |
| #content
 | |
| {
 | |
| 	padding: 15px;
 | |
| 	font-family: monospace;
 | |
| 	font-size: 14pt;
 | |
| 	flex: 1;
 | |
| 	grid-area: main
 | |
| }
 | |
| 
 | |
| #sidebar
 | |
| {
 | |
| 	grid-area: side;
 | |
| }
 | |
| 
 | |
| #sidebar ul
 | |
| {
 | |
| 	list-style-type: none;
 | |
| }
 | |
| 
 | |
| #sidebar a, a:visited
 | |
| {
 | |
| 	color: #062463;
 | |
| }
 | |
| 
 | |
| #sidebar a:hover
 | |
| {
 | |
| 	background-color: #062463;
 | |
| 	color: white;
 | |
| }
 | |
| 
 | |
| #content a, a:visited
 | |
| {
 | |
| 	color: #062463;
 | |
| }
 | |
| 
 | |
| #content a:hover
 | |
| {
 | |
| 	background-color: #062463;
 | |
| 	color: white;
 | |
| }
 | |
| 
 | |
| footer
 | |
| {
 | |
| 	width: 100%;
 | |
| 	display: block;
 | |
| 	color: white;
 | |
| 	background-color: #062463;
 | |
| 	font-weight: bold;
 | |
| 	grid-area: footer;
 | |
| }
 | |
| 
 | |
| footer ul
 | |
| {
 | |
| 	background-color: #062463;
 | |
| 	margin: 0px;
 | |
| 	padding: 0px;
 | |
| 	display: flex;
 | |
| 	justify-content: space-between;
 | |
| 	flex-wrap: wrap;
 | |
| 	align-items: center;
 | |
| }
 | |
| 
 | |
| footer li
 | |
| {
 | |
| 	margin: 0;
 | |
| 	padding: 0;
 | |
| 	display: inline-block;
 | |
| 	line-height: 45px;
 | |
| 	color: white;
 | |
| 	font-weight: bold;
 | |
| 	text-align: center;
 | |
| }
 | |
| 
 | |
| footer a, a:visited
 | |
| {
 | |
| 	text-decoration: none;
 | |
| 	color: white;
 | |
| 	display: inline-block;
 | |
| }
 | |
| 
 | |
| footer a:hover, ul#nav a:focus
 | |
| {
 | |
| 	text-decoration: none;
 | |
| 	color: #062463;
 | |
| 	background-color: white;
 | |
| 	display: inline-block;
 | |
| }
 | |
| 
 | |
| #cats
 | |
| {
 | |
| 	background-color: #062463;
 | |
| }
 | |
| 
 | |
| .letter_search_result
 | |
| {
 | |
| 	text-decoration: underline;
 | |
| 	font-weight: bold;
 | |
| }
 | |
| 
 | |
| ol
 | |
| {
 | |
| 	counter-reset: item;
 | |
| }
 | |
| 
 | |
| .indexlink
 | |
| {
 | |
| 	display: block;
 | |
| }
 | |
| 
 | |
| .notexists
 | |
| {
 | |
| 	color: red !important;
 | |
| 	font-weight: bold;
 | |
| }
 | |
| 
 | |
| #searchlink
 | |
| {
 | |
| 	display: none;
 | |
| }
 | |
| 
 | |
| @media screen and (orientation: portrait)
 | |
| {
 | |
| 	#sidebar
 | |
| 	{
 | |
| 		display: none;
 | |
| 	}
 | |
| 
 | |
| 	#footer li:nth-child(-n+2)
 | |
| 	{
 | |
| 		display: none;
 | |
| 	}
 | |
| 
 | |
| 	#footer li:nth-of-type(3)
 | |
| 	{
 | |
| 		text-align: center;
 | |
| 		width: 100%;
 | |
| 	}
 | |
| 
 | |
| 	#searchlink {
 | |
| 		display: inline;
 | |
| 	}
 | |
| 
 | |
| 	#searchbar {
 | |
| 		display: none;
 | |
| 	}
 | |
| }
 |