miniflux-legacy/themes/hello/scss/_queries.scss

@import "compass/layout/sticky-footer";

@media only screen and (max-width: 480px) {
	#login-page {

		section {
			&.page {
				margin: 5px;
				width: auto;
			}
		}

		form {
			margin: 0 auto;
			padding: 10px;
			[type="text"],
			[type="password"] {
				width: 220px;
			}
		}
	}
	body {
		> header {

		}
	}
	section {
		&.page {
			
		}
	}
}

@media only screen  and (min-width: 481px) and (max-width: 980px) {

}
@media only screen  and (max-width: 980px) {
	body {
		> header {
			top: 5px;
			left: 20px;
			bottom: inherit;
			width: auto;
			z-index: 999;
			background-color: transparent !important;
		}
		> .page {
			width: auto !important;
			position: relative;
		}
	}
	// Menu 
	header {
		nav {
			width: auto;

			margin: auto;

			.logo {
				display: none;
			}
			> ul {
				margin: auto
			}

			li {
				@include inline-block;
				padding: 5px 0;

				&:first-child {
					display: none;
				}

				a {
					display: block;
					color: $theme-background-highlight;

					&[href*="action=more"] {
						width: 35px;
						height: 35px;
						line-height: 35px;
						@include flat-box($theme-background-highlight, $button-background-grey, 5px);

						&:before {
							height: 100%;
							width: 100%;
							line-height: inherit;
						}
					}
					&:before {
						color: $theme-background-highlight;
					}
				}
			}
		}
	}

	.page {
		.page-header {
			h2 {
				visibility: hidden;
			}

			ul {
				li {
					a,
					a:after {
						width: 35px;
						height: 35px;
						line-height: 35px;
					}
				}
			}
		}
	}

	// Menu mobile 
	.menu-more {
		margin-top: 50px;

		li {
			display: block;

			@include flat-box($theme-background-highlight, $button-background-grey, 5px);
			margin: 10px auto;

			a {
				display: block;
				// height: 100%;
				padding: 10px 20px;
				text-decoration: none;
				width: 100%;
			}
		}
	}
	.items {
		article {
			padding: {
				left: 10px;
				right: 10px;
			}
			.preview {
				display: none;
			}
		}

		.item {
			&-menu {
				display: block;

				@include pie-clearfix;
				li {
					&:first-child {
						display: block;
						float: left;
					}
					&:last-child {
						float: right;
						&:before {
							display: none;
							visibility: hidden;
						}
					}
					.mark,
					.mark:before {
						height: 25px;
						text-align: center;
						width: 25px;
					}
					.mark {
						@include flat-box($theme-background-highlight, $button-background-grey, 5px);
						display: block;
						position: relative;
						overflow: hidden;
						text-indent: -999px;	
						
						&:before {
							position: absolute;
							top: 0;
							left: 0;
							line-height: 25px;
							z-index: 999;
							text-indent: 0;
						}						
					}
				}
			}
		}
	}
	#current-item {
		padding-top: 35px;

		nav {
			&.top {
				display: none;
			}
			&.bottom {
				display: block;
			}
		}
		> h1 {
			float: none;
		}

		iframe {
			width: 100%;
		}
	}
	form {
		label {
			display: block;

			&[for*="form-"] {
				width: auto;
			}
		}
	}
	.alert {
		&.alert-normal {
			ul {
				margin: 10px 5px;
			}
		}
	}

	.hide-mobile {
		display: none !important;
	}
	.hide-desktop {
		display: block;
	}
}

@media only screen and (max-width: 980px) {

}