|
@@ -2,45 +2,11 @@
|
|
|
import ExampleComponent from "../components/ExampleComponent.svelte";
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .centerer {
|
|
|
- flex: 1 1 0%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .button {
|
|
|
- margin-top: 2.5rem;
|
|
|
- padding: 0.75rem;
|
|
|
- border-radius: 0.5rem;
|
|
|
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
|
- transition-property: background-color, color, box-shadow;
|
|
|
- transition-duration: 200ms;
|
|
|
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- .button:focus {
|
|
|
- outline: 0;
|
|
|
- box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .button-pink {
|
|
|
- color: #97266D;
|
|
|
- background-color: #FED7E2;
|
|
|
- }
|
|
|
-
|
|
|
- .button-pink:hover, .button-pink:focus {
|
|
|
- background-color: #FBB6CE;
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<div class="centerer">
|
|
|
- <ExampleComponent
|
|
|
- title="🌐 Sapper with TypeScript and GraphQL project base"
|
|
|
- paragraph="This is an example route and component to make sure everything's working." />
|
|
|
-
|
|
|
- <a class="button button-pink" href="/graphql">Check out the GraphQL playground!</a>
|
|
|
-</div>
|
|
|
+<div class="flex items-center justify-center bg-gray-900 h-screen w-screen">
|
|
|
+ <div class="bg-gray-800 rounded-sm text-center px-20 py-5 shadow-lg">
|
|
|
+ <h1 class="text-white text-4xl font-light">Login</h1>
|
|
|
+ <p class="px-10 py-5">
|
|
|
+ <a class="text-sm bg-blue-700 hover:bg-blue-800 p-2 text-white hover:text-gray-100 rounded-sm" href="#">Login with Discord</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+</div>
|