Skip to content

Commit

Permalink
Change design (blue -> gray)
Browse files Browse the repository at this point in the history
  • Loading branch information
@IgorKowalczyk
IgorKowalczyk committed Oct 10, 2023
1 parent a5d9ef2 commit c8e313b
Show file tree
Hide file tree
Showing 16 changed files with 52 additions and 99 deletions.
9 changes: 7 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
{
"deno.enable": false
}
"markdown.validate.referenceLinks.enabled": "ignore",
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"deno.enable": true
}
Binary file added public/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion src/components/Button.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ export interface Props {
const { href, body } = Astro.props;
---

<a href={href} class="group mx-auto mt-2 flex w-fit rounded-md border border-transparent bg-white/[10%] px-4 py-2 font-inter text-sm font-medium text-white duration-200 hover:bg-white/[15%] motion-reduce:transition-none">
<a href={href} class="group mt-2 flex w-fit rounded-md border border-transparent bg-white/[10%] px-4 py-2 text-sm font-medium text-white duration-200 hover:bg-white/[15%] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none">
{body}
<svg class="ml-2 mt-[2px] h-4 w-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
64 changes: 0 additions & 64 deletions src/components/Card.astro
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/Description.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ export interface Props {
const { text, id } = Astro.props;
---

<h2 id={id} class="text-center font-inter text-xl font-semibold">
<h2 id={id} class="mt-2 text-center font-inter text-lg font-medium opacity-80 md:text-xl">
{text}
</h2>
2 changes: 1 addition & 1 deletion src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ export interface Props {
const { text, id } = Astro.props;
---

<h1 id={id} class="bg-gradient-to-r from-[#a2facf] to-[#64acff] box-decoration-clone bg-clip-text text-center font-inter text-4xl text-[51px] font-semibold leading-[inherit] tracking-[-0.03em] text-fill-transparent">
<h1 id={id} class="relative mx-0 mb-2 text-center font-inter text-2xl font-black tracking-[-0.03em] text-white md:text-4xl">
{text}
</h1>
2 changes: 1 addition & 1 deletion src/components/Input.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
const props = Astro.props;
---

<input class="w-full rounded-lg border-[1px] border-white/20 bg-transparent text-white outline-none duration-200 focus:border-blue-500" {...props} />
<input class="my-2 w-full rounded-lg border-[1px] border-neutral-800 bg-transparent p-2 font-normal text-white outline-none duration-200 focus:border-neutral-700" {...props} />
12 changes: 9 additions & 3 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,15 @@ import "../styles/main.css";
</head>
<body>
<div class="flex min-h-screen items-center justify-center bg-background bg-repeat-round bg-grid-[rgba(255,255,255,0.05)]">
<div class="m-12 max-w-2xl rounded-[10px] border border-white/20 bg-background-secondary font-inter text-white shadow-main">
<div class="flex-none border-b border-slate-500/30"><div class="flex h-8 items-center space-x-1.5 px-3"><div class="h-2.5 w-2.5 rounded-full bg-slate-600"></div><div class="h-2.5 w-2.5 rounded-full bg-slate-600"></div><div class="h-2.5 w-2.5 rounded-full bg-slate-600"></div></div></div>
<div class="px-12 py-6">
<div class="absolute left-0 top-0 z-10 h-full w-full bg-[radial-gradient(circle,rgba(2,0,36,0)0,rgb(16,17,16,100%))]"></div>
<div class="z-10 m-6 min-w-0 max-w-2xl overflow-hidden rounded-[10px] border border-neutral-800 bg-background-secondary font-inter text-white shadow-main md:m-12">
<div class="flex-none border-b border-neutral-800"><div class="flex h-8 items-center space-x-1.5 px-3"><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div></div></div>
<div class="px-6 py-3 md:px-12 md:py-6">
<a href="https://github.com/igorkowalczyk/github-views" target="_blank" class="mx-auto flex w-fit" rel="noopener noreferrer">
<div class="mb-4 w-24 cursor-pointer rounded-2xl border border-neutral-800 p-3 duration-200 hover:border-neutral-600 hover:bg-neutral-800">
<img src="/logo.png" alt="Profile Views" class="noreplace mx-auto w-fit" />
</div>
</a>
<slot />
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/404.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Layout from "../layouts/Layout.astro";
<main>
<Header text="404 - Page not found" id="404" />
<Description text="This page does not exist." />
<Button href="/" body="Go back home" />
<div class="mt-2 flex items-center justify-center">
<Button href="/" body="Go back home" />
</div>
</main>
</Layout>
2 changes: 1 addition & 1 deletion src/pages/api/badge/[username].ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface QueryParams {
display?: string;
}

export const get = async function get({ params, request }: { params: { username: string }; request: Request }): Promise<Response> {
export const GET = async function GET({ params, request }: { params: { username: string }; request: Request }): Promise<Response> {
try {
const query = new URL(request.url).searchParams;
const { label, labelColor, color, style, format, display }: QueryParams = Object.fromEntries(query);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/api/json/[username].ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ type Response = {
body: string;
};

export const get = async function get({ params }: { params: { username: string } }): Promise<Response> {
export const GET = async function GET({ params }: { params: { username: string } }): Promise<Response> {
try {
const { username } = params;
if (!username) {
Expand Down
13 changes: 7 additions & 6 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ let url = "/api/badge/example";

<Layout title="Profile views - create your own badges">
<main>
<Header text="Profile views" id="main" />
<Header text="@igorkowalczyk/profile-views" id="main" />
<Description text="Create your own badge that will count views anywhere you want!" />
<div class="relative mb-6 mt-2 flex flex-row gap-2">
<div class="relative mb-6 mt-2 flex w-full flex-col items-center gap-2 text-neutral-300 md:flex-row">
<Input id="input" placeholder="Your username" type="text" />
<button id="submit" class="group rounded-md border border-transparent bg-white/[10%] px-4 py-2 font-inter text-sm font-medium text-white duration-200 hover:bg-white/[15%] motion-reduce:transition-none">
<span class="mt-[2px] inline-flex"
Expand All @@ -21,8 +21,8 @@ let url = "/api/badge/example";
>
<canvas id="confetti" class="pointer-events-none absolute right-[-100px] top-[-120px]"> </canvas>
</div>
<Header text="Examples" id="change" />
<table class="border-[2px] border-white/10 p-2" id="examples">
<Header text="Examples 🔥" id="change" />
<table class="mx-auto mt-4 p-2" id="examples">
<thead>
<tr>
<th>Style</th>
Expand Down Expand Up @@ -133,19 +133,20 @@ let url = "/api/badge/example";
examples.classList.remove("hidden");
rendered.classList.add("hidden");
description.classList.add("hidden");
header.innerText = "Examples";
header.innerText = "Examples 🔥";
} else {
examples.classList.add("hidden");
rendered.classList.remove("hidden");
description.classList.remove("hidden");
header.innerText = "Your badges";
header.innerText = "Your badges 🎉";
}
document.querySelectorAll(".pre").forEach((pre) => {
const settings = pre.innerText.split("?");
const base = settings[0].split("/").slice(0, -1).join("/") + "/" + (input.value || "example");
pre.innerText = `${base}?${settings[1]}`;
});
document.querySelectorAll("img").forEach((img) => {
if (img.classList.contains("noreplace")) return;
const settings = img.src.split("?")[1];
img.src = string + "?" + settings;
});
Expand Down
2 changes: 1 addition & 1 deletion src/styles/fonts.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;900&display=swap");
20 changes: 12 additions & 8 deletions src/styles/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
tr,
td,
th {
@apply max-w-md overflow-x-auto overflow-y-hidden border-[2px] border-white/10 p-2;
@apply max-w-md overflow-x-auto overflow-y-hidden border-[1px] border-neutral-800 p-2;
}

pre {
word-wrap: normal;
@apply select-all overflow-x-auto overflow-y-hidden break-normal rounded-sm bg-white/10 px-2 py-1;
@apply select-all overflow-x-auto overflow-y-hidden break-normal rounded-sm bg-neutral-800 px-2 py-1;
}

::selection {
Expand All @@ -15,26 +15,30 @@ pre {

* {
@apply box-border;
scrollbar-color: #08152b transparent;
scrollbar-color: #262626 transparent;
scrollbar-width: thin;
}

::-webkit-scrollbar {
@apply h-[10px] w-[10px];
@apply w-[10px];
}

::-webkit-scrollbar-track {
@apply rounded-xl bg-[#040d21];
@apply rounded-xl bg-neutral-800;
}

::-webkit-scrollbar-thumb {
@apply rounded-xl bg-[#1f2532];
@apply rounded-xl bg-neutral-700;
}

::-webkit-scrollbar-thumb:hover {
@apply bg-[#292f3d];
@apply bg-neutral-600;
}

::-webkit-scrollbar-thumb:active {
@apply bg-[#343b4a];
@apply bg-neutral-500;
}

::selection {
@apply text-white;
}
11 changes: 3 additions & 8 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,12 @@ module.exports = {
fontFamily: {
inter: ["Inter", ...fontFamily.sans],
},
fontWeight: {
semibold: 700,
},
colors: {
background: "#040d21",
"background-secondary": "#08152b",
background: "#101110",
"background-secondary": "#161617",
},
boxShadow: {
main: "0 0 500px 100px rgba(0, 134, 245, 0.05)",
main: "0 0 500px 100px rgb(16, 17, 16)",
},
},
},
Expand All @@ -31,8 +28,6 @@ module.exports = {
}),
/* eslint-disable global-require */
require("@igorkowalczyk/is-browser"),
require("@tailwindcss/forms"),
require("tailwindcss-text-fill"),
/* eslint-enable global-require */
],
};
1 change: 1 addition & 0 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"verbatimModuleSyntax": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
Expand Down

0 comments on commit c8e313b

Please sign in to comment.