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

style: address bar color adjustments

Browse source
This commit is contained in:
Ayo 2023-06-12 22:00:06 +02:00
parent 4bae7cb0b9
commit 66238c1169
2 changed files with 7 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/AddressBar.astro
View file

@ -11,7 +11,7 @@ const form = new FormGroup([
{ {
name: "url", name: "url",
value: url, value: url,
placeholder: "Put the URL here", placeholder: "Type a URL here",
validators: [Validators.required, Validators.minLength(11)], validators: [Validators.required, Validators.minLength(11)],
}, },
]); ]);
@ -37,7 +37,6 @@ const form = new FormGroup([
<style lang="scss"> <style lang="scss">
.address-bar { .address-bar {
background-color:antiquewhite;
text-align: center; text-align: center;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
@ -60,13 +59,12 @@ const form = new FormGroup([
} }
:global(input) { :global(input) {
width: 100%; width: var(--cozy-width);
text-align: center; text-align: center;
border: 0px; border: 0px;
border-radius: 5px; border-radius: 5px;
padding: 0.5rem; padding: 0.5rem;
} background-color: #f5f5f5;
:global(input[type="text"]) { box-shadow: 0 0 1px 1px #ccc;
border: 2px solid brown;
} }
</style> </style>

5
src/layouts/Layout.astro
View file

@ -40,7 +40,7 @@ const { meta } = Astro.props;
<style> <style>
#main-content { #main-content {
max-width: 600px; max-width: var(--cozy-width);
margin: 0 auto; margin: 0 auto;
} }
@ -49,12 +49,13 @@ const { meta } = Astro.props;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
</style> </style>
<style is:global lang="scss"> <style is:global lang="scss">
:root { :root {
--cozy-width: 600px;
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }
html * { html * {
font-family: var(--system-ui); font-family: var(--system-ui);
} }