Skip to content

Commit 5aa0ae6

Browse files
KennyKosKennyKos
KennyKos
authored and
KennyKos
committed
Update css depreciations
1 parent 8dc6f35 commit 5aa0ae6

File tree

5 files changed

+129
-120
lines changed

5 files changed

+129
-120
lines changed

‎_sass/_base.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
* Styles for the base elements of the theme.
33
******************************************************************************/
44

5+
@use "variables";
6+
57
// Typography
68

79
p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong {
@@ -397,11 +399,11 @@ footer.sticky-bottom {
397399
.page-link {
398400
color: var(--global-text-color);
399401
&:hover {
400-
color: $black-color;
402+
color: variables.$black-color;
401403
}
402404
}
403405
&.active .page-link {
404-
color: $white-color;
406+
color: variables.$white-color;
405407
background-color: var(--global-theme-color);
406408
&:hover {
407409
background-color: var(--global-theme-color);

‎_sass/_layout.scss‎

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,52 @@
22
* Content
33
******************************************************************************/
44

5-
body {
6-
padding-bottom: 70px;
7-
color: var(--global-text-color);
8-
background-color: var(--global-bg-color);
9-
10-
h1, h2, h3, h4, h5, h6 {
11-
scroll-margin-top: 66px;
12-
}
13-
}
14-
15-
body.fixed-top-nav {
16-
// Add some padding for the nav-bar.
17-
padding-top: 56px;
18-
}
19-
20-
body.sticky-bottom-footer {
21-
// Remove padding below footer.
22-
padding-bottom: 0;
23-
}
24-
25-
.container {
26-
max-width: $max-content-width;
27-
}
28-
29-
// Profile
30-
.profile {
31-
img {
32-
width: 100%;
33-
}
5+
@use "variables";
6+
7+
body {
8+
padding-bottom: 70px;
9+
color: var(--global-text-color);
10+
background-color: var(--global-bg-color);
11+
12+
h1, h2, h3, h4, h5, h6 {
13+
scroll-margin-top: 66px;
14+
}
15+
}
16+
17+
body.fixed-top-nav {
18+
// Add some padding for the nav-bar.
19+
padding-top: 56px;
20+
}
21+
22+
body.sticky-bottom-footer {
23+
// Remove padding below footer.
24+
padding-bottom: 0;
25+
}
26+
27+
28+
.container {
29+
max-width: var(--max-content-width); // Use CSS custom property
3430
}
35-
36-
// TODO: redefine content layout.
37-
38-
39-
/******************************************************************************
40-
* Publications
41-
******************************************************************************/
42-
43-
// TODO: redefine publications layout.
44-
45-
46-
/*****************************************************************************
47-
* Projects
48-
*****************************************************************************/
49-
50-
// TODO: redefine projects layout.
31+
32+
// Profile
33+
.profile {
34+
img {
35+
width: 100%;
36+
}
37+
}
38+
39+
// TODO: redefine content layout.
40+
41+
42+
/******************************************************************************
43+
* Publications
44+
******************************************************************************/
45+
46+
// TODO: redefine publications layout.
47+
48+
49+
/*****************************************************************************
50+
* Projects
51+
*****************************************************************************/
52+
53+
// TODO: redefine projects layout.

‎_sass/_themes.scss‎

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,67 @@
11
/*******************************************************************************
22
* Themes
33
******************************************************************************/
4-
5-
:root {
6-
--global-bg-color: #{$white-color};
7-
--global-code-bg-color: #{$code-bg-color-light};
8-
--global-text-color: #{$black-color};
9-
--global-text-color-light: #{$grey-color};
10-
--global-theme-color: #{$blue-color};
11-
--global-hover-color: #{$light-blue-color};
12-
--global-footer-bg-color: #{$grey-color-dark};
13-
--global-footer-text-color: #{$grey-color-light};
14-
--global-footer-link-color: #{$white-color};
15-
--global-distill-app-color: #{$grey-color};
16-
--global-divider-color: rgba(0,0,0,.1);
17-
--global-card-bg-color: #{$white-color};
18-
19-
.fa-sun {
20-
display : none;
21-
}
22-
.fa-moon {
23-
padding-left: 10px;
24-
padding-top: 12px;
25-
display : block;
26-
}
27-
28-
.repo-img-light {
29-
display: block;
30-
}
31-
.repo-img-dark {
32-
display: none;
33-
}
34-
}
354

36-
html[data-theme='dark'] {
37-
--global-bg-color: #{$grey-color-dark};
38-
--global-code-bg-color: #{$code-bg-color-dark};
39-
--global-text-color: #{$grey-color-light};
40-
--global-text-color-light: #{$grey-color-light};
41-
--global-theme-color: #{$cyan-color};
42-
--global-hover-color: #{$cyan-color};
43-
--global-footer-bg-color: #{$grey-color-light};
44-
--global-footer-text-color: #{$grey-color-dark};
45-
--global-footer-link-color: #{$black-color};
46-
--global-distill-app-color: #{$grey-color-light};
47-
--global-divider-color: #424246;
48-
--global-card-bg-color: #{$grey-900};
5+
@use "variables";
496

50-
.fa-sun {
51-
padding-left: 10px;
52-
padding-top: 12px;
53-
display : block;
54-
}
55-
.fa-moon {
56-
display : none;
57-
}
58-
59-
.repo-img-light {
60-
display: none;
61-
}
62-
.repo-img-dark {
63-
display: block;
64-
}
65-
}
7+
:root {
8+
--global-bg-color: #{variables.$white-color};
9+
--global-code-bg-color: #{variables.$code-bg-color-light};
10+
--global-text-color: #{variables.$black-color};
11+
--global-text-color-light: #{variables.$grey-color};
12+
--global-theme-color: #{variables.$blue-color};
13+
--global-hover-color: #{variables.$light-blue-color};
14+
--global-footer-bg-color: #{variables.$grey-color-dark};
15+
--global-footer-text-color: #{variables.$grey-color-light};
16+
--global-footer-link-color: #{variables.$white-color};
17+
--global-distill-app-color: #{variables.$grey-color};
18+
--global-divider-color: rgba(0, 0, 0, .1);
19+
--global-card-bg-color: #{variables.$white-color};
20+
21+
.fa-sun {
22+
display: none;
23+
}
24+
.fa-moon {
25+
padding-left: 10px;
26+
padding-top: 12px;
27+
display: block;
28+
}
29+
30+
.repo-img-light {
31+
display: block;
32+
}
33+
.repo-img-dark {
34+
display: none;
35+
}
36+
}
37+
38+
html[data-theme='dark'] {
39+
--global-bg-color: #{variables.$grey-color-dark};
40+
--global-code-bg-color: #{variables.$code-bg-color-dark};
41+
--global-text-color: #{variables.$grey-color-light};
42+
--global-text-color-light: #{variables.$grey-color-light};
43+
--global-theme-color: #{variables.$cyan-color};
44+
--global-hover-color: #{variables.$cyan-color};
45+
--global-footer-bg-color: #{variables.$grey-color-light};
46+
--global-footer-text-color: #{variables.$grey-color-dark};
47+
--global-footer-link-color: #{variables.$black-color};
48+
--global-distill-app-color: #{variables.$grey-color-light};
49+
--global-divider-color: #424246;
50+
--global-card-bg-color: #{variables.$grey-900};
51+
52+
.fa-sun {
53+
padding-left: 10px;
54+
padding-top: 12px;
55+
display: block;
56+
}
57+
.fa-moon {
58+
display: none;
59+
}
60+
61+
.repo-img-light {
62+
display: none;
63+
}
64+
.repo-img-dark {
65+
display: block;
66+
}
67+
}

‎_sass/_variables.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,30 @@
33
* To adjust anything, simply edit the variables below and rebuild the theme.
44
******************************************************************************/
55

6+
@use 'sass:color'; // Import the color module
67

78
// Colors
89
$red-color: #FF3636 !default;
910
$red-color-dark: #B71C1C !default;
1011
$orange-color: #F29105 !default;
1112
$blue-color: #0076df !default;
12-
$light-blue-color: lighten($blue-color, 25%);
13+
$light-blue-color: color.adjust($blue-color, $lightness: 40%);
1314
$blue-color-dark: #00369f !default;
1415
$cyan-color: #2698BA !default;
15-
$light-cyan-color: lighten($cyan-color, 25%);
16+
$light-cyan-color: color.adjust($cyan-color, $lightness: 40%);
1617
$green-color: #00ab37 !default;
1718
$green-color-lime: #B7D12A !default;
1819
$green-color-dark: #009f06 !default;
1920
$green-color-light: #ddffdd !default;
2021
$green-color-bright: #11D68B !default;
2122
$purple-color: #B509AC !default;
22-
$light-purple-color: lighten($purple-color, 25%);
23+
$light-purple-color: color.adjust($purple-color, $lightness: 40%);
2324
$pink-color: #f92080 !default;
2425
$pink-color-light: #ffdddd !default;
2526
$yellow-color: #efcc00 !default;
2627

2728
$grey-color: #828282 !default;
28-
$grey-color-light: lighten($grey-color, 40%);
29+
$grey-color-light: color.adjust($grey-color, $lightness: 40%);
2930
$grey-color-dark: #1C1C1D;
3031
$grey-900: #212529;
3132

‎assets/css/main.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
---
44
@charset "utf-8";
55

6-
// Dimensions
7-
$max-content-width: {{ site.max_width }};
6+
// Import files with @use
7+
@use "variables";
8+
@use "themes";
9+
@use "layout";
10+
@use "base";
11+
@use "distill";
812

9-
@import
10-
"variables",
11-
"themes",
12-
"layout",
13-
"base",
14-
"distill"
15-
;
13+
// Define CSS custom property with Jekyll variable
14+
:root {
15+
--max-content-width: {{ site.max_width }};
16+
}

0 commit comments

Comments
 (0)