tideshift/tideshift-website
1
0
Fork 0
Code Activity

Continue work on hero and layout, implement hover effect

Browse Source
This commit is contained in:
Michael Rieger
2025-09-15 17:07:08 +02:00
parent b5e812da0f
commit 5967768c25
8 changed files with 224 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GlobalStyles.astro
+45 -36
View File
@@ -1,45 +1,54 @@
<style is:global>
@import url('../styles/archivo.css');
@import url('../styles/clash-display.css');
@import url("../styles/archivo.css");
@import url("../styles/clash-display.css");
:root {
--clr-ts-warm-red: hsl(3, 94%, 60%);
--clr-ts-dark: hsl(7, 18%, 10%);
--clr-ts-dark-logo: hsl(7, 18%, 13%);
--clr-ts-light: hsl(349, 57%, 91%);
:root {
--clr-ts-warm-red: hsl(3, 94%, 60%);
--clr-ts-dark: hsl(7, 18%, 10%);
--clr-ts-dark-logo: hsl(7, 18%, 13%);
--clr-ts-light: hsl(349, 57%, 91%);
--ff-heading: "Clash Display", sans-serif;
--ff-body: "Archivo", sans-serif;
--ff-heading: "Clash Display", sans-serif;
--ff-body: "Archivo", sans-serif;
--fs-xl: clamp(3.75rem, 5vw + 1rem, 6rem);
--fs-600: 1.5rem;
--fs-500: 1.25rem;
--fs-400: 1rem;
}
--fs-xl: clamp(3rem, 4vw + 1rem, 6rem);
--fs-600: 1.25rem;
--fs-500: 1.125rem;
--fs-400: 1rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
overflow: clip;
body {
background-color: var(--clr-ts-dark);
color: var(--clr-ts-light);
font-family: var(--ff-body);
font-size: var(--fs-400);
padding: clamp(2rem, 5vw + 1rem, 3.75rem);
}
padding: clamp(2rem, 5vw + 1rem, 3.75rem);
h1 {
font-family: var(--ff-heading);
font-size: var(--fs-xl);
}
font-family: var(--ff-body);
font-size: var(--fs-400);
background-color: var(--clr-ts-dark);
color: var(--clr-ts-light);
}
.sr-only {
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(1px 1px 1px 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
}
</style>