postcss-enumerates-in-line 0.0.1 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitattributes +2 -0
- package/.github/workflows/publish.yml +28 -0
- package/README.img/1f1ef-1f1f5.png +0 -0
- package/README.img/1f1fa-1f1f8.png +0 -0
- package/README.img/README.md +7 -0
- package/README.md +536 -29
- package/README_EN.md +551 -0
- package/index.d.ts +22 -0
- package/index.mjs +273 -0
- package/package.json +22 -6
- package/test/gulp/gulpfile.mjs +116 -0
- package/test/gulp/package-lock.json +4224 -0
- package/test/gulp/package.json +25 -0
- package/test/gulp/src/css/app.scss +112 -0
- package/test/gulp/src/index.html +89 -0
- package/test/gulp/src/js/app.js +23 -0
- package/test/postcss/build-clean.mjs +20 -0
- package/test/postcss/build-copy.mjs +30 -0
- package/test/postcss/build-css.mjs +54 -0
- package/test/postcss/package-lock.json +1057 -0
- package/test/postcss/package.json +26 -0
- package/test/postcss/src/css/app.scss +112 -0
- package/test/postcss/src/index.html +89 -0
- package/test/postcss/src/js/app.js +23 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "postcss",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"clean": "node build-clean.mjs",
|
|
9
|
+
"common:copy": "node build-copy.mjs",
|
|
10
|
+
"build:css": "node build-css.mjs -- build",
|
|
11
|
+
"dev:css": "node build-css.mjs -- dev",
|
|
12
|
+
"build": "npm run clean && run-s common:* build:*",
|
|
13
|
+
"dev": "run-s common:* dev:*"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [],
|
|
16
|
+
"author": "",
|
|
17
|
+
"license": "ISC",
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"autoprefixer": "^10.4.23",
|
|
20
|
+
"glob": "^13.0.0",
|
|
21
|
+
"npm-run-all2": "^8.0.4",
|
|
22
|
+
"postcss": "^8.5.6",
|
|
23
|
+
"postcss-csso": "^6.0.1",
|
|
24
|
+
"sass": "^1.96.0"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
// root
|
|
2
|
+
:root {
|
|
3
|
+
@enums ff:"Outfit",sans-serif fw:400;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
// utility
|
|
7
|
+
.u-heading {
|
|
8
|
+
@enums fs:1.25em fw:700;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// wrapper
|
|
12
|
+
.c-layout {
|
|
13
|
+
@enums w:100% wmax:1000px mx:auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// header
|
|
17
|
+
.c-header {
|
|
18
|
+
@enums my:1.5rem;
|
|
19
|
+
|
|
20
|
+
&--caption {
|
|
21
|
+
@enums ff:"Rammetto^One",sans-serif fs:1.25em;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&--description {
|
|
25
|
+
@enums fs:0.85em;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// nav
|
|
30
|
+
.c-nav {
|
|
31
|
+
@enums my:1.5rem;
|
|
32
|
+
|
|
33
|
+
&--lists {
|
|
34
|
+
@enums display:flex column-gap:1rem;
|
|
35
|
+
|
|
36
|
+
&--item {
|
|
37
|
+
&::before {
|
|
38
|
+
@enums display:inline content:"\0bb\020" ct:var(--enums-color-gray-600);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--anchor {
|
|
42
|
+
@enums text-decoration:var(--enums-color-pink-500)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease;
|
|
43
|
+
|
|
44
|
+
&:hover {
|
|
45
|
+
@enums ct:var(--enums-color-pink-500) text-decoration-color:#fff0;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// contents
|
|
53
|
+
.c-contents {
|
|
54
|
+
@enums display:grid row-gap:1.25rem container-type:inline-size;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.c-skills {
|
|
58
|
+
@enums display:grid;
|
|
59
|
+
|
|
60
|
+
&--item {
|
|
61
|
+
@enums display:block;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.c-projects {
|
|
66
|
+
@enums display:grid grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) gap:1rem^1.5rem m8:0.375rem;
|
|
67
|
+
|
|
68
|
+
&--item {
|
|
69
|
+
@enums display:grid gap:0.5rem px:1rem py:0.5rem bw:1px bc:var(--enums-color-gray-700) br:0.75rem transition:transform^0.25s^ease,box-shadow^0.25s^ease,border-color^0.25s^ease;
|
|
70
|
+
|
|
71
|
+
&:hover {
|
|
72
|
+
@enums transform:translateY(-0.25rem) box-shadow:0^0.5rem^1rem^#0004 bc:var(--enums-color-pink-800);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&--description {
|
|
76
|
+
@enums fs:0.95em;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&--anchor {
|
|
80
|
+
@enums text-decoration:var(--enums-color-pink-500)^underline^dotted^2px text-underline-offset:4px transition:text-decoration-color^0.25s^ease,color^0.25s^ease;
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
@enums ct:var(--enums-color-pink-500) text-decoration-color:#fff0;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.c-contact {
|
|
90
|
+
@enums mx:auto w:600px wmax:100cqw;
|
|
91
|
+
|
|
92
|
+
&--form {
|
|
93
|
+
@enums display:grid gap:1rem;
|
|
94
|
+
|
|
95
|
+
&--input {
|
|
96
|
+
@enums px:0.5rem py:0.375rem br:0.5rem cb:var(--enums-color-gray-100) ct:var(--enums-color-gray-900) fs:1rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&--button {
|
|
100
|
+
@enums py:0.5rem br:0.5rem cb:var(--enums-color-pink-500) ct:var(--enums-color-gray-900) fs:1rem cursor:pointer transition:background-color^0.25s^ease,color^0.25s^ease;
|
|
101
|
+
|
|
102
|
+
&:hover {
|
|
103
|
+
@enums cb:#fff ct:var(--enums-color-pink-500);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// footer
|
|
110
|
+
.c-footer {
|
|
111
|
+
@enums py:1.5rem fs:0.9rem text-align:center;
|
|
112
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Testy Gulpman : Portfolio</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<link rel="stylesheet" href="css/app.css">
|
|
8
|
+
<script src="js/app.js"></script>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Outfit&family=Rammetto+One&display=swap" rel="stylesheet">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<main class="c-layout">
|
|
15
|
+
<header class="c-header">
|
|
16
|
+
<h1 class="c-header--caption">Portfolio of Testy Gulpman</h1>
|
|
17
|
+
<p class="c-header--description">Web Developer / Designer</p>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<nav class="c-nav">
|
|
21
|
+
<ul class="c-nav--lists">
|
|
22
|
+
<li class="c-nav--lists--item"><a class="c-nav--lists--item--anchor" href="#about">About</a></li>
|
|
23
|
+
<li class="c-nav--lists--item"><a class="c-nav--lists--item--anchor" href="#skills">Skills</a></li>
|
|
24
|
+
<li class="c-nav--lists--item"><a class="c-nav--lists--item--anchor" href="#projects">Projects</a></li>
|
|
25
|
+
<li class="c-nav--lists--item"><a class="c-nav--lists--item--anchor" href="#contact">Contact</a></li>
|
|
26
|
+
</ul>
|
|
27
|
+
</nav>
|
|
28
|
+
|
|
29
|
+
<section class="c-contents">
|
|
30
|
+
<div id="about">
|
|
31
|
+
<h2 class="u-heading">About</h2>
|
|
32
|
+
<p>
|
|
33
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec ex vel turpis consequat porttitor eget nec
|
|
34
|
+
ipsum. Vestibulum lacinia metus sit amet nisl tincidunt convallis. Duis pharetra pretium erat, ac lacinia nunc
|
|
35
|
+
venenatis nec. Pellentesque neque turpis, placerat et enim vitae, molestie suscipit elit. Etiam sollicitudin dui
|
|
36
|
+
id blandit elementum.
|
|
37
|
+
</p>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div id="skills">
|
|
41
|
+
<h2 class="u-heading">Skills</h2>
|
|
42
|
+
<div class="c-skills">
|
|
43
|
+
<span class="c-skills--item">HTML</span>
|
|
44
|
+
<span class="c-skills--item">CSS</span>
|
|
45
|
+
<span class="c-skills--item">JavaScript</span>
|
|
46
|
+
<span class="c-skills--item">React</span>
|
|
47
|
+
<span class="c-skills--item">Git</span>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div id="projects">
|
|
52
|
+
<h2 class="u-heading">Projects</h2>
|
|
53
|
+
<div class="c-projects">
|
|
54
|
+
<article class="c-projects--item">
|
|
55
|
+
<h3>Mauris maximus</h3>
|
|
56
|
+
<p class="c-projects--item--description">Sem volutpat maximus finibus, felis ligula lacinia ante, id varius est felis ultricies lorem. Praesent
|
|
57
|
+
pellentesque lectus non justo rutrum, id rhoncus justo pulvinar.</p>
|
|
58
|
+
<a class="c-projects--item--anchor" href="https://google.co.jp">Project Page</a>
|
|
59
|
+
</article>
|
|
60
|
+
<article class="c-projects--item">
|
|
61
|
+
<h3>Ut non felis</h3>
|
|
62
|
+
<p class="c-projects--item--description">Eu nisl volutpat ullamcorper. Donec tortor ligula, finibus eget lectus in, sagittis laoreet odio.</p>
|
|
63
|
+
<a class="c-projects--item--anchor" href="https://google.co.jp">Project Page</a>
|
|
64
|
+
</article>
|
|
65
|
+
<article class="c-projects--item">
|
|
66
|
+
<h3>Donec facilisis</h3>
|
|
67
|
+
<p class="c-projects--item--description">Eros nec volutpat aliquam. Quisque eget urna varius, pharetra augue placerat, lacinia tortor.</p>
|
|
68
|
+
<a class="c-projects--item--anchor" href="https://google.co.jp">Project Page</a>
|
|
69
|
+
</article>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div id="contact" class="c-contact">
|
|
74
|
+
<h2 class="u-heading">Contact</h2>
|
|
75
|
+
<form class="c-contact--form">
|
|
76
|
+
<input class="c-contact--form--input" type="text" name="name" placeholder="Name">
|
|
77
|
+
<input class="c-contact--form--input" type="email" name="email" placeholder="Email">
|
|
78
|
+
<textarea class="c-contact--form--input" rows="5" name="message" placeholder="Message"></textarea>
|
|
79
|
+
<button class="c-contact--form--button" type="submit">Send</button>
|
|
80
|
+
</form>
|
|
81
|
+
</div>
|
|
82
|
+
</section>
|
|
83
|
+
|
|
84
|
+
<footer class="c-footer">
|
|
85
|
+
<p>©2025 hadukinei</p>
|
|
86
|
+
</footer>
|
|
87
|
+
</main>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
(d => {
|
|
2
|
+
d.addEventListener('DOMContentLoaded', () => {
|
|
3
|
+
// scroll behavior
|
|
4
|
+
d.querySelectorAll('.c-nav--lists--item--anchor').forEach(elem => {
|
|
5
|
+
elem.addEventListener('click', e => {
|
|
6
|
+
e.stopPropagation()
|
|
7
|
+
e.preventDefault()
|
|
8
|
+
|
|
9
|
+
const target = d.getElementById(e.target.getAttribute('href').replace('#', ''))
|
|
10
|
+
if(target) {
|
|
11
|
+
let y = target.offsetTop
|
|
12
|
+
window.scrollTo({
|
|
13
|
+
top: y,
|
|
14
|
+
left: 0,
|
|
15
|
+
behavior: 'smooth',
|
|
16
|
+
})
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return false
|
|
20
|
+
})
|
|
21
|
+
})
|
|
22
|
+
})
|
|
23
|
+
})(document)
|