mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2024-12-29 10:56:10 +00:00
Tidying up CSS
This commit is contained in:
parent
3f64c56ec8
commit
f41312248c
0
LICENSE → .github/LICENSE
vendored
0
LICENSE → .github/LICENSE
vendored
0
README.md → .github/README.md
vendored
0
README.md → .github/README.md
vendored
|
|
@ -32,18 +32,15 @@ nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: rgba(16, 16, 16, 0.6);
|
background-color: #101010;
|
||||||
color: #e8e3e3;
|
color: #e8e3e3;
|
||||||
-webkit-backdrop-filter: blur(5rem) saturate(200%);
|
|
||||||
backdrop-filter: blur(5rem) saturate(200%);
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: width 0.4s cubic-bezier(0.86, 0, 0.07, 1), background-color 0.3s ease-in-out;
|
transition: width 0.4s cubic-bezier(0.86, 0, 0.07, 1), background-color 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
nav:hover {
|
nav:hover {
|
||||||
width: 25rem;
|
width: 30rem;
|
||||||
background-color: #101010;
|
|
||||||
}
|
}
|
||||||
nav:hover a span {
|
nav:hover a span {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -100,11 +97,12 @@ main {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
main header {
|
main header {
|
||||||
margin: 0 0 -10vh 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40vh;
|
height: 40vh;
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
|
border-radius: 8px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
main header img {
|
main header img {
|
||||||
|
|
@ -116,6 +114,8 @@ main header img {
|
||||||
filter: blur(0.5rem);
|
filter: blur(0.5rem);
|
||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
-o-object-position: center 0px;
|
||||||
|
object-position: center 0px;
|
||||||
}
|
}
|
||||||
main header span {
|
main header span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -131,7 +131,7 @@ main header span {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 1rem;
|
bottom: 0.75rem;
|
||||||
right: -3rem;
|
right: -3rem;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -151,7 +151,7 @@ main header span {
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
margin: 0 0 0 3.5rem;
|
margin: 0 0 0 3.5rem;
|
||||||
padding: 1rem;
|
padding: 0.5rem;
|
||||||
width: auto;
|
width: auto;
|
||||||
min-height: 90vh;
|
min-height: 90vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -160,7 +160,6 @@ main header span {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #e8e3e3;
|
color: #e8e3e3;
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
|
|
@ -294,20 +293,20 @@ main header span {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 12rem);
|
height: auto;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #121212;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.image__container img {
|
.image__container img {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 75vh;
|
||||||
-o-object-fit: contain;
|
-o-object-fit: contain;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
-o-object-position: center;
|
-o-object-position: center;
|
||||||
|
|
|
||||||
|
|
@ -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"}
|
||||||
|
|
@ -60,9 +60,8 @@ nav {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
background-color: rgba($black300, 0.6);
|
background-color: $black300;
|
||||||
color: $white100;
|
color: $white100;
|
||||||
backdrop-filter: blur(5rem) saturate(200%);
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 2;
|
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;
|
transition: width 0.4s cubic-bezier(.86,0,.07,1), background-color 0.3s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
width: 25rem;
|
width: 30rem;
|
||||||
|
|
||||||
background-color: $black300;
|
|
||||||
|
|
||||||
a span {
|
a span {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -149,13 +146,14 @@ main {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin: 0 0 calc((10vh) * -1) 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40vh;
|
height: 40vh;
|
||||||
|
|
||||||
background-color: $black200;
|
background-color: $black200;
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
@ -170,6 +168,7 @@ main {
|
||||||
filter: blur(0.5rem);
|
filter: blur(0.5rem);
|
||||||
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
object-position: center 0px;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -191,7 +190,7 @@ main {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 1rem;
|
bottom: 0.75rem;
|
||||||
right: -3rem;
|
right: -3rem;
|
||||||
|
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
|
|
@ -218,7 +217,7 @@ main {
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
margin: 0 0 0 3.5rem;
|
margin: 0 0 0 3.5rem;
|
||||||
padding: 1rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
width: auto;
|
width: auto;
|
||||||
min-height: 90vh;
|
min-height: 90vh;
|
||||||
|
|
@ -231,7 +230,6 @@ main {
|
||||||
|
|
||||||
background-color: $black100;
|
background-color: $black100;
|
||||||
color: $white100;
|
color: $white100;
|
||||||
border-radius: $rad $rad 0 0;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -389,15 +387,15 @@ main {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 12rem);
|
height: auto;
|
||||||
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
border-radius: calc($rad / 2);
|
border-radius: calc($rad / 2);
|
||||||
background-color: $black200;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
@ -406,7 +404,7 @@ main {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 75vh;
|
||||||
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 100) {
|
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 200) {
|
||||||
loadMore(imageIndex);
|
loadMore(imageIndex);
|
||||||
imageIndex += 10;
|
imageIndex += 10;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<script src="https://unpkg.com/phosphor-icons" defer></script>
|
<script src="https://unpkg.com/phosphor-icons" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<nav id="navRoot">
|
||||||
<div>
|
<div>
|
||||||
<a href="{{ url_for('home') }}"><i class="ph-house-line-fill"></i><span>Home</span></a>
|
<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>
|
<a href=""><i class="ph-package-fill"></i><span>Groups</span></a>
|
||||||
|
|
@ -31,13 +31,15 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
let navToggle = true;
|
||||||
|
|
||||||
document.onscroll = function() {
|
document.onscroll = function() {
|
||||||
document.querySelector('header').style.opacity = `${1 - window.scrollY / 169}`;
|
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) {
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||||
document.querySelector('#topButton').style.opacity = 1;
|
document.querySelector('#topButton').style.opacity = 1;
|
||||||
document.querySelector('#topButton').style.right = "1rem";
|
document.querySelector('#topButton').style.right = "0.75rem";
|
||||||
} else {
|
} else {
|
||||||
document.querySelector('#topButton').style.opacity = 0;
|
document.querySelector('#topButton').style.opacity = 0;
|
||||||
document.querySelector('#topButton').style.right = "-3rem";
|
document.querySelector('#topButton').style.right = "-3rem";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue