First commit

1 files changed, 154 insertions, 0 deletions

diff --git a/page.scss b/page.scss
new file mode 100755
index 0000000..b278fc4
--- /dev/null
+++ b/page.scss
@@ -0,0 +1,154 @@
+// Page stylesheet for my main start page
+// The license is included in the file LICENSE.txt
+// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/
+// Copyright © 2022 Milan Mišić (eMail: fridolin.411@web.de)
+
+.list {
+	/*border: 3px solid transparent;
+	border-radius: 5px;
+	backdrop-filter: blur(1px) brightness(80%);
+	padding: 5px;
+	//width: max-content;*/
+
+	display: flex;
+	justify-content: center;
+
+	div {
+		border: 3px solid transparent;
+	        border-radius: 5px;
+		backdrop-filter: blur(1px) brightness(90%);
+		// Apple WebShit compatibility
+		-webkit-backdrop-filter: blur(1px) brightness(80%);
+	        padding: 5px; 
+	
+		.TOOD {
+			text-align: center;
+			backdrop-filter: none;
+			// Apple WebShit compatibility
+			-webkit-backdrop-filter: none;
+		}
+	}
+}
+
+.grid {
+        // Displays the selection grid
+	
+	letter-spacing: 0px;
+        display: flex;
+	justify-content: center;
+
+        display: grid;
+        grid-template-columns: 300px 300px 300px;
+        gap: 20px;
+	
+	// Make the titles be good
+	.title {
+		border: transparent solid 10px;
+		border-radius: 5px;
+		text-align: center;
+		//backdrop-filter: blur(1px) brightness(100%);
+		padding: 3px;
+		max-width: auto;
+		height: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		// Add animations woo yeah
+		transition: 0.2s ease-in-out;
+		&:hover {
+			backdrop-filter: blur(5px) brightness(80%);
+			// Apple WebShit compatibility
+			-webkit-backdrop-filter: blur(5px) brightness(80%);
+			transition: 0.2s ease-in-out;
+		}
+
+	}
+
+        .image {
+                // Gives the grid images a nice round edge
+                border-radius: 5px;
+		overflow: hidden;
+		height: 150px;
+		width: auto;
+	}
+
+        img {
+                // Sets the images for the individual boxes properly
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+		display: flex;
+		justify-content: center;
+        }
+}
+
+.center_img {
+
+	overflow: hidden;
+	width: 400px;
+	padding: 5px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 5px;
+	}
+}
+
+.license {
+        // Small information text about the licenses used
+	
+	//font: 14px 'Varela';
+        display: flex;
+	justify-content: center;
+        width: auto;
+
+        div {
+		
+
+		// Secondary div to *really* center this div
+
+                border: 3px solid transparent;
+                border-radius: 5px;
+                padding: 5px;
+                max-width: max-content;
+                text-align: center;
+		backdrop-filter: blur(1px) brightness(80%);
+		// Apple WebShit compatibility
+		-webkit-backdrop-filter: blur(1px) brightness(80%);
+		transition: 0.2s ease-in-out;
+                
+		&:hover {
+                        backdrop-filter: blur(5px) brightness(60%);
+			// Apple WebShit compabilitity
+			-webkit-backdrop-filter: blur(5px) brightness(60%);
+                        transition: 0.2s ease-in-out;
+                }
+
+                a {
+                        // Colours the link white for readability
+
+                        color: white;
+                }
+        }
+}
+
+.text {
+	border: transparent solid 10px;
+	border-radius: 5px;
+	padding: 3px;
+	backdrop-filter: blur(5px) brightness(80%);
+	// Apple WebShit compatibility
+	-webkit-backdrop-filter: blur(5px) brightness(80%);
+	color: white;
+}
+
+// Font settings
+.title {
+	font-size: 18px;
+}