[Design] Responsive buttons. Minor fixes.
This commit is contained in:
		| @@ -2,6 +2,10 @@ $cloud_width: 200px; | |||||||
|  |  | ||||||
| @import 'fonts'; | @import 'fonts'; | ||||||
|  |  | ||||||
|  | * { | ||||||
|  | 	box-sizing: border-box; | ||||||
|  | } | ||||||
|  |  | ||||||
| body { | body { | ||||||
| 	margin: 0; | 	margin: 0; | ||||||
| 	padding: 0; | 	padding: 0; | ||||||
| @@ -34,7 +38,7 @@ body { | |||||||
| 		display: flex; | 		display: flex; | ||||||
| 		align-items: end; | 		align-items: end; | ||||||
| 		.wrapper { | 		.wrapper { | ||||||
| 			height: 100%; | 			min-height: 70vh; | ||||||
| 			align-items: flex-end; | 			align-items: flex-end; | ||||||
| 			padding-bottom: 3em; | 			padding-bottom: 3em; | ||||||
| 		} | 		} | ||||||
| @@ -44,8 +48,9 @@ body { | |||||||
| 		background-image: linear-gradient(#26a4c4, #afdde9); | 		background-image: linear-gradient(#26a4c4, #afdde9); | ||||||
| 		min-height: 30vh; | 		min-height: 30vh; | ||||||
| 		.wrapper { | 		.wrapper { | ||||||
|  | 			min-height: 30vh; | ||||||
| 			align-items: center; | 			align-items: center; | ||||||
| 			justify-content: space-between; | 			justify-content: space-around; | ||||||
| 			flex-direction: column; | 			flex-direction: column; | ||||||
| 			padding-top: 3em; | 			padding-top: 3em; | ||||||
| 			height: 100%; | 			height: 100%; | ||||||
| @@ -69,7 +74,7 @@ body { | |||||||
| 				} | 				} | ||||||
| 			} | 			} | ||||||
| 			footer { | 			footer { | ||||||
| 				margin-top: 3em; | 				margin-top: 1em; | ||||||
| 				padding: 0 1em; | 				padding: 0 1em; | ||||||
| 				text-align: center; | 				text-align: center; | ||||||
| 				color: #292929; | 				color: #292929; | ||||||
| @@ -107,6 +112,21 @@ h1 { | |||||||
| 	text-align: center; | 	text-align: center; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @media (max-width: 600px) { | ||||||
|  | 	body { | ||||||
|  | 		.bottom { | ||||||
|  | 			.wrapper { | ||||||
|  | 				.content { | ||||||
|  | 					.button { | ||||||
|  | 						font-size: 1em; | ||||||
|  | 						padding: 0.5em; | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  |  | ||||||
|  |  | ||||||
| @keyframes move_right { | @keyframes move_right { | ||||||
| 	from {left: 0} | 	from {left: 0} | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user