diff options
| author | Stas Medvedev <medvedevsa97@gmail.com> | 2024-06-11 02:58:35 +0300 |
|---|---|---|
| committer | Stas Medvedev <medvedevsa97@gmail.com> | 2024-06-11 02:58:35 +0300 |
| commit | 888de0a90ae0e04ea9e20063d9a6cbfa9a20e9e0 (patch) | |
| tree | ec270ebbc4e6b2cb8b59e0c3d830881bd9b3f2f4 /templates | |
| parent | fc29744db8eba827802bdb5c5932f91ae79ea152 (diff) | |
Адаптивка, поиграл с дизайном
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 18 | ||||
| -rw-r--r-- | templates/partials/about.html | 29 | ||||
| -rw-r--r-- | templates/partials/avatars.html | 9 | ||||
| -rw-r--r-- | templates/partials/palette.html | 12 | ||||
| -rw-r--r-- | templates/style.css | 2 |
5 files changed, 37 insertions, 33 deletions
diff --git a/templates/index.html b/templates/index.html index 87145fd..396c663 100644 --- a/templates/index.html +++ b/templates/index.html @@ -27,17 +27,21 @@ <title>Document</title> </head> <body - class="w-screen flex flex-col gap-4 items-center bg-stone-50 source-code-pro-500" + class="w-screen overflow-x-hidden flex flex-col gap-4 items-center bg-stone-50 source-code-pro-500 p-2" > - {% include 'partials/palette.html' %} - {% include 'partials/header.html' %} - {% include 'partials/about.html' %} - - {% include 'partials/avatars.html' %} + <div class="flex flex-wrap w-full md:w-3/4 justify-around gap-4"> + <div class="w-full md:w-1/3"> + {% include 'partials/about.html' %} + {% include 'partials/palette.html' %} + {% include 'partials/services.html' %} + </div> + <div class="w-full md:w-1/3"> + {% include 'partials/avatars.html' %} + </div> + </div> - {% include 'partials/services.html' %} </body> </html> diff --git a/templates/partials/about.html b/templates/partials/about.html index b53a127..e077043 100644 --- a/templates/partials/about.html +++ b/templates/partials/about.html @@ -1,4 +1,4 @@ -<div class="about relative"> +<div class="about relative text-center"> <p>Привет, меня зовут Стас</p> <p> Я @@ -22,15 +22,22 @@ В основном пишу на <a href="https://python.org" class="text-interactive">python</a> </p> - <p>Вычислил тебя по ip: {{client_geo['query']}}</p> + <div class="gap-2 flex flex-wrap text-2xl my-2"> + <p class="w-full "> + Уже вычислил тебя по ip: + </p> + <div class="w-full flex flex-row justify-around"> + <span>😎</span> + <a class="block text-center underline decoration-primary-300" href="https://ip-api.com"> + {{client_geo['query']}} + </a> + <span>😎</span> + {% if 'city' in client_geo %} + <p>{{client_geo['country']}}</p> + <p>{{client_geo['city']}}</p> + {% endif %} + </div> + + </div> - {% if 'city' in client_geo %} - <p>{{client_geo['country']}}</p> - <p>{{client_geo['city']}}</p> - {% endif %} - <p> - <span class="text-sm" - >(Шутка в том что такая возможность есть у любого сайта)</span - > - </p> </div> diff --git a/templates/partials/avatars.html b/templates/partials/avatars.html index fd2c247..a6f84ff 100644 --- a/templates/partials/avatars.html +++ b/templates/partials/avatars.html @@ -1,5 +1,4 @@ -<div class="flex justify-around"> - <div class="swiper"> + <div class="swiper h-full"> <div class="swiper-wrapper"> {% for url in avatar_urls %} <img src="{{url}}" alt="" class="swiper-slide"/> @@ -9,7 +8,6 @@ <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> -</div> <script> const swiper = new Swiper(".swiper", { @@ -22,8 +20,3 @@ }, }); </script> -<style> - .swiper { - width: 30%; - } -</style> diff --git a/templates/partials/palette.html b/templates/partials/palette.html index 6efa551..09f77bc 100644 --- a/templates/partials/palette.html +++ b/templates/partials/palette.html @@ -1,7 +1,7 @@ -<div> - <div class="primary color-box"></div> - <div class="secondary color-box"></div> - <div class="complementary-yellow color-box"></div> - <div class="complementary-rose color-box"></div> - <div class="complementary-blue color-box"></div> +<div class="flex w-full h-24 gap-4 p-2"> + <div class="primary grow"></div> + <div class="secondary grow"></div> + <div class="complementary-yellow grow"></div> + <div class="complementary-rose grow"></div> + <div class="complementary-blue grow"></div> </div>
\ No newline at end of file diff --git a/templates/style.css b/templates/style.css index 6e43c21..4086c46 100644 --- a/templates/style.css +++ b/templates/style.css @@ -36,7 +36,7 @@ div { @apply text-secondary-500 hover:text-fuchsia-600; } .header { - @apply w-2/3 bg-primary-300 flex p-2; + @apply w-full md:w-2/3 bg-primary-300 flex p-2; } .about { @apply border-4 border-fuchsia-200 border-dashed p-2 justify-items-center; |