ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: spacing adjustments

Browse source
This commit is contained in:
Ayo Ayco 2024-09-02 01:05:11 +02:00
parent 928314c151
commit e717f20ff3
2 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Jumbotron.astro
View file

@ -10,7 +10,7 @@
h1 { h1 {
text-transform: uppercase; text-transform: uppercase;
font-size: 5em; font-size: 4em;
} }
a { a {

46
src/components/SimpleAddressBar.astro
View file

@ -12,6 +12,9 @@ const { url } = Astro.props;
<div class="address-bar"> <div class="address-bar">
<form> <form>
<label for="app-url">
<Icon name="ic:round-arrow-forward-ios" />
</label>
<input <input
type="url" type="url"
id="app-url" id="app-url"
@ -20,6 +23,15 @@ const { url } = Astro.props;
placeholder={placeholder} placeholder={placeholder}
required required
/> />
<button
aria-label="Submit"
class="btn right-buttons"
type="submit"
id="submit"
>
<Icon name="ri:ai-generate" />
</button>
</form> </form>
<SettingsPopover toggle="settings-toggle" /> <SettingsPopover toggle="settings-toggle" />
</div> </div>
@ -32,23 +44,26 @@ const { url } = Astro.props;
form { form {
width: 100%; width: 100%;
border: 0px; padding: 0.15rem 1rem;
padding: 0.5rem;
text-align: center; text-align: center;
border-radius: 30px; border-radius: 30px;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #f5f5f5; background-color: white;
box-shadow: 0 1px 3px 1px #eee; box-shadow: 0 1px 3px 1px #eee;
display: flex; display: flex;
input[type="url"]:focus {
outline: none;
}
input[type="url"] { input[type="url"] {
flex: 3; flex: 3;
background-color: white; border: 0px;
border-radius: 30px; border-radius: 30px;
border: 1px solid #eee;
font-size: normal; font-size: normal;
padding: 0.5rem; padding: 0.5rem;
color: #555; color: #555;
caret-color: var(--accent);
} }
#app-back, #app-back,
@ -56,6 +71,25 @@ const { url } = Astro.props;
display: none; display: none;
} }
label {
display: block;
border: 0px;
height: 100%;
vertical-align: middle;
background-color: transparent;
padding: 0.5rem 0;
color: rgb(var(--gray));
svg {
border: 0px;
background-color: transparent;
margin-top: 3px;
width: 18px;
height: 18px;
cursor: pointer;
}
}
.btn { .btn {
display: block; display: block;
border: 0px; border: 0px;
@ -63,7 +97,7 @@ const { url } = Astro.props;
vertical-align: middle; vertical-align: middle;
background-color: transparent; background-color: transparent;
padding: 0.5rem 0; padding: 0.5rem 0;
color: black; color: var(--accent);
svg { svg {
border: 0px; border: 0px;