Skip to content

Commit

Permalink
feat: use swiper (PAIN)
Browse files Browse the repository at this point in the history
  • Loading branch information
@r3tr0ananas
r3tr0ananas committed Apr 7, 2024
1 parent a857a68 commit 28d6f5a
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 128 deletions.
27 changes: 0 additions & 27 deletions src/about.html
View file

This file was deleted.

51 changes: 0 additions & 51 deletions src/devs.html
View file

This file was deleted.

92 changes: 66 additions & 26 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,76 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/output.css">
<link rel="stylesheet" href="./static/gradient_bg.css">
<link rel="stylesheet" href="./static/swiper.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>


</head>

<body class="bg-neutral-950 selection:bg-gray-800 font-spacegrotesk font-medium text-white">
<body class="bg-neutral-950 selection:bg-gray-800 font-spacegrotesk font-medium text-white overflow-hidden relative h-full">

<div class="absolute flex place-content-center items-center overflow-hidden inset-0">
<div class="gradient"></div>
</div>

<nav id="nav-placeholder"></nav>

<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
<img style="filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.5));" class="select-none w-72 lg:w-96 mx-auto -my-8 lg:-my-10" src="./static/mov-transparent.svg">
<h2 style="text-shadow: black 1px 1px 4px;" class="my-5 lg:my-7 sm:text-sm text-nowrap md:text-lg lg:text-2xl">
Watch
<a class="text-blue-300 hover:text-blue-400 font-extrabold transition-colors duration-300" href="https://github.com/topics/mov-cli-plugin">
everything
</a>
from your terminal.
</h2>

<div class="flex flex-row gap-5 justify-center items-center">
<a href="https://github.com/mov-cli/mov-cli">
<button class="select-none bg-slate-100 text-stone-950 px-3 py-2
hover:scale-110 transition-all duration-300 rounded-xl text-xl lg:text-2xl font-extrabold">
Install
</button>
</a>

<a href="./devs.html">
<button class="select-none bg-slate-100 text-stone-950 px-3 py-2
hover:scale-110 transition-all duration-300 rounded-xl text-xl lg:text-2xl font-extrabold">
Developers
</button>
</a>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide top-[12%] lg:top-1/3">
<img style="filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.5));" class="select-none w-72 lg:w-96 mx-auto -my-8 lg:-my-10" src="./static/mov-transparent.svg">
<h2 style="text-shadow: black 1px 1px 4px;" class="my-5 lg:my-7 sm:text-sm text-nowrap md:text-lg lg:text-2xl">
Watch
<a class="text-blue-300 hover:text-blue-400 font-extrabold transition-colors duration-300" href="https://github.com/topics/mov-cli-plugin">
everything
</a>
from your terminal.
</h2>

<div class="flex flex-row gap-5 justify-center items-center">
<a href="https://github.com/mov-cli/mov-cli">
<button class="select-none bg-slate-100 text-stone-950 px-3 py-2
hover:scale-110 transition-all duration-300 rounded-xl text-xl lg:text-2xl font-extrabold">
Install
</button>
</a>
</div>
</div>

<div class="swiper-slide">
<div class="relative top-[12%] lg:top-1/3 -translate-y-1/3 text-center">
<p class="hidden lg:block font-bold text-5xl">Developers</p>

<div class="flex justify-center items-center md:flex-row flex-col mt-12 md:gap-12 gap-6">
<a href="https://github.com/Poseidon444">
<img src="https://avatars.githubusercontent.com/u/87462580" class="rounded-full mx-auto" width="100">
<p class="mt-5">Poseidon444</p>
<p>Author</p>
</a>

<a href="https://github.com/r3tr0ananas">
<img src="https://avatars.githubusercontent.com/u/132799819" class="rounded-full mx-auto" width="100">
<p class="mt-5">R3tr0Ananas</p>
<p>Maintainer</p>
</a>

<a href="https://github.com/THEGOLDENPRO">
<img src="https://avatars.githubusercontent.com/u/66202304" class="rounded-full mx-auto" width="100">
<p class="mt-5">THEGOLDENPRO</p>
<p>Maintainer</p>
</a>
</div>
</div>
</div>
</div>
</div>

<footer id="footer-placeholder"></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
$.get("./templates/nav.html", function(data){
$("#nav-placeholder").replaceWith(data);
Expand All @@ -54,6 +83,17 @@ <h2 style="text-shadow: black 1px 1px 4px;" class="my-5 lg:my-7 sm:text-sm text-
$.get("./templates/footer.html", function(data){
$("#footer-placeholder").replaceWith(data);
});

const swiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 10,
direction: "vertical",
mousewheel: {
enabled: true
},
centeredSlides: true,
});

</script>

</body>
Expand Down
13 changes: 12 additions & 1 deletion src/static/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,15 @@
}


@layer base {}

@layer components {
.swiper-slide {
@apply bg-neutral-950 selection:bg-gray-800 font-spacegrotesk font-medium text-white;
}
}

@layer base {
nav {
@apply selection:bg-gray-800 font-spacegrotesk font-medium text-white;
}
}
27 changes: 27 additions & 0 deletions src/static/swiper.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.swiper-container {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
background: transparent;

height:100%;
width: 100%;
margin:auto;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
46 changes: 23 additions & 23 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.html"],
theme: {
extend: {
fontFamily: {
"spacegrotesk": ["Space Grotesk"]
},
colors: {
aGrey: {
DEFAULT: "#505050",
100: "#606060",
300: "#505050",
500: "#404040",
700: "#2d2d2d",
800: "#282828"
content: ["./src/**/*.html"],
theme: {
extend: {
fontFamily: {
"spacegrotesk": ["Space Grotesk"]
},
colors: {
aGrey: {
DEFAULT: "#505050",
100: "#606060",
300: "#505050",
500: "#404040",
700: "#2d2d2d",
800: "#282828"
},
aDark: {
DEFAULT: "#0e1114",
100: "#2e3741",
500: "#191e23",
800: "#0e1114"
}
},
aDark: {
DEFAULT: "#0e1114",
100: "#2e3741",
500: "#191e23",
800: "#0e1114"
}
},
},
}
}
}
}

This comment has been minimized.

Sign in to view

Copy link
@r3tr0ananas

r3tr0ananas Apr 7, 2024

Author Member

I don't know what happend here but alright ig

0 comments on commit 28d6f5a

Please sign in to comment.