94 lines
2.7 KiB
Text
94 lines
2.7 KiB
Text
---
|
|
import Layout from '../layouts/Layout.astro'
|
|
import Card from '../components/Card/Card.jsx'
|
|
import Logo from '../../fwt/components/Logo/Logo'
|
|
import Link from '../../fwt/components/Link/Link'
|
|
import Footer from '../../fwt/components/Footer/Footer'
|
|
import Copyright from '../../fwt/components/Copyright/Copyright'
|
|
---
|
|
|
|
<Layout title="AIO Tools">
|
|
<main class="page">
|
|
<section class="title--section">
|
|
<div class="titleandlogo">
|
|
<Logo size={90} />
|
|
|
|
<div class="titleandlogo__texts">
|
|
<span class="titleandlogo__texts__title">AIO Tools</span>
|
|
<span class="titleandlogo__texts__subtitle">All-in-One Tools for Everyone</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cards--section">
|
|
<Link to="/password-generator"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /></Link>
|
|
<Link to="/hash-generator"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></Link>
|
|
<Link to="/color-converter"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></Link>
|
|
<Link to="/text-comparison"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></Link>
|
|
</section>
|
|
</main>
|
|
</Layout>
|
|
|
|
<style lang="sass">
|
|
@use '/src/styles/breakpoint.sass' as view
|
|
@use '/src/styles/variables.sass' as vars
|
|
|
|
.page
|
|
display: flex
|
|
flex-direction: column
|
|
margin-top: 2rem
|
|
|
|
.title--section
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: flex-start
|
|
color: vars.$textColor
|
|
padding: 0 2rem
|
|
|
|
@media screen and (max-width: view.$tablet)
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.titleandlogo
|
|
display: flex
|
|
flex-direction: row
|
|
gap: 1rem
|
|
align-items: center
|
|
font-family: 'Montserrat'
|
|
|
|
@media screen and (max-width: view.$tablet)
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
text-align: center
|
|
|
|
&__texts
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
&__title
|
|
font-size: clamp(2rem, 6vw, 3.25rem)
|
|
font-weight: 500
|
|
|
|
&__subtitle
|
|
font-size: clamp(0.75rem, 3vw, 1.25rem)
|
|
opacity: 0.8
|
|
|
|
&__logo
|
|
@media screen and (max-width: view.$tablet)
|
|
width: 80px
|
|
height: auto
|
|
|
|
@media screen and (max-width: view.$mobile)
|
|
width: 60px
|
|
|
|
.cards--section
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
gap: 1rem
|
|
padding: 0.5rem
|
|
margin-top: 2rem
|
|
border-radius: 0.5rem
|
|
</style>
|