Change stylesheet to Analog theme and add some images!

This commit is contained in:
Badri Sunderarajan 2021-04-29 16:44:42 +05:30
parent e4bb9453e6
commit 3cccaa4eab
4 changed files with 22 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -9,7 +9,11 @@ body {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: "Crimson Text Regular", "Crimson Pro", Georgia, serif;
}
h1 {
font-family: "Abhaya Libre ExtraBold", "Abhaya Libre", "Liberation Serif Bold", "Playfair Display SC Bold", serif;
} }
a { a {
@ -61,3 +65,7 @@ button:not(:disabled):active {
button:focus { button:focus {
border-color: #666; border-color: #666;
} }
.highlight {
color: #800020;
}

View file

@ -4,7 +4,7 @@
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title> <title>ChipChoc 🍪</title>
<link rel='icon' type='image/png' href='/favicon.png'> <link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/global.css'>

View file

@ -3,7 +3,8 @@
</script> </script>
<main> <main>
<h1>Hello {name}!</h1> <img src="/assets/email-baker.png" class="main-pic"/>
<h1>Chip <span class="highlight">Choc</span></h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main> </main>
@ -16,15 +17,22 @@
} }
h1 { h1 {
color: #ff3e00; text-transform: lowercase;
text-transform: uppercase;
font-size: 4em; font-size: 4em;
font-weight: 100; font-weight: 100;
} }
.main-pic {
max-width: 100%;
}
@media (min-width: 640px) { @media (min-width: 640px) {
main { main {
max-width: none; max-width: none;
} }
.main-pic {
max-width: 240px;
}
} }
</style> </style>