PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor hash-generator page structure and components

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-04 15:46:32 +08:00
parent 18349b2c59
commit bda785229a
1 changed files with 3 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/pages/hash-generator.astro
View file

@ -1,16 +1,12 @@
--- ---
import Layout from '../layouts/Layout.astro' import Layout from '../layouts/Layout.astro'
import { FiHash } from 'solid-icons/fi' import HashGeneratorComponent from '../components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx'
import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorComponent.tsx' import PageTitle from '../components/PageTitle/PageTitle'
--- ---
<Layout title="Hash Generator - AIO Tools"> <Layout title="Hash Generator - AIO Tools">
<div class="page"> <div class="page">
<section class="title"> <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
<FiHash class="title__icon" opacity={1} />
<h1 class="title__text">Hash Generator</h1>
<p class="title__description">Convert text to multiple hash formats for secure data transmission.</p>
</section>
<section class="content"> <section class="content">
<HashGeneratorComponent client:visible /> <HashGeneratorComponent client:visible />
@ -22,7 +18,6 @@ import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorCo
@use '/src/assets/css/viewport.sass' as view @use '/src/assets/css/viewport.sass' as view
.page .page
font-family: 'Inter', sans-serif
text-align: center text-align: center
margin: 4rem 0 0 0 margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out transition: margin 0.4s ease-in-out
@ -30,21 +25,6 @@ import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorCo
@media screen and (max-width: view.$tablet) @media screen and (max-width: view.$tablet)
margin-top: 1rem margin-top: 1rem
.title
color: #ffffff
&__text
font-size: clamp(1.2rem, 5vw, 2.4rem)
margin-bottom: 1rem
&__description
font-size: clamp(0.5rem, 2vw, 1rem)
opacity: 0.6
margin-bottom: 3rem
&__icon
font-size: clamp(2rem, 5vw, 4rem)
.content .content
display: flex display: flex
justify-content: center justify-content: center