example page
This commit is contained in:
yaroslav
+2
-1
@@ -37,6 +37,7 @@ async function html() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function css() {
|
async function css() {
|
||||||
|
console.log('restyling ...')
|
||||||
return src(['./src/pages/**/*.css', './src/components/**/*.css'])
|
return src(['./src/pages/**/*.css', './src/components/**/*.css'])
|
||||||
.pipe(concat('styles.css'))
|
.pipe(concat('styles.css'))
|
||||||
.pipe(postcss([combineMq]))
|
.pipe(postcss([combineMq]))
|
||||||
@@ -45,7 +46,7 @@ async function css() {
|
|||||||
|
|
||||||
async function watcher() {
|
async function watcher() {
|
||||||
await watch(
|
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)
|
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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<title>Example page</title>
|
<title>Example page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="main">
|
||||||
|
<div class="preview"></div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user