diff --git a/README.md b/README.md index a0c4c71..02292a4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,57 @@ +
+ +Radiohub + # 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 +Radio Digital Malayali Logo +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