Skip to content

Commit

Permalink
big gauge
Browse files Browse the repository at this point in the history
  • Loading branch information
samcarton committed Jul 28, 2024
1 parent 7b9d4d7 commit b679b0b
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 5 deletions.
5 changes: 0 additions & 5 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,6 @@ const { title } = Astro.props;
</html>
<style is:global>
:root {
/* rgb(255, 190, 87)
rgb(222, 42, 174) */
/* --accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101; */
--accent: 222, 42, 174;
--accent-light: 255, 63, 138;
--accent-dark: 255, 110, 106;
Expand Down
36 changes: 36 additions & 0 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,33 @@ import Footer from "../components/Footer.astro";

<Layout title="Cruise CONTROL">
<main>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="big-gauge"
>
<path d="m12 14 4-4" stroke="url(#paint0_linear_1805_24383)"></path>
<path
d="M3.34 19a10 10 0 1 1 17.32 0"
stroke="url(#paint0_linear_1805_24383)"></path>
<defs>
<linearGradient
id="paint0_linear_1805_24383"
gradientTransform="rotate(90)"
>
<stop offset="5%" stop-color="rgb(255, 110, 106)" stop-opacity="0.5"
></stop>
<stop offset="95%" stop-color="rgb(255, 63, 138)" stop-opacity="0.1"
></stop>
</linearGradient>
</defs>
</svg>
<h1>Cruise <span class="text-gradient">CONTROL</span></h1>
<div class="instructions">
<p>
Expand Down Expand Up @@ -56,6 +83,15 @@ import Footer from "../components/Footer.astro";
font-size: 16px;
line-height: 1.6;
}
.big-gauge {
position: absolute;
top: -20px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
Expand Down

0 comments on commit b679b0b

Please sign in to comment.