From a3ace459ad663f9fd01624320e7c0ec7a132cdce Mon Sep 17 00:00:00 2001 From: mm Date: Tue, 29 Aug 2023 14:44:14 +0200 Subject: First commit --- page.scss | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100755 page.scss (limited to 'page.scss') 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; +} -- cgit v1.2.3