Diffstat (limited to 'views/index.html')
| -rw-r--r-- | views/index.html | 70 |
1 files changed, 32 insertions, 38 deletions
diff --git a/views/index.html b/views/index.html index 731def6..cbb4c57 100644 --- a/views/index.html +++ b/views/index.html @@ -3,48 +3,56 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>SAYA TODAY // Заглавная</title> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet"> + <title>Choose Language // SAYA TODAY</title> <link href="/output.css" rel="stylesheet"> <style> .menu-outer-body { border-radius: 10%; - width: 60vw; - height: 40vh; + width: 40dvh; + height: 30dvh; } .menu-inner-body { width: 85%; } - @media (max-aspect-ratio: 1.2/1) { - .menu-outer-body { - border-radius: 5%; - } + .flex-adaptive { + flex-direction: row; + } - .menu-inner-body { - width: 92.5%; - } + .language-icon { + max-width: calc(80% / {{ .AvailableLanguages | len }}); + max-height: 80%; } @media (max-aspect-ratio: 0.8/1) { .menu-outer-body { - width: 100vw; - height: 80vh; + border-radius: 5%; + } + + .menu-outer-body { + width: min(40dvh, 100dvw); + height: 40dvh; border-radius: 0; } + .language-icon { + max-width: 40%; + max-height: calc(80% / {{ .AvailableLanguages | len }}); + } + .menu-inner-body { - width: 100%; + width: 92.5%; + } + + .flex-adaptive { + flex-direction: column; } } </style> </head> -<body data-theme="night" class="font-spectral text-main-dark text-[1.5vmax] overflow-hidden bg-interlocked-hexagons h-screen flex flex-col"> +<body data-theme="night" class="font-andika text-main-hard text-2xl overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-col"> <div class="absolute star z-0">*</div> <div class="absolute star z-0">*</div> @@ -90,28 +98,14 @@ switchTheme(savedTheme); </script> - <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70"> - <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[1.6vmin]">saya.today</p> - <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-[1.6vmin] overflow-y-auto opacity-100"> - {{- range .BlogPages }} - <div class="m-2 flex flex-row justify-center justify-items-center gap-4"> - <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-[4vmax] h-[4vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp"> - <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium"> - <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a> - <a href="/blog/{{ .Link }}" class="block italic text-[1vmax] text-secondary">{{ .ActionDate }}</a> - <p>{{ .ShortDescription }}</p> - </div> - <div class="flex-3 justify-self-center flex flex-col text-right"> - <p class="grow text-[1vmax]"> - Тэги: {{ .Tags }} - </p> - <p class="italic text-secondary text-[1vmax]"> - {{ .PublishedTime }} - </p> - </div> - </div> + <div class="menu-outer-body p-2 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70"> + <p class="font-andika mx-auto text-4xl mt-1 mb-2">saya.today</p> + <div class="menu-inner-body grow bg-background-light flex flex-adaptive mx-auto opacity-100"> + {{- range .AvailableLanguages }} + <img onclick="location.href='/{{ .Name }}';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}"> {{- end }} </div> + <p class="font-andika mx-auto text-2xl text-secondary mt-1 mb-2">Choose your language</p> </div> <script> |