Skip to content

Commit b970d98

Browse files
VJAIVJAI
committed
small image issues inside figure
1 parent 4b67720 commit b970d98

10 files changed

+151
-140
lines changed

‎docs/contact.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ <h1>
150150

151151
<div class="cmp__responsive">
152152
<div class="cmp__newsletter-subscribe">
153-
<div class="cmp__rounded-icon">
153+
<div class="cmp__icon-container">
154154
<cmp-icon name="envelope-fill" size="32"></cmp-icon>
155155
</div>
156156
<p>

‎docs/fibonacci.css

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

‎src/contact.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ <h1>
150150

151151
<div class="cmp__responsive">
152152
<div class="cmp__newsletter-subscribe">
153-
<div class="cmp__rounded-icon">
153+
<div class="cmp__icon-container">
154154
<cmp-icon name="envelope-fill" size="32"></cmp-icon>
155155
</div>
156156
<p>

‎src/scss/base/_carousel.scss

-12
Original file line numberDiff line numberDiff line change
@@ -67,18 +67,6 @@
6767
&:focus-visible {
6868
outline-offset: -5px;
6969
}
70-
71-
&:not(:last-child)::after {
72-
position: absolute;
73-
right: -5px;
74-
content: '';
75-
width: var(--cmp-connector-size);
76-
height: var(--cmp-connector-size);
77-
border-radius: 50%;
78-
background-color: fibVars.$gray;
79-
border: solid 2px fibVars.$white;
80-
z-index: 1;
81-
}
8270
}
8371
}
8472

‎src/scss/base/_figure.scss

+10
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,14 @@ figure, .cmp__figure {
5252
pre {
5353
padding: fibVars.$small-padding;
5454
}
55+
56+
&.cmp__img-no-decor, &.cmp__img-min {
57+
img {
58+
@include fibMixins.no_shadow_radius;
59+
}
60+
}
61+
62+
&.cmp__img-center, &.cmp__img-min {
63+
@include fibMixins.flex_init($column: true, $hor: true);
64+
}
5565
}

‎src/scss/base/_misc.scss

+58-45
Original file line numberDiff line numberDiff line change
@@ -90,50 +90,6 @@ address {
9090
width: 100%;
9191
}
9292

93-
// Status Colors.
94-
$statuses: ("info": fibVars.$dim-gray, "success": fibVars.$success, "warn": fibVars.$warn, "error": fibVars.$error);
95-
96-
@each $name, $color in $statuses {
97-
.cmp__status-#{$name} {
98-
--cmp-bg-color: #{$color};
99-
--cmp-bg-color-dark: #{darken($color, 5%)};
100-
background-color: var(--cmp-bg-color);
101-
}
102-
}
103-
104-
// Constants.
105-
$breakpoints: (
106-
"mob": fibVars.$mobile,
107-
"tab": fibVars.$tablet,
108-
"desk": fibVars.$desktop
109-
);
110-
111-
$sizes: (
112-
"xs": fibVars.$xs-size,
113-
"sm": fibVars.$sm-size,
114-
"md": fibVars.$md-size,
115-
"lg": fibVars.$lg-size,
116-
"xl": fibVars.$xl-size,
117-
"xxl": fibVars.$xxl-size
118-
);
119-
120-
$colors: (
121-
"brand": fibVars.$brand-color,
122-
"brand-dark": fibVars.$brand-dark,
123-
"brand-light": fibVars.$brand-light,
124-
"brand-bg": fibVars.$brand-bg,
125-
"dark-gray": fibVars.$dark-gray,
126-
"medium-gray": fibVars.$medium-gray,
127-
"light-gray": fibVars.$gray,
128-
"dim-gray": fibVars.$dim-gray,
129-
"brand-gray": fibVars.$brand-gray,
130-
"white-color": fibVars.$white,
131-
"black-color": fibVars.$black,
132-
"success-color": fibVars.$success,
133-
"warn-color": fibVars.$warn,
134-
"error-color": fibVars.$error
135-
);
136-
13793
// Floats & Responsive Floats.
13894
.cmp__float-left {
13995
float: left;
@@ -155,6 +111,13 @@ $colors: (
155111
clear: both;
156112
}
157113

114+
.cmp__comp-center > * {
115+
margin: {
116+
left: auto;
117+
right: auto;
118+
}
119+
}
120+
158121
.cmp__no-radius {
159122
border-radius: 0 !important;
160123
}
@@ -163,6 +126,18 @@ $colors: (
163126
box-shadow: none !important;
164127
}
165128

129+
.cmp__no-radius-shadow {
130+
@extend .cmp__no-radius;
131+
@extend .cmp__no-shadow;
132+
}
133+
134+
// Constants.
135+
$breakpoints: (
136+
"mob": fibVars.$mobile,
137+
"tab": fibVars.$tablet,
138+
"desk": fibVars.$desktop
139+
);
140+
166141
@each $name, $breakpoint in $breakpoints {
167142
@media only screen and (min-width: $breakpoint) {
168143
.cmp__#{$name}-float-left {
@@ -196,6 +171,16 @@ $colors: (
196171
padding: 0;
197172
}
198173

174+
// Sizes.
175+
$sizes: (
176+
"xs": fibVars.$xs-size,
177+
"sm": fibVars.$sm-size,
178+
"md": fibVars.$md-size,
179+
"lg": fibVars.$lg-size,
180+
"xl": fibVars.$xl-size,
181+
"xxl": fibVars.$xxl-size
182+
);
183+
199184
@each $name, $size in $sizes {
200185

201186
// Paddings.
@@ -338,8 +323,36 @@ $colors: (
338323
}
339324
}
340325

326+
// Status Colors.
327+
$statuses: ("info": fibVars.$dim-gray, "success": fibVars.$success, "warn": fibVars.$warn, "error": fibVars.$error);
328+
329+
@each $name, $color in $statuses {
330+
.cmp__status-#{$name} {
331+
--cmp-bg-color: #{$color};
332+
--cmp-bg-color-dark: #{darken($color, 5%)};
333+
background-color: var(--cmp-bg-color);
334+
}
335+
}
336+
337+
$colors: (
338+
"brand": fibVars.$brand-color,
339+
"brand-dark": fibVars.$brand-dark,
340+
"brand-light": fibVars.$brand-light,
341+
"brand-bg": fibVars.$brand-bg,
342+
"dark-gray": fibVars.$dark-gray,
343+
"medium-gray": fibVars.$medium-gray,
344+
"light-gray": fibVars.$gray,
345+
"dim-gray": fibVars.$dim-gray,
346+
"brand-gray": fibVars.$brand-gray,
347+
"white-color": fibVars.$white,
348+
"black-color": fibVars.$black,
349+
"success-color": fibVars.$success,
350+
"warn-color": fibVars.$warn,
351+
"error-color": fibVars.$error
352+
);
353+
341354
// Color Classes.
342-
@each $name, $color in $sizes {
355+
@each $name, $color in $colors {
343356
.cmp__#{$name}-color {
344357
color: $color;
345358
}

‎src/scss/site/_article.scss

-19
Original file line numberDiff line numberDiff line change
@@ -298,23 +298,4 @@ blockquote {
298298
&.cmp__responsive {
299299
@include fibMixins.no_shadow_radius;
300300
}
301-
}
302-
303-
.cmp__responsive {
304-
max-width: 100%;
305-
@include fibMixins.set_hor_margin(0);
306-
307-
&.cmp__toc,
308-
&.cmp__widget,
309-
&.cmp__sub {
310-
@include fibMixins.no_shadow_radius;
311-
}
312-
313-
figcaption, caption {
314-
@include fibMixins.set_hor_margin(fibVars.$lg-size);
315-
}
316-
317-
img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card {
318-
@include fibMixins.no_shadow_radius;
319-
}
320301
}

‎src/scss/site/_common.scss

+71
Original file line numberDiff line numberDiff line change
@@ -144,4 +144,75 @@
144144

145145
.cmp__tags {
146146
@extend %cmp__tags;
147+
}
148+
149+
// In small screens, make the content fluid and fixed in large.
150+
.cmp__auto-layout {
151+
> * {
152+
@include fibMixins.set_hor_margin(fibVars.$lg-size);
153+
}
154+
155+
.cmp__sub {
156+
.cmp__responsive {
157+
@include fibMixins.set_hor_margin(0);
158+
}
159+
160+
figure {
161+
figcaption, caption {
162+
@include fibMixins.set_hor_margin(0);
163+
}
164+
}
165+
}
166+
}
167+
168+
// Makes the applied element fixed in large screens and full-width in small screens.
169+
.cmp__responsive {
170+
max-width: 100%;
171+
@include fibMixins.set_hor_margin(0);
172+
173+
&.cmp__toc,
174+
&.cmp__widget,
175+
&.cmp__sub {
176+
@include fibMixins.no_shadow_radius;
177+
}
178+
179+
figcaption, caption {
180+
@include fibMixins.set_hor_margin(fibVars.$lg-size);
181+
}
182+
183+
img, .cmp__table-wrapper, pre, .cmp__widget, .cmp__card {
184+
@include fibMixins.no_shadow_radius;
185+
}
186+
}
187+
188+
// Page custom heading.
189+
.cmp__section-heading {
190+
$border-color: darken(fibVars.$dim-gray, 10%);
191+
192+
position: relative;
193+
@include fibMixins.flex_init($center: true);
194+
margin: {
195+
top: fibVars.$xxl-size;
196+
bottom: fibVars.$xl-size;
197+
};
198+
199+
color: fibVars.$gray;
200+
201+
span {
202+
@include fibMixins.create_double_side_arrowed_ribbon(fibVars.$widget-ribbon-height, fibVars.$widget-ribbon-bg);
203+
padding: 0 fibVars.$sm-size;
204+
@include fibMixins.set_uppercase($family: fibVars.$heading-font-family);
205+
font-weight: bold;
206+
color: fibVars.$widget-ribbon-color;
207+
z-index: 1;
208+
}
209+
210+
&:after {
211+
position: absolute;
212+
left: 0;
213+
top: 50%;
214+
content: '';
215+
width: 100%;
216+
border-bottom: solid 1px $border-color;
217+
}
147218
}

‎src/scss/site/_media.scss

+2-10
Original file line numberDiff line numberDiff line change
@@ -277,16 +277,8 @@
277277
@media only screen and (min-width: fibVars.$desktop) {
278278

279279
// Navigation.
280-
.cmp__blog-nav {
281-
ul {
282-
li {
283-
a {
284-
.cmp__nav-link-text {
285-
display: block;
286-
}
287-
}
288-
}
289-
}
280+
.cmp__blog-nav ul li a .cmp__nav-link-text {
281+
display: block;
290282
}
291283

292284
// Blog content.

‎src/scss/site/_site.scss

+7-51
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ html, body {
111111
letter-spacing: fibVars.$large-letter-spacing;
112112
word-spacing: fibFuncs.size(-10);
113113

114+
background: linear-gradient(fibVars.$brand-color, fibVars.$brand-dark);
115+
-webkit-background-clip: text;
116+
-webkit-text-fill-color: transparent;
114117
color: lighten(fibVars.$brand-color, 3%);
115118

116119
&::after {
@@ -126,6 +129,10 @@ html, body {
126129
left: calc(#{fibVars.$h1-border-width} + 10px);
127130
}
128131

132+
&::selection {
133+
-webkit-text-fill-color: fibVars.$white;
134+
}
135+
129136
&.cmp__has-icon {
130137
@include fibMixins.flex_init($ver: true, $wrap: true);
131138

@@ -152,58 +159,7 @@ html, body {
152159
}
153160
}
154161

155-
// Page custom heading.
156-
.cmp__section-heading {
157-
$border-color: darken(fibVars.$dim-gray, 10%);
158-
159-
position: relative;
160-
@include fibMixins.flex_init($center: true);
161-
margin: {
162-
top: fibVars.$xxl-size;
163-
bottom: fibVars.$xl-size;
164-
};
165-
166-
color: fibVars.$gray;
167-
168-
span {
169-
@include fibMixins.create_double_side_arrowed_ribbon(fibVars.$widget-ribbon-height, fibVars.$widget-ribbon-bg);
170-
padding: 0 fibVars.$sm-size;
171-
@include fibMixins.set_uppercase($family: fibVars.$heading-font-family);
172-
font-weight: bold;
173-
color: fibVars.$widget-ribbon-color;
174-
z-index: 1;
175-
}
176-
177-
&:after {
178-
position: absolute;
179-
left: 0;
180-
top: 50%;
181-
content: '';
182-
width: 100%;
183-
border-bottom: solid 1px $border-color;
184-
}
185-
}
186-
187162
// Page Content.
188163
.cmp__blog-content {
189164
margin-bottom: fibVars.$xl-size;
190-
}
191-
192-
// In small screens, make the content fluid and fixed in large.
193-
.cmp__auto-layout {
194-
> * {
195-
@include fibMixins.set_hor_margin(fibVars.$lg-size);
196-
}
197-
198-
.cmp__sub {
199-
.cmp__responsive {
200-
@include fibMixins.set_hor_margin(0);
201-
}
202-
203-
figure {
204-
figcaption, caption {
205-
@include fibMixins.set_hor_margin(0);
206-
}
207-
}
208-
}
209165
}

0 commit comments

Comments
 (0)