1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
.small
font-size: $font-size_small
.active
font-weight: 500
#content, header
.icon
margin-right: 5px
display: inline-block
svg
width: auto
header
.icon
fill: white
margin-right: 10px
#content
.icon
fill: $dark-blue
#content:not(.portfolio)
img
width: 110%
display: block
margin: 0 -5%
.published-date, .reading-time
display: inline-block
margin-bottom: 20px
.reading-time
margin-right: 20px
.img-caption
margin-bottom: $margin-blocks/6 !important
.portfolio
img
max-width: 100%
margin-bottom: $margin-blocks
box-shadow: $box-shadow
.rounded-img
+rounded
.testimonial-list
margin: 0 auto
display: flex
.testimonial-container
display: inline-block
text-align: center
.testimonial-name, .testimonial-role
text-align: center
font-weight: $font-weight_h1
font-size: $font-size_main_large
margin-top: -2/3*$margin-blocks
.testimonial-role
font-weight: $font-weight_main
.testimonial-text
position: relative
z-index: 0
.portfolio-tags
margin-top: $margin-blocks/5
span
font-weight: $font-weight_h1
a
overflow-wrap: break-word
.tags
margin-bottom: $margin-blocks/3
#content
.portfolio-list
h2
margin: 0
a, a:hover, a:link, a:active, a:visited, a:focus
border-bottom: none
color: inherit
img
max-width: 100%
border-radius: 2px
display: block
box-shadow: $box-shadow
margin: inherit
.portfolio-container
position: relative
max-width: $max-width-content
margin-bottom: $margin-blocks
.portfolio-details
opacity: 0
display: none
width: 100%
padding: 2em 1em
color: $primary-color
+transition(opacity 0.4s ease)
p, h2
text-align: center
margin-bottom: 0
position: relative
.img-overlay
position: absolute
top: 0
bottom: 0
left: 0
right: 0
height: 100%
width: 100%
opacity: 0
+transition(0.4s ease)
background-color: $dark-blue
&:hover
.img-overlay
opacity: 0.7
.portfolio-details
opacity: 1
display: block
position: absolute
top: 50%
left: 50%
+transform(translate(-50%, -50%))
img::hover
linear-gradient: $dark-blue, $dark-blue
.portfolio-container
+smartphone
img
margin-bottom: 0
.img-overlay
display: none
.portfolio-details
display: block
opacity: 1
width: 100%
padding: 0px
color: $grey-900
h2
font-size: $font-size_h3
line-height: $line-height_main
span
background-image: linear-gradient(180deg, transparent 60%, $primary-color 0)
padding: 0 0.2em
p, h2
text-align: center
margin-bottom: 0
position: relative
&:hover
.portfolio-details
+transform(none)
position: relative
left: 0
.designs, .techs
display: inline-block
.designs
margin-right: 20px
.read-more
margin-top: -$margin-blocks/3
text-align: right
display: block
|
