diff options
-rw-r--r-- | static/style.css | 67 | ||||
-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 |
6 files changed, 101 insertions, 36 deletions
diff --git a/static/style.css b/static/style.css index 03fae5b..70482a5 100644 --- a/static/style.css +++ b/static/style.css @@ -605,12 +605,18 @@ div { .header { display: flex; - width: 66.666667%; + width: 100%; --tw-bg-opacity: 1; background-color: rgb(240 171 252 / var(--tw-bg-opacity)); padding: 0.5rem; } +@media (min-width: 768px) { + .header { + width: 66.666667%; + } +} + .about { justify-items: center; border-width: 4px; @@ -667,6 +673,11 @@ div { margin-bottom: 2.5rem; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .ml-6 { margin-left: 1.5rem; } @@ -683,10 +694,26 @@ div { display: none; } +.h-24 { + height: 6rem; +} + +.h-full { + height: 100%; +} + +.w-full { + width: 100%; +} + .w-screen { width: 100vw; } +.grow { + flex-grow: 1; +} + .list-outside { list-style-position: outside; } @@ -695,10 +722,18 @@ div { list-style-type: disc; } +.flex-row { + flex-direction: row; +} + .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-center { align-items: center; } @@ -707,12 +742,16 @@ div { justify-content: space-around; } +.gap-2 { + gap: 0.5rem; +} + .gap-4 { gap: 1rem; } -.gap-2 { - gap: 0.5rem; +.overflow-x-hidden { + overflow-x: hidden; } .border-2 { @@ -738,6 +777,10 @@ div { padding: 0.5rem; } +.text-center { + text-align: center; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -763,6 +806,14 @@ div { color: rgb(45 212 191 / var(--tw-text-opacity)); } +.underline { + text-decoration-line: underline; +} + +.decoration-primary-300 { + text-decoration-color: #f0abfc; +} + .marker\:text-secondary-300 *::marker { color: rgb(94 234 212 ); } @@ -779,3 +830,13 @@ div { .group:hover .group-hover\:inline-block { display: inline-block; } + +@media (min-width: 768px) { + .md\:w-1\/3 { + width: 33.333333%; + } + + .md\:w-3\/4 { + width: 75%; + } +} 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; |