Skip to content

Commit 3a56c04

Browse files
EmptyWorkEmptyWork
authored
migrate: scss — @import to @use and add development mode (#217)
migrate: `scss` — @import to @use and add development mode
2 parents 0b97a3a + 7c72780 commit 3a56c04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+5456
-2075
lines changed

‎.eleventy.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const pluginRss = require('@11ty/eleventy-plugin-rss')
2+
require('dotenv').config()
23

34
module.exports = function (eleventyConfig) {
45
const { DateTime } = require('luxon')
@@ -36,6 +37,9 @@ module.exports = function (eleventyConfig) {
3637

3738
eleventyConfig.setLibrary('md', markdownIt)
3839

40+
const isDevelopment = process.env.NODE_ENV === 'development';
41+
eleventyConfig.addGlobalData("isDevelopment", isDevelopment);
42+
3943
eleventyConfig.addPlugin(pluginRss, {
4044
posthtmlRenderOptions: {
4145
closingSingleTag: 'default',
@@ -85,10 +89,15 @@ module.exports = function (eleventyConfig) {
8589
const [year, ...title] = titleParts
8690
const titleInitials = title.map(title => title.split('')[0]).join('')
8791
const yearSuffix = year.slice(-yearSplice)
88-
92+
8993
return `${yearSuffix}-${titleInitials}`
9094
})
9195

96+
eleventyConfig.addFilter("development", (link) => {
97+
console.log(isDevelopment)
98+
return isDevelopment ? "/" : link;
99+
});
100+
92101
eleventyConfig.addFilter('breakLine', (string, cutAt = 3, maxSize = 30) => {
93102
const titleWords = string.split(' ')
94103
const titleLength = string.length
@@ -97,7 +106,7 @@ module.exports = function (eleventyConfig) {
97106

98107
const hasTitleRemaining = !!titleRemaining
99108
const formattedTitleWithBreak = hasTitleRemaining ? `${titlePreview}<br/>${titleRemaining}` : titlePreview
100-
109+
101110
const returnTitle = titleLength <= maxSize || !hasTitleRemaining ? string : formattedTitleWithBreak
102111
return returnTitle
103112
})

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# dependencies
22
/node_modules
3+
.env
34

45
# public files
56
/public

‎archives/error.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import './modules/vars';
2+
@import './modules/mixin';
3+
@import './modules/global';
4+
5+
@import './modules/component/preload';
6+
7+
@import './modules/header';
8+
@import './modules/component/nav';
9+
@import './modules/component/title';
10+
@import './modules/main';
11+
@import './modules/footer';
12+
13+
@import './modules/component/contact';
14+
@import './modules/component/error';

‎src/assets/scss/modules/_footer.scss renamed to ‎archives/modules/_footer.scss

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,70 @@
1-
.footer {
2-
background-color: var(--clr-background);
3-
color: var(--clr-foreground);
4-
padding: 0.8rem;
5-
6-
.brand {
7-
display: flex;
8-
gap: 0.5rem;
9-
width: max-content;
10-
11-
&-title {
12-
font-size: 1.3rem;
13-
font-weight: 700;
14-
}
15-
16-
&-logo {
17-
display: flex;
18-
align-items: center;
19-
}
20-
}
21-
22-
&-top {
23-
padding: 0.8rem;
24-
padding-top: 3rem;
25-
font-size: 2rem;
26-
max-width: 35ch;
27-
line-height: 1.2;
28-
position: relative;
29-
isolation: isolate;
30-
31-
&::before {
32-
content: '"';
33-
position: absolute;
34-
font-size: 4em;
35-
left: 0;
36-
top: 0;
37-
color: var(--clr-background-800);
38-
font-weight: 600;
39-
user-select: none;
40-
z-index: -1;
41-
}
42-
}
43-
44-
&-bottom {
45-
padding: 0.8rem;
46-
text-align: left;
47-
display: flex;
48-
flex-direction: column;
49-
gap: 0.3em;
50-
}
51-
52-
&-container {
53-
max-width: 64rem;
54-
margin: 0 auto;
55-
}
56-
57-
.copyright {
58-
font-size: 0.9rem;
59-
margin: 1rem auto;
60-
text-align: left;
61-
border: 0.0625rem solid var(--clr-foreground);
62-
width: 100%;
63-
max-width: max-content;
64-
padding: 0.2rem 2rem;
65-
66-
@include breakpoint-up('medium') {
67-
flex-direction: row;
68-
}
69-
}
70-
}
1+
.footer {
2+
background-color: var(--clr-background);
3+
color: var(--clr-foreground);
4+
padding: 0.8rem;
5+
6+
.brand {
7+
display: flex;
8+
gap: 0.5rem;
9+
width: max-content;
10+
11+
&-title {
12+
font-size: 1.3rem;
13+
font-weight: 700;
14+
}
15+
16+
&-logo {
17+
display: flex;
18+
align-items: center;
19+
}
20+
}
21+
22+
&-top {
23+
padding: 0.8rem;
24+
padding-top: 3rem;
25+
font-size: 2rem;
26+
max-width: 35ch;
27+
line-height: 1.2;
28+
position: relative;
29+
isolation: isolate;
30+
31+
&::before {
32+
content: '"';
33+
position: absolute;
34+
font-size: 4em;
35+
left: 0;
36+
top: 0;
37+
color: var(--clr-background-800);
38+
font-weight: 600;
39+
user-select: none;
40+
z-index: -1;
41+
}
42+
}
43+
44+
&-bottom {
45+
padding: 0.8rem;
46+
text-align: left;
47+
display: flex;
48+
flex-direction: column;
49+
gap: 0.3em;
50+
}
51+
52+
&-container {
53+
max-width: 64rem;
54+
margin: 0 auto;
55+
}
56+
57+
.copyright {
58+
font-size: 0.9rem;
59+
margin: 1rem auto;
60+
text-align: left;
61+
border: 0.0625rem solid var(--clr-foreground);
62+
width: 100%;
63+
max-width: max-content;
64+
padding: 0.2rem 2rem;
65+
66+
@include breakpoint-up('medium') {
67+
flex-direction: row;
68+
}
69+
}
70+
}

0 commit comments

Comments
 (0)