Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icon CSS Fix Attempt #13

Merged
merged 4 commits into from
Dec 26, 2023
Merged

Icon CSS Fix Attempt #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b9b439
css fix progress completed for instagram and github icon
karkir0003 Dec 26, 2023
339eb0f
state of icons in Contact.js with the icons not fitting into the circles
karkir0003 Dec 26, 2023
2bbb82f
make the .fa-icon style only care about the font size
karkir0003 Dec 26, 2023
97e16c8
css deprecation warning fixes + icon resizing
karkir0003 Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/articles/Contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ const Contact = () => {
</form>
<ul className="icons">
<li><a href="#">
<FontAwesomeIcon icon={faTwitter} />
<FontAwesomeIcon className="fa-icon" icon={faTwitter} />
</a></li>
<li><a href="#">
<FontAwesomeIcon icon={faFacebook} />
<FontAwesomeIcon className="fa-icon" icon={faFacebook} />
</a></li>
<li><a href="#">
<FontAwesomeIcon icon={faInstagram} />
<FontAwesomeIcon className="fa-icon" icon={faInstagram} />
</a></li>
<li><a href="#">
<FontAwesomeIcon icon={faGithub} />
<FontAwesomeIcon className="fa-icon" icon={faGithub} />
</a></li>
</ul>
</>
Expand Down
2 changes: 1 addition & 1 deletion styles/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
border-left: solid (_size(border-width) * 4) _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
padding: calc(_size(element-margin) / 4) 0 calc(_size(element-margin) / 4) _size(element-margin);
}

code {
Expand Down
8 changes: 7 additions & 1 deletion styles/components/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,13 @@
a {
border-radius: 100%;
box-shadow: inset 0 0 0 _size(border-width) _palette(border);
display: inline-block;
display: inline-flex;
height: 2.25rem;
line-height: 2.25rem;
text-align: center;
width: 2.25rem;
align-items: center;
justify-content: center;

&:hover {
background-color: _palette(border-bg);
Expand All @@ -69,6 +71,10 @@
&:active {
background-color: _palette(border-bg-alt);
}

.fa-icon {
font-size: 1.5rem; // Adjust the size of the icon as needed
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions styles/libs/_skel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

/// Breakpoints.
/// @var {list}
$breakpoints: () !global;
$breakpoints: ();

/// Vendor prefixes.
/// @var {list}
Expand Down Expand Up @@ -573,7 +573,7 @@
}

// Expand just the value?
@elseif $expandValue {
@else if $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
Expand Down