Адаптивка, поиграл с дизайном

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
parent: fc29744db8eba827802bdb5c5932f91ae79ea152 (diff)
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;
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
parent	fc29744db8eba827802bdb5c5932f91ae79ea152 (diff)