Skip to content

Commit cf79448

Browse files
author
Aaron N. Brock
authored
Merge pull request #14 from AaronNBrock/bootstrap-refactor-typography
Bootstrap refactor typography
2 parents 324b1f3 + f6c0b82 commit cf79448

Some content is hidden

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

51 files changed

+1311
-2300
lines changed

‎assets/js/script.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ $(document).ready(function () {
110110
});
111111

112112
// skill count
113-
114113
$(".skill__progress").waypoint(
115114
function () {
116115
$(".progress-value span").each(function () {
@@ -174,8 +173,7 @@ $(document).ready(function () {
174173
// columnWidth: 200,
175174
});
176175

177-
// blob animation
178-
176+
// blob animation
179177
var tl = new TimelineMax({
180178
yoyo: true,
181179
repeat: -1,

‎assets/scss/_buttons.scss

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,12 @@
88
// }
99
// }
1010

11-
// .hire_button{
12-
// background: $primary_color;
13-
// padding: 15px 30px;
14-
// color: #fff;
15-
// text-decoration: none;
16-
// border-radius: 7px;
17-
// font-size: 16px;
18-
// font-family: $secondary-font;
19-
// font-weight: 400;
20-
// border: 1px solid transparent;
21-
// transition: all .3s ease;
22-
// transform: scale(1);
23-
// &:hover{
24-
// background: #425FEE;
25-
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
26-
// transform: scale(1.03);
27-
// }
28-
// @include desktop{
29-
// text-align: center;
30-
// }
31-
// }
32-
3311
// Button Override
3412
.btn {
3513
display: inline-block;
3614
padding: 15px 30px;
37-
font-family: $secondary-font;
3815
font-size: 16px;
39-
// background: $primary-color;
4016
border-radius: 7px;
41-
//color: #fff;
42-
// ext-decoration: none;
43-
// border: 1px solid transparent;
44-
// transition: all 0.3s ease;
45-
// transform: scale(1);
46-
// &:hover {
47-
// background: #425fee;
48-
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
49-
// transform: scale(1.03);
50-
// }
5117
}
5218

5319
.btn-lg {
@@ -68,4 +34,4 @@
6834
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
6935
transform: scale(1.03);
7036
}
71-
}
37+
}

‎assets/scss/_common.scss

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
// html{
2-
// scroll-behavior: smooth;
3-
// }
4-
5-
// body {
6-
// background: $body-color;
7-
// }
8-
91
.section{
102
padding: 100px 0;
113
}
124

5+
.unstyle-list {
6+
list-style-type: none;
7+
padding-left: 0;
8+
margin-right: 0;
9+
}
10+

‎assets/scss/_typography.scss

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,64 @@
1-
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap');
1+
.base-font {
2+
font-family: $font-family-base;
3+
}
24

3-
// body{
4-
// font-family: $primary-font;
5-
// font-size: 16px;
6-
// color: $text-color;
7-
// }
5+
* {
6+
transition: all 0.3s ease;
7+
}
88

9-
// h1, h2, h3, h4, h5, h6{
10-
// font-family: $primary-font;
11-
// font-weight: 600;
12-
// color: $text-color-dark;
13-
// }
9+
a.text-light,
10+
a.text-dark {
11+
// transition: all 0.3s ease;
12+
&:hover {
13+
color: $primary !important;
14+
}
15+
}
1416

15-
// p{
16-
// font-size: 16px;
17-
// color: $text-color;
18-
// }
17+
.top-title {
18+
font-size: 20px;
19+
display: block;
20+
color: $dark;
21+
@extend .mb-3;
22+
}
1923

20-
// h1{
21-
// font-size: 60px;
22-
// }
24+
.pre-line {
25+
margin-left: 20px;
26+
position: relative;
27+
&::before {
28+
position: absolute;
29+
content: "";
30+
height: 2px;
31+
width: 20px;
32+
top: 50%;
33+
left: -20px;
34+
transform: translateX(-50%);
35+
background: $secondary;
36+
}
37+
}
2338

24-
// h2{
25-
// font-size: 50px;
26-
// }
27-
28-
// h3{
29-
// font-size: 30px;
30-
// }
31-
32-
// h4{
33-
// font-size: 25px;
34-
// }
35-
36-
// h5{
37-
// font-size: 18px;
38-
// }
39-
40-
// h6{
41-
// font-size: 15px;
42-
// font-weight: 300;
43-
// }
39+
// This fixes the fact that with `markdownify` we can't add `text-light`
40+
// directly onto the generated `h1`, `h2` etc.
41+
.text-white {
42+
h1,
43+
h2,
44+
h3,
45+
h4,
46+
h5,
47+
h6 {
48+
color: $white;
49+
}
50+
}
51+
@each $color, $value in $theme-colors {
52+
.text-#{$color} {
53+
h1,
54+
h2,
55+
h3,
56+
h4,
57+
h5,
58+
h6,
59+
p,
60+
span {
61+
color: $value;
62+
}
63+
}
64+
}

‎assets/scss/_variables.scss

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
1-
//site color variables
2-
$primary-color: #5D78FF;
3-
$secondary-color: #282F49;
4-
$text-color: #9D9EA5;
5-
$text-color-dark: #00113E;
6-
$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
7-
$gray: #F7F9FF;
8-
$dark-gray: #646569;
1+
//
2+
// Colors
3+
//
94

10-
// solid colors
11-
$white: #fff;
12-
$black: #000;
5+
// General
6+
$primary: #5d78ff;
7+
$secondary: #282f49;
8+
// Text
9+
$headings-color: #282f49;
10+
$body-color: #7e7e8a;
1311

14-
// Font Variables
15-
$primary-font: 'Yeseva One', cursive;
16-
$secondary-font: 'Poppins', sans-serif;
12+
//
13+
// Typography
14+
//
1715

18-
// Bootstrap Variables
19-
$primary: #5D78FF;
16+
// Fonts
17+
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap");
18+
$font-family-base: "Poppins", sans-serif;
19+
$headings-font-family: "Yeseva One", cursive;
20+
21+
// Size
22+
$font-size-base: 1.125rem; // 18px
23+
$h1-font-size: 60px;
24+
$h2-font-size: 50px;
25+
$h3-font-size: 30px;
26+
$h4-font-size: 25px;
27+
$h5-font-size: 22px;
28+
$h6-font-size: 16px;
29+
30+
// Spacing
31+
$headings-margin-bottom: 1.5rem;
32+
$line-height-base: 1.75;
33+
34+
// Misc
35+
$link-hover-decoration: none;

‎assets/scss/components/_about-section.scss

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,5 @@
11
.about {
22
overflow: hidden;
3-
&_header {
4-
margin-bottom: 60px;
5-
span {
6-
display: block;
7-
font-size: 20px;
8-
font-family: $secondary-font;
9-
margin: 0 0 30px 0;
10-
}
11-
h1 {
12-
margin: 0 0 20px 0;
13-
font-size: 55px;
14-
font-family: $primary-font;
15-
color: $secondary-color;
16-
line-height: 1;
17-
}
18-
p {
19-
margin: 0;
20-
font-size: 18px;
21-
font-family: $secondary-font;
22-
color: #7e7e8a;
23-
line-height: 30px;
24-
}
25-
}
263
&_content {
274
display: flex;
285
align-items: center;
@@ -92,57 +69,6 @@
9269
display: none;
9370
}
9471
}
95-
h3 {
96-
margin: 0 0 35px 0;
97-
color: $white;
98-
font-family: $primary-font;
99-
}
100-
p {
101-
margin: 0 0 35px 0;
102-
font-size: 15px;
103-
font-family: $secondary-font;
104-
color: $white;
105-
font-weight: 400;
106-
line-height: 30px;
107-
@include desktop {
108-
font-size: 14px;
109-
line-height: 26px;
110-
}
111-
}
112-
ul {
113-
margin: 0;
114-
padding: 0;
115-
li {
116-
list-style: none;
117-
display: inline-block;
118-
// a {
119-
// display: block;
120-
// padding: 15px 30px;
121-
// text-decoration: none;
122-
// color: $white;
123-
// border-radius: 7px;
124-
// transition: all 0.3s ease;
125-
// border: 1px solid #60636f;
126-
// background: transparent;
127-
// &.active {
128-
// background-color: $primary-color;
129-
// border: 1px solid transparent;
130-
// }
131-
// &:hover {
132-
// border: 1px solid #425fee;
133-
// background: #425fee;
134-
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
135-
// transform: scale(1.03);
136-
// }
137-
// }
138-
&:not(:last-child) {
139-
margin-right: 10px;
140-
@include mobile-s {
141-
margin-bottom: 10px;
142-
}
143-
}
144-
}
145-
}
14672
}
14773
}
14874
}

0 commit comments

Comments
 (0)