From c9660f4bd858dfc16389ad900e35d53a470531a6 Mon Sep 17 00:00:00 2001
From: yaroslav <fin.inua@gmail.com>
Date: Wed, 21 Jan 2026 13:34:13 +0200
Subject: [PATCH] example page

---
 gulpfile.js                    |   3 +-
 src/pages/css/initial.css      | 110 +++++++++++++++++++++++++++++++++
 src/pages/css/vars.css         |  11 ++++
 src/pages/example/example.css  |   9 +++
 src/pages/example/example.html |   5 +-
 src/pages/page2/page2.html     |   0
 6 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/css/initial.css
 create mode 100644 src/pages/css/vars.css
 create mode 100644 src/pages/example/example.css
 delete mode 100644 src/pages/page2/page2.html

diff --git a/gulpfile.js b/gulpfile.js
index a3fe47c..e688c9a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -37,6 +37,7 @@ async function html() {
 }
 
 async function css() {
+    console.log('restyling ...')
      return src(['./src/pages/**/*.css', './src/components/**/*.css'])
          .pipe(concat('styles.css'))
          .pipe(postcss([combineMq]))
@@ -45,7 +46,7 @@ async function css() {
 
 async function watcher() {
   await watch(
-    ['./src/pages/**/*.html', './src/components/**/*.html', '/src/pages/**/*.css', './src/components/**/*.css'],
+    ['./src/pages/**/*.html', './src/components/**/*.html', './src/pages/**/*.css', './src/components/**/*.css'],
     series(html, css)
   );
 }
diff --git a/src/pages/css/initial.css b/src/pages/css/initial.css
new file mode 100644
index 0000000..68ea490
--- /dev/null
+++ b/src/pages/css/initial.css
@@ -0,0 +1,110 @@
+html, body, div, span, applet, object, iframe,
+blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, legend,
+table, tbody, tfoot, thead, tr, th {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+ins, a {
+  text-decoration: none;
+}
+del {
+  text-decoration: line-through;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+*{
+  box-sizing: border-box;
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  margin: 0 auto;
+  font-family: 
+    -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  /* background: linear-gradient(85.91deg, #faf4fd -31.4%, #f0f9fd 57.96%, #f1fcfb 146.43%); */
+  background: #fbfafc;
+  font-weight: 400;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 2.25rem;  
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 2rem;  
+  font-weight: 500;
+}
+
+h4 {
+  font-size: 1.75rem;
+}
+
+h5 {
+  font-size: 1.5rem;
+}
+
+h6 {
+  font-size: 1.25rem;
+}
+
+#main{
+    margin: 0 auto;
+    max-width: 1920px;
+    min-width: 320px;
+    min-height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    position: relative;
+    border: 5px solid orange;
+    /*letter-spacing: 0!important;*/
+}
+
+@media only screen and (max-width : 320px) {
+  body * {
+      animation: none !important;
+      transition: none !important;
+  }
+}
+
+/* @media only screen and (min-width : 0px) {}
+@media only screen and (min-width : 321px) {}
+@media only screen and (min-width : 760px) {}
+@media only screen and (min-width : 992px) {}
+@media only screen and (min-width : 1366px) {}
+@media only screen and (min-width : 1367px) {} */
\ No newline at end of file
diff --git a/src/pages/css/vars.css b/src/pages/css/vars.css
new file mode 100644
index 0000000..4888d01
--- /dev/null
+++ b/src/pages/css/vars.css
@@ -0,0 +1,11 @@
+:root {
+  --silver-color: #E1E3DF;
+  --text-color: #34485E;
+
+  --animate-duration: 1s;
+  --animate-delay: 1s;
+  --animate-repeat: 1;
+
+  --def-radius: 4px;
+  --def-border-color: #e5e7eb;
+}
\ No newline at end of file
diff --git a/src/pages/example/example.css b/src/pages/example/example.css
new file mode 100644
index 0000000..bc1768e
--- /dev/null
+++ b/src/pages/example/example.css
@@ -0,0 +1,9 @@
+.preview {
+    border: 4px solid greenyellow;
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/pages/example/example.html b/src/pages/example/example.html
index 6a0fe18..0094a3c 100644
--- a/src/pages/example/example.html
+++ b/src/pages/example/example.html
@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
     <title>Example page</title>
 </head>
 <body>
-    
+    <div id="main">
+        <div class="preview"></div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/page2/page2.html b/src/pages/page2/page2.html
deleted file mode 100644
index e69de29..0000000