example page

2026-01-21 13:34:13 +02:00
parent d7bffb9f97
commit c9660f4bd8
6 changed files with 136 additions and 2 deletions
@@ -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)
  );
 }
@@ -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) {} */
@@ -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;
+}
@@ -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;
+}
@@ -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>