Skip to content

Commit 7d7b316

Browse files
juliancwirkojuliancwirko
committed
update deps and scss
1 parent 0085bc2 commit 7d7b316

10 files changed

+1565
-3674
lines changed

‎package-lock.json

+1,195-3,558
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"name": "netlify-deployment-demo",
2+
"name": "default-template",
33
"version": "0.0.1",
4-
"description": "netlify-deployment-demo",
4+
"description": "default-template",
55
"main": "index.js",
66
"scripts": {
77
"build": "harold-scripts build",
88
"start": "harold-scripts start"
99
},
1010
"devDependencies": {
11-
"harold-scripts": "^1.1.1"
11+
"harold-scripts": "^1.2.1"
1212
}
13-
}
13+
}

‎src/styles/_basic.scss

+13-74
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1-
// check css.gg icons https://css.gg
2-
@import url('https://unpkg.com/css.gg/icons/css/menu.css');
3-
@import url('https://unpkg.com/css.gg/icons/css/search.css');
4-
@import url('https://unpkg.com/css.gg/icons/css/close.css');
5-
@import url('https://unpkg.com/css.gg/icons/css/twitter.css');
6-
@import url('https://unpkg.com/css.gg/icons/css/instagram.css');
7-
@import url('https://unpkg.com/css.gg/icons/css/facebook.css');
8-
@import url('https://unpkg.com/css.gg/icons/css/chevron-double-up.css');
1+
@use "sass:color";
2+
@use "variables";
93

104
* {
115
box-sizing: border-box;
126
}
137

148
body {
15-
font-family: $font-family-main;
9+
font-family: variables.$font-family-main;
1610
font-weight: 300;
1711
margin: 0;
1812
padding: 150px 0 0;
1913
min-height: 100vh;
2014
overflow-x: hidden;
2115
line-height: 30px;
22-
color: $color-main-dark;
23-
background-color: $color-main-light;
16+
color: variables.$color-main-dark;
17+
background-color: variables.$color-main-light;
2418
}
2519

2620
article, aside, footer, header, nav, section {
@@ -46,7 +40,7 @@ pre {
4640
top: 0;
4741
left: 0;
4842
right: 0;
49-
background-color: rgba($color-main-light, 0.9);
43+
background-color: rgba(variables.$color-main-light, 0.9);
5044
backdrop-filter: saturate(180%) blur(10px);
5145
backface-visibility: hidden;
5246
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
@@ -90,7 +84,7 @@ pre {
9084
.main-logo-dot {
9185
width: 15px;
9286
height: 15px;
93-
background-color: $color-main-contrast;
87+
background-color: variables.$color-main-contrast;
9488
margin-right: 10px;
9589
margin-bottom: 2px;
9690
}
@@ -106,37 +100,17 @@ pre {
106100
padding: 60px 30px 30px;
107101
text-align: center;
108102
font-size: 13px;
109-
color: rgba($color-main-dark, .4);
110-
height: $size-footer-height;
103+
color: rgba(variables.$color-main-dark, .4);
104+
height: variables.$size-footer-height;
111105

112106
a {
113-
color: $color-main-contrast;
107+
color: variables.$color-main-contrast;
114108
}
115109
}
116110

117111
.page-container,
118112
.post-container {
119-
min-height: calc(100vh - #{$size-header-height} - #{$size-footer-height});
120-
}
121-
122-
.button {
123-
color: $color-main-dark;
124-
display: inline-block;
125-
transition: background-color .2s;
126-
text-decoration: none;
127-
padding: 5px 20px;
128-
border-radius: 3px;
129-
text-align: center;
130-
font-family: $font-family-main;
131-
font-weight: 400;
132-
font-size: 14px;
133-
background-color: $color-main-dark;
134-
color: $color-main-light;
135-
border: 0;
136-
137-
&:hover {
138-
background-color: lighten($color-main-dark, 5%);
139-
}
113+
min-height: calc(100vh - #{variables.$size-header-height} - #{variables.$size-footer-height});
140114
}
141115

142116
.home-see-all-posts {
@@ -150,44 +124,9 @@ pre {
150124
padding-right: 15px;
151125
}
152126

153-
// menu, search etc.
154-
.full-screen-overlay {
155-
position: fixed;
156-
top: 0;
157-
right: 0;
158-
bottom: 0;
159-
left: 0;
160-
background-color: rgba($color-main-dark, 0.95);
161-
color: $color-main-light;
162-
opacity: 0;
163-
visibility: hidden;
164-
z-index: 2;
165-
166-
&.js-visible {
167-
opacity: 1;
168-
visibility: visible;
169-
}
170-
}
171-
172-
.full-screen-overlay-contents {
173-
overflow-y: auto;
174-
height: 100%;
175-
}
176-
177-
.full-screen-overlay-close-btn {
178-
position: absolute;
179-
top: 40px;
180-
right: 55px;
181-
cursor: pointer;
182-
183-
.gg-close {
184-
transform: scale(2);
185-
}
186-
}
187-
188127
.go-to-top-button {
189-
background: $color-main-dark;
190-
color: $color-main-light;
128+
background: variables.$color-main-dark;
129+
color: variables.$color-main-light;
191130
position: fixed;
192131
bottom: -45px;
193132
right: 15px;

‎src/styles/_common.scss

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@use "sass:color";
2+
@use "variables";
3+
4+
.button {
5+
color: variables.$color-main-dark;
6+
display: inline-block;
7+
transition: background-color .2s;
8+
text-decoration: none;
9+
padding: 5px 20px;
10+
border-radius: 3px;
11+
text-align: center;
12+
font-family: variables.$font-family-main;
13+
font-weight: 400;
14+
font-size: 14px;
15+
background-color: variables.$color-main-dark;
16+
color: variables.$color-main-light;
17+
border: 0;
18+
19+
&:hover {
20+
background-color: color.adjust(variables.$color-main-dark, $lightness: 5%);
21+
}
22+
}
23+
24+
// menu, search etc.
25+
.full-screen-overlay {
26+
position: fixed;
27+
top: 0;
28+
right: 0;
29+
bottom: 0;
30+
left: 0;
31+
background-color: rgba(variables.$color-main-dark, 0.95);
32+
color: variables.$color-main-light;
33+
opacity: 0;
34+
visibility: hidden;
35+
z-index: 2;
36+
37+
&.js-visible {
38+
opacity: 1;
39+
visibility: visible;
40+
}
41+
}
42+
43+
.full-screen-overlay-contents {
44+
overflow-y: auto;
45+
height: 100%;
46+
}
47+
48+
.full-screen-overlay-close-btn {
49+
position: absolute;
50+
top: 40px;
51+
right: 55px;
52+
cursor: pointer;
53+
54+
.gg-close {
55+
transform: scale(2);
56+
}
57+
}

‎src/styles/_homepage.scss

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "sass:color";
2+
@use "variables";
3+
14
.homepage-featured-post {
25
width: 100%;
36
margin-bottom: 80px;
@@ -34,17 +37,17 @@
3437
left: 0;
3538
bottom: 0;
3639
right: 0;
37-
background-color: rgba($color-main-dark, 0.4);
40+
background-color: rgba(variables.$color-main-dark, 0.4);
3841
}
3942
}
4043

4144
.homepage-featured-post--title {
4245
text-align: center;
4346
font-size: 70px;
44-
color: $color-main-light;
47+
color: variables.$color-main-light;
4548
font-weight: 900;
4649
line-height: 1.3;
47-
text-shadow: 1px 1px 0px $color-main-dark;
50+
text-shadow: 1px 1px 0px variables.$color-main-dark;
4851
text-transform: uppercase;
4952

5053
a {
@@ -66,16 +69,16 @@
6669
padding: 8px 25px;
6770
font-size: 16px;
6871
font-weight: 600;
69-
background-color: $color-main-contrast;
70-
color: $color-main-light;
72+
background-color: variables.$color-main-contrast;
73+
color: variables.$color-main-light;
7174
border-radius: 6px;
7275
text-decoration: none;
7376
margin-top: 15px;
74-
text-shadow: 1px 1px 0px darken($color-main-contrast, 20%);
77+
text-shadow: 1px 1px 0px color.adjust(variables.$color-main-contrast, $lightness: -20%);
7578
transition: background-color .3s;
7679

7780
&:hover {
78-
background-color: darken($color-main-contrast, 15%);
81+
background-color: color.adjust(variables.$color-main-contrast, $lightness: -15%);
7982
}
8083
}
8184

@@ -89,7 +92,7 @@
8992
display: block;
9093
width: 150px;
9194
height: 6px;
92-
background-color: $color-main-dark;
95+
background-color: variables.$color-main-dark;
9396
margin-top: 25px;
9497
}
9598

@@ -119,7 +122,7 @@
119122

120123
&.homepage-section-bg {
121124
padding: 10px 0 60px;
122-
background-color: $color-main-contrast2;
125+
background-color: variables.$color-main-contrast2;
123126
margin-top: 60px;
124127
}
125128

0 commit comments

Comments
 (0)