jekyll-github-pages 0.1.7 → 0.1.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.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/_config.yml +5 -5
  3. data/_data/internal-links.yml +16 -0
  4. data/_data/social-links.yml +3 -6
  5. data/_includes/about.html +3 -0
  6. data/_includes/header.html +0 -6
  7. data/_includes/intro.html +3 -5
  8. data/_includes/links-grid.html +13 -0
  9. data/_includes/links-line.html +12 -0
  10. data/_includes/sidebar.html +35 -0
  11. data/_includes/vendor-scripts.html +0 -1
  12. data/_layouts/about.html +18 -0
  13. data/_layouts/default.html +18 -18
  14. data/_layouts/under-construction.html +21 -0
  15. data/_sass/_about.scss +18 -0
  16. data/_sass/_base.scss +3 -8
  17. data/_sass/_bg.scss +1 -1
  18. data/_sass/_footer.scss +5 -3
  19. data/_sass/_header.scss +2 -10
  20. data/_sass/_intro.scss +52 -33
  21. data/_sass/_links-grid.scss +50 -0
  22. data/_sass/{_social-links.scss → _links-line.scss} +17 -16
  23. data/_sass/_sidebar.scss +105 -0
  24. data/_sass/_under-construction.scss +22 -0
  25. data/_sass/_vars.scss +8 -4
  26. data/_sass/main.scss +32 -5
  27. data/assets/css/about.css +1 -0
  28. data/assets/css/fontawesome.css +5 -5
  29. data/assets/css/main.css +1 -3
  30. data/assets/icons/favicon_io/android-chrome-192x192.png +0 -0
  31. data/assets/icons/favicon_io/android-chrome-512x512.png +0 -0
  32. data/assets/icons/favicon_io/apple-touch-icon.png +0 -0
  33. data/assets/icons/favicon_io/favicon-16x16.png +0 -0
  34. data/assets/icons/favicon_io/favicon-32x32.png +0 -0
  35. data/assets/icons/favicon_io/favicon.ico +0 -0
  36. data/assets/js/main.js +1 -1
  37. metadata +12 -5
  38. data/_includes/social-links.html +0 -5
  39. data/_sass/_particles.scss +0 -18
  40. data/assets/js/vendor/particles.js +0 -1541
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d3dadcefb108bad4b6d60c68440474355466e8edaeeb8d6e3f8874106903ad10
4
- data.tar.gz: 436499a65b94555bea8e15869cd20ab5d1dd41691c9abe8a510e99a3e168c47b
3
+ metadata.gz: 3246616bc8ebea528f4468a11f1795aa4e9ae60a76d97fe63fab6f5300af9333
4
+ data.tar.gz: 7ffd6965c83ae58e2c7b6ec80aa0b0149add6f7668ae4d4aeb5d94ec2bae2d22
5
5
  SHA512:
6
- metadata.gz: a66fca49e2881d7ccb4774a72b2672341824c0e973649dd680818ef6bbcf8a560d802beb3d6c0ec30ec624b8a119ca792d3a7a5c3236a68e7571463d466363cc
7
- data.tar.gz: bf0616c4d1eff2f54f551d80ac1dddd63db971243eb8431fdf3306b4b5cbde2fd20b67211f5ddcad425b604bc08a43ba67e69bf3fe820a330d24ec35b70d039d
6
+ metadata.gz: b2fe9ca5c75aec846120cbf2be21981426cef459d26977edad23aaac990e104f22b35d14ccedf58837d652ba86660b407909ff2e87fc7878dbdee7504d56e316
7
+ data.tar.gz: 9b6608d294edd0ebf9787cda3961df449cd843800d6a02846c3dbf86a3aa8936b13ed217fe7c92331c55139066f9d5faa31e0ab02ad904dcca2f7ee888f8a7ec
data/_config.yml CHANGED
@@ -3,10 +3,13 @@ meta:
3
3
  description: Dynamic and customizable jekyll theme
4
4
 
5
5
  user:
6
- username: '<span style="color: #e9a467;">f</span>ran<span style="color: #de7873;">r</span>ose'
6
+ username-prefix: its
7
+ username: '<span style="color: #4c6349;">f</span>ran<span style="color: #4c6349;">r</span>ose'
7
8
  name: Mehdi Rafee
8
9
  short-description: '<span style="color: #d1443d;">enthusiastic</span> • <span style="color: #e38b3d;">adventurous</span>'
9
10
  title: programmer
11
+
12
+ about:
10
13
  description: >
11
14
  Hi there, I'm a progammer based in Isfahan, Iran; passionate about
12
15
  open-source software, systems programming, and tooling & tinkering.
@@ -15,9 +18,6 @@ user:
15
18
  <br>Anyhow, let's get going with the professional button-pressing, shall we?
16
19
 
17
20
  footer:
18
- quote: 'Never give up without a fight. <span style="color: #9e7b52;">&General Iroh</span>'
21
+ quote: 'Never give up without a fight. <span style="color: #857676;">&General Iroh</span>'
19
22
 
20
- particles: true
21
23
  theme: jekyll-github-pages
22
-
23
- exclude: ['package.json', 'src', 'node_modules', 'vendor']
@@ -0,0 +1,16 @@
1
+ - url: "/about/"
2
+ internal: true
3
+ icon: "fa fa-info-circle"
4
+ label: "about"
5
+ - url: "/skills/"
6
+ internal: true
7
+ icon: "fa fa-tools"
8
+ label: "skills"
9
+ - url: "/pde/"
10
+ internal: true
11
+ icon: "fa fa-terminal"
12
+ label: "dev-env"
13
+ - url: "/blog/"
14
+ internal: true
15
+ icon: "fas fa-blog"
16
+ label: "blog"
@@ -1,3 +1,6 @@
1
+ - url: "https://github.com/itsfranrose"
2
+ icon: "fab fa-github"
3
+ label: "github"
1
4
  - url: "mailto:francis.rosinante@gmail.com"
2
5
  icon: "fa fa-envelope"
3
6
  label: "email"
@@ -7,9 +10,3 @@
7
10
  - url: "https://linkedin.com/in/mehdi-rafee"
8
11
  icon: "fab fa-linkedin"
9
12
  label: "linkedin"
10
- - url: "https://github.com/itsfranrose"
11
- icon: "fab fa-github"
12
- label: "github"
13
- - url: "https://www.goodreads.com/itsfranrose"
14
- icon: "fab fa-goodreads"
15
- label: "goodreads"
data/_includes/about.html CHANGED
@@ -0,0 +1,3 @@
1
+ <div class="about">
2
+ {{ content }}
3
+ </div>
@@ -1,6 +0,0 @@
1
- <div class="canvas">
2
- <div class="header">
3
- {% include social-links.html %}
4
- {% include intro.html %}
5
- </div>
6
- </div>
data/_includes/intro.html CHANGED
@@ -1,9 +1,7 @@
1
1
  <h1 class="intro">
2
- <span class="user-username" data-name="{{ site.user.name }}">{{ site.user.username }}</span>
3
- <span class="user-name">{{ site.user.name }}</span>
2
+ <span class="user-username-prefix" data-postfix="{{ site.user.name }}">{{ site.user.username-prefix }}</span>
3
+ <span class="user-username">{{ site.user.username }}</span>
4
+ <span class="user-name" data-prefix="{{ site.user.username-prefix }}">{{ site.user.name }}</span>
4
5
  <span class="user-title">{{ site.user.title }}</span>
5
6
  <span class="user-short-description">{{ site.user.short-description }}</span>
6
7
  </h1>
7
- <div class="user-description">
8
- {{ site.user.description }}
9
- </div>
@@ -0,0 +1,13 @@
1
+ <div class="links-grid">
2
+ {% assign links = include.links %}
3
+ {% for item in links %}
4
+ <a
5
+ href="{% if item.internal %}{{ item.url | relative_url }}{% else %}{{ item.url }}{% endif %}"
6
+ class="link-item"
7
+ {% unless item.internal %} target="_blank" rel="noopener"{% endunless %}
8
+ >
9
+ <i class="{{ item.icon }}"></i>
10
+ <span class="label">{{ item.label }}</span>
11
+ </a>
12
+ {% endfor %}
13
+ </div>
@@ -0,0 +1,12 @@
1
+ <div class="links-line">
2
+ {% assign links = include.links %}
3
+ {% for item in links %}
4
+ <a
5
+ aria-label="{{ item.label }}"
6
+ {% unless item.internal %}target="_blank" rel="noopener"{% endunless %}
7
+ href="{% if item.internal %}{{ item.url | relative_url }}{% else %}{{ item.url }}{% endif %}"
8
+ >
9
+ <i class="icon {{ item.icon }}" aria-hidden="true"></i>
10
+ </a>
11
+ {% endfor %}
12
+ </div>
@@ -0,0 +1,35 @@
1
+ <div class="sidebar">
2
+ <ul class="sidebar-internal-links">
3
+ {% assign links = include.internal-links %}
4
+ {% for item in links %}
5
+ <li>
6
+ <a
7
+ aria-label="{{ item.label }}"
8
+ {% unless item.internal %}target="_blank" rel="noopener"{% endunless %}
9
+ href="{% if item.internal %}{{ item.url | relative_url }}{% else %}{{ item.url }}{% endif %}"
10
+ class="link-item"
11
+ >
12
+ <i class="{{ item.icon }}"></i>
13
+ <span class="label">{{ item.label }}</span>
14
+ </a>
15
+ </li>
16
+ {% endfor %}
17
+ </ul>
18
+ <hr class="divider">
19
+ <ul class="sidebar-links">
20
+ {% assign links = include.links %}
21
+ {% for item in links %}
22
+ <li>
23
+ <a
24
+ aria-label="{{ item.label }}"
25
+ {% unless item.internal %}target="_blank" rel="noopener"{% endunless %}
26
+ href="{% if item.internal %}{{ item.url | relative_url }}{% else %}{{ item.url }}{% endif %}"
27
+ class="link-item"
28
+ >
29
+ <i class="{{ item.icon }}"></i>
30
+ <span class="label">{{ item.label }}</span>
31
+ </a>
32
+ </li>
33
+ {% endfor %}
34
+ </ul>
35
+ </div>
@@ -1,3 +1,2 @@
1
1
  <!-- Auto-generated local vendor scripts -->
2
- <script src="{{ "/assets/js/vendor/particles.js" | relative_url }}"></script>
3
2
  <script src="{{ "/assets/js/vendor/sweet-scroll.min.js" | relative_url }}"></script>
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ {% include head.html %}
4
+ <body>
5
+ <div id="solid-bg" aria-hidden="true"></div>
6
+ {% include sidebar.html internal-links=site.data.internal-links links=site.data.social-links %}
7
+ <div class="site-wrapper">
8
+ <div class="canvas">
9
+ <div class="header">
10
+ <a href="{{ '/' | relative_url }}" class="home-button"><i class="fa-solid fa-home"></i></a>
11
+ </div>
12
+ {% include about.html %}
13
+ </div>
14
+ <main id="main" role="main" class="site-main"></main>{% include footer.html %}
15
+ </div>
16
+ {% include post-scripts.html %}
17
+ </body>
18
+ </html>
@@ -1,21 +1,21 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- {% include head.html %}
4
- <body>
5
- {% if site.particles %}
6
- <div id="particles-js" aria-hidden="true"></div>
7
- {% else %}
8
- <div id="solid-bg" aria-hidden="true"></div>
9
- {% endif %}
10
-
11
- <div class="site-wrapper">
12
- {% include header.html %}
13
- <main id="main" role="main" class="site-main">
14
- {% include about.html %}
15
- {{ content }}
16
- </main>
17
- {% include footer.html %}
18
- </div>
19
- {% include post-scripts.html %}
20
- </body>
3
+ {% include head.html %}
4
+ <body>
5
+ <div id="solid-bg" aria-hidden="true"></div>
6
+ <div class="site-wrapper">
7
+ <div class="canvas">
8
+ <div class="header">
9
+ </div>
10
+ {% include intro.html %}
11
+ <div style="color: #fff; visibility: hidden;">.</div>
12
+ <div style="color: #fff; visibility: hidden;">.</div>
13
+ {% include links-grid.html links=site.data.internal-links %}
14
+ </div>
15
+ <main id="main" role="main" class="site-main"></main>
16
+ {% include links-line.html links=site.data.social-links %}
17
+ {% include footer.html %}
18
+ </div>
19
+ {% include post-scripts.html %}
20
+ </body>
21
21
  </html>
@@ -0,0 +1,21 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ {% include head.html %}
4
+ <body>
5
+ <div id="solid-bg" aria-hidden="true"></div>
6
+ {% include sidebar.html internal-links=site.data.internal-links links=site.data.social-links %}
7
+ <div class="site-wrapper">
8
+ <div class="canvas">
9
+ <div class="header">
10
+ <a href="{{ '/' | relative_url }}" class="home-button"><i class="fa-solid fa-home"></i></a>
11
+ </div>
12
+ <div class="under-construction">
13
+ <i class="fa-solid fa-person-digging"></i>
14
+ <span class="description">This page is currently under ongoing construction.</span>
15
+ </div>
16
+ </div>
17
+ <main id="main" role="main" class="site-main"></main>{% include footer.html %}
18
+ </div>
19
+ {% include post-scripts.html %}
20
+ </body>
21
+ </html>
data/_sass/_about.scss CHANGED
@@ -0,0 +1,18 @@
1
+ $color-user-description: #b0a590;
2
+ $size-user-description: clamp(0.9rem, 1.2vw + 0.8rem, 1.3rem);
3
+
4
+ .header {
5
+ max-width: 80vw !important;
6
+ }
7
+
8
+ .about {
9
+ font-family: 'Roboto Mono', 'Ubuntu Mono';
10
+ max-width: 1000px; // limits line length for readability
11
+ display: block;
12
+ margin: 3rem auto 0; // centers content below header
13
+ line-height: 2.0; // more comfortable for long text
14
+ font-weight: 400;
15
+ font-size: $size-user-description;
16
+ text-align: justify !important;
17
+ color: $color-user-description;
18
+ }
data/_sass/_base.scss CHANGED
@@ -1,8 +1,6 @@
1
- @import 'normalize'; // fetchNormalize writes _scss/_normalize.scss before build
1
+ @import 'normalize';
2
2
 
3
3
  :root {
4
- --color-text: #555;
5
- --color-heading: #333;
6
4
  --base-font-size: 100%; // respects user settings; typically 16px
7
5
  --base-line-height: 1.5;
8
6
  --scale-h1: 2.5rem;
@@ -35,16 +33,14 @@ body {
35
33
  line-height: var(--base-line-height);
36
34
  color: var(--color-text);
37
35
 
38
- /* change this to whatever primary typeface your fonts.css provides */
39
- font-family: 'Antic Slab', Georgia, "Times New Roman", serif;
36
+ font-family: 'Roboto', 'Averia Serif Libre';
40
37
  font-weight: 400;
41
38
  background: transparent;
42
39
  }
43
40
 
44
41
  main {
45
42
  flex: 1;
46
-
47
- flex: 1;}
43
+ }
48
44
 
49
45
  /* HTML5 elements default display (kept for older UA compatibility) */
50
46
  article, aside, figcaption, figure, footer, header, nav, section {
@@ -93,7 +89,6 @@ sup { vertical-align: super; }
93
89
  sub { vertical-align: sub; }
94
90
 
95
91
 
96
- /* ensure content sits above background particles */
97
92
  .site-wrapper {
98
93
  position: relative;
99
94
  z-index: 1;
data/_sass/_bg.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  height: 100%;
7
7
  z-index: -1;
8
8
 
9
- background: $main;
9
+ background: $color-main;
10
10
  background-repeat: no-repeat;
11
11
  background-size: cover;
12
12
  background-attachment: fixed;
data/_sass/_footer.scss CHANGED
@@ -1,16 +1,18 @@
1
+ $color-footer-quote: #fff;
2
+ $size-footer-quote: clamp(0.1rem, 0.5vw + 0.4rem, 1.5rem);
3
+
1
4
  .footer {
2
5
  z-index: 1;
3
6
  padding: 5px 0;
4
7
  margin-top: 0;
5
8
  text-align: center;
6
- color: #FFF;
7
9
 
8
10
  .footer-quote {
9
11
  font-family: 'Ubuntu Mono';
10
12
  display: block;
11
13
  line-height: 1.15;
12
14
  font-weight: 400;
13
- color: inherit;
14
- font-size: clamp(0.1rem, 0.5vw + 0.4rem, 1.5rem);
15
+ color: $color-footer-quote;
16
+ font-size: $size-footer-quote;
15
17
  }
16
18
  }
data/_sass/_header.scss CHANGED
@@ -1,10 +1,3 @@
1
- $cut: 720px !default;
2
- $link-color: #ffffff !default; // link/icon foreground
3
- $bg-color: transparent !default;
4
-
5
- $icon-size-sm: 1.25rem !default; // ~20px
6
- $icon-size-lg: 1.875rem !default; // ~30px
7
-
8
1
  /* Canvas / hero wrapper (keeps header vertically centered when used as hero) */
9
2
  .canvas {
10
3
  display: flex;
@@ -13,14 +6,13 @@ $icon-size-lg: 1.875rem !default; // ~30px
13
6
  align-items: center;
14
7
  text-align: center;
15
8
  padding: 2rem 1rem; /* breathing room on small screens */
16
- background: $bg-color;
9
+ background: transparent;
17
10
  box-sizing: border-box;
18
11
  }
19
12
 
20
13
  /* Main header block */
21
14
  .header {
22
- font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
23
- color: $link-color;
15
+ font-family: Roboto;
24
16
  position: relative; /* stays in flow, allows z-indexing */
25
17
  z-index: 1; /* sits above particle canvas (z-index:0) */
26
18
  margin: 0 auto;
data/_sass/_intro.scss CHANGED
@@ -1,8 +1,14 @@
1
- $user-username-color: #fff6e8;
2
- $user-name-color: #d1ebd4;
3
- $user-title-color: #eac7ff;
4
- $user-short-description-color: #6ad4a8;
5
- $user-description-color: #e3a36f;
1
+ $color-user-username-prefix: #949494;
2
+ $color-user-username: #fff;
3
+ $color-user-name: #949494;
4
+ $color-user-title: $color-sec;
5
+ $color-user-short-description: $color-sec;
6
+
7
+ $size-user-username-prefix: clamp(0.1rem, 0.1vw + 1.0rem, 2.0rem);
8
+ $size-user-username: clamp(1.0rem, 1.0vw + 2.9rem, 4.5rem);
9
+ $size-user-name: clamp(0.1rem, 0.1vw + 1.0rem, 2.0rem);
10
+ $size-user-title: clamp(0.1rem, 0.6vw + 0.8rem, 1.5rem);
11
+ $size-user-short-description: clamp(1rem, 1.6vw + 0.8rem, 1.5rem);
6
12
 
7
13
  /* Main header block */
8
14
  .intro {
@@ -15,42 +21,67 @@ $user-description-color: #e3a36f;
15
21
  padding: 0.5rem 1rem;
16
22
  text-align: center;
17
23
  white-space: nowrap;
18
- margin-top: 5rem;
24
+ margin-top: 7rem;
19
25
 
20
- /* Title & description */
21
- .user-username {
22
- font-family: 'Amarante';
23
- display: inline-block;
26
+ .user-username-prefix {
27
+ font-family: 'Averia Serif Libre';
24
28
  line-height: 1.05;
25
29
  font-weight: 700;
26
- color: $user-username-color;
27
- font-size: clamp(1.0rem, 1.0vw + 2.9rem, 4.5rem);
30
+ display: inline-block;
31
+ color: $color-user-username-prefix;
32
+ /* fluid size: min 1.5rem, preferred with viewport, max 2.6rem */
33
+ font-size: $size-user-username-prefix;
34
+ /* small vertical tweak if you want it raised/lowered: */
35
+ transform: translateY(0.35rem);
36
+ vertical-align: baseline; /* or text-top/text-bottom */
28
37
 
29
38
  &::before {
30
- content: attr(data-name); /* invisible spacer */
39
+ content: attr(data-postfix); /* invisible spacer */
31
40
  visibility: hidden;
32
41
  white-space: nowrap;
33
42
  /* match typography of the visible name so widths match */
34
43
  font-family: 'Averia Serif Libre';
35
44
  font-weight: 700;
36
45
  line-height: 1.05;
37
- font-size: clamp(0.1rem, 0.1vw + 1.0rem, 2.0rem);
46
+ font-size: $size-user-name;
38
47
  margin-right: 0.3rem;
39
48
  display: inline-block;
40
49
  }
41
50
  }
42
51
 
52
+ .user-username {
53
+ font-family: 'Amarante';
54
+ display: inline-block;
55
+ line-height: 1.05;
56
+ font-weight: 700;
57
+ color: $color-user-username;
58
+ font-size: $size-user-username;
59
+ }
60
+
43
61
  .user-name {
44
62
  font-family: 'Averia Serif Libre';
45
63
  line-height: 1.05;
46
64
  font-weight: 700;
47
65
  display: inline-block;
48
- color: $user-name-color;
66
+ color: $color-user-name;
49
67
  /* fluid size: min 1.5rem, preferred with viewport, max 2.6rem */
50
- font-size: clamp(0.1rem, 0.1vw + 1.0rem, 2.0rem);
68
+ font-size: $size-user-name;
51
69
  /* small vertical tweak if you want it raised/lowered: */
52
- transform: translateX(0.3rem) translateY(0.35rem);
70
+ transform: translateY(0.35rem);
53
71
  vertical-align: baseline; /* or text-top/text-bottom */
72
+
73
+ &::after {
74
+ content: attr(data-prefix); /* invisible spacer */
75
+ visibility: hidden;
76
+ white-space: nowrap;
77
+ /* match typography of the visible name so widths match */
78
+ font-family: 'Averia Serif Libre';
79
+ font-weight: 700;
80
+ line-height: 1.05;
81
+ font-size: $size-user-username-prefix;
82
+ margin-left: 0.3rem;
83
+ display: inline-block;
84
+ }
54
85
  }
55
86
 
56
87
  .user-title {
@@ -59,8 +90,8 @@ $user-description-color: #e3a36f;
59
90
  margin: 0.5rem 0 0;
60
91
  line-height: 1.15;
61
92
  font-weight: 400;
62
- color: $user-title-color;
63
- font-size: clamp(0.1rem, 0.6vw + 0.8rem, 1.5rem);
93
+ color: $color-user-title;
94
+ font-size: $size-user-title;
64
95
  }
65
96
 
66
97
  .user-short-description {
@@ -69,19 +100,7 @@ $user-description-color: #e3a36f;
69
100
  margin: 1.9rem 0 0;
70
101
  line-height: 1.15;
71
102
  font-weight: 400;
72
- color: $user-short-description-color;
73
- font-size: clamp(1rem, 1.6vw + 0.8rem, 1.5rem);
103
+ color: $color-user-short-description;
104
+ font-size: $size-user-short-description;
74
105
  }
75
106
  }
76
-
77
- .user-description {
78
- font-family: 'Roboto Mono', 'Ubuntu Mono';
79
- max-width: 650px; // limits line length for readability
80
- display: block;
81
- margin: 3rem auto 0; // centers content below header
82
- line-height: 2.0; // more comfortable for long text
83
- font-weight: 400;
84
- font-size: clamp(0.9rem, 1.2vw + 0.8rem, 1.2rem);
85
- text-align: justify !important;
86
- color: $user-description-color;
87
- }
@@ -0,0 +1,50 @@
1
+ .links-grid {
2
+ display: grid;
3
+ transform: translateX(1.1rem);
4
+ margin-top: 1rem;
5
+ justify-content: center;
6
+ align-items: center;
7
+ grid-template-columns: repeat(2, minmax(120px, 1fr));
8
+ gap: 1rem 2rem; /* vertical and horizontal spacing */
9
+
10
+ .link-item {
11
+ display: flex;
12
+ align-items: center;
13
+ text-decoration: none;
14
+ transition: color 0.2s, transform 0.2s;
15
+
16
+ i {
17
+ margin-right: 0.6rem;
18
+ color: $color-icon;
19
+ width: $size-icon-small;
20
+ height: $size-icon-small;
21
+ border-radius: 0%;
22
+ background: transparent;
23
+ transition: color 180ms ease, background-color 180ms ease, transform 120ms ease;
24
+ line-height: 1;
25
+
26
+ font-size: $size-icon-small;
27
+ @media (min-width: #{$size-cut}) {
28
+ width: $size-icon-large;
29
+ height: $size-icon-large;
30
+ font-size: $size-icon-large;
31
+ }
32
+ }
33
+
34
+ &:hover i,
35
+ &:focus i {
36
+ transform: translateY(-3px) scale(1.05);
37
+ }
38
+
39
+ &:active i {
40
+ transform: translateY(-1px) scale(0.99);
41
+ }
42
+
43
+ .label {
44
+ font-size: $size-icon-text;
45
+ color: $color-icon;
46
+ font-family: "Grenze Gotisch";
47
+ display: inline-flex;
48
+ }
49
+ }
50
+ }
@@ -1,8 +1,9 @@
1
- .social-links {
1
+ .links-line {
2
2
  display: flex;
3
- gap: 0.375rem;
3
+ gap: 1.375rem;
4
4
  justify-content: center;
5
5
  align-items: center;
6
+ margin-top: 2rem;
6
7
 
7
8
  a {
8
9
  /* anchors wrapping icons should be inline-flex so hit area is predictable */
@@ -22,32 +23,32 @@
22
23
  display: inline-flex;
23
24
  align-items: center;
24
25
  justify-content: center;
25
- color: $link-color;
26
- width: $icon-size-sm;
27
- height: $icon-size-sm;
28
- font-size: $icon-size-sm;
29
- padding: 0.5rem; /* creates a comfortable touch target */
30
- margin: 0.25rem;
31
- border-radius: 50%;
26
+ color: $color-icon;
27
+ width: $size-icon-small;
28
+ height: $size-icon-small;
29
+ font-size: $size-icon-small;
30
+ padding: 1.15rem; /* creates a comfortable touch target */
31
+ margin: 0.1rem;
32
+ border-radius: 0%;
32
33
  background: transparent;
33
34
  transition: color 180ms ease, background-color 180ms ease, transform 120ms ease;
34
35
  line-height: 1;
35
36
 
36
37
  &:hover,
37
38
  &:focus {
38
- color: $main;
39
- background: #fff;
40
- transform: translateY(-3px);
39
+ color: $color-icon;
40
+ background: $color-main;
41
+ transform: translateY(-3px) scale(1.05);
41
42
  }
42
43
 
43
44
  &:active {
44
45
  transform: translateY(-1px) scale(0.99);
45
46
  }
46
47
 
47
- @media (min-width: #{$cut}) {
48
- width: $icon-size-lg;
49
- height: $icon-size-lg;
50
- font-size: $icon-size-lg;
48
+ @media (min-width: #{$size-cut}) {
49
+ width: $size-icon-large;
50
+ height: $size-icon-large;
51
+ font-size: $size-icon-large;
51
52
  }
52
53
  }
53
54
  }