footer, root module nav, and main page done
This commit is contained in:
parent
cd1226e333
commit
23719ec405
GPG key ID:
4E4A5AD1FB748427
17 changed files with 519 additions and 34 deletions
|
|
@ -1,9 +1,21 @@
|
|||
@property --percent {
|
||||
syntax: '<percentage>';
|
||||
syntax: "<percentage>";
|
||||
initial-value: 0%;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
@property --percent-nav-root_transparent {
|
||||
syntax: "<percentage>";
|
||||
initial-value: 35%;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
@property --percent-nav-root_filled {
|
||||
syntax: "<percentage>";
|
||||
initial-value: 65%;
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
@keyframes pulseGreen {
|
||||
0% {
|
||||
background-color: hsl(var(--blue) 85 35 / 0.1);
|
||||
|
|
@ -85,7 +97,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes percentToFifty {
|
||||
from {
|
||||
--percent: 0%;
|
||||
|
|
@ -105,3 +116,43 @@
|
|||
--percent: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes percent35To25 {
|
||||
from {
|
||||
--percent-nav-root_transparent: 35%;
|
||||
}
|
||||
|
||||
to {
|
||||
--percent-nav-root_transparent: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes percent25To35 {
|
||||
from {
|
||||
--percent-nav-root_transparent: 25%;
|
||||
}
|
||||
|
||||
to {
|
||||
--percent-nav-root_transparent: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes percent65To75 {
|
||||
from {
|
||||
--percent-nav-root_filled: 65%;
|
||||
}
|
||||
|
||||
to {
|
||||
--percent-nav-root_filled: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes percent75To65 {
|
||||
from {
|
||||
--percent-nav-root_filled: 75%;
|
||||
}
|
||||
|
||||
to {
|
||||
--percent-nav-root_filled: 65%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
html {
|
||||
font-family: 'Rubik', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: "Rubik", Inter, system-ui, Avenir, Helvetica, Arial,
|
||||
sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.272;
|
||||
font-weight: 400;
|
||||
|
||||
height: 100svh;
|
||||
width: 100svw;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -77,3 +81,9 @@ html.dark {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100svh;
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,44 @@
|
|||
.root-nav {
|
||||
margin-left: 1em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
border: 1px solid hsla(var(--blue) 10 15 / 0.6);
|
||||
margin-top: 1rem;
|
||||
|
||||
& .root-nav-entry {
|
||||
margin-block: 1em;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 42px;
|
||||
text-wrap: pretty;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-top: 1.5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
|
||||
}
|
||||
|
||||
& .root-nav-link {
|
||||
font-size: 1.137rem;
|
||||
max-height: 2rem;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 25%,
|
||||
hsla(var(--accent-500) / 0.88) 50%,
|
||||
transparent 75%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -13,6 +47,8 @@
|
|||
}
|
||||
|
||||
.typedocs-title {
|
||||
letter-spacing: 0.012rem;
|
||||
|
||||
& a {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.5s;
|
||||
|
|
@ -299,6 +335,43 @@
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.root-nav {
|
||||
& .root-nav-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 0.70fr 1.30fr;
|
||||
|
||||
& .root-nav-link {
|
||||
justify-self: start;
|
||||
height: max-content;
|
||||
|
||||
&::before {
|
||||
width: 0;
|
||||
background: linear-gradient(to right,
|
||||
hsla(var(--accent-400) / 0.5) var(--percent),
|
||||
hsla(var(--accent-400) / 0) 100%);
|
||||
animation: percentToZero 250ms ease-in-out forwards;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
animation: percentToFifty 250ms ease-in-out forwards;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .root-nav-desc {
|
||||
padding-left: 1rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1rem 0 0 0;
|
||||
border-left: 1px solid hsla(var(--blue) 10 15 / 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typedocs-content {
|
||||
margin-inline: 1.272rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@import "./docs-types.css";
|
||||
|
||||
.docslayout-root {
|
||||
margin: 0.618rem;
|
||||
margin-inline: 0.618rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -88,6 +88,7 @@ ul {
|
|||
|
||||
.docslayout-root {
|
||||
margin-left: calc(1.618rem + 260px);
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@
|
|||
width: 250px;
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
bottom: 3rem;
|
||||
left: 1.618rem;
|
||||
flex-shrink: 0;
|
||||
overflow: scroll;
|
||||
|
|
|
|||
|
|
@ -213,10 +213,15 @@ button[data-open-modal] {
|
|||
gap: 0.5rem;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: hsl(0 0 65);
|
||||
color: hsl(var(--blue) 40 65);
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
font-size: 1.10rem;
|
||||
|
||||
& svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
button>kbd {
|
||||
|
|
@ -224,13 +229,13 @@ button>kbd {
|
|||
font-size: 0.75rem;
|
||||
gap: 0.25em;
|
||||
padding-inline: 0.375rem;
|
||||
background-color: hsl(0 0 15);
|
||||
background-color: hsla(var(--blue) 5 20 / 0.5);
|
||||
}
|
||||
|
||||
dialog {
|
||||
margin: 0;
|
||||
background-color: hsl(var(--blue) 15 12);
|
||||
border: 1px solid hsl(0 0 25);
|
||||
background-color: hsl(var(--blue) 10 15);
|
||||
border: 1px solid hsl(var(--blue) 15 25);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -272,8 +277,8 @@ button[data-close-modal] {
|
|||
--pagefind-ui-primary: hsla(var(--accent-400));
|
||||
--pagefind-ui-text: hsla(0 0 60);
|
||||
--pagefind-ui-font: Rubik;
|
||||
--pagefind-ui-background: hsl(0 0 10);
|
||||
--pagefind-ui-border: hsl(0 0 15);
|
||||
--pagefind-ui-background: hsl(var(--blue) 10 15);
|
||||
--pagefind-ui-border: hsl(var(--blue) 30 25);
|
||||
--pagefind-ui-border-width: 1px;
|
||||
--search-cancel-space: 5rem;
|
||||
}
|
||||
|
|
@ -297,12 +302,11 @@ button[data-close-modal] {
|
|||
|
||||
/* --- */
|
||||
button[data-open-modal] {
|
||||
border: 1px solid hsl(0 0 25);
|
||||
border-radius: 6px;
|
||||
padding-inline-start: 0.75rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
background-color: hsla(0 0 10 / 0.5);
|
||||
color: hsl(0 0 50);
|
||||
background-color: hsla(var(--blue) 15 15 / 0.5);
|
||||
color: hsl(var(--blue) 40 65);
|
||||
font-size: 0.875rem;
|
||||
width: 100%;
|
||||
max-width: 15rem;
|
||||
|
|
@ -310,7 +314,7 @@ button[data-close-modal] {
|
|||
|
||||
&:hover {
|
||||
border-color: hsl(0 0 50);
|
||||
color: hsl(0 0 85);
|
||||
color: hsl(var(--blue) 60 85);
|
||||
}
|
||||
|
||||
&> :last-child {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
@import "./css-config/animations.css";
|
||||
@import "./css-config/code.css";
|
||||
@import "./css-config/colors.css";
|
||||
|
||||
@import "./main-page.css";
|
||||
|
||||
@import "./docs/nav/nav.css";
|
||||
@import "./docs/toc/toc.css";
|
||||
@import "./docs/docs.css";
|
||||
|
|
@ -109,6 +112,78 @@ html.dark {
|
|||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-size: min(1.112rem, max(1svw, 0.8rem));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-inline: 1rem;
|
||||
background: linear-gradient(150deg,
|
||||
hsla(var(--blue) 60 5 / 1) 10%,
|
||||
hsla(var(--blue) 75 6 / 1) 25%,
|
||||
hsla(var(--blue) 80 8 / 1) 55%,
|
||||
hsla(var(--blue) 77 7 / 1) 80%);
|
||||
|
||||
& ._credits {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.127rem;
|
||||
color: hsl(var(--blue) 10 55);
|
||||
|
||||
& a {
|
||||
all: unset;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& em {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
& span:first-child {
|
||||
& em {
|
||||
color: hsl(var(--green) 44 60);
|
||||
}
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
& em {
|
||||
color: hsl(var(--blue) 44 60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ._socials {
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
gap: 0.373rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
& span {
|
||||
font-size: 2rem;
|
||||
|
||||
& a {
|
||||
all: unset;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
|
|
@ -138,4 +213,4 @@ html.dark {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {}
|
||||
/* @media (min-width: 1280px) {} */
|
||||
|
|
|
|||
127
src/styles/main-page.css
Normal file
127
src/styles/main-page.css
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
.main-page_hero {
|
||||
position: relative;
|
||||
margin-block: 9rem 4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-page_hero-text {
|
||||
color: hsl(var(--secondary-400));
|
||||
|
||||
& h2 {
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.018rem;
|
||||
margin-bottom: 1.117rem;
|
||||
text-wrap: pretty;
|
||||
|
||||
& em {
|
||||
all: unset;
|
||||
|
||||
&:first-child {
|
||||
color: hsl(var(--blue) 66 60);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: hsl(var(--accent-400));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.015rem;
|
||||
color: hsla(var(--secondary-400) / 0.8);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-page_links {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 75%;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.main-page_link-card {
|
||||
all: unset;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 9.67rem;
|
||||
border-radius: 9px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: blur(1.5rem) saturate(150%);
|
||||
transition: filter 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
background: linear-gradient(115deg,
|
||||
hsla(var(--green) 20 15 / 0.7) 25%,
|
||||
hsla(var(--green) 25 25 / 0.8) 50%,
|
||||
hsla(var(--green) 60 60 / 0.6) 80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(var(--accent-600));
|
||||
|
||||
&::before {
|
||||
filter: blur(0.9rem) saturate(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
background: linear-gradient(115deg,
|
||||
hsla(var(--blue) 10 15 / 0.7) 25%,
|
||||
hsla(var(--blue) 15 25 / 0.8) 50%,
|
||||
hsla(var(--blue) 60 60 / 0.6) 80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(var(--blue) 90 40);
|
||||
|
||||
&::before {
|
||||
filter: blur(0.9rem) saturate(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-page_hero-text {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.main-page_links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-page_link-card {
|
||||
max-width: 21.33rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue