MyRedland/public/css/styles.scss

$background: url(../img/background-redland.png);
$background-page: #F5FEFD;
$color-page: #666362;
$color: #2f4f4f;
$background_div: #DC143C;
$color_div: #191326;
$background-secondary: #635283;
$color-secondary: #8eea6d;
$accent-secondary: #fde68f;
$primary-secondary: #590e11;

html {
    height: 100%;
}

body {
	p,h1,h2,h3,h4,a {
		font-family: 'arial';
	}
	margin: 0;
	padding: 0;
	overflow: hidden;
	min-height: 100%;
	width: 100%;
	height: 100%;
	div.site-wrapper {
		display: table;
	        width: 100%;
		height: 100%; /* For at least Firefox */
		min-height: 100%;
		color: $color;
		background: $background;
		filter: blur(10px);
		background-size: cover;
		overflow: hidden;
	}
	div.page-contents {
		position: absolute;
		position: fixed;
		overflow-y: scroll;
		z-index: 2;
		background: $background-page;
		color: $color-page;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		img {
			max-width: 100%;
			margin-left: auto;
			margin-right: auto;
			display: block;
		}
		table {
			color: $background_div;
			background: $color_div;
			border: 3px solid $background_div;
			border-collapse: collapse;
		}
		th,td {
			border: 3px solid $background_div;
			border-collapse: collapse;
			padding-right: 10px;
			margin: 0;
		}
		th,td {
			font-size: 15px;
		}
		b,p,li {
			font-size: 40px;
		}
		h3 {
			font-size: 47px;
		}
		h2 {
			font-size: 53px;
		}
		h1 {
			font-size: 60px;
		}
		div.description {
			input {
				display: block;
			}
			word-wrap: break-word;
			div.suscribirse-rss {
				img {
					max-height: 300px;
				}
			}
			padding: 1%;
			margin-left: 3%;
			margin-right: 3%;
			margin-bottom: 1%;
			margin-top: 10%;
			div.articles {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				a {
					width: 100%;
					display:block;
					text-decoration: none;
					text-overflow: ellipsis;
					margin-bottom: 10px;
					article {
						word-wrap: break-word;
						width: 90%;
						p,h4,h3,h2 {
							margin: 0px;
						}
						b,p {
							font-size: 38px;
						}
						h4 {
							font-size: 44px;
						}
						h3 {
							font-size: 47px;
						}
						h2 {
							font-size: 53px;
						}
						h1 {
							font-size: 60px;
						}
						padding: 5%;;
						padding-top: 1%;
						background: $background_div;
						color: $color_div;
						box-shadow: 8px 8px 1px 0px #002E63;
						border: 3px solid black;
						&:hover {
							background: $background_div;
							color: $color_div;
						}
						p.date {
							font-size: 20px;
							text-align: right;
						}
						p.author {
							font-size: 30px;
							text-align: right;
						}
					}
				}
			}
			a.suscribe-category-rss {
				background: $background_div;
				width: 40px;
				height: 40px;
				padding: 10px;
				border-radius: 5px;
				display: inline-block;
				img {
					width: 40px;
					height: 40px;
				}
			}
		}
		nav > a > img.open-menu-icon {
			width: 30px;
			height: 30px;
			padding-top: 15px;
		}
		nav > a > img.index-image-menu {
			vertical-align: middle;
			width: 50px;
			padding-bottom: 10px;
			padding-top: 10px;
		}
		nav.desktop {
			background: $background_div;
			color: $color_div;
			width: 100%;
			display: none;
			a {
				vertical-align: middle;
				background: $background_div;
			}
		}
		nav {
			overflow: auto;
			display: block;
			font-size: 35px;
			margin: 0px;
			a.go-to-index img {
				margin-top: 5%;
			}
			a {
				padding-left: 10px;
				padding-right: 10px;
				height: 100%;
				text-decoration: none;
				color: $color_div;
				margin: 0;
				&:hover {
					background: $color_div;
					color: $background_div; 
				}
				&.selected {
					background: $color_div;
					color: $background_div; 
				}
			}
			a.menu-expand {
				padding-bottom: 9px;
			}
		}

		nav.mobile-shortcuts {
			position: fixed;
			display: flex;
			width: 100%;
			background: $background_div;
			height: 60px;
			a {
				height: 100%;
				width: (100% / 6);
			}
			div {
				width: (100% * 4 / 6);
			}
		}
		nav.mobile-foldable {
			display: none;
			background: $background_div;
			color: $color_div;
			a {
				//background: $color_div;
				//color: $background_div;
				display: block;
			}
		}
		nav.mobile-foldable.show {
			display: block;
		}

		h1 {
			text-align: center;
			font-size: 50px;
		}
		
		div.footer {
			p,h1,h2,h3,h4,a {
				font-size: initial;
			}
			a.suscribe-category-rss {
				padding: 7px;
			}
			a.suscribe-category-rss,a.suscribe-category-rss > img {
				width: 20px;
				height: 20px;
			}
		}
	}

}

@media (min-width: 1100px) {
	body {
		div.page-contents {
			th,td {
				font-size: 40px;
			}
			nav.mobile-foldable,nav.mobile-foldable.show {
				display: none;
			}
			div.description {
				margin-left: 10%;
				margin-right: 10%;
				margin-top: auto;
			}
			nav.desktop {
				max-height: 60px;
				display: block;
				height: auto;
				a {
					display: table-cell;
					img.index-image-menu {
						padding-top: 6px;
						padding-bottom: 6px;
						max-height: 45px;
					}
				}
			}
			nav.mobile-shortcuts {
				display: none;
			}
		}
	}
}

@media (min-width: 1222px) {
	body {
		div.page-contents {
			div.description {
				margin-top: auto;
				div.articles {
					a {
						width: 45%;
						margin-left: 5%;
					}
				}
			}
		}
	}
}