Merge pull request #23 from YK911/main

New design for pages in template

package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^4.5.2",
-    "glob": "^8.1.0"
+    "glob": "^8.1.0",
+    "postcss": "^8.4.38",
+    "postcss-sort-media-queries": "^5.2.0",
+    "vite": "^4.5.2"
   },
   "author": "Alexander Repeta <[email protected]>",
   "license": "ISC",

src/css/animations.css

@@ -0,0 +1,18 @@
+@keyframes slide {
+  from {
+    transform: translateX(-140%) translateY(-50%);
+  }
+  to {
+    transform: translateX(-104%) translateY(-50%);
+  }
+}
+@keyframes stretch {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(100%) scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(100%) scale(1);
+  }
+}

src/css/back-link.css

@@ -0,0 +1,29 @@
+.back-link {
+  position: relative;
+  display: inline-block;
+  padding: 4px 8px;
+  margin-top: 32px;
+  border: 1px solid;
+  border-radius: 8px;
+}
+.back-link::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 16px;
+  height: 16px;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
+  transition: 300ms ease-in;
+  transition-property: opacity;
+  opacity: 0;
+  animation: slide 500ms linear infinite alternate-reverse both;
+  animation-play-state: paused;
+}
+.back-link:hover::before {
+  opacity: 1;
+  animation-play-state: running;
+}

src/css/badges.css

@@ -0,0 +1,19 @@
+.badges-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+}
+.badges-link {
+  display: block;
+  padding: 8px 16px;
+  border: 1px solid;
+  border-radius: 8px;
+  transition: 200ms ease-in;
+}
+.badges-link:hover,
+.badges-link:focus {
+  transform: scale(1.06);
+  color: #747bff;
+}

src/css/base.css

@@ -0,0 +1,32 @@
+:root {
+  /* font-family: Inter, Avenir, Helvetica, Arial, sans-serif; */
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #242424;
+  background-color: rgba(255, 255, 255, 0.87);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+}
+
+main {
+  flex-grow: 1;
+}
+main:has(.back-link) {
+  text-align: center;
+}

src/css/container.css

@@ -0,0 +1,19 @@
+/* Styles for Mobile devices */
+.container {
+  min-width: 320px;
+  max-width: 375px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+/* Styles for Tablet devices */
+@media only screen and (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+/* Styles for Desktop devices */
+@media only screen and (min-width: 1200px) {
+  .container {
+    max-width: 1200px;
+  }
+}

src/css/footer.css

@@ -0,0 +1,21 @@
+.footer {
+  padding: 20px 0;
+}
+.footer-desc {
+  text-align: center;
+}
+.footer-link {
+  position: relative;
+}
+.footer-link::before {
+  content: '';
+  position: absolute;
+  bottom: 6%;
+  left: 50%;
+  transform: translateX(-50%) skewX(-12deg);
+  z-index: -1;
+  width: 110%;
+  height: 24%;
+  background-color: #41d1ff;
+  transition: 200ms ease;
+}

src/css/header.css

@@ -1,21 +1,44 @@
 .header {
   padding: 20px 0;
 }
-
+.nav {
+  display: flex;
+  justify-content: space-between;
+}
+.nav-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 .nav-list {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 40px;
 }
-
 .nav-link {
+  position: relative;
+  display: block;
   font-weight: 500;
   letter-spacing: 0.02em;
-  line-height: 1.5;
+  transition: 200ms ease-in;
 }
-
 .nav-link:hover,
 .nav-link:focus {
   color: #747bff;
 }
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(100%);
+  width: 110%;
+  height: 4px;
+  border-radius: 4px;
+  transform-origin: center;
+  animation: stretch 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms both;
+}
+.nav-link.active::after {
+  background: #747bff;
+}

src/css/reset.css

@@ -1,4 +1,3 @@
-/* Reset styles */
 h1,
 h2,
 h3,

src/css/styles.css

@@ -4,22 +4,15 @@
   | default @import url()
   |============================
 */
+/* Common styles */
 @import url('./reset.css');
-@import url('./vite-promo.css');
-@import url('./header.css');
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+@import url('./base.css');
+@import url('./container.css');
+@import url('./animations.css');
 
-  color: #242424;
-  background-color: rgba(255, 255, 255, 0.87);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
+/* Sections style */
+@import url('./header.css');
+@import url('./vite-promo.css');
+@import url('./badges.css');
+@import url('./back-link.css');
+@import url('./footer.css');