feat: modernize CSS with flexbox and smooth transitions

Author: sanjana2505006

assets/stylesheets/screen.css

@@ -104,6 +104,21 @@ body.guides .column-header a:hover {
 	float: right;
 }
 
+/* Modern Grid System - Flexbox Fallback for older browsers, but mostly Flex now */
+.two-columns,
+.three-columns,
+.four-columns,
+.five-columns,
+.golden-ratio {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.column {
+	box-sizing: border-box;
+}
+
 ul, ol {
 	padding-left: 20px;
 }
@@ -142,6 +157,7 @@ body.home {
 
 a {
 	text-decoration: underline;
+	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
 
 .column-header a {
@@ -189,6 +205,16 @@ button {
 	border: none;
 	padding: 10px;
 	font-size: 18px;
+	transition: background-color 0.2s ease, transform 0.1s ease;
+	cursor: pointer;
+}
+
+button:hover {
+	background-color: #fdb658;
+}
+
+button:active {
+	transform: translateY(1px);
 }
 
 th {
@@ -332,9 +358,17 @@ code {
 .book {
 	background-color: #ffffff;
 	border: 1px solid #f5f5f5;
-	-webkit-box-shadow: 0 8px 6px -6px #ccc;
-	-moz-box-shadow: 0 8px 6px -6px #ccc;
 	box-shadow: 0 8px 6px -6px #ccc;
+	transition: box-shadow 0.3s ease;
+}
+
+.quote:hover,
+.post:hover,
+.user-group:hover,
+.question:hover,
+.event:hover,
+.book:hover {
+	box-shadow: 0 10px 12px -6px #bbb;
 }
 
 .quote,
@@ -785,8 +819,6 @@ div.search {
 	padding-left: 28px;
 	font-size: 18px;
 	line-height: 28px;
-	-webkit-box-shadow: 0 8px 6px -6px #ccc;
-	-moz-box-shadow: 0 8px 6px -6px #ccc;
 	box-shadow: 0 8px 6px -6px #ccc;
 	margin-top: 50px;
 	margin-bottom: 50px;
@@ -1070,8 +1102,6 @@ article.quote h2 {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	-webkit-box-shadow: 1px 4px 4px #ccc;
-	-moz-box-shadow: 1px 4px 4px #ccc;
 	box-shadow: 1px 4px 4px #ccc;
 	margin: 0 auto;
 	font-family: 'Archia-Light', 'Roboto-Light', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -1348,6 +1378,10 @@ article.quote h2 {
 	footer {
 		overflow: auto;
 	}
+	footer .content {
+		display: flex;
+		justify-content: center;
+	}
 	.partners-nav li {
 		text-align: right;
 	}
@@ -1381,8 +1415,6 @@ article.quote h2 {
 	background-color: #feb672;
 	color: #ffffff;
 	border: none !important;
-	-webkit-box-shadow: 1px 2px 2px #ccc;
-	-moz-box-shadow: 1px 2px 2px #ccc;
 	box-shadow: 1px 2px 2px #ccc;
 }
 article.guide {
@@ -1420,8 +1452,6 @@ article.guide aside button.btn-large {
 	width: 100%;
 	height: 60px;
 	margin: 20px 0;
-	-webkit-box-shadow: 1px 2px 2px #ccc;
-	-moz-box-shadow: 1px 2px 2px #ccc;
 	box-shadow: 1px 2px 2px #ccc;
 	border: none;
 }