host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit global style and component structure

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:02:53 +01:00
parent 88bac001d8
commit 53e513a55b
15 changed files with 816 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/styles/_animations.scss
View file

@ -11,15 +11,6 @@
}
}
@keyframes expand-width {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes expand-height {
0% {
height: 0;
@ -29,28 +20,6 @@
}
}
@keyframes fade-in-from-bottom {
0% {
opacity: 0;
transform: translateY(0.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-from-top {
0% {
opacity: 0;
transform: translateY(-0.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rotate-360 {
0% {
transform: rotate(0deg);

30
assets/styles/main.scss
View file

@ -24,6 +24,14 @@
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
--line-height: 1.2;
--h1-font-height: calc(var(--h1-font-size) * var(--line-height));
--h2-font-height: calc(var(--h2-font-size) * var(--line-height));
--h3-font-height: calc(var(--h3-font-size) * var(--line-height));
--button-font-height: calc(var(--button-font-size) * var(--line-height));
--text-font-height: calc(var(--text-font-size) * var(--line-height));
--caption-font-height: calc(var(--caption-font-size) * var(--line-height));
--footnote-font-height: calc(var(--footnote-font-size) * var(--line-height));
// Dimensions
@ -175,11 +183,13 @@ button {
justify-content: center;
align-items: center;
&__text,
&-text {
transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
transition: transform 200ms ease-in-out;
}
&__icon,
&-icon {
display: inherit;
flex-shrink: 0;
@ -193,14 +203,20 @@ button {
transform 200ms ease-in-out;
}
&:hover &__text,
&:hover &-text,
&:focus &__text,
&:focus &-text,
&:active &__text,
&:active &-text {
transform: translateX(0);
}
&:hover &__icon,
&:hover &-icon,
&:focus &__icon,
&:focus &-icon,
&:active &__icon,
&:active &-icon {
opacity: 1;
transform: translateX(0);
@ -248,16 +264,22 @@ form {
}
}
textarea {
resize: vertical;
min-height: 15rem;
}
p {
font-size: var(--caption-font-size);
color: var(--accent-color);
}
}
}
// --------------------------------------------------
// SMOOTH SCROLLING
// --------------------------------------------------
textarea {
resize: vertical;
min-height: 15rem;
html {
scroll-behavior: smooth;
}