Add new page

_site/computer-science-blog/css/main.css

@@ -0,0 +1,76 @@
+/* Reading School 2018, CSS */
+.carousel-inner {
+	height: 250px;
+	border-radius: 4px;
+    overflow: hidden auto;
+    margin-bottom: 15px;
+    background: rgba(10,10,10,0.2);
+}
+
+/* place carousel indicators between the two buttons (next & previous) */
+.presentation-flexbox {
+  	display: -webkit-box;
+  	display: -moz-box;
+  	display: -ms-flexbox;
+  	display: -webkit-flex;
+  	display: flex;
+  	margin-bottom: 15px;
+
+  	-webkit-flex-flow: row wrap;
+  	flex-flow: row wrap;
+	justify-content: space-between;
+}
+.carousel-indicators {
+	order: 1;
+}
+.presentation-button-left {
+	order: 0;
+}
+.presentation-button-right {
+	order: 2;
+}
+
+.carousel-inner .item {
+	height: 100%;
+	width: 100%;
+	border: none;
+	padding: 15px;
+	overflow: auto;
+}
+
+.carousel-indicators li {
+	border: 1px solid var(--mdc-theme-secondary);
+	margin-top: 12px;
+}
+.carousel-indicators .active {
+	background-color: var(--mdc-theme-secondary);
+}
+
+/* revert changes made by Bootstrap */
+.carousel-indicators {
+	margin: 0;
+	position: initial;
+	width: auto;
+	z-index: inherit;
+}
+
+/* add side margins depending on screen size */
+#main-content {
+	text-align: left;
+	margin: 20px 15%;
+}
+@media screen and (max-width: 1000px) {
+	#main-content {
+		margin: 20px 10%;
+	}
+}
+@media screen and (max-width: 800px) {
+	#main-content {
+		margin: 20px 5%;
+	}
+}
+@media screen and (max-width: 600px) {
+	#main-content {
+		margin: 20px;
+	}
+}