Skip to content

Commit

Permalink
feat: add blog link to the homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@FRSgit
FRSgit committed Feb 4, 2025
1 parent d82bff2 commit 69b5893
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 57 deletions.
13 changes: 11 additions & 2 deletions packages/index/src/common/styles/_globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ main {
}
}

footer {
footer,
header {
position: relative;
display: flex;
flex-flow: row-reverse;
Expand All @@ -80,6 +81,11 @@ footer {
}
}

header {
position: absolute;
inset: -1lh 0 0;
}

details {
display: inline-block;
}
Expand Down Expand Up @@ -118,9 +124,12 @@ h2 {
}

a {
text-decoration: none;
}

main a {
color: variables.$colorPrimary;
text-transform: uppercase;
text-decoration: none;

&:active,
&:hover {
Expand Down
4 changes: 3 additions & 1 deletion packages/index/src/common/styles/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@
}
}

.theme-selector {
.mobile-nav-wrapper {
z-index: 2;
position: absolute;
right: -5px;
display: flex;
flex-flow: column;
}

.logo-wrapper {
Expand Down
4 changes: 4 additions & 0 deletions packages/index/src/common/styles/_utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

@use 'variables';

.relative {
position: relative;
}

.mt-1 {
margin-top: map.get(variables.$spacings, 1);
}
Expand Down
127 changes: 73 additions & 54 deletions packages/index/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,20 @@
</head>

<body class="us-none">
<div class="relative">
<header>
<nav>
<a
href="/blog"
title="Click to navigate to our blog"
aria-label="Click to navigate to our blog"
class="btn text"
target="_blank"
>Click here and enjoy our blog with your coffee ♥</a
>
</nav>
</header>
</div>
<main>
<div class="icon-logotype">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="icon">
Expand All @@ -87,68 +101,73 @@
</div>

<div class="content">
<details class="theme-selector load-fadeinup fadeInUp d-md-n">
<summary>
<div
class="btn btn--big outline mt-1"
title="Click to choose the website's color scheme"
aria-label="Click to choose the website's color scheme"
<div class="mobile-nav-wrapper d-md-n">
<details class="load-fadeinup fadeInUp">
<summary>
<div
class="btn btn--big outline mt-1"
title="Click to choose the website's color scheme"
aria-label="Click to choose the website's color scheme"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
>
<title>Eye</title>
<use xlink:href="#eye" href="#eye"></use>
</svg>
</div>
</summary>
<button
type="button"
data-theme="dark"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the dark mode"
aria-label="Click to switch to the dark mode"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
>
<title>Eye</title>
<use xlink:href="#eye" href="#eye"></use>
<title>Moon</title>
<use xlink:href="#moon" href="#moon"></use>
</svg>
</div>
</summary>
<button
type="button"
data-theme="dark"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the dark mode"
aria-label="Click to switch to the dark mode"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
>
<title>Moon</title>
<use xlink:href="#moon" href="#moon"></use>
</svg>
</button>
<button
type="button"
data-theme="auto"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the system's color mode"
aria-label="Click to switch to the system's color mode"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
</button>
<button
type="button"
data-theme="auto"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the system's color mode"
aria-label="Click to switch to the system's color mode"
>
<title>Automatic</title>
<use xlink:href="#triangle" href="#triangle"></use>
</svg>
</button>
<button
type="button"
data-theme="light"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the light mode"
aria-label="Click to switch to the light mode"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
>
<title>Automatic</title>
<use
xlink:href="#triangle"
href="#triangle"
></use>
</svg>
</button>
<button
type="button"
data-theme="light"
class="btn btn--big outline mt-1 d-b"
title="Click to switch to the light mode"
aria-label="Click to switch to the light mode"
>
<title>Sun</title>
<use xlink:href="#circle" href="#circle"></use>
</svg>
</button>
</details>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
class="icon"
>
<title>Sun</title>
<use xlink:href="#circle" href="#circle"></use>
</svg>
</button>
</details>
</div>

<div class="logo-wrapper">
<svg
Expand Down

0 comments on commit 69b5893

Please sign in to comment.