New version of hello-friend-ng-clone

This commit is contained in:
Aloïs Micard 2024-12-14 18:46:34 +01:00
parent 2af22c2c10
commit 3a80032b84
609 changed files with 26159 additions and 104 deletions

View file

@ -27,8 +27,14 @@ function detectOSColorTheme() {
function switchTheme(e) {
if (chosenThemeIsDark) {
localStorage.setItem("theme", "light");
} else {
} else if (chosenThemeIsLight) {
localStorage.setItem("theme", "dark");
} else {
if (document.documentElement.getAttribute("data-theme") == "dark") {
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", "dark");
}
}
detectOSColorTheme();

View file

@ -20,3 +20,13 @@ menuTrigger &&
);
window.addEventListener("resize", isMobileMenu);
const language = document.getElementsByTagName('html')[0].lang;
const logo = document.querySelector(".logo__pathname");
if(logo){
window.onload = () => {
let path = window.location.pathname.substring(1);
path = path.replace(language+'/','')
logo.textContent += path.substring(0,path.indexOf('/'));
};
}

File diff suppressed because it is too large Load diff

View file

@ -1,50 +1,50 @@
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: normal;
font-display: auto;
font-display: swap;
font-weight: 400;
src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
url("../fonts/Inter-UI-Regular.woff") format("woff");
src: url("fonts/Inter-Regular.woff2") format("woff2"),
url("fonts/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: italic;
font-display: auto;
font-display: swap;
font-weight: 400;
src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
url("../fonts/Inter-UI-Italic.woff") format("woff");
src: url("fonts/Inter-Italic.woff2") format("woff2"),
url("fonts/Inter-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: normal;
font-display: auto;
font-display: swap;
font-weight: 600;
src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
url("../fonts/Inter-UI-Medium.woff") format("woff");
src: url("fonts/Inter-Medium.woff2") format("woff2"),
url("fonts/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: italic;
font-display: auto;
font-display: swap;
font-weight: 600;
src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
src: url("fonts/Inter-MediumItalic.woff2") format("woff2"),
url("fonts/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: normal;
font-display: auto;
font-display: swap;
font-weight: 800;
src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
url("../fonts/Inter-UI-Bold.woff") format("woff");
src: url("fonts/Inter-Bold.woff2") format("woff2"),
url("fonts/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-family: "Inter";
font-style: italic;
font-display: auto;
font-display: swap;
font-weight: 800;
src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
src: url("fonts/Inter-BoldItalic.woff2") format("woff2"),
url("fonts/Inter-BoldItalic.woff") format("woff");
}

View file

@ -67,7 +67,7 @@
&-item {
border-bottom: 1px grey dashed;
a {
&-inner {
display: flex;
justify-content: space-between;
align-items: baseline;

View file

@ -16,6 +16,7 @@
&__text {
font-size: 1.125rem;
white-space: nowrap;
}
&__cursor {

View file

@ -14,7 +14,7 @@ html {
body {
margin: 0;
padding: 0;
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
font-family: Inter, -apple-system, BlinkMacSystemFont, "Roboto",
"Segoe UI", Helvetica, Arial, sans-serif;
font-display: auto;
font-size: 1rem;
@ -191,14 +191,14 @@ figure {
em, i, strong {
// Default
color: black;
color: $light-color-variant;
@media (prefers-color-scheme: dark) {
color: white;
color: $dark-color-variant;
}
@media (prefers-color-scheme: light) {
color: black;
color: $light-color-variant;
}
[data-theme=dark] & {
@ -239,7 +239,14 @@ code {
}
pre {
background: #212020;
[data-theme=dark] & {
background-color: $dark-background-secondary;
}
[data-theme=light] & {
background-color: $light-background-secondary;
}
padding: 10px 10px 10px 20px;
border-radius: 8px;
font-size: 0.95rem;
@ -425,4 +432,4 @@ hr {
// Prism JS Additionals
.highlight {
margin: 30px auto;
}
}

View file

@ -81,3 +81,85 @@
}
}
}
.submenu {
background: $light-background-header;
@media (prefers-color-scheme: dark) {
background: $dark-background-header;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a, .dropbtn {
display: inline-block;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: $dark-background-header;
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
}
.dropdown-content a {
padding: 12px 20px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: $dark-background-header;
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}

View file

@ -46,6 +46,7 @@
margin: 40px -50px;
width: $max-width;
max-width: $max-width;
overflow: hidden;
@media #{$media-size-tablet} {
margin: 20px 0;
width: 100%;
@ -230,4 +231,4 @@
&.previous .button__icon {
margin-right: 8px;
}
}
}

View file

@ -5,6 +5,7 @@ $light-background: #fff;
$light-background-secondary: #eaeaea;
$light-background-header: #fafafa;
$light-color: #222;
$light-color-variant: black;
$light-color-secondary: #999;
$light-border-color: #dcdcdc;
$light-table-color: #dcdcdc;
@ -14,6 +15,7 @@ $dark-background: #232425;
$dark-background-secondary: #3b3d42;
$dark-background-header: #1b1c1d;
$dark-color: #a9a9b3;
$dark-color-variant: white;
$dark-color-secondary: #b3b3bd;
$dark-border-color: #4e4e57;
$dark-table-color: #4e4e57;

View file

@ -1,6 +1,8 @@
/* Must be loaded before everything else */
@import "normalize";
@import "prism";
@import "flag-icons";
/* Main stuff */
@import "variables";
@import "mixins";
@ -16,4 +18,4 @@
@import "footer";
@import "sharing-buttons";
@import "tables";
@import "404";
@import "404";