Tidying up CSS

This commit is contained in:
Michał 2022-12-19 15:07:41 +00:00
parent 3f64c56ec8
commit f41312248c
7 changed files with 29 additions and 30 deletions

View file

View file

View file

@ -32,18 +32,15 @@ nav {
position: fixed;
top: 0;
left: 0;
background-color: rgba(16, 16, 16, 0.6);
background-color: #101010;
color: #e8e3e3;
-webkit-backdrop-filter: blur(5rem) saturate(200%);
backdrop-filter: blur(5rem) saturate(200%);
box-sizing: border-box;
z-index: 2;
overflow: hidden;
transition: width 0.4s cubic-bezier(0.86, 0, 0.07, 1), background-color 0.3s ease-in-out;
}
nav:hover {
width: 25rem;
background-color: #101010;
width: 30rem;
}
nav:hover a span {
opacity: 1;
@ -100,11 +97,12 @@ main {
box-sizing: border-box;
}
main header {
margin: 0 0 -10vh 0;
margin: 0;
padding: 0;
width: 100%;
height: 40vh;
background-color: #121212;
border-radius: 8px;
box-sizing: border-box;
}
main header img {
@ -116,6 +114,8 @@ main header img {
filter: blur(0.5rem);
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 0px;
object-position: center 0px;
}
main header span {
position: absolute;
@ -131,7 +131,7 @@ main header span {
margin: 0;
padding: 0.25rem;
position: fixed;
bottom: 1rem;
bottom: 0.75rem;
right: -3rem;
font-size: 3rem;
display: flex;
@ -151,7 +151,7 @@ main header span {
.app {
margin: 0 0 0 3.5rem;
padding: 1rem;
padding: 0.5rem;
width: auto;
min-height: 90vh;
position: relative;
@ -160,7 +160,6 @@ main header span {
gap: 1rem;
background-color: #151515;
color: #e8e3e3;
border-radius: 8px 8px 0 0;
box-sizing: border-box;
z-index: 1;
overflow: unset;
@ -294,20 +293,20 @@ main header span {
margin: 0;
padding: 0;
width: 100%;
height: calc(100vh - 12rem);
height: auto;
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
overflow: hidden;
border-radius: 4px;
background-color: #121212;
box-sizing: border-box;
}
.image__container img {
margin: auto;
padding: 0;
max-width: 100%;
max-height: 100%;
max-height: 75vh;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;

View file

@ -1 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

View file

@ -60,9 +60,8 @@ nav {
top: 0;
left: 0;
background-color: rgba($black300, 0.6);
background-color: $black300;
color: $white100;
backdrop-filter: blur(5rem) saturate(200%);
box-sizing: border-box;
z-index: 2;
@ -70,9 +69,7 @@ nav {
transition: width 0.4s cubic-bezier(.86,0,.07,1), background-color 0.3s ease-in-out;
&:hover {
width: 25rem;
background-color: $black300;
width: 30rem;
a span {
opacity: 1;
@ -149,13 +146,14 @@ main {
box-sizing: border-box;
header {
margin: 0 0 calc((10vh) * -1) 0;
margin: 0;
padding: 0;
width: 100%;
height: 40vh;
background-color: $black200;
border-radius: $rad;
box-sizing: border-box;
@ -170,6 +168,7 @@ main {
filter: blur(0.5rem);
object-fit: cover;
object-position: center 0px;
}
span {
position: absolute;
@ -191,7 +190,7 @@ main {
padding: 0.25rem;
position: fixed;
bottom: 1rem;
bottom: 0.75rem;
right: -3rem;
font-size: 3rem;
@ -218,7 +217,7 @@ main {
.app {
margin: 0 0 0 3.5rem;
padding: 1rem;
padding: 0.5rem;
width: auto;
min-height: 90vh;
@ -231,7 +230,6 @@ main {
background-color: $black100;
color: $white100;
border-radius: $rad $rad 0 0;
box-sizing: border-box;
z-index: 1;
@ -389,15 +387,15 @@ main {
padding: 0;
width: 100%;
height: calc(100vh - 12rem);
height: auto;
position: sticky;
top: 0;
display: flex;
overflow: hidden;
border-radius: calc($rad / 2);
background-color: $black200;
box-sizing: border-box;
@ -406,7 +404,7 @@ main {
padding: 0;
max-width: 100%;
max-height: 100%;
max-height: 75vh;
object-fit: contain;
object-position: center;

View file

@ -11,7 +11,7 @@
<script>
let imageList = [];
let imageIndex = 0;
function loadMore(startIndex, amount = 10) {
for (let i = startIndex; i < startIndex + amount; i++) {
if (i < imageList.length) {
@ -47,7 +47,7 @@
});
$(window).scroll(function() {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 100) {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 200) {
loadMore(imageIndex);
imageIndex += 10;
}

View file

@ -13,7 +13,7 @@
<script src="https://unpkg.com/phosphor-icons" defer></script>
</head>
<body>
<nav>
<nav id="navRoot">
<div>
<a href="{{ url_for('home') }}"><i class="ph-house-line-fill"></i><span>Home</span></a>
<a href=""><i class="ph-package-fill"></i><span>Groups</span></a>
@ -31,13 +31,15 @@
</main>
<script>
let navToggle = true;
document.onscroll = function() {
document.querySelector('header').style.opacity = `${1 - window.scrollY / 169}`;
document.querySelector('header').style.height = `calc(40vh + ${window.scrollY / 5}px)`;
document.querySelector('header img').style.cssText = `object-position: center ${window.scrollY / 2}px`;
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
document.querySelector('#topButton').style.opacity = 1;
document.querySelector('#topButton').style.right = "1rem";
document.querySelector('#topButton').style.right = "0.75rem";
} else {
document.querySelector('#topButton').style.opacity = 0;
document.querySelector('#topButton').style.right = "-3rem";