Add mobile apps page, redesign menu with ul & li, change home page.

config.toml

@@ -13,10 +13,10 @@ theme = "swr"
         name = 'Расписание'
         url = '/schedule'
         weight = 2
-    # [[menu.main]]
-    #     name = 'Новости'
-    #     url = '/posts/'
-    #     weight = 3
+    [[menu.main]]
+        name = 'Мобильные приложения'
+        url = '/mobile-apps/'
+        weight = 3
     [[menu.main]]
         name = 'О радио'
         url = '/about/'

content/_index.md

@@ -2,4 +2,10 @@
 
 Отбираем самую годную музыку без привязки к жанрам. Тщательно подобранный плейлист музыки будет сопровождать ваш день. Делаем все возможное, чтобы заслужить внимание ваших ушей.
 
+*Если у вас не работает веб-плеер, вы можете воспользоваться прямой ссылкой на поток*:
+- [AAC 192kbps](https://azuracast.southwestradio.ru/listen/southwest_radio/radio.aac) (для пользователей iOS, macOS)
+- [OGG 192kbps](https://azuracast.southwestradio.ru/listen/southwest_radio/radio.ogg) (для всех остальных)
+
+Кроме того, присутствует возможность прослушивать радиостанцию через [мобильные приложения](/mobile-apps/).
+
 *Настраивайтесь на наши волны!*

content/mobile-apps.md

@@ -0,0 +1,23 @@
+# Мобильные приложения
+
+## Android
+
+- Transistor ([Source Code](https://codeberg.org/y20k/transistor), [APK](https://f-droid.org/repo/org.y20k.transistor_91.apk))
+
+### Инструкция
+
+1. Открываете приложение Transistor
+2. Нажимаете на кнопку "Add new station"  
+    <img src="https://southwestradio.ru/android-screenshot-1.jpg" style="width: 70%;">
+3. Вводите Southwest Radio в поле ввода
+4. Выбираете найденную станцию и нажимаете кнопку "Add"  
+    <img src="https://southwestradio.ru/android-screenshot-2.jpg" style="width: 70%;">
+5. Нажимаете на добавленную радиостанцию, она начнет проигрываться.
+
+## iOS
+
+- Cuterdio ([AppStore](https://apps.apple.com/app/cuterdio-internet-radio-app/id1489513385?platform=iphone))
+
+## Инструкция
+
+В поиске радиостанций найти "Southwest Radio" и добавить радиостанцию в избранные.

themes/swr/assets/css/style.scss

@@ -52,7 +52,19 @@ aside {
     padding: 16px;
     padding-top: 0;
     padding-bottom: 0;
-    width: 75vh;
+    width: 30vw;
+}
+
+#nav {
+    display: block;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.menu-item {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
 }
 
 a {
@@ -153,4 +165,9 @@ article {
         min-width: 100%;
         justify-content: center;
     }
+
+    .menu-item {
+        display: flex;
+        justify-content: center;
+    }
 }

themes/swr/layouts/partials/nav.html

@@ -1,27 +1,26 @@
 <aside>
-    {{ $currentPage := . }}
-    {{ range .Site.Menus.main }}
-    {{ if .HasChildren }}
-    <p>
-        <a href="#">
-            {{ .Pre }}
-            <span>{{ .Name }}</span>
-        </a>
-    </p>
-    <ul class="sub-menu">
-        {{ range .Children }}
-        <li class="{{ if $currentPage.IsMenuCurrent " main" . }}active{{ end }}">
+    <ul id="nav">
+        {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        {{ if .HasChildren }}
+        <p>
+            <a href="#">
+                {{ .Pre }}
+                <span>{{ .Name }}</span>
+            </a>
+        </p>
+        <ul class="sub-menu">
+            {{ range .Children }}
+            <li class="{{ if $currentPage.IsMenuCurrent " main" . }}active{{ end }}">
+                <a href="{{ .URL }}">{{ .Name }}</a>
+            </li>
+            {{ end }}
+        </ul>
+        {{ else }}
+        <li class="menu-item">
             <a href="{{ .URL }}">{{ .Name }}</a>
         </li>
         {{ end }}
+        {{ end }}
     </ul>
-    {{ else }}
-    <p>
-        <a href="{{ .URL }}">
-            {{ .Pre }}
-            <span>{{ .Name }}</span>
-        </a>
-    </p>
-    {{ end }}
-    {{ end }}
 </aside>