+
+
+
# Radiohub
-A free, easy-to-use web template built with [Shoelace](https://shoelace.style/), designed for creating a radio directory.
\ No newline at end of file
+A free, easy-to-use, simple and minimal web template built with [Shoelace](https://shoelace.style/), designed for creating a radio directory.
+
+
+
+## Features
+- 😊 No installation or fancy setup; just add station details and streaming URL!
+- 📻 Stream stations without leaving the directory!
+- ⚡ Uses [Shoelace](https://shoelace.style/), a powerful web component library!
+- 😍 Country flags are powered by [Flag Icons](https://github.com/lipis/flag-icons)!
+
+## Usage
+The first step is to click the **Use this template** button above the file list to create a new repository.
+
+### Add station name and website
+Go to [index.html](https://github.com/digitalmalayali/radiohub/blob/main/index.html#L38-L42) file and find `header`:
+
+```html
+
+ Radio Digital Malayali
+
+
+
+```
+
+### Add station logo and description
+Make sure to keep the description short, with 10-13 words, and the logo at a size of 300 pixels in a 1:1 ratio. In [index.html](https://github.com/digitalmalayali/radiohub/blob/main/index.html#L43-L44) file, find `img` tag:
+
+```html
+
+A 24/7 Indian lo-fi music web radio initiative by Digital Malayali.
+```
+
+### Add country, language and category
+Find `badges` in [index.html](https://github.com/digitalmalayali/radiohub/blob/main/index.html#L45-L49) file. Use the two-letter country code ([ISO 3166-1-alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)) to display flags:
+
+```html
+
+ India
+ Malayalam
+ Music
+
+```
+
+### Add streaming URL
+Find `audio` tag in [index.html](https://github.com/digitalmalayali/radiohub/blob/main/index.html#L55-L56) file:
+
+```html
+
+```
+
+## Credits
+Logo - [Broadcast pin](https://icons.getbootstrap.com/icons/broadcast-pin/) icon from Bootstrap.
\ No newline at end of file
diff --git a/style.css b/style.css
index c899e86..12be443 100644
--- a/style.css
+++ b/style.css
@@ -1 +1 @@
-body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.8;font-weight:normal;margin-inline:var(--sl-spacing-4x-large)}a{text-decoration:none;color:var(--sl-color-primary-400)}a:hover{color:var(--sl-color-primary-500)}nav,footer{margin-block:var(--sl-spacing-x-large);display:flex;justify-content:space-between;align-items:center}main{display:grid;max-width:1380px;margin-block:var(--sl-spacing-x-large);justify-content:center;gap:var(--sl-spacing-3x-large)}.card{max-width:300px;aspect-ratio:1}.card [slot='header']{display:flex;align-items:center;justify-content:space-between}.card h3{margin:0}.card sl-icon-button{font-size:var(--sl-font-size-medium)}.fi{margin-left:.5em}.footer{display:flex;justify-content:space-between}footer p,footer small{color:var(--sl-color-neutral-600)}@media (max-width:600px){main{grid-template-columns:auto}}@media (min-width:768px){main{grid-template-columns:repeat(2,auto)}}@media (max-width:768px){nav,footer{flex-direction:column}}@media (min-width:1200px){main{grid-template-columns:repeat(3,auto)}}@media (min-width:1380px){main{grid-template-columns:repeat(4,auto)}}
\ No newline at end of file
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.8;font-weight:normal;margin-inline:var(--sl-spacing-4x-large)}a{text-decoration:none;color:var(--sl-color-primary-500)}a:hover{color:var(--sl-color-primary-600)}nav,footer{margin-block:var(--sl-spacing-x-large);display:flex;justify-content:space-between;align-items:center;text-align:center}main{display:grid;max-width:1380px;margin-block:var(--sl-spacing-x-large);justify-content:center;gap:var(--sl-spacing-3x-large)}.card{max-width:300px}.card [slot='header']{display:flex;align-items:center;justify-content:space-between}.card h3{margin:0}.card sl-icon-button{font-size:var(--sl-font-size-medium)}.fi{margin-left:.5em}.footer{display:flex;justify-content:space-between}footer p,footer small{color:var(--sl-color-neutral-600)}@media (max-width:600px){main{grid-template-columns:auto}}@media (min-width:768px){main{grid-template-columns:repeat(2,auto)}}@media (max-width:768px){nav,footer{flex-direction:column}}@media (min-width:1200px){main{grid-template-columns:repeat(3,auto)}}@media (min-width:1380px){main{grid-template-columns:repeat(4,auto)}}
\ No newline at end of file