Switched from images to font-awesome icons

2024-11-09 15:13:44 +05:30 · 2024-11-09 15:13:44 +05:30 · 6794f36905
commit 6794f36905
parent ccb711f549
34 changed files with 15442 additions and 137 deletions
--- a/test/css/repo-home.css
+++ b/test/css/repo-home.css
--- a/test/fonts/fa-brands-400.ttf
+++ b/test/fonts/fa-brands-400.ttf
--- a/test/fonts/fa-brands-400.woff2
+++ b/test/fonts/fa-brands-400.woff2
--- a/test/fonts/fa-regular-400.ttf
+++ b/test/fonts/fa-regular-400.ttf
--- a/test/fonts/fa-regular-400.woff2
+++ b/test/fonts/fa-regular-400.woff2
--- a/test/fonts/fa-solid-900.ttf
+++ b/test/fonts/fa-solid-900.ttf
--- a/test/fonts/fa-solid-900.woff2
+++ b/test/fonts/fa-solid-900.woff2
--- a/test/fonts/fa-v4compatibility.ttf
+++ b/test/fonts/fa-v4compatibility.ttf
--- a/test/fonts/fa-v4compatibility.woff2
+++ b/test/fonts/fa-v4compatibility.woff2
--- a/test/html/repo-home.html
+++ b/test/html/repo-home.html
@ -8,7 +8,7 @@
 	</head>
 	<body>
 		<header>
-  <div class="header-left">
+			<div class="header-section header-left">
 				<a href="/" class="logo">
 					<img src="../images/icon1.png" alt="Gitea Logo" />
 				</a>
@ -17,20 +17,13 @@
 				<a href="/milestones">Milestones</a>
 				<a href="/explore">Explore</a>
 			</div>
-  <div class="header-right">
-    <a href="/notifications">
-      <img src="../images/notif.jpg" alt="Notifications" />
-    </a>
-    <a href="/new-repo">
-      <img src="../images/create.png" alt="Create Repo" />
-    </a>
+			<div class="header-section header-right">
+				<a class="fa-regular fa-bell" href="/notifications"></a>
+				<a class="fa-solid fa-plus" href="/new_repo"></a>
 				<a href="/profile" class="profile-icon">
 					<img src="../images/icon2.png" alt="Profile" />
 				</a>
 			</div>
 		</header>
-
-
-
 	</body>
 </html>
--- a/test/images/create.png
+++ b/test/images/create.png
--- a/test/images/notif.jpg
+++ b/test/images/notif.jpg
--- a/test/scss/_common.scss
+++ b/test/scss/_common.scss
@ -2,6 +2,7 @@
    all: unset;
    margin: 0;
    padding: 0;
+    border: none;
    box-sizing: border-box;
 }

--- a/test/scss/fontawesome6/LICENSE.txt
+++ b/test/scss/fontawesome6/LICENSE.txt
@ -0,0 +1,165 @@
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2024 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**
--- a/test/scss/fontawesome6/scss/_bordered-pulled.scss
+++ b/test/scss/fontawesome6/scss/_bordered-pulled.scss
@ -0,0 +1,20 @@
+// bordered + pulled icons
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
+}
+
+.#{$fa-css-prefix}-pull-left {
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}
+
+.#{$fa-css-prefix}-pull-right {
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}
--- a/test/scss/fontawesome6/scss/_brands.scss
+++ b/test/scss/fontawesome6/scss/_brands.scss
@ -0,0 +1,30 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('../fonts/fa-brands-400.woff2') format('woff2'),
+    url('../fonts/fa-brands-400.ttf') format('truetype');
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
+}
--- a/test/scss/fontawesome6/scss/_core.scss
+++ b/test/scss/fontawesome6/scss/_core.scss
@ -0,0 +1,43 @@
+// base icon class definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
+  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
+}
+
+.#{$fa-css-prefix}-solid,
+.#{$fa-css-prefix}-regular,
+.#{$fa-css-prefix}-brands,
+.fas,
+.far,
+.fab,
+.#{$fa-css-prefix}-sharp-solid,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix} {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-rendering: auto;
+}
+
+.fas,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-solid,
+.far,
+.#{$fa-css-prefix}-regular {
+  font-family: 'Font Awesome 6 Free';
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-family: 'Font Awesome 6 Brands';
+}
+
+
+%fa-icon {
+  @include fa-icon;
+}
--- a/test/scss/fontawesome6/scss/_fixed-width.scss
+++ b/test/scss/fontawesome6/scss/_fixed-width.scss
@ -0,0 +1,7 @@
+// fixed-width icons
+// -------------------------
+
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}
--- a/test/scss/fontawesome6/scss/_fontawesome.scss
+++ b/test/scss/fontawesome6/scss/_fontawesome.scss
@ -0,0 +1,20 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';
--- a/test/scss/fontawesome6/scss/_functions.scss
+++ b/test/scss/fontawesome6/scss/_functions.scss
@ -0,0 +1,57 @@
+// functions
+// --------------------------
+
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+  @return unquote("\"#{ $fa-var }\"");
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+//
+// Licensed under: The MIT License (MIT)
+//
+// Copyright (c) 2011-2021 Twitter, Inc.
+// Copyright (c) 2011-2021 The Bootstrap Authors
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@function fa-divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
+  }
+  @return ($quotient + $remainder) * $sign;
+}
--- a/test/scss/fontawesome6/scss/_icons.scss
+++ b/test/scss/fontawesome6/scss/_icons.scss
@ -0,0 +1,10 @@
+// specific icon class definition
+// -------------------------
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+readers do not read off random characters that represent icons */
+
+@each $name, $icon in $fa-icons {
+  .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
+}
+
--- a/test/scss/fontawesome6/scss/_list.scss
+++ b/test/scss/fontawesome6/scss/_list.scss
@ -0,0 +1,18 @@
+// icons in a list
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  list-style-type: none;
+  margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
+  padding-left: 0;
+
+  > li { position: relative; }
+}
+
+.#{$fa-css-prefix}-li {
+  left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}));
+  position: absolute;
+  text-align: center;
+  width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
+  line-height: inherit;
+}
--- a/test/scss/fontawesome6/scss/_mixins.scss
+++ b/test/scss/fontawesome6/scss/_mixins.scss
@ -0,0 +1,72 @@
+// mixins
+// --------------------------
+
+// base rendering for an icon
+@mixin fa-icon {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
+// sets relative font-sizing and alignment (in _sizing)
+@mixin fa-size ($font-size) {
+  font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
+  line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
+  vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
+}
+
+// only display content to screen readers
+// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@mixin fa-sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+@mixin fa-sr-only-focusable() {
+  &:not(:focus) {
+    @include fa-sr-only();
+  }
+}
+
+// sets a specific icon family to use alongside style + icon mixins
+
+// convenience mixins for declaring pseudo-elements by CSS variable,
+// including all style-specific font properties, and both the ::before
+// and ::after elements in the duotone case.
+@mixin fa-icon-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-solid;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+@mixin fa-icon-regular($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-regular;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+@mixin fa-icon-brands($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-brands;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
--- a/test/scss/fontawesome6/scss/_regular.scss
+++ b/test/scss/fontawesome6/scss/_regular.scss
@ -0,0 +1,27 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
+}
+
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('../fonts/fa-regular-400.woff2') format('woff2'),
+    url('../fonts/fa-regular-400.ttf') format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-regular {
+  font-weight: 400;
+}
--- a/test/scss/fontawesome6/scss/_rotated-flipped.scss
+++ b/test/scss/fontawesome6/scss/_rotated-flipped.scss
@ -0,0 +1,31 @@
+// rotating + flipping icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.#{$fa-css-prefix}-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.#{$fa-css-prefix}-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.#{$fa-css-prefix}-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.#{$fa-css-prefix}-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.#{$fa-css-prefix}-flip-both,
+.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
+  transform: scale(-1, -1);
+}
+
+.#{$fa-css-prefix}-rotate-by {
+  transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
+}
--- a/test/scss/fontawesome6/scss/_screen-reader.scss
+++ b/test/scss/fontawesome6/scss/_screen-reader.scss
@ -0,0 +1,14 @@
+// screen-reader utilities
+// -------------------------
+
+// only display content to screen readers
+.sr-only,
+.#{$fa-css-prefix}-sr-only {
+  @include fa-sr-only;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.sr-only-focusable,
+.#{$fa-css-prefix}-sr-only-focusable {
+  @include fa-sr-only-focusable;
+}
--- a/test/scss/fontawesome6/scss/_shims.scss
+++ b/test/scss/fontawesome6/scss/_shims.scss
--- a/test/scss/fontawesome6/scss/_sizing.scss
+++ b/test/scss/fontawesome6/scss/_sizing.scss
@ -0,0 +1,16 @@
+// sizing icons
+// -------------------------
+
+// literal magnification scale
+@for $i from 1 through 10 {
+  .#{$fa-css-prefix}-#{$i}x {
+    font-size: $i * 1em;
+  }
+}
+
+// step-based scale (with alignment)
+@each $size, $value in $fa-sizes {
+  .#{$fa-css-prefix}-#{$size} {
+     @include fa-size($value);
+  }
+}
--- a/test/scss/fontawesome6/scss/_solid.scss
+++ b/test/scss/fontawesome6/scss/_solid.scss
@ -0,0 +1,27 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('../fonts/fa-solid-900.woff2') format('woff2'),
+    url('../fonts/fa-solid-900.ttf') format('truetype');
+}
+
+.fas,
+.#{$fa-css-prefix}-solid {
+  font-weight: 900;
+}
--- a/test/scss/fontawesome6/scss/_stacked.scss
+++ b/test/scss/fontawesome6/scss/_stacked.scss
@ -0,0 +1,32 @@
+// stacking icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  display: inline-block;
+  height: 2em;
+  line-height: 2em;
+  position: relative;
+  vertical-align: $fa-stack-vertical-align;
+  width: $fa-stack-width;
+}
+
+.#{$fa-css-prefix}-stack-1x,
+.#{$fa-css-prefix}-stack-2x {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
+}
+
+.#{$fa-css-prefix}-stack-1x {
+  line-height: inherit;
+}
+
+.#{$fa-css-prefix}-stack-2x {
+  font-size: 2em;
+}
+
+.#{$fa-css-prefix}-inverse {
+  color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
+}
--- a/test/scss/fontawesome6/scss/_v4-shims.scss
+++ b/test/scss/fontawesome6/scss/_v4-shims.scss
@ -0,0 +1,11 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+// V4 shims compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'shims';
--- a/test/scss/fontawesome6/scss/_variables.scss
+++ b/test/scss/fontawesome6/scss/_variables.scss
--- a/test/scss/repo-home.scss
+++ b/test/scss/repo-home.scss
@ -1,6 +1,9 @@
@use "common";
-
@use "repo-home/header";
+@use "fontawesome6/scss/fontawesome";
+@use "fontawesome6/scss/regular";
+@use "fontawesome6/scss/solid";
+

 body {
    background-color: #232323;
--- a/test/scss/repo-home/_header.scss
+++ b/test/scss/repo-home/_header.scss
@ -15,71 +15,74 @@ header {
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $repo-home-header-border-color;
-}

-.header-left,
-.header-right {
+    .header-section {
        display: flex;
        align-items: center;
-  gap: 1em;
+        gap: 3px;
        font-family: "Noto Sans", "Liberation Sans";
-}
+
+        // Left Navbar Links
+        &.header-left {
+            a {
+                color: $repo-home-header-nav-text-color;
+                text-decoration: none;
+                font-weight: normal;
+                font-size: 0.95rem;
+                padding: 0.3em;
+                margin: 1px;
+                border-radius: 3px;
+                line-height: 2em;

                // Logo
-.logo {
+                &.logo {
                    display: flex;
                    align-items: center;
                    margin-right: 1em;
+                    padding: auto;

                    img {
-    height: 32px;
+                        height: 27px;
                        width: auto;
                    }
                }

-// Left Navbar Links
-.header-left a {
-  color: $repo-home-header-nav-text-color;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 0.95rem;
-
                &:hover {
                    color: $repo-home-header-nav-hover-text-color;
                    background-color: $repo-home-header-nav-hover-bg-color;
                }
            }
+        }

-// Right Navbar Icons
-.header-right a {
+        // Right Navbar Icon-links
+        &.header-right a {
            color: $repo-home-header-nav-right-text-color;
            display: flex;
            align-items: center;
+            justify-content: center;
            text-decoration: none;
-  padding: 0.5em;
+            font-size: 1.2rem;
+            width: 32px;
+            height: 32px;
+

-  img {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
            // Profile Icon Wrapper
            &.profile-icon {
-	width: 30px;
-	height: 30px;
                border-radius: 50%;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;

-	/*.header-left {
-	  width: 100%;
-	  height: 100%;
-	  object-fit: cover;
+                img {
+                    width: 26px;
+                    height: 26px;
                    border-radius: 50%;
-	}*/
+                }
+
+                &:hover {
+                    border: 1px solid #707070;
+                }
            }

            &:hover {
@ -87,5 +90,5 @@ header {
                border-radius: 50%;
            }
        }
-
-
+    }
+}