From de3861d2f78e0782478313f955bcccecda0d9063 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Wed, 28 May 2025 08:56:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?archive:=20`scss`=20=E2=80=94=20old=20@impo?= =?UTF-8?q?rt=20based=20scss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- archives/error.scss | 14 + .../scss => archives}/modules/_footer.scss | 140 +-- .../scss => archives}/modules/_global.scss | 324 +++---- .../scss => archives}/modules/_header.scss | 42 +- .../scss => archives}/modules/_main.scss | 0 .../scss => archives}/modules/_mixin.scss | 46 +- .../scss => archives}/modules/_vars.scss | 0 .../modules/component/_aboutme.scss | 608 ++++++------ .../modules/component/_animation.scss | 116 +-- .../modules/component/_article.scss | 862 +++++++++--------- .../modules/component/_card.scss | 0 .../modules/component/_clients.scss | 34 +- .../modules/component/_contact.scss | 0 .../modules/component/_error.scss | 0 .../modules/component/_featured.scss | 406 ++++----- .../modules/component/_hero.scss | 0 .../modules/component/_nav.scss | 380 ++++---- .../modules/component/_partof.scss | 336 +++---- .../modules/component/_post.scss | 156 ++-- .../modules/component/_preload.scss | 110 +-- .../modules/component/_prototype.scss | 518 +++++------ .../modules/component/_title.scss | 0 archives/style.scss | 25 + 23 files changed, 2078 insertions(+), 2039 deletions(-) create mode 100644 archives/error.scss rename {src/assets/scss => archives}/modules/_footer.scss (94%) rename {src/assets/scss => archives}/modules/_global.scss (94%) rename {src/assets/scss => archives}/modules/_header.scss (94%) rename {src/assets/scss => archives}/modules/_main.scss (100%) rename {src/assets/scss => archives}/modules/_mixin.scss (94%) rename {src/assets/scss => archives}/modules/_vars.scss (100%) rename {src/assets/scss => archives}/modules/component/_aboutme.scss (94%) rename {src/assets/scss => archives}/modules/component/_animation.scss (94%) rename {src/assets/scss => archives}/modules/component/_article.scss (94%) rename {src/assets/scss => archives}/modules/component/_card.scss (100%) rename {src/assets/scss => archives}/modules/component/_clients.scss (93%) rename {src/assets/scss => archives}/modules/component/_contact.scss (100%) rename {src/assets/scss => archives}/modules/component/_error.scss (100%) rename {src/assets/scss => archives}/modules/component/_featured.scss (95%) rename {src/assets/scss => archives}/modules/component/_hero.scss (100%) rename {src/assets/scss => archives}/modules/component/_nav.scss (94%) rename {src/assets/scss => archives}/modules/component/_partof.scss (95%) rename {src/assets/scss => archives}/modules/component/_post.scss (95%) rename {src/assets/scss => archives}/modules/component/_preload.scss (92%) rename {src/assets/scss => archives}/modules/component/_prototype.scss (94%) rename {src/assets/scss => archives}/modules/component/_title.scss (100%) create mode 100644 archives/style.scss diff --git a/archives/error.scss b/archives/error.scss new file mode 100644 index 0000000..9780e4e --- /dev/null +++ b/archives/error.scss @@ -0,0 +1,14 @@ +@import './modules/vars'; +@import './modules/mixin'; +@import './modules/global'; + +@import './modules/component/preload'; + +@import './modules/header'; +@import './modules/component/nav'; +@import './modules/component/title'; +@import './modules/main'; +@import './modules/footer'; + +@import './modules/component/contact'; +@import './modules/component/error'; diff --git a/src/assets/scss/modules/_footer.scss b/archives/modules/_footer.scss similarity index 94% rename from src/assets/scss/modules/_footer.scss rename to archives/modules/_footer.scss index bc5dc42..0c2cf20 100644 --- a/src/assets/scss/modules/_footer.scss +++ b/archives/modules/_footer.scss @@ -1,70 +1,70 @@ -.footer { - background-color: var(--clr-background); - color: var(--clr-foreground); - padding: 0.8rem; - - .brand { - display: flex; - gap: 0.5rem; - width: max-content; - - &-title { - font-size: 1.3rem; - font-weight: 700; - } - - &-logo { - display: flex; - align-items: center; - } - } - - &-top { - padding: 0.8rem; - padding-top: 3rem; - font-size: 2rem; - max-width: 35ch; - line-height: 1.2; - position: relative; - isolation: isolate; - - &::before { - content: '"'; - position: absolute; - font-size: 4em; - left: 0; - top: 0; - color: var(--clr-background-800); - font-weight: 600; - user-select: none; - z-index: -1; - } - } - - &-bottom { - padding: 0.8rem; - text-align: left; - display: flex; - flex-direction: column; - gap: 0.3em; - } - - &-container { - max-width: 64rem; - margin: 0 auto; - } - - .copyright { - font-size: 0.9rem; - margin: 1rem auto; - text-align: left; - border: 0.0625rem solid var(--clr-foreground); - width: 100%; - max-width: max-content; - padding: 0.2rem 2rem; - - @include breakpoint-up('medium') { - flex-direction: row; - } - } -} +.footer { + background-color: var(--clr-background); + color: var(--clr-foreground); + padding: 0.8rem; + + .brand { + display: flex; + gap: 0.5rem; + width: max-content; + + &-title { + font-size: 1.3rem; + font-weight: 700; + } + + &-logo { + display: flex; + align-items: center; + } + } + + &-top { + padding: 0.8rem; + padding-top: 3rem; + font-size: 2rem; + max-width: 35ch; + line-height: 1.2; + position: relative; + isolation: isolate; + + &::before { + content: '"'; + position: absolute; + font-size: 4em; + left: 0; + top: 0; + color: var(--clr-background-800); + font-weight: 600; + user-select: none; + z-index: -1; + } + } + + &-bottom { + padding: 0.8rem; + text-align: left; + display: flex; + flex-direction: column; + gap: 0.3em; + } + + &-container { + max-width: 64rem; + margin: 0 auto; + } + + .copyright { + font-size: 0.9rem; + margin: 1rem auto; + text-align: left; + border: 0.0625rem solid var(--clr-foreground); + width: 100%; + max-width: max-content; + padding: 0.2rem 2rem; + + @include breakpoint-up('medium') { + flex-direction: row; + } + } +} diff --git a/src/assets/scss/modules/_global.scss b/archives/modules/_global.scss similarity index 94% rename from src/assets/scss/modules/_global.scss rename to archives/modules/_global.scss index 67e40a1..93455cf 100644 --- a/src/assets/scss/modules/_global.scss +++ b/archives/modules/_global.scss @@ -1,163 +1,163 @@ -html { - scroll-behavior: smooth; - scroll-padding-top: 10rem; - scroll-padding-bottom: 10rem; -} - -html:root { - .themes { - background-color: #ffc107; - color: #7e620e; - } - - [data-moon] { - display: none; - } - - [data-sun] { - display: block; - } - - &[data-theme="dark"] { - .themes { - background-color: var(--clr-accent); - color: var(--clr-accent-dark); - } - - [data-sun] { - display: none; - } - - [data-moon] { - display: block; - } - } -} - -*, -*:is(::after, ::before) { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; - background-color: var(--clr-background-900); - font-family: 'Montserrat', sans-serif; - color: var(--clr-foreground); - line-height: 1.6; - overflow-x: hidden; -} - -a, -a:is(:active, :hover, :focus-visible) { - color: inherit; - text-decoration: none; -} - -a:is(:hover, :focus-visible) { - color: var(--clr-accent); -} - -a[href] { - position: relative; - - .new-tab-warning { - position: absolute; - width: max-content; - background-color: hsl(0, 0%, 13%); - font-weight: normal; - letter-spacing: normal; - color: var(--clr-white) !important; - padding: 0.3rem; - font-size: 0.7rem; - border-radius: 0.3rem; - margin-top: 0.5rem; - top: 100%; - left: 0; - visibility: hidden; - pointer-events: none; - text-transform: capitalize; - transition: all 300ms ease-out; - translate: 0 -0.3rem; - z-index: 90; - user-select: none; - } - - &:focus-visible { - .new-tab-warning { - visibility: visible; - translate: 0 0; - } - } -} - -::selection { - background-color: var(--clr-accent); - color: var(--clr-white); -} - -.t-all { - transition: all 300ms ease-in; -} - -.no-scroll { - @include breakpoint-down('small') { - overflow: hidden !important; - - :is(header, main, footer) { - visibility: hidden; - user-select: none; - } - } -} - -.not-loaded { - overflow: hidden; - - :is(header, main, footer, nav) { - visibility: hidden; - user-select: none; - } -} - -:is(ul, li) { - margin: 0; - padding: 0; -} - -li { - list-style: none; -} - -*:focus-visible { - outline: 0.125rem solid var(--clr-accent-dark); -} - -.highlight { - background-color: var(--clr-black); - padding: 0.2rem 0.6rem; - color: var(--clr-white); - - &:is(:hover, :focus) { - color: var(--clr-white); - } -} - -.header-link__access { - text-decoration: none !important; -} - -.sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 0.0625rem; - margin: -0.0625rem; - overflow: hidden; - padding: 0; - position: absolute; - width: 0.0625rem; +html { + scroll-behavior: smooth; + scroll-padding-top: 10rem; + scroll-padding-bottom: 10rem; +} + +html:root { + .themes { + background-color: #ffc107; + color: #7e620e; + } + + [data-moon] { + display: none; + } + + [data-sun] { + display: block; + } + + &[data-theme="dark"] { + .themes { + background-color: var(--clr-accent); + color: var(--clr-accent-dark); + } + + [data-sun] { + display: none; + } + + [data-moon] { + display: block; + } + } +} + +*, +*:is(::after, ::before) { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: var(--clr-background-900); + font-family: 'Montserrat', sans-serif; + color: var(--clr-foreground); + line-height: 1.6; + overflow-x: hidden; +} + +a, +a:is(:active, :hover, :focus-visible) { + color: inherit; + text-decoration: none; +} + +a:is(:hover, :focus-visible) { + color: var(--clr-accent); +} + +a[href] { + position: relative; + + .new-tab-warning { + position: absolute; + width: max-content; + background-color: hsl(0, 0%, 13%); + font-weight: normal; + letter-spacing: normal; + color: var(--clr-white) !important; + padding: 0.3rem; + font-size: 0.7rem; + border-radius: 0.3rem; + margin-top: 0.5rem; + top: 100%; + left: 0; + visibility: hidden; + pointer-events: none; + text-transform: capitalize; + transition: all 300ms ease-out; + translate: 0 -0.3rem; + z-index: 90; + user-select: none; + } + + &:focus-visible { + .new-tab-warning { + visibility: visible; + translate: 0 0; + } + } +} + +::selection { + background-color: var(--clr-accent); + color: var(--clr-white); +} + +.t-all { + transition: all 300ms ease-in; +} + +.no-scroll { + @include breakpoint-down('small') { + overflow: hidden !important; + + :is(header, main, footer) { + visibility: hidden; + user-select: none; + } + } +} + +.not-loaded { + overflow: hidden; + + :is(header, main, footer, nav) { + visibility: hidden; + user-select: none; + } +} + +:is(ul, li) { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +*:focus-visible { + outline: 0.125rem solid var(--clr-accent-dark); +} + +.highlight { + background-color: var(--clr-black); + padding: 0.2rem 0.6rem; + color: var(--clr-white); + + &:is(:hover, :focus) { + color: var(--clr-white); + } +} + +.header-link__access { + text-decoration: none !important; +} + +.sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 0.0625rem; + margin: -0.0625rem; + overflow: hidden; + padding: 0; + position: absolute; + width: 0.0625rem; } \ No newline at end of file diff --git a/src/assets/scss/modules/_header.scss b/archives/modules/_header.scss similarity index 94% rename from src/assets/scss/modules/_header.scss rename to archives/modules/_header.scss index 89ba20b..d86013c 100644 --- a/src/assets/scss/modules/_header.scss +++ b/archives/modules/_header.scss @@ -1,21 +1,21 @@ -.header { - &_article { - all: unset; - position: relative; - width: 100vw; - aspect-ratio: 16/9; - height: fit-content; - max-height: 60vh; - overflow: hidden; - margin: 0 auto; - - img { - top: 50%; - translate: 0 -50%; - position: absolute; - aspect-ratio: 16 / 9; - width: 100%; - height: auto; - } - } -} +.header { + &_article { + all: unset; + position: relative; + width: 100vw; + aspect-ratio: 16/9; + height: fit-content; + max-height: 60vh; + overflow: hidden; + margin: 0 auto; + + img { + top: 50%; + translate: 0 -50%; + position: absolute; + aspect-ratio: 16 / 9; + width: 100%; + height: auto; + } + } +} diff --git a/src/assets/scss/modules/_main.scss b/archives/modules/_main.scss similarity index 100% rename from src/assets/scss/modules/_main.scss rename to archives/modules/_main.scss diff --git a/src/assets/scss/modules/_mixin.scss b/archives/modules/_mixin.scss similarity index 94% rename from src/assets/scss/modules/_mixin.scss rename to archives/modules/_mixin.scss index bff6692..c081666 100644 --- a/src/assets/scss/modules/_mixin.scss +++ b/archives/modules/_mixin.scss @@ -1,23 +1,23 @@ -$breakpoints-up: ( - 'medium': '40em', - 'large': '64em', - 'xlarge': '87.5em', -); - -$breakpoints-down: ( - 'small': '39.9375em', - 'medium': '63.9375em', - 'large': '87.4375em', -); - -@mixin breakpoint-up($size) { - @media screen and (min-width: map-get($breakpoints-up, $size)) { - @content; - } -} - -@mixin breakpoint-down($size) { - @media screen and (max-width: map-get($breakpoints-down, $size)) { - @content; - } -} +$breakpoints-up: ( + 'medium': '40em', + 'large': '64em', + 'xlarge': '87.5em', +); + +$breakpoints-down: ( + 'small': '39.9375em', + 'medium': '63.9375em', + 'large': '87.4375em', +); + +@mixin breakpoint-up($size) { + @media screen and (min-width: map-get($breakpoints-up, $size)) { + @content; + } +} + +@mixin breakpoint-down($size) { + @media screen and (max-width: map-get($breakpoints-down, $size)) { + @content; + } +} diff --git a/src/assets/scss/modules/_vars.scss b/archives/modules/_vars.scss similarity index 100% rename from src/assets/scss/modules/_vars.scss rename to archives/modules/_vars.scss diff --git a/src/assets/scss/modules/component/_aboutme.scss b/archives/modules/component/_aboutme.scss similarity index 94% rename from src/assets/scss/modules/component/_aboutme.scss rename to archives/modules/component/_aboutme.scss index 6ae7a74..169e393 100644 --- a/src/assets/scss/modules/component/_aboutme.scss +++ b/archives/modules/component/_aboutme.scss @@ -1,305 +1,305 @@ -.aboutme { - background-color: var(--clr-accent); - color: var(--clr-white); - - .adds { - font-size: 0.9rem; - padding: 1rem; - - .new-line { - margin-top: 0.5em; - } - } - - a { - text-decoration: underline; - text-underline-offset: 0.4rem; - } - - a:hover, - a:focus-visible { - color: #d0d0d0; - } - - ::selection { - background-color: #333333; - } - - .extra { - text-transform: uppercase; - letter-spacing: 0.1rem; - } - - .main-container { - display: flex; - flex-direction: column; - } - - .flex { - display: flex; - flex-direction: row; - border-radius: 0.3rem; - margin-top: 1rem; - - &-header { - display: flex; - padding: 0.5rem 1rem; - width: 100%; - justify-content: space-between; - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - flex: 0 0 auto; - - span[aria-hidden=true] { - display: block; - margin-top: 0.3rem; - } - - div { - display: flex; - align-items: center; - font-weight: 600; - gap: 0.2rem; - - .dot { - height: 0.9375rem; - width: 0.9375rem; - background-color: hsl(0, 100%, 43%); - border-radius: 50%; - - &:first-of-type { - background-color: green; - } - - &:nth-of-type(2) { - background-color: yellow; - } - } - } - } - - .lists { - display: flex; - justify-content: space-around; - width: 100%; - } - - &.tools { - background-color: hsl(0, 0%, 13%); - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - margin-bottom: -9rem; - z-index: 2; - - h2 { - padding: 1rem; - } - - .lists { - background-color: hsl(0, 0%, 11%); - border-radius: 0.3rem; - padding: 2rem; - } - } - - &.languages { - filter: brightness(110%); - box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - background-color: var(--clr-accent-dark); - padding: 2rem; - - .header-title { - gap: 1em; - display: flex; - } - - h2 { - padding: 1rem 0; - } - - ul { - margin-top: 0.2rem; - } - - .lists { - overflow: unset; - height: fit-content; - } - } - - &:not(:first-of-type) { - margin-top: 5rem; - justify-content: space-around; - flex-direction: column; - - ul { - font-size: 1.1rem; - font-weight: 600; - - li { - font-weight: 500; - font-size: 1rem; - margin-top: 0.5rem; - - &:first-of-type { - font-weight: 600; - } - - &:nth-child(2) { - margin-top: 0.5rem; - } - } - } - - @include breakpoint-down('medium') { - align-items: flex-start; - - .lists { - flex-direction: column; - } - - ul>li { - display: inline-block; - margin-top: 0; - } - } - } - - @include breakpoint-down('medium') { - flex-direction: column; - align-items: center; - } - } - - .data { - position: relative; - min-width: 25rem; - height: 20rem; - - @include breakpoint-down('medium') { - width: 100%; - max-width: 25rem; - min-width: unset; - } - - &:hover { - .note { - scale: 1.1; - } - } - - &::before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - background-color: hsl(0, 100%, 43%); - left: -0.7rem; - border-radius: 40% 20% / 10%; - } - } - - .explain { - display: flex; - align-items: center; - margin-top: 1rem; - padding: 1rem; - font-size: 1.2rem; - - @include breakpoint-up('large') { - padding-left: 3rem; - } - } - - .note { - rotate: -3deg; - } -} - -.note { - color: var(--clr-white); - display: flex; - flex: 0 0 auto; - position: relative; - width: min(25rem, 100%); - flex-direction: column; - background-color: hsl(0, 0%, 13%); - border-radius: 0.6rem; - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - height: max(20rem, 100%); - transition: all 300ms ease-in-out; - - article { - padding: 1rem; - z-index: 80; - } - - &>svg { - position: absolute; - right: 0.1rem; - bottom: 0.1rem; - color: hsl(0, 0%, 11%); - } - - article { - padding: 1rem; - height: 100%; - overflow-y: auto; - - scrollbar-width: none; - - &::-webkit-scrollbar { - width: 0; - } - - li { - padding-left: 0.6rem; - } - } - - &-heading { - font-weight: 600; - display: block; - text-transform: uppercase; - letter-spacing: 0.1em; - line-height: 1.2; - } - - &-subheading { - font-style: italic; - } - - li { - font-size: 0.85em; - } - - &-header { - display: flex; - height: 2.5rem; - padding: 0 1rem; - width: 100%; - justify-content: space-between; - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - flex: 0 0 auto; - - div { - display: flex; - align-items: center; - font-weight: 600; - gap: 0.2rem; - - .dot { - height: 0.9375rem; - width: 0.9375rem; - background-color: hsl(0, 100%, 43%); - border-radius: 50%; - - &:first-of-type { - background-color: green; - } - - &:nth-of-type(2) { - background-color: yellow; - } - } - } - } +.aboutme { + background-color: var(--clr-accent); + color: var(--clr-white); + + .adds { + font-size: 0.9rem; + padding: 1rem; + + .new-line { + margin-top: 0.5em; + } + } + + a { + text-decoration: underline; + text-underline-offset: 0.4rem; + } + + a:hover, + a:focus-visible { + color: #d0d0d0; + } + + ::selection { + background-color: #333333; + } + + .extra { + text-transform: uppercase; + letter-spacing: 0.1rem; + } + + .main-container { + display: flex; + flex-direction: column; + } + + .flex { + display: flex; + flex-direction: row; + border-radius: 0.3rem; + margin-top: 1rem; + + &-header { + display: flex; + padding: 0.5rem 1rem; + width: 100%; + justify-content: space-between; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + flex: 0 0 auto; + + span[aria-hidden=true] { + display: block; + margin-top: 0.3rem; + } + + div { + display: flex; + align-items: center; + font-weight: 600; + gap: 0.2rem; + + .dot { + height: 0.9375rem; + width: 0.9375rem; + background-color: hsl(0, 100%, 43%); + border-radius: 50%; + + &:first-of-type { + background-color: green; + } + + &:nth-of-type(2) { + background-color: yellow; + } + } + } + } + + .lists { + display: flex; + justify-content: space-around; + width: 100%; + } + + &.tools { + background-color: hsl(0, 0%, 13%); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + margin-bottom: -9rem; + z-index: 2; + + h2 { + padding: 1rem; + } + + .lists { + background-color: hsl(0, 0%, 11%); + border-radius: 0.3rem; + padding: 2rem; + } + } + + &.languages { + filter: brightness(110%); + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-dark); + padding: 2rem; + + .header-title { + gap: 1em; + display: flex; + } + + h2 { + padding: 1rem 0; + } + + ul { + margin-top: 0.2rem; + } + + .lists { + overflow: unset; + height: fit-content; + } + } + + &:not(:first-of-type) { + margin-top: 5rem; + justify-content: space-around; + flex-direction: column; + + ul { + font-size: 1.1rem; + font-weight: 600; + + li { + font-weight: 500; + font-size: 1rem; + margin-top: 0.5rem; + + &:first-of-type { + font-weight: 600; + } + + &:nth-child(2) { + margin-top: 0.5rem; + } + } + } + + @include breakpoint-down('medium') { + align-items: flex-start; + + .lists { + flex-direction: column; + } + + ul>li { + display: inline-block; + margin-top: 0; + } + } + } + + @include breakpoint-down('medium') { + flex-direction: column; + align-items: center; + } + } + + .data { + position: relative; + min-width: 25rem; + height: 20rem; + + @include breakpoint-down('medium') { + width: 100%; + max-width: 25rem; + min-width: unset; + } + + &:hover { + .note { + scale: 1.1; + } + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: hsl(0, 100%, 43%); + left: -0.7rem; + border-radius: 40% 20% / 10%; + } + } + + .explain { + display: flex; + align-items: center; + margin-top: 1rem; + padding: 1rem; + font-size: 1.2rem; + + @include breakpoint-up('large') { + padding-left: 3rem; + } + } + + .note { + rotate: -3deg; + } +} + +.note { + color: var(--clr-white); + display: flex; + flex: 0 0 auto; + position: relative; + width: min(25rem, 100%); + flex-direction: column; + background-color: hsl(0, 0%, 13%); + border-radius: 0.6rem; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + height: max(20rem, 100%); + transition: all 300ms ease-in-out; + + article { + padding: 1rem; + z-index: 80; + } + + &>svg { + position: absolute; + right: 0.1rem; + bottom: 0.1rem; + color: hsl(0, 0%, 11%); + } + + article { + padding: 1rem; + height: 100%; + overflow-y: auto; + + scrollbar-width: none; + + &::-webkit-scrollbar { + width: 0; + } + + li { + padding-left: 0.6rem; + } + } + + &-heading { + font-weight: 600; + display: block; + text-transform: uppercase; + letter-spacing: 0.1em; + line-height: 1.2; + } + + &-subheading { + font-style: italic; + } + + li { + font-size: 0.85em; + } + + &-header { + display: flex; + height: 2.5rem; + padding: 0 1rem; + width: 100%; + justify-content: space-between; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + flex: 0 0 auto; + + div { + display: flex; + align-items: center; + font-weight: 600; + gap: 0.2rem; + + .dot { + height: 0.9375rem; + width: 0.9375rem; + background-color: hsl(0, 100%, 43%); + border-radius: 50%; + + &:first-of-type { + background-color: green; + } + + &:nth-of-type(2) { + background-color: yellow; + } + } + } + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_animation.scss b/archives/modules/component/_animation.scss similarity index 94% rename from src/assets/scss/modules/component/_animation.scss rename to archives/modules/component/_animation.scss index c44d465..5b19ab2 100644 --- a/src/assets/scss/modules/component/_animation.scss +++ b/archives/modules/component/_animation.scss @@ -1,59 +1,59 @@ -[data-animation] { - opacity: 0; - transition: translate var(--_translate, 1s) ease-in-out, scale var(--_scale, 1s) ease-in-out, rotate var(--_rotate, 1s) ease-in-out, opacity var(--_opacity, 1s) ease-in-out; -} - -[data-animation='fade-in'] { - translate: 0 4em; -} - -[data-animation='right-show'] { - translate: -5em 0; -} - -[data-animation='top-show'] { - translate: 0 -5em; -} - -[data-animation='bottom-show'] { - translate: 0 5em; -} - -[data-animation='left-show'] { - translate: 5em 0; -} - -[data-animation='prototype-card'] { - translate: -5em 0; - - &:nth-of-type(odd) { - translate: 5em 0; - } -} - -.has-been-animated { - opacity: unset; - scale: unset; - rotate: unset; - translate: unset !important; -} - -@media (prefers-reduced-motion) { - .prototype-reader, - .data { - transform: unset !important; - } - - *, - *::after, - *::before { - animation: unset !important; - rotate: 0deg !important; - translate: 0em 0em !important; - } - - [data-animation] { - translate: unset !important; - opacity: 1 !important; - } +[data-animation] { + opacity: 0; + transition: translate var(--_translate, 1s) ease-in-out, scale var(--_scale, 1s) ease-in-out, rotate var(--_rotate, 1s) ease-in-out, opacity var(--_opacity, 1s) ease-in-out; +} + +[data-animation='fade-in'] { + translate: 0 4em; +} + +[data-animation='right-show'] { + translate: -5em 0; +} + +[data-animation='top-show'] { + translate: 0 -5em; +} + +[data-animation='bottom-show'] { + translate: 0 5em; +} + +[data-animation='left-show'] { + translate: 5em 0; +} + +[data-animation='prototype-card'] { + translate: -5em 0; + + &:nth-of-type(odd) { + translate: 5em 0; + } +} + +.has-been-animated { + opacity: unset; + scale: unset; + rotate: unset; + translate: unset !important; +} + +@media (prefers-reduced-motion) { + .prototype-reader, + .data { + transform: unset !important; + } + + *, + *::after, + *::before { + animation: unset !important; + rotate: 0deg !important; + translate: 0em 0em !important; + } + + [data-animation] { + translate: unset !important; + opacity: 1 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_article.scss b/archives/modules/component/_article.scss similarity index 94% rename from src/assets/scss/modules/component/_article.scss rename to archives/modules/component/_article.scss index 619b350..6db37d7 100644 --- a/src/assets/scss/modules/component/_article.scss +++ b/archives/modules/component/_article.scss @@ -1,432 +1,432 @@ -.article { - --_article-color: hsla(270, 50%, 40%, 0.5); - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - color: var(--clr-foreground-900); - background-color: var(--clr-background-900); - line-height: 2; - margin: auto; - - main { - position: relative; - - .table-of-contents { - position: absolute; - top: 0; - right: 0; - - @include breakpoint-down('medium') { - position: unset; - } - } - } - - - a { - font-weight: 600; - color: var(--clr-href); - - &:not(.header-anchor, .breadcrumb) { - text-decoration: 0.0625em underline var(--clr-href); - text-underline-offset: 0.35em; - } - - &:hover { - color: var(--clr-href-visited); - } - - &:focus-visible { - outline: thin dotted; - } - - &:hover, - &:active { - outline: 0; - } - } - - span { - - a:hover, - a:visited, - a:active, - a:focus-visible { - color: var(--clr-href); - } - } - - ::selection { - background: var(--clr-accent-dark); - color: var(--clr-white); - } - - a::selection { - background: var(--clr-accent-dark); - color: var(--clr-white); - } - - :is(p:not(:first-of-type), table, blockquote) { - max-width: 60ch; - } - - p { - margin: 1rem 0; - } - - img { - max-width: 100%; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 600; - color: var(--clr-foreground-900); - padding: 1rem 0; - line-height: 1.1em; - } - - h4, - h5, - h6 { - font-weight: bold; - } - - h1 { - font-size: 2.5rem; - } - - h2 { - font-size: 2rem; - } - - h3 { - font-size: 1.5rem; - } - - h4 { - font-size: 1.2rem; - } - - h5 { - font-size: 1rem; - } - - h6 { - font-size: 0.9rem; - } - - blockquote { - color: var(--clr-foreground-900); - margin: 0; - padding-left: 2em; - border-left: 0.5em var(--clr-accent) solid; - } - - hr { - display: block; - height: 0.15em; - border: 0; - border-top: 0.0625em solid var(--clr-accent); - border-bottom: 0.0625em solid var(--clr-accent-light); - margin: 1em 0; - padding: 0; - } - - pre, - code, - kbd, - samp { - padding: 0 0.3em; - font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; - // font-size: 0.8rem; - // line-height: 1.4; - } - - pre { - border: 0.1rem solid var(--_article-color); - // background-color: var(--_article-color); - border-radius: 0.5rem; - padding: 1rem; - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - - code { - box-shadow: none; - background-color: transparent; - } - } - - b, - strong { - font-weight: bold; - color: var(--clr-foreground-900); - } - - dfn { - font-style: italic; - } - - ins { - background: #ff9; - color: #000; - text-decoration: none; - } - - mark { - background-color: var(--clr-black); - color: var(--clr-white); - - &:is(:hover, :focus) { - color: var(--clr-white); - } - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - - >a { - text-decoration: none !important; - } - } - - sup { - top: -0.5rem; - } - - sub { - bottom: -0.25rem; - } - - ul, - ol { - margin: 1em 0; - padding: 0 0 0 2rem; - } - - ul li { - list-style-type: disc; - } - - ol li { - list-style-type: decimal; - } - - li p:last-child { - margin: 0; - } - - dd { - margin: 0 0 0 2rem; - } - - img { - border: 0; - vertical-align: middle; - } - - table { - border-collapse: collapse; - overflow-x: scroll; - border-spacing: 0; - width: 100%; - background-color: var(--clr-background); - border-radius: 0.5rem; - overflow: hidden; - - td, - th { - padding: 0.4rem 0.8rem; - } - - tr { - :is(td, th):first-child { - text-align: center; - } - } - - th { - background-color: var(--_article-color); - color: var(--table-header); - // border-bottom: 0.25rem solid var(--clr-accent); - } - - td { - vertical-align: top; - } - - &.properties { - th { - border-bottom: 0.0625rem solid var(--clr-background-800); - border-left: 0.25rem solid var(--clr-accent); - } - } - } - - .table-of-contents { - .toc-container-header { - font-weight: 700; - } - - ul { - margin: 0; - - li { - margin-top: 0.15em; - list-style: circle; - } - } - } - - @media print { - * { - background: transparent !important; - color: var(--clr-accent-dark) !important; - filter: none !important; - -ms-filter: none !important; - } - - body { - font-size: 12pt; - max-width: 100%; - } - - a, - a:visited { - text-decoration: underline; - } - - hr { - height: 0.0625em; - border: 0; - border-bottom: 0.0625em solid var(--clr-accent-dark); - } - - a[href]:after { - content: ' (' attr(href) ')'; - } - - abbr[title]:after { - content: ' (' attr(title) ')'; - } - - .ir a:after, - a[href^='javascript:']:after, - a[href^='#']:after { - content: ''; - } - - pre, - blockquote { - border: 0.0625em solid #999; - padding-right: 1em; - page-break-inside: avoid; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page :left { - margin: 15mm 20mm 15mm 10mm; - } - - @page :right { - margin: 15mm 10mm 15mm 20mm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } - } - - &-flex_list { - flex-wrap: wrap; - gap: 0.5em; - display: flex; - margin: unset !important; - padding: unset !important; - } - - &-detail { - &_list { - flex-wrap: wrap; - gap: 0.5em; - display: flex; - margin: unset !important; - padding: unset !important; - } - - &_item { - font-size: 0.9rem; - gap: 0.5em; - border-radius: 0.3em; - padding: 0.4em; - display: flex; - color: var(--clr-foreground); - border: 0.0625em solid var(--clr-foreground); - align-items: center; - - &:first-of-type { - border: none; - color: var(--clr-white); - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - background-color: var(--clr-accent-light); - background-image: linear-gradient(45deg, - var(--clr-accent-dark), - var(--clr-accent)); - } - - &_svg { - width: 1.2rem; - } - } - } - - &-summary { - font-style: italic; - font-size: 1.2rem; - color: var(--clr-foreground-700); - } - - .more { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(20em, 60ch), 29.5rem)); - margin-top: 1em; - gap: 1em; - - div { - padding: 1rem; - background: var(--clr-background); - - a { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - - } +.article { + --_article-color: hsla(270, 50%, 40%, 0.5); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + color: var(--clr-foreground-900); + background-color: var(--clr-background-900); + line-height: 2; + margin: auto; + + main { + position: relative; + + .table-of-contents { + position: absolute; + top: 0; + right: 0; + + @include breakpoint-down('medium') { + position: unset; + } + } + } + + + a { + font-weight: 600; + color: var(--clr-href); + + &:not(.header-anchor, .breadcrumb) { + text-decoration: 0.0625em underline var(--clr-href); + text-underline-offset: 0.35em; + } + + &:hover { + color: var(--clr-href-visited); + } + + &:focus-visible { + outline: thin dotted; + } + + &:hover, + &:active { + outline: 0; + } + } + + span { + + a:hover, + a:visited, + a:active, + a:focus-visible { + color: var(--clr-href); + } + } + + ::selection { + background: var(--clr-accent-dark); + color: var(--clr-white); + } + + a::selection { + background: var(--clr-accent-dark); + color: var(--clr-white); + } + + :is(p:not(:first-of-type), table, blockquote) { + max-width: 60ch; + } + + p { + margin: 1rem 0; + } + + img { + max-width: 100%; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 600; + color: var(--clr-foreground-900); + padding: 1rem 0; + line-height: 1.1em; + } + + h4, + h5, + h6 { + font-weight: bold; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.2rem; + } + + h5 { + font-size: 1rem; + } + + h6 { + font-size: 0.9rem; + } + + blockquote { + color: var(--clr-foreground-900); + margin: 0; + padding-left: 2em; + border-left: 0.5em var(--clr-accent) solid; + } + + hr { + display: block; + height: 0.15em; + border: 0; + border-top: 0.0625em solid var(--clr-accent); + border-bottom: 0.0625em solid var(--clr-accent-light); + margin: 1em 0; + padding: 0; + } + + pre, + code, + kbd, + samp { + padding: 0 0.3em; + font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; + // font-size: 0.8rem; + // line-height: 1.4; + } + + pre { + border: 0.1rem solid var(--_article-color); + // background-color: var(--_article-color); + border-radius: 0.5rem; + padding: 1rem; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + + code { + box-shadow: none; + background-color: transparent; + } + } + + b, + strong { + font-weight: bold; + color: var(--clr-foreground-900); + } + + dfn { + font-style: italic; + } + + ins { + background: #ff9; + color: #000; + text-decoration: none; + } + + mark { + background-color: var(--clr-black); + color: var(--clr-white); + + &:is(:hover, :focus) { + color: var(--clr-white); + } + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + + >a { + text-decoration: none !important; + } + } + + sup { + top: -0.5rem; + } + + sub { + bottom: -0.25rem; + } + + ul, + ol { + margin: 1em 0; + padding: 0 0 0 2rem; + } + + ul li { + list-style-type: disc; + } + + ol li { + list-style-type: decimal; + } + + li p:last-child { + margin: 0; + } + + dd { + margin: 0 0 0 2rem; + } + + img { + border: 0; + vertical-align: middle; + } + + table { + border-collapse: collapse; + overflow-x: scroll; + border-spacing: 0; + width: 100%; + background-color: var(--clr-background); + border-radius: 0.5rem; + overflow: hidden; + + td, + th { + padding: 0.4rem 0.8rem; + } + + tr { + :is(td, th):first-child { + text-align: center; + } + } + + th { + background-color: var(--_article-color); + color: var(--table-header); + // border-bottom: 0.25rem solid var(--clr-accent); + } + + td { + vertical-align: top; + } + + &.properties { + th { + border-bottom: 0.0625rem solid var(--clr-background-800); + border-left: 0.25rem solid var(--clr-accent); + } + } + } + + .table-of-contents { + .toc-container-header { + font-weight: 700; + } + + ul { + margin: 0; + + li { + margin-top: 0.15em; + list-style: circle; + } + } + } + + @media print { + * { + background: transparent !important; + color: var(--clr-accent-dark) !important; + filter: none !important; + -ms-filter: none !important; + } + + body { + font-size: 12pt; + max-width: 100%; + } + + a, + a:visited { + text-decoration: underline; + } + + hr { + height: 0.0625em; + border: 0; + border-bottom: 0.0625em solid var(--clr-accent-dark); + } + + a[href]:after { + content: ' (' attr(href) ')'; + } + + abbr[title]:after { + content: ' (' attr(title) ')'; + } + + .ir a:after, + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; + } + + pre, + blockquote { + border: 0.0625em solid #999; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page :left { + margin: 15mm 20mm 15mm 10mm; + } + + @page :right { + margin: 15mm 10mm 15mm 20mm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + } + + &-flex_list { + flex-wrap: wrap; + gap: 0.5em; + display: flex; + margin: unset !important; + padding: unset !important; + } + + &-detail { + &_list { + flex-wrap: wrap; + gap: 0.5em; + display: flex; + margin: unset !important; + padding: unset !important; + } + + &_item { + font-size: 0.9rem; + gap: 0.5em; + border-radius: 0.3em; + padding: 0.4em; + display: flex; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + + &:first-of-type { + border: none; + color: var(--clr-white); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-light); + background-image: linear-gradient(45deg, + var(--clr-accent-dark), + var(--clr-accent)); + } + + &_svg { + width: 1.2rem; + } + } + } + + &-summary { + font-style: italic; + font-size: 1.2rem; + color: var(--clr-foreground-700); + } + + .more { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(20em, 60ch), 29.5rem)); + margin-top: 1em; + gap: 1em; + + div { + padding: 1rem; + background: var(--clr-background); + + a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_card.scss b/archives/modules/component/_card.scss similarity index 100% rename from src/assets/scss/modules/component/_card.scss rename to archives/modules/component/_card.scss diff --git a/src/assets/scss/modules/component/_clients.scss b/archives/modules/component/_clients.scss similarity index 93% rename from src/assets/scss/modules/component/_clients.scss rename to archives/modules/component/_clients.scss index 77bfd82..ca00cd8 100644 --- a/src/assets/scss/modules/component/_clients.scss +++ b/archives/modules/component/_clients.scss @@ -1,17 +1,17 @@ -.clients { - background-color: var(--clr-background); - margin-bottom: -6em; - - &-list { - padding: 2em; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: 2em; - - svg { - max-height: 5em; - } - } -} +.clients { + background-color: var(--clr-background); + margin-bottom: -6em; + + &-list { + padding: 2em; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 2em; + + svg { + max-height: 5em; + } + } +} diff --git a/src/assets/scss/modules/component/_contact.scss b/archives/modules/component/_contact.scss similarity index 100% rename from src/assets/scss/modules/component/_contact.scss rename to archives/modules/component/_contact.scss diff --git a/src/assets/scss/modules/component/_error.scss b/archives/modules/component/_error.scss similarity index 100% rename from src/assets/scss/modules/component/_error.scss rename to archives/modules/component/_error.scss diff --git a/src/assets/scss/modules/component/_featured.scss b/archives/modules/component/_featured.scss similarity index 95% rename from src/assets/scss/modules/component/_featured.scss rename to archives/modules/component/_featured.scss index 66f0683..cde7a6a 100644 --- a/src/assets/scss/modules/component/_featured.scss +++ b/archives/modules/component/_featured.scss @@ -1,204 +1,204 @@ -.featured { - --clr-variant: var(--clr-accent); - --clr-variant-dark: var(--clr-accent-dark); - - &.red { - --clr-variant: var(--clr-red); - --clr-variant-dark: var(--clr-red-dark); - } - - &-container { - display: flex; - flex-direction: column; - position: relative; - justify-content: space-between; - overflow: hidden; - margin: 2em auto; - margin-top: 5em; - border-radius: 0.3em; - padding: 0; - background-color: transparent; - min-height: 20rem; - margin-bottom: -5rem; - // border: 0.0625em solid var(--clr-background); - // box-shadow: 0 0.3125rem 0.625rem rgb(0 0 0 / 40%) - box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4); - - @include breakpoint-down('medium') { - width: calc(100% - 2em); - } - } - - &-right { - display: flex; - padding: 2em; - background-color: var(--clr-variant); - flex: 1 auto; - position: relative; - justify-content: center; - align-items: center; - - @include breakpoint-down('small') { - min-height: 10em; - } - - img { - all: unset; - overflow: clip !important; - width: min(100%, 26.1875rem); - aspect-ratio: 1/1; - } - - #svg { - position: absolute; - bottom: 0; - left: 0; - } - } - - &-left { - color: var(--clr-white); - padding: 2em; - width: min(90ch, 100%); - background-color: var(--clr-variant-dark); - - >.featured-header { - display: flex; - flex-direction: column; - margin-bottom: 1em; - gap: 0.5em; - align-items: flex-start; - } - } - - &-header { - &_project-name { - border-radius: 0.3em; - background-color: var(--clr-variant); - background-image: linear-gradient(90deg, - var(--clr-variant-dark), - var(--clr-variant)); - padding: 1em; - width: 100%; - - p:last-of-type { - font-size: 0.8em; - } - } - } - - &-main { - &>* { - max-width: 45ch; - } - - &_tag { - border-radius: 0.3em; - padding: 0.5em 1.5em; - color: var(--clr-white); - border: 0.0625em solid var(--clr-white); - user-select: none; - pointer-events: none; - width: fit-content; - font-size: 0.7rem; - - &-area { - display: flex; - margin-top: 2em; - gap: 0.5em; - flex-wrap: wrap; - } - } - } - - &-body { - display: flex; - position: relative; - flex: 1 1 auto; - - @include breakpoint-down('small') { - flex-direction: column-reverse; - } - } - - &-footer { - padding: 1em 2em; - display: flex; - justify-content: flex-end; - background-color: var(--clr-black-light); - gap: 0.4rem; - flex-wrap: wrap; - - p { - border-radius: 0.3em; - padding: 0.5em 1.5em; - color: var(--clr-white); - border: 0.0625em solid var(--clr-white); - user-select: none; - pointer-events: none; - width: fit-content; - font-size: 0.9rem; - - &:first-of-type { - border: none; - color: var(--clr-white); - background: var(--clr-variant-dark); - background-image: linear-gradient(-90deg, - var(--clr-variant), - var(--clr-variant-dark)); - } - - @include breakpoint-down('small') { - width: 100%; - } - } - } - - &-background { - position: absolute; - left: 0; - bottom: 0; - right: 0; - width: 100%; - user-select: none; - pointer-events: none; - } - - &-external { - &_link { - display: flex; - align-items: center; - gap: 0.5em; - padding: 0.5em; - margin-top: 1em; - border-radius: 0.3em; - font-size: 1.2rem; - color: var(--clr-white); - border: none; - background: var(--clr-black-light); - - svg { - width: 1.2em; - height: 1.2em; - } - - &:is(:hover, :focus) { - color: var(--clr-white); - outline: 0.0625em solid var(--clr-background); - } - } - } - - &-tag { - border-radius: 0.3em; - position: absolute; - right: 1em; - top: 1em; - padding: 0.2em 0.5em; - z-index: 10; - font-weight: 500; - background-color: var(--clr-black-light); - color: var(--clr-white); - // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.2); - } +.featured { + --clr-variant: var(--clr-accent); + --clr-variant-dark: var(--clr-accent-dark); + + &.red { + --clr-variant: var(--clr-red); + --clr-variant-dark: var(--clr-red-dark); + } + + &-container { + display: flex; + flex-direction: column; + position: relative; + justify-content: space-between; + overflow: hidden; + margin: 2em auto; + margin-top: 5em; + border-radius: 0.3em; + padding: 0; + background-color: transparent; + min-height: 20rem; + margin-bottom: -5rem; + // border: 0.0625em solid var(--clr-background); + // box-shadow: 0 0.3125rem 0.625rem rgb(0 0 0 / 40%) + box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4); + + @include breakpoint-down('medium') { + width: calc(100% - 2em); + } + } + + &-right { + display: flex; + padding: 2em; + background-color: var(--clr-variant); + flex: 1 auto; + position: relative; + justify-content: center; + align-items: center; + + @include breakpoint-down('small') { + min-height: 10em; + } + + img { + all: unset; + overflow: clip !important; + width: min(100%, 26.1875rem); + aspect-ratio: 1/1; + } + + #svg { + position: absolute; + bottom: 0; + left: 0; + } + } + + &-left { + color: var(--clr-white); + padding: 2em; + width: min(90ch, 100%); + background-color: var(--clr-variant-dark); + + >.featured-header { + display: flex; + flex-direction: column; + margin-bottom: 1em; + gap: 0.5em; + align-items: flex-start; + } + } + + &-header { + &_project-name { + border-radius: 0.3em; + background-color: var(--clr-variant); + background-image: linear-gradient(90deg, + var(--clr-variant-dark), + var(--clr-variant)); + padding: 1em; + width: 100%; + + p:last-of-type { + font-size: 0.8em; + } + } + } + + &-main { + &>* { + max-width: 45ch; + } + + &_tag { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-white); + border: 0.0625em solid var(--clr-white); + user-select: none; + pointer-events: none; + width: fit-content; + font-size: 0.7rem; + + &-area { + display: flex; + margin-top: 2em; + gap: 0.5em; + flex-wrap: wrap; + } + } + } + + &-body { + display: flex; + position: relative; + flex: 1 1 auto; + + @include breakpoint-down('small') { + flex-direction: column-reverse; + } + } + + &-footer { + padding: 1em 2em; + display: flex; + justify-content: flex-end; + background-color: var(--clr-black-light); + gap: 0.4rem; + flex-wrap: wrap; + + p { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-white); + border: 0.0625em solid var(--clr-white); + user-select: none; + pointer-events: none; + width: fit-content; + font-size: 0.9rem; + + &:first-of-type { + border: none; + color: var(--clr-white); + background: var(--clr-variant-dark); + background-image: linear-gradient(-90deg, + var(--clr-variant), + var(--clr-variant-dark)); + } + + @include breakpoint-down('small') { + width: 100%; + } + } + } + + &-background { + position: absolute; + left: 0; + bottom: 0; + right: 0; + width: 100%; + user-select: none; + pointer-events: none; + } + + &-external { + &_link { + display: flex; + align-items: center; + gap: 0.5em; + padding: 0.5em; + margin-top: 1em; + border-radius: 0.3em; + font-size: 1.2rem; + color: var(--clr-white); + border: none; + background: var(--clr-black-light); + + svg { + width: 1.2em; + height: 1.2em; + } + + &:is(:hover, :focus) { + color: var(--clr-white); + outline: 0.0625em solid var(--clr-background); + } + } + } + + &-tag { + border-radius: 0.3em; + position: absolute; + right: 1em; + top: 1em; + padding: 0.2em 0.5em; + z-index: 10; + font-weight: 500; + background-color: var(--clr-black-light); + color: var(--clr-white); + // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.2); + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_hero.scss b/archives/modules/component/_hero.scss similarity index 100% rename from src/assets/scss/modules/component/_hero.scss rename to archives/modules/component/_hero.scss diff --git a/src/assets/scss/modules/component/_nav.scss b/archives/modules/component/_nav.scss similarity index 94% rename from src/assets/scss/modules/component/_nav.scss rename to archives/modules/component/_nav.scss index 57b5630..f8ff033 100644 --- a/src/assets/scss/modules/component/_nav.scss +++ b/archives/modules/component/_nav.scss @@ -1,191 +1,191 @@ -.nav { - background-color: var(--clr-background); - flex-grow: 0; - flex-shrink: 0; - position: sticky; - top: 0; - padding: 0.8rem; - z-index: 20; - - &-container { - width: 100%; - max-width: 64rem; - margin: 0 auto; - gap: 1rem; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - - .menubar { - font-weight: 600; - flex: 1; - justify-content: flex-end; - } - } - - &-skipto { - background-color: var(--clr-accent); - color: var(--clr-white); - display: flex; - padding: 0 0.3rem; - align-self: center; - scale: 0 1; - order: 2; - transform-origin: left; - transition: scale 200ms ease; - - &:focus { - color: var(--clr-white); - scale: 1; - } - } - - .leftside { - display: flex; - gap: 1rem; - } - - .rightside { - display: flex; - gap: 0.2rem; - } - - .brand { - display: flex; - gap: 0.5rem; - flex: 1 0 auto; - order: 1; - - &-title { - font-size: 1.3rem; - font-weight: 700; - } - - &-logo { - display: flex; - align-items: center; - } - } - - .themes { - transition: background-color 200ms ease-in; - border-radius: 50%; - } - - .themes, - &-mobile { - cursor: pointer; - background: none; - border: none; - display: block; - height: 2rem; - width: 2rem; - padding: 0.4rem; - color: inherit; - - svg { - width: 100%; - height: 100%; - } - - &__section { - margin-top: 3.605625rem; - right: 0; - position: fixed; - top: 0; - left: 0; - height: calc(100% - 3.605625rem); - background-color: var(--clr-background); - color: var(--clr-foreground); - z-index: 20; - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; - justify-content: center; - - &.not-showing { - height: 0%; - overflow-y: hidden; - visibility: hidden; - } - - @include breakpoint-up('medium') { - height: 0%; - overflow-y: hidden; - visibility: hidden; - } - - li { - width: 100%; - list-style: none; - - a { - display: block; - text-transform: uppercase; - height: 5em; - - div { - position: absolute; - left: 50%; - top: 50%; - translate: -50% -50%; - } - - &:is(:hover, :focus) { - font-weight: 700; - } - } - } - } - } - - &-mobile { - @include breakpoint-up('medium') { - display: none; - } - } - - ul { - display: none; - gap: 1rem; - align-items: center; - - @include breakpoint-up('medium') { - display: flex; - } - - li { - list-style: none; - text-transform: uppercase; - letter-spacing: 0rem; - - a { - position: relative; - z-index: 1; - transition: color 300ms 150ms ease-in; - - &:hover, - &:focus-visible { - color: var(--clr-white); - z-index: 1; - - &::before { - width: 100%; - } - } - - &::before { - content: ''; - position: absolute; - width: 0%; - background-color: var(--clr-accent); - height: 110%; - transition: all 150ms ease-in; - z-index: -1; - } - } - } - } +.nav { + background-color: var(--clr-background); + flex-grow: 0; + flex-shrink: 0; + position: sticky; + top: 0; + padding: 0.8rem; + z-index: 20; + + &-container { + width: 100%; + max-width: 64rem; + margin: 0 auto; + gap: 1rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + + .menubar { + font-weight: 600; + flex: 1; + justify-content: flex-end; + } + } + + &-skipto { + background-color: var(--clr-accent); + color: var(--clr-white); + display: flex; + padding: 0 0.3rem; + align-self: center; + scale: 0 1; + order: 2; + transform-origin: left; + transition: scale 200ms ease; + + &:focus { + color: var(--clr-white); + scale: 1; + } + } + + .leftside { + display: flex; + gap: 1rem; + } + + .rightside { + display: flex; + gap: 0.2rem; + } + + .brand { + display: flex; + gap: 0.5rem; + flex: 1 0 auto; + order: 1; + + &-title { + font-size: 1.3rem; + font-weight: 700; + } + + &-logo { + display: flex; + align-items: center; + } + } + + .themes { + transition: background-color 200ms ease-in; + border-radius: 50%; + } + + .themes, + &-mobile { + cursor: pointer; + background: none; + border: none; + display: block; + height: 2rem; + width: 2rem; + padding: 0.4rem; + color: inherit; + + svg { + width: 100%; + height: 100%; + } + + &__section { + margin-top: 3.605625rem; + right: 0; + position: fixed; + top: 0; + left: 0; + height: calc(100% - 3.605625rem); + background-color: var(--clr-background); + color: var(--clr-foreground); + z-index: 20; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + justify-content: center; + + &.not-showing { + height: 0%; + overflow-y: hidden; + visibility: hidden; + } + + @include breakpoint-up('medium') { + height: 0%; + overflow-y: hidden; + visibility: hidden; + } + + li { + width: 100%; + list-style: none; + + a { + display: block; + text-transform: uppercase; + height: 5em; + + div { + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + } + + &:is(:hover, :focus) { + font-weight: 700; + } + } + } + } + } + + &-mobile { + @include breakpoint-up('medium') { + display: none; + } + } + + ul { + display: none; + gap: 1rem; + align-items: center; + + @include breakpoint-up('medium') { + display: flex; + } + + li { + list-style: none; + text-transform: uppercase; + letter-spacing: 0rem; + + a { + position: relative; + z-index: 1; + transition: color 300ms 150ms ease-in; + + &:hover, + &:focus-visible { + color: var(--clr-white); + z-index: 1; + + &::before { + width: 100%; + } + } + + &::before { + content: ''; + position: absolute; + width: 0%; + background-color: var(--clr-accent); + height: 110%; + transition: all 150ms ease-in; + z-index: -1; + } + } + } + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_partof.scss b/archives/modules/component/_partof.scss similarity index 95% rename from src/assets/scss/modules/component/_partof.scss rename to archives/modules/component/_partof.scss index 7f44956..6cc1e54 100644 --- a/src/assets/scss/modules/component/_partof.scss +++ b/archives/modules/component/_partof.scss @@ -1,168 +1,168 @@ -.part-of { - background-color: var(--clr-background); - width: 100%; - margin-bottom: -6em; - padding-bottom: 4em; - position: relative; - isolation: isolate; - - .description { - font-size: 0.9rem; - } - - &-more { - display: block; - width: 100%; - padding: 1em; - background-color: var(--clr-background); - border: 0.0625em solid var(--clr-background-900); - margin-top: 1em; - border-radius: 0.3em; - - &:is(:hover, :focus) { - background-color: var(--clr-accent); - border-color: var(--clr-accent-light); - color: var(--clr-white); - } - } - - &-container { - max-width: 64rem; - margin: 0 auto; - padding: 3em 2em 2em 2em; - width: 100%; - - h2 { - text-transform: uppercase; - letter-spacing: 0.1em; - - @include breakpoint-down('medium') { - margin-bottom: 0.5em; - } - } - - .organization { - &-container { - margin-top: 1em; - display: grid; - gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); - - svg { - max-height: 8em; - - @include breakpoint-down('medium') { - max-width: 100%; - margin-top: 2em; - } - } - } - - &-item { - border: 0.0625em solid var(--clr-background-900); - border-radius: 0.3em; - padding: 1em; - position: relative; - background: var(--clr-background); - - &.full { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 1em; - - svg { - flex: 0 0 auto; - } - - .organization-content { - flex: 1 auto; - margin-top: 2em; - } - - @include breakpoint-down('medium') { - flex-direction: column; - } - } - } - - &-desc { - margin-bottom: 1em; - } - - &-position { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5em; - - span { - border-radius: 0.3em; - padding: 0.5em 1.5em; - color: var(--clr-foreground); - border: 0.0625em solid var(--clr-foreground); - align-items: center; - gap: 0.4rem; - user-select: none; - pointer-events: none; - - &:first-of-type { - border: none; - color: var(--clr-white); - background: var(--clr-accent-dark); - background-image: linear-gradient( - -90deg, - var(--clr-accent), - var(--clr-accent-dark) - ); - background-size: 400%; - animation: positionanimate 1s infinite alternate; - } - } - } - - &-join { - display: flex; - flex-direction: row; - color: var(--clr-foreground); - border: 0.0625em solid var(--clr-foreground); - border-radius: 0.3em; - padding: 0.5em 1.5em; - align-items: center; - width: fit-content; - position: absolute; - right: 1em; - font-size: 0.8rem; - top: 1em; - user-select: none; - pointer-events: none; - } - } - } - - &-svg { - &_bottom { - position: absolute; - bottom: -0.0625em; - z-index: -1; - color: var(--clr-accent); - - @include breakpoint-up('medium') { - bottom: -4.0625em; - } - - @include breakpoint-up('large') { - bottom: -8.0625em; - } - } - } -} - -@keyframes positionanimate { - 0% { - background-position: left; - } - 100% { - background-position: right; - } -} +.part-of { + background-color: var(--clr-background); + width: 100%; + margin-bottom: -6em; + padding-bottom: 4em; + position: relative; + isolation: isolate; + + .description { + font-size: 0.9rem; + } + + &-more { + display: block; + width: 100%; + padding: 1em; + background-color: var(--clr-background); + border: 0.0625em solid var(--clr-background-900); + margin-top: 1em; + border-radius: 0.3em; + + &:is(:hover, :focus) { + background-color: var(--clr-accent); + border-color: var(--clr-accent-light); + color: var(--clr-white); + } + } + + &-container { + max-width: 64rem; + margin: 0 auto; + padding: 3em 2em 2em 2em; + width: 100%; + + h2 { + text-transform: uppercase; + letter-spacing: 0.1em; + + @include breakpoint-down('medium') { + margin-bottom: 0.5em; + } + } + + .organization { + &-container { + margin-top: 1em; + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); + + svg { + max-height: 8em; + + @include breakpoint-down('medium') { + max-width: 100%; + margin-top: 2em; + } + } + } + + &-item { + border: 0.0625em solid var(--clr-background-900); + border-radius: 0.3em; + padding: 1em; + position: relative; + background: var(--clr-background); + + &.full { + grid-column: 1 / -1; + display: flex; + align-items: center; + gap: 1em; + + svg { + flex: 0 0 auto; + } + + .organization-content { + flex: 1 auto; + margin-top: 2em; + } + + @include breakpoint-down('medium') { + flex-direction: column; + } + } + } + + &-desc { + margin-bottom: 1em; + } + + &-position { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5em; + + span { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + gap: 0.4rem; + user-select: none; + pointer-events: none; + + &:first-of-type { + border: none; + color: var(--clr-white); + background: var(--clr-accent-dark); + background-image: linear-gradient( + -90deg, + var(--clr-accent), + var(--clr-accent-dark) + ); + background-size: 400%; + animation: positionanimate 1s infinite alternate; + } + } + } + + &-join { + display: flex; + flex-direction: row; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + border-radius: 0.3em; + padding: 0.5em 1.5em; + align-items: center; + width: fit-content; + position: absolute; + right: 1em; + font-size: 0.8rem; + top: 1em; + user-select: none; + pointer-events: none; + } + } + } + + &-svg { + &_bottom { + position: absolute; + bottom: -0.0625em; + z-index: -1; + color: var(--clr-accent); + + @include breakpoint-up('medium') { + bottom: -4.0625em; + } + + @include breakpoint-up('large') { + bottom: -8.0625em; + } + } + } +} + +@keyframes positionanimate { + 0% { + background-position: left; + } + 100% { + background-position: right; + } +} diff --git a/src/assets/scss/modules/component/_post.scss b/archives/modules/component/_post.scss similarity index 95% rename from src/assets/scss/modules/component/_post.scss rename to archives/modules/component/_post.scss index 304b0db..5c8d496 100644 --- a/src/assets/scss/modules/component/_post.scss +++ b/archives/modules/component/_post.scss @@ -1,79 +1,79 @@ -.post { - &s { - margin-top: 2.5rem; - - &-yeargroup { - margin-bottom: 0.5em; - } - - &-detail { - margin-top: 1rem; - margin-left: 2rem; - background-color: var(--clr-background); - color: var(--clr-foreground-700); - border: 0.0625em solid var(--clr-background-900); - padding: 1rem; - border-radius: 0.3rem; - - @include breakpoint-down('small') { - margin-inline: 0; - } - - &_header { - font-size: 1.6rem; - line-height: 1.1; - margin-bottom: 0.5em; - display: block; - font-weight: 600; - color: var(--clr-foreground); - } - - &_accent { - color: var(--clr-white); - margin-bottom: 1em; - width: fit-content; - flex-wrap: wrap; - gap: 0.5em; - display: flex; - - &-item { - font-size: 0.9rem; - gap: 0.5em; - border-radius: 0.3em; - padding: 0.4em; - display: flex; - color: var(--clr-foreground); - border: 0.0625em solid var(--clr-foreground); - align-items: center; - - &_filled { - border: none; - color: var(--clr-white); - box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - background-color: var(--clr-accent-light); - background-image: linear-gradient(45deg, - var(--clr-accent-dark), - var(--clr-accent)); - } - } - } - - &_svg { - width: 1.5em; - height: fit-content; - } - } - - &-list { - margin: 0; - } - - &:not(:first-of-type) { - margin-top: 1.5rem; - } - - &:is(:last-of-type) { - margin-bottom: 1.5rem; - } - } +.post { + &s { + margin-top: 2.5rem; + + &-yeargroup { + margin-bottom: 0.5em; + } + + &-detail { + margin-top: 1rem; + margin-left: 2rem; + background-color: var(--clr-background); + color: var(--clr-foreground-700); + border: 0.0625em solid var(--clr-background-900); + padding: 1rem; + border-radius: 0.3rem; + + @include breakpoint-down('small') { + margin-inline: 0; + } + + &_header { + font-size: 1.6rem; + line-height: 1.1; + margin-bottom: 0.5em; + display: block; + font-weight: 600; + color: var(--clr-foreground); + } + + &_accent { + color: var(--clr-white); + margin-bottom: 1em; + width: fit-content; + flex-wrap: wrap; + gap: 0.5em; + display: flex; + + &-item { + font-size: 0.9rem; + gap: 0.5em; + border-radius: 0.3em; + padding: 0.4em; + display: flex; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + + &_filled { + border: none; + color: var(--clr-white); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-light); + background-image: linear-gradient(45deg, + var(--clr-accent-dark), + var(--clr-accent)); + } + } + } + + &_svg { + width: 1.5em; + height: fit-content; + } + } + + &-list { + margin: 0; + } + + &:not(:first-of-type) { + margin-top: 1.5rem; + } + + &:is(:last-of-type) { + margin-bottom: 1.5rem; + } + } } \ No newline at end of file diff --git a/src/assets/scss/modules/component/_preload.scss b/archives/modules/component/_preload.scss similarity index 92% rename from src/assets/scss/modules/component/_preload.scss rename to archives/modules/component/_preload.scss index 0a749ff..485b280 100644 --- a/src/assets/scss/modules/component/_preload.scss +++ b/archives/modules/component/_preload.scss @@ -1,55 +1,55 @@ -.preload { - position: fixed; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--clr-background); - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100dvh; - z-index: 999; - flex-direction: column; - translate: 0 0; - opacity: 1; - transition: transform 1s ease-in-out; - - svg { - rotate: 0deg; - max-width: 10em; - animation: preload 2s infinite; - } - - &-text { - margin-top: 1em; - max-width: 30ch; - text-align: center; - } - - &.hidden { - translate: 0 -100vh; - } - - &.disabled { - display: none; - } -} - -@keyframes preload { - 25% { - rotate: 15deg; - } - - 50% { - rotate: 0deg; - } - - 75% { - rotate: -15deg; - } - - 100% { - rotate: 0deg; - } -} +.preload { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--clr-background); + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100dvh; + z-index: 999; + flex-direction: column; + translate: 0 0; + opacity: 1; + transition: transform 1s ease-in-out; + + svg { + rotate: 0deg; + max-width: 10em; + animation: preload 2s infinite; + } + + &-text { + margin-top: 1em; + max-width: 30ch; + text-align: center; + } + + &.hidden { + translate: 0 -100vh; + } + + &.disabled { + display: none; + } +} + +@keyframes preload { + 25% { + rotate: 15deg; + } + + 50% { + rotate: 0deg; + } + + 75% { + rotate: -15deg; + } + + 100% { + rotate: 0deg; + } +} diff --git a/src/assets/scss/modules/component/_prototype.scss b/archives/modules/component/_prototype.scss similarity index 94% rename from src/assets/scss/modules/component/_prototype.scss rename to archives/modules/component/_prototype.scss index bc4496c..777d4e3 100644 --- a/src/assets/scss/modules/component/_prototype.scss +++ b/archives/modules/component/_prototype.scss @@ -1,259 +1,259 @@ -.prototype { - margin-top: 4rem; - position: relative; - isolation: isolate; - - &s { - display: flex; - flex-direction: column; - align-items: center; - flex-wrap: wrap; - justify-content: center; - gap: 7rem; - - @include breakpoint-up('large') { - margin: 3rem; - } - - @include breakpoint-down('medium') { - flex-direction: row; - } - } - - &-header { - margin-bottom: 1rem; - } - - &-card { - align-items: center; - display: flex; - border-radius: 0.3rem; - width: 100%; - - &:first-of-type { - @include breakpoint-down('medium') { - margin-top: 2em; - } - } - - @include breakpoint-down('medium') { - flex-direction: column; - } - - &:nth-of-type(odd) { - .prototype-header { - order: 2; - - &::before { - background-color: var(--clr-accent-dark); - rotate: -6deg; - } - - @include breakpoint-down('medium') { - order: 0; - } - } - - .prototype-description { - .text { - padding: 1rem; - padding-right: 2rem; - } - - .links { - justify-content: flex-start; - padding-left: 1rem; - } - } - } - } - - &-description { - flex: 1 1 auto; - z-index: 5; - - ul { - li { - margin-top: 0.3rem; - } - } - - .text { - padding: 1rem; - padding-left: 2rem; - - .language { - display: inline-block; - padding: 0 0.1rem; - background-color: var(--clr-accent-dark); - color: var(--clr-white); - border-radius: 0.3rem; - user-select: none; - font-size: 0.8rem; - } - - @include breakpoint-down('medium') { - padding-left: 0; - } - - ul { - margin-top: 0.8rem; - border-radius: 0.3rem; - background-color: hsl(0, 0%, 10%); - padding: 1rem; - box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); - } - } - - .links { - display: flex; - align-items: flex-end; - justify-content: flex-end; - padding-right: 1rem; - - a { - background-color: var(--clr-accent); - color: var(--clr-white); - padding: 0.5rem 1rem; - border-radius: 0.3rem; - transition: all 300ms ease-out; - display: flex; - - svg { - flex: 0 0 auto; - height: 1.5rem; - } - - &:hover { - filter: brightness(120%); - } - } - } - - &_header { - display: flex; - margin-bottom: 1em; - gap: 0.5em; - font-weight: 700; - align-items: center; - line-height: 1.2; - } - } - - &-more { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; - - i { - display: inline-block; - font-style: normal; - padding: 0.2rem 0.7rem; - background-color: var(--clr-background-900); - border-radius: 0.3rem; - - &.error { - background-color: hsl(0, 100%, 43%); - color: var(--clr-white); - } - - &.active { - background-color: #067e06; - color: var(--clr-white); - } - } - - .status { - background-image: linear-gradient( - -90deg, - var(--clr-accent), - var(--clr-accent-dark) - ); - padding: 0 0.7rem; - display: flex; - align-items: center; - border-radius: 0.3rem; - color: white; - margin-right: 0.3rem; - } - } - - &-header { - flex: 0 0 auto; - position: relative; - width: 25rem; - height: 20rem; - color: var(--clr-white); - - @include breakpoint-down('medium') { - width: 100%; - max-width: 25rem; - } - - &:hover { - .note { - scale: 1.1; - } - } - - &::before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - rotate: 6deg; - background: var(--clr-accent); - left: -0.7rem; - border-radius: 40% 20% / 10%; - } - } - - .note { - article { - padding: 1rem; - height: 100%; - overflow-y: auto; - scrollbar-width: none; - position: relative; - - &::-webkit-scrollbar { - width: 0; - } - } - - pre { - overflow: scroll; - &::-webkit-scrollbar { - width: 0; - } - } - } - - &-svg { - &_top { - position: absolute; - top: -16.0625em; - z-index: -1; - color: var(--clr-accent); - - @include breakpoint-up('large') { - top: -20.0625em; - } - - @include breakpoint-down('small') { - top: -10em; - } - - @include breakpoint-up('xlarge') { - top: -25em; - } - } - - &_bottom { - position: absolute; - bottom: -0.0625em; - z-index: -1; - color: var(--clr-background); - } - } -} +.prototype { + margin-top: 4rem; + position: relative; + isolation: isolate; + + &s { + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + justify-content: center; + gap: 7rem; + + @include breakpoint-up('large') { + margin: 3rem; + } + + @include breakpoint-down('medium') { + flex-direction: row; + } + } + + &-header { + margin-bottom: 1rem; + } + + &-card { + align-items: center; + display: flex; + border-radius: 0.3rem; + width: 100%; + + &:first-of-type { + @include breakpoint-down('medium') { + margin-top: 2em; + } + } + + @include breakpoint-down('medium') { + flex-direction: column; + } + + &:nth-of-type(odd) { + .prototype-header { + order: 2; + + &::before { + background-color: var(--clr-accent-dark); + rotate: -6deg; + } + + @include breakpoint-down('medium') { + order: 0; + } + } + + .prototype-description { + .text { + padding: 1rem; + padding-right: 2rem; + } + + .links { + justify-content: flex-start; + padding-left: 1rem; + } + } + } + } + + &-description { + flex: 1 1 auto; + z-index: 5; + + ul { + li { + margin-top: 0.3rem; + } + } + + .text { + padding: 1rem; + padding-left: 2rem; + + .language { + display: inline-block; + padding: 0 0.1rem; + background-color: var(--clr-accent-dark); + color: var(--clr-white); + border-radius: 0.3rem; + user-select: none; + font-size: 0.8rem; + } + + @include breakpoint-down('medium') { + padding-left: 0; + } + + ul { + margin-top: 0.8rem; + border-radius: 0.3rem; + background-color: hsl(0, 0%, 10%); + padding: 1rem; + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + } + } + + .links { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding-right: 1rem; + + a { + background-color: var(--clr-accent); + color: var(--clr-white); + padding: 0.5rem 1rem; + border-radius: 0.3rem; + transition: all 300ms ease-out; + display: flex; + + svg { + flex: 0 0 auto; + height: 1.5rem; + } + + &:hover { + filter: brightness(120%); + } + } + } + + &_header { + display: flex; + margin-bottom: 1em; + gap: 0.5em; + font-weight: 700; + align-items: center; + line-height: 1.2; + } + } + + &-more { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + + i { + display: inline-block; + font-style: normal; + padding: 0.2rem 0.7rem; + background-color: var(--clr-background-900); + border-radius: 0.3rem; + + &.error { + background-color: hsl(0, 100%, 43%); + color: var(--clr-white); + } + + &.active { + background-color: #067e06; + color: var(--clr-white); + } + } + + .status { + background-image: linear-gradient( + -90deg, + var(--clr-accent), + var(--clr-accent-dark) + ); + padding: 0 0.7rem; + display: flex; + align-items: center; + border-radius: 0.3rem; + color: white; + margin-right: 0.3rem; + } + } + + &-header { + flex: 0 0 auto; + position: relative; + width: 25rem; + height: 20rem; + color: var(--clr-white); + + @include breakpoint-down('medium') { + width: 100%; + max-width: 25rem; + } + + &:hover { + .note { + scale: 1.1; + } + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + rotate: 6deg; + background: var(--clr-accent); + left: -0.7rem; + border-radius: 40% 20% / 10%; + } + } + + .note { + article { + padding: 1rem; + height: 100%; + overflow-y: auto; + scrollbar-width: none; + position: relative; + + &::-webkit-scrollbar { + width: 0; + } + } + + pre { + overflow: scroll; + &::-webkit-scrollbar { + width: 0; + } + } + } + + &-svg { + &_top { + position: absolute; + top: -16.0625em; + z-index: -1; + color: var(--clr-accent); + + @include breakpoint-up('large') { + top: -20.0625em; + } + + @include breakpoint-down('small') { + top: -10em; + } + + @include breakpoint-up('xlarge') { + top: -25em; + } + } + + &_bottom { + position: absolute; + bottom: -0.0625em; + z-index: -1; + color: var(--clr-background); + } + } +} diff --git a/src/assets/scss/modules/component/_title.scss b/archives/modules/component/_title.scss similarity index 100% rename from src/assets/scss/modules/component/_title.scss rename to archives/modules/component/_title.scss diff --git a/archives/style.scss b/archives/style.scss new file mode 100644 index 0000000..5dec5b8 --- /dev/null +++ b/archives/style.scss @@ -0,0 +1,25 @@ +@import './modules/vars'; +@import './modules/mixin'; +@import './modules/global'; + +@import './modules/header'; +@import './modules/component/nav'; +@import './modules/component/title'; +@import './modules/main'; +@import './modules/footer'; + +@import './modules/component/prototype'; +@import './modules/component/card'; +@import './modules/component/partof'; +@import './modules/component/preload'; + +@import './modules/component/aboutme'; +@import './modules/component/hero'; +@import './modules/component/featured'; +@import './modules/component/post'; +@import './modules/component/article'; +@import './modules/component/clients'; +@import './modules/component/animation'; +@import './modules/component/contact'; + +@import './modules/component/error'; \ No newline at end of file From 5aa661f89fb34c682ff24d7550ed292aceeaf915 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Wed, 28 May 2025 08:57:32 +0900 Subject: [PATCH 2/4] =?UTF-8?q?migrate:=20`scss`=20=E2=80=94=20using=20@us?= =?UTF-8?q?e=20scss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/abstracts/_mixin.scss | 25 ++ src/assets/scss/abstracts/_vars.scss | 72 ++++ src/assets/scss/abstracts/index.scss | 2 + src/assets/scss/article.scss | 11 + src/assets/scss/base/_global.scss | 165 ++++++++ src/assets/scss/base/index.scss | 1 + src/assets/scss/blog.scss | 12 + src/assets/scss/components/_aboutme.scss | 217 +++++++++++ src/assets/scss/components/_animation.scss | 59 +++ src/assets/scss/components/_card.scss | 228 +++++++++++ src/assets/scss/components/_clients.scss | 17 + src/assets/scss/components/_featured.scss | 206 ++++++++++ src/assets/scss/components/_hero.scss | 90 +++++ src/assets/scss/components/_nav.scss | 193 +++++++++ src/assets/scss/components/_note.scss | 90 +++++ src/assets/scss/components/_partof.scss | 170 ++++++++ src/assets/scss/components/_post.scss | 81 ++++ src/assets/scss/components/_preload.scss | 55 +++ src/assets/scss/components/_prototype.scss | 261 +++++++++++++ src/assets/scss/components/_title.scss | 340 ++++++++++++++++ src/assets/scss/components/index.scss | 13 + src/assets/scss/contact.scss | 11 + src/assets/scss/error.scss | 20 +- src/assets/scss/layouts/_footer.scss | 72 ++++ src/assets/scss/layouts/_header.scss | 21 + src/assets/scss/layouts/_main.scss | 176 +++++++++ src/assets/scss/layouts/index.scss | 3 + src/assets/scss/pages/_article.scss | 434 +++++++++++++++++++++ src/assets/scss/pages/_contact.scss | 182 +++++++++ src/assets/scss/pages/_error.scss | 123 ++++++ src/assets/scss/pages/index.scss | 3 + src/assets/scss/style.scss | 26 +- 32 files changed, 3347 insertions(+), 32 deletions(-) create mode 100644 src/assets/scss/abstracts/_mixin.scss create mode 100644 src/assets/scss/abstracts/_vars.scss create mode 100644 src/assets/scss/abstracts/index.scss create mode 100644 src/assets/scss/article.scss create mode 100644 src/assets/scss/base/_global.scss create mode 100644 src/assets/scss/base/index.scss create mode 100644 src/assets/scss/blog.scss create mode 100644 src/assets/scss/components/_aboutme.scss create mode 100644 src/assets/scss/components/_animation.scss create mode 100644 src/assets/scss/components/_card.scss create mode 100644 src/assets/scss/components/_clients.scss create mode 100644 src/assets/scss/components/_featured.scss create mode 100644 src/assets/scss/components/_hero.scss create mode 100644 src/assets/scss/components/_nav.scss create mode 100644 src/assets/scss/components/_note.scss create mode 100644 src/assets/scss/components/_partof.scss create mode 100644 src/assets/scss/components/_post.scss create mode 100644 src/assets/scss/components/_preload.scss create mode 100644 src/assets/scss/components/_prototype.scss create mode 100644 src/assets/scss/components/_title.scss create mode 100644 src/assets/scss/components/index.scss create mode 100644 src/assets/scss/contact.scss create mode 100644 src/assets/scss/layouts/_footer.scss create mode 100644 src/assets/scss/layouts/_header.scss create mode 100644 src/assets/scss/layouts/_main.scss create mode 100644 src/assets/scss/layouts/index.scss create mode 100644 src/assets/scss/pages/_article.scss create mode 100644 src/assets/scss/pages/_contact.scss create mode 100644 src/assets/scss/pages/_error.scss create mode 100644 src/assets/scss/pages/index.scss diff --git a/src/assets/scss/abstracts/_mixin.scss b/src/assets/scss/abstracts/_mixin.scss new file mode 100644 index 0000000..af102ce --- /dev/null +++ b/src/assets/scss/abstracts/_mixin.scss @@ -0,0 +1,25 @@ +@use "sass:map"; + +$breakpoints-up: ( + 'medium': '40em', + 'large': '64em', + 'xlarge': '87.5em', +); + +$breakpoints-down: ( + 'small': '39.9375em', + 'medium': '63.9375em', + 'large': '87.4375em', +); + +@mixin breakpoint-up($size) { + @media screen and (min-width: map.get($breakpoints-up, $size)) { + @content; + } +} + +@mixin breakpoint-down($size) { + @media screen and (max-width: map.get($breakpoints-down, $size)) { + @content; + } +} diff --git a/src/assets/scss/abstracts/_vars.scss b/src/assets/scss/abstracts/_vars.scss new file mode 100644 index 0000000..d5efc55 --- /dev/null +++ b/src/assets/scss/abstracts/_vars.scss @@ -0,0 +1,72 @@ +html:root { + --_h: 270; + --_hs: var(--_h) 20%; + --clr-accent: hsl(var(--_h), 50%, 40%); + --clr-accent-light: hsl(var(--_h), 84%, 72%); + --clr-accent-dark: hsl(var(--_h), 71%, 22%); + --clr-complementary: hsl(90, 50%, 40%); + + --clr-href: hsl(var(--_h), 80%, 50%); + --clr-href-visited: hsl(var(--_h), 70%, 22%); + + --clr-background: hsl(var(--_hs) 95%); + --clr-background-900: hsl(var(--_hs) 88%); + --clr-background-800: hsl(var(--_hs) 75%); + --clr-background-700: hsl(var(--_hs) 63%); + --clr-foreground: hsl(var(--_hs) 10%); + --clr-foreground-900: hsl(var(--_hs) 13%); + --clr-foreground-800: hsl(var(--_hs) 25%); + --clr-foreground-700: hsl(var(--_hs) 38%); + + --clr-disabled-text: hsl(var(--_hs) 50%); + --clr-white: hsl(var(--_hs) 100%); + --clr-black: hsl(var(--_hs) 0%); + --clr-black-light: hsl(var(--_hs) 13%); + + --clr-red: hsl(357, 70%, 41%); + --clr-red-dark: hsl(357, 70%, 30%); + + --bx-shadow-two-side: 0 0.3125rem 0.625rem hsla(var(--_hs) 0%, 0.2), + -0.3125rem -0.3125rem 0.625rem hsla(var(--_hs) 100%, 0.8); + --table-header: hsl(270, 80%, 30%); + + &[data-theme=sunglow] { + --clr-accent: hsl(40, 56%, 40%); + --clr-accent-light: hsl(40, 56%, 72%); + --clr-accent-dark: hsl(40, 56%, 22%); + + --clr-href: hsl(40, 56%, 72%); + --clr-href-visited: hsl(40, 56%, 22%); + + --clr-background: hsl(40, 56%, 95%); + --clr-background-900: hsl(40, 56%, 88%); + --clr-background-800: hsl(40, 56%, 75%); + --clr-background-700: hsl(40, 56%, 63%); + --clr-foreground: hsl(40, 56%, 10%); + --clr-foreground-900: hsl(40, 56%, 13%); + --clr-foreground-800: hsl(40, 56%, 25%); + --clr-foreground-700: hsl(40, 56%, 38%); + + &[data-theme=dark] { + --clr-href: hsl(40, 56%, 72%); + --clr-href-visited: hsl(40, 56%, 40%); + } + } + + &[data-theme=dark] { + --clr-href: hsl(var(--_h), 84%, 72%); + --clr-href-visited: hsl(var(--_h), 50%, 40%); + --clr-background: hsl(var(--_hs) 10%); + --clr-background-900: hsl(var(--_hs) 13%); + --clr-background-800: hsl(var(--_hs) 25%); + --clr-background-700: hsl(var(--_hs) 38%); + --clr-foreground: hsl(var(--_hs) 95%); + --clr-foreground-900: hsl(var(--_hs) 88%); + --clr-foreground-800: hsl(var(--_hs) 75%); + --clr-foreground-700: hsl(var(--_hs) 63%); + + --bx-shadow-two-side: 0 0.3125rem 0.625rem rgb(0 0 0 / 20%), + -0.3125rem -0.3125rem 0.625rem rgb(58 58 58 / 63%); + --table-header: var(--clr-accent-light); + } +} \ No newline at end of file diff --git a/src/assets/scss/abstracts/index.scss b/src/assets/scss/abstracts/index.scss new file mode 100644 index 0000000..15fbdc2 --- /dev/null +++ b/src/assets/scss/abstracts/index.scss @@ -0,0 +1,2 @@ +@use "./_mixin"; +@use "./_vars"; \ No newline at end of file diff --git a/src/assets/scss/article.scss b/src/assets/scss/article.scss new file mode 100644 index 0000000..e321077 --- /dev/null +++ b/src/assets/scss/article.scss @@ -0,0 +1,11 @@ +@use "./abstracts/" as *; + +@use "./base/" as *; + +@use "./layouts/" as *; + +@use "./components/nav"; +@use "./components/preload"; +@use "./components/title"; + +@use "./pages/article"; \ No newline at end of file diff --git a/src/assets/scss/base/_global.scss b/src/assets/scss/base/_global.scss new file mode 100644 index 0000000..4fce297 --- /dev/null +++ b/src/assets/scss/base/_global.scss @@ -0,0 +1,165 @@ +@use "../abstracts/_mixin" as mix; + +html { + scroll-behavior: smooth; + scroll-padding-top: 10rem; + scroll-padding-bottom: 10rem; +} + +html:root { + .themes { + background-color: #ffc107; + color: #7e620e; + } + + [data-moon] { + display: none; + } + + [data-sun] { + display: block; + } + + &[data-theme="dark"] { + .themes { + background-color: var(--clr-accent); + color: var(--clr-accent-dark); + } + + [data-sun] { + display: none; + } + + [data-moon] { + display: block; + } + } +} + +*, +*:is(::after, ::before) { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: var(--clr-background-900); + font-family: 'Montserrat', sans-serif; + color: var(--clr-foreground); + line-height: 1.6; + overflow-x: hidden; +} + +a, +a:is(:active, :hover, :focus-visible) { + color: inherit; + text-decoration: none; +} + +a:is(:hover, :focus-visible) { + color: var(--clr-accent); +} + +a[href] { + position: relative; + + .new-tab-warning { + position: absolute; + width: max-content; + background-color: hsl(0, 0%, 13%); + font-weight: normal; + letter-spacing: normal; + color: var(--clr-white) !important; + padding: 0.3rem; + font-size: 0.7rem; + border-radius: 0.3rem; + margin-top: 0.5rem; + top: 100%; + left: 0; + visibility: hidden; + pointer-events: none; + text-transform: capitalize; + transition: all 300ms ease-out; + translate: 0 -0.3rem; + z-index: 90; + user-select: none; + } + + &:focus-visible { + .new-tab-warning { + visibility: visible; + translate: 0 0; + } + } +} + +::selection { + background-color: var(--clr-accent); + color: var(--clr-white); +} + +.t-all { + transition: all 300ms ease-in; +} + +.no-scroll { + @include mix.breakpoint-down('small') { + overflow: hidden !important; + + :is(header, main, footer) { + visibility: hidden; + user-select: none; + } + } +} + +.not-loaded { + overflow: hidden; + + :is(header, main, footer, nav) { + visibility: hidden; + user-select: none; + } +} + +:is(ul, li) { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +*:focus-visible { + outline: 0.125rem solid var(--clr-accent-dark); +} + +.highlight { + background-color: var(--clr-black); + padding: 0.2rem 0.6rem; + color: var(--clr-white); + + &:is(:hover, :focus) { + color: var(--clr-white); + } +} + +.header-link__access { + text-decoration: none !important; +} + +.sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 0.0625rem; + margin: -0.0625rem; + overflow: hidden; + padding: 0; + position: absolute; + width: 0.0625rem; +} \ No newline at end of file diff --git a/src/assets/scss/base/index.scss b/src/assets/scss/base/index.scss new file mode 100644 index 0000000..6940b46 --- /dev/null +++ b/src/assets/scss/base/index.scss @@ -0,0 +1 @@ +@use "./_global"; \ No newline at end of file diff --git a/src/assets/scss/blog.scss b/src/assets/scss/blog.scss new file mode 100644 index 0000000..17e63b9 --- /dev/null +++ b/src/assets/scss/blog.scss @@ -0,0 +1,12 @@ +@use "./abstracts/" as *; + +@use "./base/" as *; + +@use "./layouts/" as *; + +@use "./components/nav"; +@use "./components/preload"; +@use "./components/title"; + +@use "./components/card"; +@use "./components/post"; diff --git a/src/assets/scss/components/_aboutme.scss b/src/assets/scss/components/_aboutme.scss new file mode 100644 index 0000000..03b5ec3 --- /dev/null +++ b/src/assets/scss/components/_aboutme.scss @@ -0,0 +1,217 @@ +@use "../abstracts/mixin" as mix; + +.aboutme { + background-color: var(--clr-accent); + color: var(--clr-white); + + .adds { + font-size: 0.9rem; + padding: 1rem; + + .new-line { + margin-top: 0.5em; + } + } + + a { + text-decoration: underline; + text-underline-offset: 0.4rem; + } + + a:hover, + a:focus-visible { + color: #d0d0d0; + } + + ::selection { + background-color: #333333; + } + + .extra { + text-transform: uppercase; + letter-spacing: 0.1rem; + } + + .main-container { + display: flex; + flex-direction: column; + } + + .flex { + display: flex; + flex-direction: row; + border-radius: 0.3rem; + margin-top: 1rem; + + &-header { + display: flex; + padding: 0.5rem 1rem; + width: 100%; + justify-content: space-between; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + flex: 0 0 auto; + + span[aria-hidden=true] { + display: block; + margin-top: 0.3rem; + } + + div { + display: flex; + align-items: center; + font-weight: 600; + gap: 0.2rem; + + .dot { + height: 0.9375rem; + width: 0.9375rem; + background-color: hsl(0, 100%, 43%); + border-radius: 50%; + + &:first-of-type { + background-color: green; + } + + &:nth-of-type(2) { + background-color: yellow; + } + } + } + } + + .lists { + display: flex; + justify-content: space-around; + width: 100%; + } + + &.tools { + background-color: hsl(0, 0%, 13%); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + margin-bottom: -9rem; + z-index: 2; + + h2 { + padding: 1rem; + } + + .lists { + background-color: hsl(0, 0%, 11%); + border-radius: 0.3rem; + padding: 2rem; + } + } + + &.languages { + filter: brightness(110%); + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-dark); + padding: 2rem; + + .header-title { + gap: 1em; + display: flex; + } + + h2 { + padding: 1rem 0; + } + + ul { + margin-top: 0.2rem; + } + + .lists { + overflow: unset; + height: fit-content; + } + } + + &:not(:first-of-type) { + margin-top: 5rem; + justify-content: space-around; + flex-direction: column; + + ul { + font-size: 1.1rem; + font-weight: 600; + + li { + font-weight: 500; + font-size: 1rem; + margin-top: 0.5rem; + + &:first-of-type { + font-weight: 600; + } + + &:nth-child(2) { + margin-top: 0.5rem; + } + } + } + + @include mix.breakpoint-down('medium') { + align-items: flex-start; + + .lists { + flex-direction: column; + } + + ul>li { + display: inline-block; + margin-top: 0; + } + } + } + + @include mix.breakpoint-down('medium') { + flex-direction: column; + align-items: center; + } + } + + .data { + position: relative; + min-width: 25rem; + height: 20rem; + + @include mix.breakpoint-down('medium') { + width: 100%; + max-width: 25rem; + min-width: unset; + } + + &:hover { + .note { + scale: 1.1; + } + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: hsl(0, 100%, 43%); + left: -0.7rem; + border-radius: 40% 20% / 10%; + } + } + + .explain { + display: flex; + align-items: center; + margin-top: 1rem; + padding: 1rem; + font-size: 1.2rem; + + @include mix.breakpoint-up('large') { + padding-left: 3rem; + } + } + + .note { + rotate: -3deg; + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_animation.scss b/src/assets/scss/components/_animation.scss new file mode 100644 index 0000000..5b19ab2 --- /dev/null +++ b/src/assets/scss/components/_animation.scss @@ -0,0 +1,59 @@ +[data-animation] { + opacity: 0; + transition: translate var(--_translate, 1s) ease-in-out, scale var(--_scale, 1s) ease-in-out, rotate var(--_rotate, 1s) ease-in-out, opacity var(--_opacity, 1s) ease-in-out; +} + +[data-animation='fade-in'] { + translate: 0 4em; +} + +[data-animation='right-show'] { + translate: -5em 0; +} + +[data-animation='top-show'] { + translate: 0 -5em; +} + +[data-animation='bottom-show'] { + translate: 0 5em; +} + +[data-animation='left-show'] { + translate: 5em 0; +} + +[data-animation='prototype-card'] { + translate: -5em 0; + + &:nth-of-type(odd) { + translate: 5em 0; + } +} + +.has-been-animated { + opacity: unset; + scale: unset; + rotate: unset; + translate: unset !important; +} + +@media (prefers-reduced-motion) { + .prototype-reader, + .data { + transform: unset !important; + } + + *, + *::after, + *::before { + animation: unset !important; + rotate: 0deg !important; + translate: 0em 0em !important; + } + + [data-animation] { + translate: unset !important; + opacity: 1 !important; + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_card.scss b/src/assets/scss/components/_card.scss new file mode 100644 index 0000000..b9e7d78 --- /dev/null +++ b/src/assets/scss/components/_card.scss @@ -0,0 +1,228 @@ +@use "../abstracts/mixin" as mix; + +.card { + background-color: #333333; + background-image: linear-gradient(transparent, var(--clr-accent-dark)); + background-position: center; + background-size: cover; + background-clip: border-box; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + border-radius: 0.3rem; + padding: 10rem 0 0; + width: 28ch; + position: relative; + isolation: isolate; + flex: 0 0 auto; + scroll-snap-align: center; + color: var(--clr-white); + + &:hover, + &:has(:focus) { + scale: 1.1; + z-index: 10; + } + + &-image { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; + width: 100%; + border-radius: 0.3rem; + overflow: hidden; + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + background-image: linear-gradient(transparent, var(--clr-accent-dark)); + } + } + + &-background { + height: inherit; + width: fit-content; + } + + &-empty { + width: calc(100% - 4rem); + padding: 2rem; + box-shadow: var(--bx-shadow-two-side); + background: var(--clr-background-900); + color: var(--clr-foreground-700); + + &:hover, + &:focus-visible { + scale: 1; + } + } + + &s { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 2rem; + scrollbar-width: none; + + &.nocentered { + justify-content: flex-start; + } + + &-more { + width: 100%; + } + + &.cards-horizontal { + padding: 2rem 2rem 4.5rem 2rem; + scroll-snap-type: x proximity; + overflow-y: hidden; + + + &::-webkit-scrollbar { + width: 0; + height: 0; + } + } + + @include mix.breakpoint-down('medium') { + &.cards-horizontal { + flex-wrap: nowrap; + overflow-x: auto; + } + } + + @include mix.breakpoint-up('medium') { + &.cards-horizontal { + flex-wrap: nowrap; + overflow-x: auto; + + } + + &-more { + justify-content: space-evenly; + } + } + } + + &-body { + background-image: linear-gradient(hsla(0, 0%, 0%, 0), + hsla(0, 0%, 0%, 0.4) 10%, + hsla(0, 0%, 0%, 1)); + height: 100%; + display: flex; + flex-direction: column; + border-radius: 0.3rem; + + header, + .description-area { + flex: 0 0 auto; + padding: 0 1.5rem; + } + + header { + h3 { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + + .description-area { + height: 3.2rem; + overflow: hidden; + } + + h2 { + font-size: 1.2rem; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .card-time { + display: block; + color: var(--clr-accent-light); + font-weight: 600; + margin-bottom: 1rem; + margin-top: 0.3rem; + font-size: 0.8rem; + padding: 0.2rem 1rem 0.2rem 0; + width: fit-content; + border-radius: 0.3em; + background-color: transparent; + background-image: linear-gradient(90deg, + hsl(270deg 71% 22% / 0%), + var(--clr-accent)); + } + + .more-links { + display: flex; + flex: 1 0 auto; + align-items: flex-end; + width: 100%; + justify-content: space-between; + + .disabled { + display: block; + margin-top: 1rem; + padding: 1rem 1.25rem; + color: var(--clr-disabled-text); + cursor: not-allowed; + user-select: none; + } + + a { + display: flex; + margin-top: 1rem; + padding: 1rem 1.5rem; + user-select: none; + position: relative; + z-index: 10; + gap: 0.3rem; + + svg { + flex: 0 0 auto; + height: 1.5rem; + } + + &:hover, + &:focus-visible { + color: var(--clr-white); + + &::before { + width: 100%; + } + } + + &:focus { + .new-tab-warning { + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + visibility: visible; + } + } + + &::before { + content: ''; + position: absolute; + width: 0%; + left: 0; + margin-top: -1rem; + background-color: var(--clr-accent); + height: 100%; + transition: all 150ms ease-in; + border-radius: 0.3rem; + z-index: -1; + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_clients.scss b/src/assets/scss/components/_clients.scss new file mode 100644 index 0000000..ca00cd8 --- /dev/null +++ b/src/assets/scss/components/_clients.scss @@ -0,0 +1,17 @@ +.clients { + background-color: var(--clr-background); + margin-bottom: -6em; + + &-list { + padding: 2em; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 2em; + + svg { + max-height: 5em; + } + } +} diff --git a/src/assets/scss/components/_featured.scss b/src/assets/scss/components/_featured.scss new file mode 100644 index 0000000..34b5b78 --- /dev/null +++ b/src/assets/scss/components/_featured.scss @@ -0,0 +1,206 @@ +@use "../abstracts/mixin" as mix; + +.featured { + --clr-variant: var(--clr-accent); + --clr-variant-dark: var(--clr-accent-dark); + + &.red { + --clr-variant: var(--clr-red); + --clr-variant-dark: var(--clr-red-dark); + } + + &-container { + display: flex; + flex-direction: column; + position: relative; + justify-content: space-between; + overflow: hidden; + margin: 2em auto; + margin-top: 5em; + border-radius: 0.3em; + padding: 0; + background-color: transparent; + min-height: 20rem; + margin-bottom: -5rem; + // border: 0.0625em solid var(--clr-background); + // box-shadow: 0 0.3125rem 0.625rem rgb(0 0 0 / 40%) + box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4); + + @include mix.breakpoint-down('medium') { + width: calc(100% - 2em); + } + } + + &-right { + display: flex; + padding: 2em; + background-color: var(--clr-variant); + flex: 1 auto; + position: relative; + justify-content: center; + align-items: center; + + @include mix.breakpoint-down('small') { + min-height: 10em; + } + + img { + all: unset; + overflow: clip !important; + width: min(100%, 26.1875rem); + aspect-ratio: 1/1; + } + + #svg { + position: absolute; + bottom: 0; + left: 0; + } + } + + &-left { + color: var(--clr-white); + padding: 2em; + width: min(90ch, 100%); + background-color: var(--clr-variant-dark); + + >.featured-header { + display: flex; + flex-direction: column; + margin-bottom: 1em; + gap: 0.5em; + align-items: flex-start; + } + } + + &-header { + &_project-name { + border-radius: 0.3em; + background-color: var(--clr-variant); + background-image: linear-gradient(90deg, + var(--clr-variant-dark), + var(--clr-variant)); + padding: 1em; + width: 100%; + + p:last-of-type { + font-size: 0.8em; + } + } + } + + &-main { + &>* { + max-width: 45ch; + } + + &_tag { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-white); + border: 0.0625em solid var(--clr-white); + user-select: none; + pointer-events: none; + width: fit-content; + font-size: 0.7rem; + + &-area { + display: flex; + margin-top: 2em; + gap: 0.5em; + flex-wrap: wrap; + } + } + } + + &-body { + display: flex; + position: relative; + flex: 1 1 auto; + + @include mix.breakpoint-down('small') { + flex-direction: column-reverse; + } + } + + &-footer { + padding: 1em 2em; + display: flex; + justify-content: flex-end; + background-color: var(--clr-black-light); + gap: 0.4rem; + flex-wrap: wrap; + + p { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-white); + border: 0.0625em solid var(--clr-white); + user-select: none; + pointer-events: none; + width: fit-content; + font-size: 0.9rem; + + &:first-of-type { + border: none; + color: var(--clr-white); + background: var(--clr-variant-dark); + background-image: linear-gradient(-90deg, + var(--clr-variant), + var(--clr-variant-dark)); + } + + @include mix.breakpoint-down('small') { + width: 100%; + } + } + } + + &-background { + position: absolute; + left: 0; + bottom: 0; + right: 0; + width: 100%; + user-select: none; + pointer-events: none; + } + + &-external { + &_link { + display: flex; + align-items: center; + gap: 0.5em; + padding: 0.5em; + margin-top: 1em; + border-radius: 0.3em; + font-size: 1.2rem; + color: var(--clr-white); + border: none; + background: var(--clr-black-light); + + svg { + width: 1.2em; + height: 1.2em; + } + + &:is(:hover, :focus) { + color: var(--clr-white); + outline: 0.0625em solid var(--clr-background); + } + } + } + + &-tag { + border-radius: 0.3em; + position: absolute; + right: 1em; + top: 1em; + padding: 0.2em 0.5em; + z-index: 10; + font-weight: 500; + background-color: var(--clr-black-light); + color: var(--clr-white); + // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.2); + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_hero.scss b/src/assets/scss/components/_hero.scss new file mode 100644 index 0000000..6fdd2d6 --- /dev/null +++ b/src/assets/scss/components/_hero.scss @@ -0,0 +1,90 @@ +@use "../abstracts/mixin" as mix; + +.hero { + overflow: hidden; + display: flex; + isolation: isolate; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: var(--clr-background); + height: 80dvh; + z-index: 3; + position: relative; + + @include mix.breakpoint-down('medium') { + height: 100%; + } + + &-decoration { + --width: 95vmin; + --increase: 1.2; + --duration: 12s; + --delay: calc((var(--duration) * 0.1)); + position: absolute; + right: calc(var(--width) / -2); + bottom: calc(var(--width) / -2); + z-index: -1; + width: var(--width); + aspect-ratio: 1/1; + border-radius: 50%; + background-color: var(--clr-accent); + animation: twiching var(--duration) var(--delay) infinite; + } + + @keyframes twiching { + 50% { + width: calc(var(--width) * var(--increase)); + } + } + + &-bigger { + --width: 120vmin; + --increase: 2; + --duration: 10s; + --delay: calc((var(--duration) * 0.2)); + background-color: transparent; + border: max(0.5vmin, 0.125rem) solid var(--clr-accent); + } + + .decoration { + position: absolute; + width: 100%; + height: 100%; + user-select: none; + pointer-events: none; + + .relative { + position: relative; + } + } + + &-svg { + &_bottom { + z-index: -1; + position: absolute; + bottom: 0; + margin-bottom: -.625rem; + left: 0; + width: 100%; + overflow: hidden; + line-height: 0; + transform: rotate(180deg); + + svg { + position: relative; + display: block; + width: calc(100% + 0.08125rem); + height: 9.375rem; + + @include mix.breakpoint-down('small') { + height: 3.125rem; + } + } + + .shape-fill { + fill: var(--clr-background-900); + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_nav.scss b/src/assets/scss/components/_nav.scss new file mode 100644 index 0000000..7e63f2f --- /dev/null +++ b/src/assets/scss/components/_nav.scss @@ -0,0 +1,193 @@ +@use "../abstracts/mixin" as mix; + +.nav { + background-color: var(--clr-background); + flex-grow: 0; + flex-shrink: 0; + position: sticky; + top: 0; + padding: 0.8rem; + z-index: 20; + + &-container { + width: 100%; + max-width: 64rem; + margin: 0 auto; + gap: 1rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + + .menubar { + font-weight: 600; + flex: 1; + justify-content: flex-end; + } + } + + &-skipto { + background-color: var(--clr-accent); + color: var(--clr-white); + display: flex; + padding: 0 0.3rem; + align-self: center; + scale: 0 1; + order: 2; + transform-origin: left; + transition: scale 200ms ease; + + &:focus { + color: var(--clr-white); + scale: 1; + } + } + + .leftside { + display: flex; + gap: 1rem; + } + + .rightside { + display: flex; + gap: 0.2rem; + } + + .brand { + display: flex; + gap: 0.5rem; + flex: 1 0 auto; + order: 1; + + &-title { + font-size: 1.3rem; + font-weight: 700; + } + + &-logo { + display: flex; + align-items: center; + } + } + + .themes { + transition: background-color 200ms ease-in; + border-radius: 50%; + } + + .themes, + &-mobile { + cursor: pointer; + background: none; + border: none; + display: block; + height: 2rem; + width: 2rem; + padding: 0.4rem; + color: inherit; + + svg { + width: 100%; + height: 100%; + } + + &__section { + margin-top: 3.605625rem; + right: 0; + position: fixed; + top: 0; + left: 0; + height: calc(100% - 3.605625rem); + background-color: var(--clr-background); + color: var(--clr-foreground); + z-index: 20; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + justify-content: center; + + &.not-showing { + height: 0%; + overflow-y: hidden; + visibility: hidden; + } + + @include mix.breakpoint-up('medium') { + height: 0%; + overflow-y: hidden; + visibility: hidden; + } + + li { + width: 100%; + list-style: none; + + a { + display: block; + text-transform: uppercase; + height: 5em; + + div { + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + } + + &:is(:hover, :focus) { + font-weight: 700; + } + } + } + } + } + + &-mobile { + @include mix.breakpoint-up('medium') { + display: none; + } + } + + ul { + display: none; + gap: 1rem; + align-items: center; + + @include mix.breakpoint-up('medium') { + display: flex; + } + + li { + list-style: none; + text-transform: uppercase; + letter-spacing: 0rem; + + a { + position: relative; + z-index: 1; + transition: color 300ms 150ms ease-in; + + &:hover, + &:focus-visible { + color: var(--clr-white); + z-index: 1; + + &::before { + width: 100%; + } + } + + &::before { + content: ''; + position: absolute; + width: 0%; + background-color: var(--clr-accent); + height: 110%; + transition: all 150ms ease-in; + z-index: -1; + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_note.scss b/src/assets/scss/components/_note.scss new file mode 100644 index 0000000..aa5e287 --- /dev/null +++ b/src/assets/scss/components/_note.scss @@ -0,0 +1,90 @@ + +.note { + color: var(--clr-white); + display: flex; + flex: 0 0 auto; + position: relative; + width: min(25rem, 100%); + flex-direction: column; + background-color: hsl(0, 0%, 13%); + border-radius: 0.6rem; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + height: max(20rem, 100%); + transition: all 300ms ease-in-out; + + article { + padding: 1rem; + z-index: 80; + } + + &>svg { + position: absolute; + right: 0.1rem; + bottom: 0.1rem; + color: hsl(0, 0%, 11%); + } + + article { + padding: 1rem; + height: 100%; + overflow-y: auto; + + scrollbar-width: none; + + &::-webkit-scrollbar { + width: 0; + } + + li { + padding-left: 0.6rem; + } + } + + &-heading { + font-weight: 600; + display: block; + text-transform: uppercase; + letter-spacing: 0.1em; + line-height: 1.2; + } + + &-subheading { + font-style: italic; + } + + li { + font-size: 0.85em; + } + + &-header { + display: flex; + height: 2.5rem; + padding: 0 1rem; + width: 100%; + justify-content: space-between; + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + flex: 0 0 auto; + + div { + display: flex; + align-items: center; + font-weight: 600; + gap: 0.2rem; + + .dot { + height: 0.9375rem; + width: 0.9375rem; + background-color: hsl(0, 100%, 43%); + border-radius: 50%; + + &:first-of-type { + background-color: green; + } + + &:nth-of-type(2) { + background-color: yellow; + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_partof.scss b/src/assets/scss/components/_partof.scss new file mode 100644 index 0000000..0946bb6 --- /dev/null +++ b/src/assets/scss/components/_partof.scss @@ -0,0 +1,170 @@ +@use "../abstracts/mixin" as mix; + +.part-of { + background-color: var(--clr-background); + width: 100%; + margin-bottom: -6em; + padding-bottom: 4em; + position: relative; + isolation: isolate; + + .description { + font-size: 0.9rem; + } + + &-more { + display: block; + width: 100%; + padding: 1em; + background-color: var(--clr-background); + border: 0.0625em solid var(--clr-background-900); + margin-top: 1em; + border-radius: 0.3em; + + &:is(:hover, :focus) { + background-color: var(--clr-accent); + border-color: var(--clr-accent-light); + color: var(--clr-white); + } + } + + &-container { + max-width: 64rem; + margin: 0 auto; + padding: 3em 2em 2em 2em; + width: 100%; + + h2 { + text-transform: uppercase; + letter-spacing: 0.1em; + + @include mix.breakpoint-down('medium') { + margin-bottom: 0.5em; + } + } + + .organization { + &-container { + margin-top: 1em; + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); + + svg { + max-height: 8em; + + @include mix.breakpoint-down('medium') { + max-width: 100%; + margin-top: 2em; + } + } + } + + &-item { + border: 0.0625em solid var(--clr-background-900); + border-radius: 0.3em; + padding: 1em; + position: relative; + background: var(--clr-background); + + &.full { + grid-column: 1 / -1; + display: flex; + align-items: center; + gap: 1em; + + svg { + flex: 0 0 auto; + } + + .organization-content { + flex: 1 auto; + margin-top: 2em; + } + + @include mix.breakpoint-down('medium') { + flex-direction: column; + } + } + } + + &-desc { + margin-bottom: 1em; + } + + &-position { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5em; + + span { + border-radius: 0.3em; + padding: 0.5em 1.5em; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + gap: 0.4rem; + user-select: none; + pointer-events: none; + + &:first-of-type { + border: none; + color: var(--clr-white); + background: var(--clr-accent-dark); + background-image: linear-gradient( + -90deg, + var(--clr-accent), + var(--clr-accent-dark) + ); + background-size: 400%; + animation: positionanimate 1s infinite alternate; + } + } + } + + &-join { + display: flex; + flex-direction: row; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + border-radius: 0.3em; + padding: 0.5em 1.5em; + align-items: center; + width: fit-content; + position: absolute; + right: 1em; + font-size: 0.8rem; + top: 1em; + user-select: none; + pointer-events: none; + } + } + } + + &-svg { + &_bottom { + position: absolute; + bottom: -0.0625em; + z-index: -1; + color: var(--clr-accent); + + @include mix.breakpoint-up('medium') { + bottom: -4.0625em; + } + + @include mix.breakpoint-up('large') { + bottom: -8.0625em; + } + } + } +} + +@keyframes positionanimate { + 0% { + background-position: left; + } + 100% { + background-position: right; + } +} diff --git a/src/assets/scss/components/_post.scss b/src/assets/scss/components/_post.scss new file mode 100644 index 0000000..95cec2d --- /dev/null +++ b/src/assets/scss/components/_post.scss @@ -0,0 +1,81 @@ +@use "../abstracts/mixin" as mix; + +.post { + &s { + margin-top: 2.5rem; + + &-yeargroup { + margin-bottom: 0.5em; + } + + &-detail { + margin-top: 1rem; + margin-left: 2rem; + background-color: var(--clr-background); + color: var(--clr-foreground-700); + border: 0.0625em solid var(--clr-background-900); + padding: 1rem; + border-radius: 0.3rem; + + @include mix.breakpoint-down('small') { + margin-inline: 0; + } + + &_header { + font-size: 1.6rem; + line-height: 1.1; + margin-bottom: 0.5em; + display: block; + font-weight: 600; + color: var(--clr-foreground); + } + + &_accent { + color: var(--clr-white); + margin-bottom: 1em; + width: fit-content; + flex-wrap: wrap; + gap: 0.5em; + display: flex; + + &-item { + font-size: 0.9rem; + gap: 0.5em; + border-radius: 0.3em; + padding: 0.4em; + display: flex; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + + &_filled { + border: none; + color: var(--clr-white); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-light); + background-image: linear-gradient(45deg, + var(--clr-accent-dark), + var(--clr-accent)); + } + } + } + + &_svg { + width: 1.5em; + height: fit-content; + } + } + + &-list { + margin: 0; + } + + &:not(:first-of-type) { + margin-top: 1.5rem; + } + + &:is(:last-of-type) { + margin-bottom: 1.5rem; + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_preload.scss b/src/assets/scss/components/_preload.scss new file mode 100644 index 0000000..485b280 --- /dev/null +++ b/src/assets/scss/components/_preload.scss @@ -0,0 +1,55 @@ +.preload { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--clr-background); + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100dvh; + z-index: 999; + flex-direction: column; + translate: 0 0; + opacity: 1; + transition: transform 1s ease-in-out; + + svg { + rotate: 0deg; + max-width: 10em; + animation: preload 2s infinite; + } + + &-text { + margin-top: 1em; + max-width: 30ch; + text-align: center; + } + + &.hidden { + translate: 0 -100vh; + } + + &.disabled { + display: none; + } +} + +@keyframes preload { + 25% { + rotate: 15deg; + } + + 50% { + rotate: 0deg; + } + + 75% { + rotate: -15deg; + } + + 100% { + rotate: 0deg; + } +} diff --git a/src/assets/scss/components/_prototype.scss b/src/assets/scss/components/_prototype.scss new file mode 100644 index 0000000..1a3abe5 --- /dev/null +++ b/src/assets/scss/components/_prototype.scss @@ -0,0 +1,261 @@ +@use "../abstracts/mixin" as mix; + +.prototype { + margin-top: 4rem; + position: relative; + isolation: isolate; + + &s { + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + justify-content: center; + gap: 7rem; + + @include mix.breakpoint-up('large') { + margin: 3rem; + } + + @include mix.breakpoint-down('medium') { + flex-direction: row; + } + } + + &-header { + margin-bottom: 1rem; + } + + &-card { + align-items: center; + display: flex; + border-radius: 0.3rem; + width: 100%; + + &:first-of-type { + @include mix.breakpoint-down('medium') { + margin-top: 2em; + } + } + + @include mix.breakpoint-down('medium') { + flex-direction: column; + } + + &:nth-of-type(odd) { + .prototype-header { + order: 2; + + &::before { + background-color: var(--clr-accent-dark); + rotate: -6deg; + } + + @include mix.breakpoint-down('medium') { + order: 0; + } + } + + .prototype-description { + .text { + padding: 1rem; + padding-right: 2rem; + } + + .links { + justify-content: flex-start; + padding-left: 1rem; + } + } + } + } + + &-description { + flex: 1 1 auto; + z-index: 5; + + ul { + li { + margin-top: 0.3rem; + } + } + + .text { + padding: 1rem; + padding-left: 2rem; + + .language { + display: inline-block; + padding: 0 0.1rem; + background-color: var(--clr-accent-dark); + color: var(--clr-white); + border-radius: 0.3rem; + user-select: none; + font-size: 0.8rem; + } + + @include mix.breakpoint-down('medium') { + padding-left: 0; + } + + ul { + margin-top: 0.8rem; + border-radius: 0.3rem; + background-color: hsl(0, 0%, 10%); + padding: 1rem; + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + } + } + + .links { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding-right: 1rem; + + a { + background-color: var(--clr-accent); + color: var(--clr-white); + padding: 0.5rem 1rem; + border-radius: 0.3rem; + transition: all 300ms ease-out; + display: flex; + + svg { + flex: 0 0 auto; + height: 1.5rem; + } + + &:hover { + filter: brightness(120%); + } + } + } + + &_header { + display: flex; + margin-bottom: 1em; + gap: 0.5em; + font-weight: 700; + align-items: center; + line-height: 1.2; + } + } + + &-more { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + + i { + display: inline-block; + font-style: normal; + padding: 0.2rem 0.7rem; + background-color: var(--clr-background-900); + border-radius: 0.3rem; + + &.error { + background-color: hsl(0, 100%, 43%); + color: var(--clr-white); + } + + &.active { + background-color: #067e06; + color: var(--clr-white); + } + } + + .status { + background-image: linear-gradient( + -90deg, + var(--clr-accent), + var(--clr-accent-dark) + ); + padding: 0 0.7rem; + display: flex; + align-items: center; + border-radius: 0.3rem; + color: white; + margin-right: 0.3rem; + } + } + + &-header { + flex: 0 0 auto; + position: relative; + width: 25rem; + height: 20rem; + color: var(--clr-white); + + @include mix.breakpoint-down('medium') { + width: 100%; + max-width: 25rem; + } + + &:hover { + .note { + scale: 1.1; + } + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + rotate: 6deg; + background: var(--clr-accent); + left: -0.7rem; + border-radius: 40% 20% / 10%; + } + } + + .note { + article { + padding: 1rem; + height: 100%; + overflow-y: auto; + scrollbar-width: none; + position: relative; + + &::-webkit-scrollbar { + width: 0; + } + } + + pre { + overflow: scroll; + &::-webkit-scrollbar { + width: 0; + } + } + } + + &-svg { + &_top { + position: absolute; + top: -16.0625em; + z-index: -1; + color: var(--clr-accent); + + @include mix.breakpoint-up('large') { + top: -20.0625em; + } + + @include mix.breakpoint-down('small') { + top: -10em; + } + + @include mix.breakpoint-up('xlarge') { + top: -25em; + } + } + + &_bottom { + position: absolute; + bottom: -0.0625em; + z-index: -1; + color: var(--clr-background); + } + } +} diff --git a/src/assets/scss/components/_title.scss b/src/assets/scss/components/_title.scss new file mode 100644 index 0000000..193bfd2 --- /dev/null +++ b/src/assets/scss/components/_title.scss @@ -0,0 +1,340 @@ +@use "../abstracts/mixin" as mix; + +.title { + &-container { + display: flex; + gap: 2rem; + max-width: 70rem; + padding: 3rem 2rem; + align-items: flex-start; + z-index: 0; + + @include mix.breakpoint-up('large') { + // background-color: var(--clr-background); + border-radius: 0.3em; + } + + .title { + &-left { + flex: 1 0 auto; + max-width: 45ch; + } + + &-right { + position: relative; + width: 25rem; + height: 20rem; + + @include mix.breakpoint-down('medium') { + width: 100%; + } + + &:hover { + .note.has-been-animated { + rotate: 0deg; + scale: 1.1; + } + } + + .note.has-been-animated { + rotate: 3deg; + --_scale: 300ms; + --_rotate: 700ms; + } + + .note { + rotate: -10deg; + } + + &::before { + rotate: 9deg; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--clr-complementary); + left: -0.7rem; + border-radius: 40% 20% / 90%; + animation: rolling 3s infinite ease-in; + } + + @keyframes rolling { + 50% { + rotate: -9deg; + scale: 1.01; + } + } + } + } + + @include mix.breakpoint-down('medium') { + flex-direction: column-reverse; + } + } + + &-side { + &_top { + display: flex; + flex: 0 0 auto; + flex-direction: column; + gap: 0.4rem; + width: 100%; + } + + &_bottom { + width: 100%; + font-size: 1.2rem; + + h2 { + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.1rem; + + @include mix.breakpoint-down('small') { + font-size: 1.2rem; + } + } + + .status-area { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5em; + font-size: 1rem; + margin-bottom: 0.5em; + + >.status-icon { + width: 0.75em; + height: 0.75em; + background-color: var(--clr-accent); + border-radius: 50%; + } + + .status-hoverable { + position: relative; + cursor: pointer; + + &:is(:hover, :focus), + &:has(:is(:hover, :focus)) { + .status-card { + visibility: visible; + user-select: text; + pointer-events: unset; + translate: -50% 0%; + } + } + + .status-card { + visibility: hidden; + user-select: none; + pointer-events: none; + background-color: var(--clr-background); + box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4); + // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.7); + padding: 1em; + left: 50%; + border-radius: 0.2em; + width: 25ch; + position: absolute; + z-index: 70; + margin-top: 0.2em; + translate: -50% 20%; + transition: all 200ms ease-in-out; + + &-header { + font-size: 0.9em; + letter-spacing: normal; + margin-bottom: unset; + } + + &-body { + margin-top: 1em; + display: flex; + gap: 1em; + + .status-card-left { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--clr-foreground-900); + border-radius: 0.4em; + width: 6ch; + height: 6ch; + flex: 0 0 auto; + + svg { + width: 75%; + height: 75%; + } + } + + .status-card-right { + font-size: 0.7em; + font-weight: normal; + } + } + + &-button { + text-align: center; + font-weight: normal; + display: block; + width: 100%; + margin-top: 1em; + font-size: 0.9em; + background-color: var(--clr-accent); + padding: 0.4em; + border-radius: 0.2em; + color: var(--clr-white); + + &:is(:hover, :focus) { + background-color: var(--clr-accent-dark); + color: var(--clr-white); + } + } + + &:is(:hover, :focus) { + visibility: visible; + user-select: text; + pointer-events: unset; + translate: -50% 0%; + } + } + } + } + } + } + + &-link { + display: block; + width: max-content; + } + + &-activity { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: -0.4rem; + + &__details { + margin-left: 0.4rem; + font-weight: 300; + user-select: none; + color: var(--clr-foreground-900); + + #month { + font-weight: 600; + } + + + #activity { + display: inline-block; + position: relative; + font-weight: 400; + z-index: 0; + + &::before { + content: ''; + position: absolute; + width: 70%; + height: 0.2rem; + bottom: 0; + border-bottom: 0.1rem dashed var(--clr-accent); + } + } + } + + #year, + svg, + #month { + color: var(--clr-foreground-900) + } + + svg { + width: 1.2rem; + } + } + + &-text { + font-size: 2.4rem; + font-weight: 700; + margin-left: -0.1rem; + transition: font-size 300ms ease-in; + } + + &-action { + display: flex; + flex-direction: row; + margin-top: 1.2rem; + color: var(--clr-white); + background: var(--clr-accent-dark); + background-image: linear-gradient(-90deg, + var(--clr-accent), + var(--clr-accent-dark)); + border-radius: 0.3rem; + padding: 0.5rem 1.5rem; + align-items: center; + gap: 0.4rem; + cursor: pointer; + font-size: 1.3rem; + transition: all 300ms ease-out; + + &:hover, + &:focus-visible { + color: hsl(0, 0%, 80%); + background-color: var(--clr-accent); + filter: brightness(140%); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + scale: 1.04; + } + + svg { + height: 1.3rem; + width: 1.3rem; + } + + &[disabled] { + cursor: not-allowed; + + &:hover { + scale: 0.96; + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + filter: grayscale(100); + } + } + + &.secondary { + background-color: var(--clr-background-800); + color: var(--clr-foreground-800); + background-image: none; + box-shadow: none; + + &:hover, + &:focus-visible { + filter: brightness(100%); + scale: 0.98; + } + } + + &__group { + display: flex; + gap: 0.6rem; + } + } + + &-submenu { + display: flex; + position: relative; + margin-top: -0.4rem; + margin-left: 0.4rem; + align-items: center; + gap: 0.3rem; + color: var(--clr-foreground-800); + user-select: none; + z-index: 0; + + svg { + height: 1rem; + rotate: 180deg; + } + } +} \ No newline at end of file diff --git a/src/assets/scss/components/index.scss b/src/assets/scss/components/index.scss new file mode 100644 index 0000000..fdd1d5e --- /dev/null +++ b/src/assets/scss/components/index.scss @@ -0,0 +1,13 @@ +@use "_aboutme"; +@use "_animation"; +@use "_card"; +@use "_clients"; +@use "_hero"; +@use "_nav"; +@use "_note"; +@use "_partof"; +@use "_preload"; +@use "_title"; +@use "_prototype"; + +@use "_featured"; \ No newline at end of file diff --git a/src/assets/scss/contact.scss b/src/assets/scss/contact.scss new file mode 100644 index 0000000..6900216 --- /dev/null +++ b/src/assets/scss/contact.scss @@ -0,0 +1,11 @@ +@use "./abstracts/" as *; + +@use "./base/" as *; + +@use "./layouts/" as *; + +@use "./components/nav"; +@use "./components/preload"; +@use "./components/title"; + +@use "./pages/contact"; \ No newline at end of file diff --git a/src/assets/scss/error.scss b/src/assets/scss/error.scss index 9780e4e..3840e64 100644 --- a/src/assets/scss/error.scss +++ b/src/assets/scss/error.scss @@ -1,14 +1,12 @@ -@import './modules/vars'; -@import './modules/mixin'; -@import './modules/global'; +@use "./abstracts/" as *; -@import './modules/component/preload'; +@use "./base/" as *; -@import './modules/header'; -@import './modules/component/nav'; -@import './modules/component/title'; -@import './modules/main'; -@import './modules/footer'; +@use "./layouts/" as *; -@import './modules/component/contact'; -@import './modules/component/error'; +@use "./components/nav"; +@use "./components/preload"; +@use "./components/title"; + +@use "./pages/contact"; +@use "./pages/error"; \ No newline at end of file diff --git a/src/assets/scss/layouts/_footer.scss b/src/assets/scss/layouts/_footer.scss new file mode 100644 index 0000000..d5107a1 --- /dev/null +++ b/src/assets/scss/layouts/_footer.scss @@ -0,0 +1,72 @@ +@use "../abstracts/mixin" as mix; + +.footer { + background-color: var(--clr-background); + color: var(--clr-foreground); + padding: 0.8rem; + + .brand { + display: flex; + gap: 0.5rem; + width: max-content; + + &-title { + font-size: 1.3rem; + font-weight: 700; + } + + &-logo { + display: flex; + align-items: center; + } + } + + &-top { + padding: 0.8rem; + padding-top: 3rem; + font-size: 2rem; + max-width: 35ch; + line-height: 1.2; + position: relative; + isolation: isolate; + + &::before { + content: '"'; + position: absolute; + font-size: 4em; + left: 0; + top: 0; + color: var(--clr-background-800); + font-weight: 600; + user-select: none; + z-index: -1; + } + } + + &-bottom { + padding: 0.8rem; + text-align: left; + display: flex; + flex-direction: column; + gap: 0.3em; + } + + &-container { + max-width: 64rem; + margin: 0 auto; + } + + .copyright { + font-size: 0.9rem; + margin: 1rem auto; + text-align: left; + border: 0.0625rem solid var(--clr-foreground); + width: 100%; + max-width: max-content; + padding: 0.2rem 2rem; + + @include mix.breakpoint-up('medium') { + flex-direction: row; + } + } +} diff --git a/src/assets/scss/layouts/_header.scss b/src/assets/scss/layouts/_header.scss new file mode 100644 index 0000000..d86013c --- /dev/null +++ b/src/assets/scss/layouts/_header.scss @@ -0,0 +1,21 @@ +.header { + &_article { + all: unset; + position: relative; + width: 100vw; + aspect-ratio: 16/9; + height: fit-content; + max-height: 60vh; + overflow: hidden; + margin: 0 auto; + + img { + top: 50%; + translate: 0 -50%; + position: absolute; + aspect-ratio: 16 / 9; + width: 100%; + height: auto; + } + } +} diff --git a/src/assets/scss/layouts/_main.scss b/src/assets/scss/layouts/_main.scss new file mode 100644 index 0000000..d86820e --- /dev/null +++ b/src/assets/scss/layouts/_main.scss @@ -0,0 +1,176 @@ +@use "../abstracts/mixin" as mix; + +.main { + background-color: var(--clr-background-900); + flex: 1 0 auto; + display: flex; + flex-direction: column; + gap: 6rem; + overflow: hidden; + + &-container { + max-width: 64rem; + margin: 0 auto; + padding: 3rem 2rem; + width: 100%; + } + + .section { + &-more { + display: block; + width: 100%; + padding: 1em; + border: 0.0625em solid var(--clr-foreground); + margin-top: 1em; + border-radius: 0.3em; + + &:is(:hover, :focus) { + background-color: var(--clr-accent); + border-color: var(--clr-accent-light); + color: var(--clr-white); + } + } + + &-header { + display: flex; + flex-direction: row; + align-items: center; + z-index: 3; + gap: 2em; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 0.1em; + + .header-title { + display: flex; + line-height: 1; + gap: 0.6em; + + a { + height: max-content; + } + } + + span { + text-transform: none; + letter-spacing: 0; + } + + @include mix.breakpoint-down('large') { + flex-direction: column; + align-items: flex-start; + gap: 0; + + span { + &::before { + display: none; + } + } + } + + .header-desc { + display: block; + position: relative; + font-size: 0.9rem; + color: var(--clr-foreground-700); + + &::before { + content: ''; + position: absolute; + left: 0; + border: 0.1875em solid var(--clr-foreground); + top: 50%; + translate: 0 -50%; + margin-left: -1em; + border-radius: 50%; + } + } + } + } +} + +.blog { + .main-container { + padding-inline: 0; + + >*:not(ul) { + width: min(min(100vw - 4rem, 60rem), 58rem); + margin-inline: auto; + } + } +} + +.work { + position: relative; + isolation: isolate; + padding-top: 4rem; + + &-svg { + &_bottom { + position: absolute; + bottom: calc(-0.0625em - 6em); + z-index: -1; + color: var(--clr-background); + } + } + + .section-header { + width: min(min(100vw - 4rem, 60rem), 58rem); + margin: auto; + } + + .section-more { + margin: auto; + margin-top: -2em; + display: block; + width: min(min(calc(100vw - 4rem), 60rem), 58rem); + padding: 1em; + background-color: var(--clr-background); + border: 0.0625em solid var(--clr-background-900); + border-radius: 0.3em; + + &:is(:hover, :focus) { + background-color: var(--clr-accent); + border-color: var(--clr-accent-light); + color: var(--clr-white); + } + } + + @include mix.breakpoint-down('medium') { + .main-container { + padding-inline: 0; + } + } +} + +.contact { + .form-input { + display: flex; + flex-direction: column; + + &__captcha { + margin-top: 1rem; + margin-bottom: 1rem; + } + + label { + margin: 2em 0 0.5em 0; + } + + input, + textarea { + width: 100%; + padding: 1rem; + border: none; + background-color: var(--clr-background); + color: var(--clr-foreground-900); + resize: none; + } + + input[type='submit'] { + border: none; + color: var(--clr-white); + background-color: var(--clr-accent); + } + } +} \ No newline at end of file diff --git a/src/assets/scss/layouts/index.scss b/src/assets/scss/layouts/index.scss new file mode 100644 index 0000000..3605300 --- /dev/null +++ b/src/assets/scss/layouts/index.scss @@ -0,0 +1,3 @@ +@use "_header"; +@use "_main"; +@use "_footer"; \ No newline at end of file diff --git a/src/assets/scss/pages/_article.scss b/src/assets/scss/pages/_article.scss new file mode 100644 index 0000000..e27946e --- /dev/null +++ b/src/assets/scss/pages/_article.scss @@ -0,0 +1,434 @@ +@use "../abstracts/mixin" as mix; + +.article { + --_article-color: hsla(270, 50%, 40%, 0.5); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + color: var(--clr-foreground-900); + background-color: var(--clr-background-900); + line-height: 2; + margin: auto; + + main { + position: relative; + + .table-of-contents { + position: absolute; + top: 0; + right: 0; + + @include mix.breakpoint-down('medium') { + position: unset; + } + } + } + + + a { + font-weight: 600; + color: var(--clr-href); + + &:not(.header-anchor, .breadcrumb) { + text-decoration: 0.0625em underline var(--clr-href); + text-underline-offset: 0.35em; + } + + &:hover { + color: var(--clr-href-visited); + } + + &:focus-visible { + outline: thin dotted; + } + + &:hover, + &:active { + outline: 0; + } + } + + span { + + a:hover, + a:visited, + a:active, + a:focus-visible { + color: var(--clr-href); + } + } + + ::selection { + background: var(--clr-accent-dark); + color: var(--clr-white); + } + + a::selection { + background: var(--clr-accent-dark); + color: var(--clr-white); + } + + :is(p:not(:first-of-type), table, blockquote) { + max-width: 60ch; + } + + p { + margin: 1rem 0; + } + + img { + max-width: 100%; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 600; + color: var(--clr-foreground-900); + padding: 1rem 0; + line-height: 1.1em; + } + + h4, + h5, + h6 { + font-weight: bold; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.2rem; + } + + h5 { + font-size: 1rem; + } + + h6 { + font-size: 0.9rem; + } + + blockquote { + color: var(--clr-foreground-900); + margin: 0; + padding-left: 2em; + border-left: 0.5em var(--clr-accent) solid; + } + + hr { + display: block; + height: 0.15em; + border: 0; + border-top: 0.0625em solid var(--clr-accent); + border-bottom: 0.0625em solid var(--clr-accent-light); + margin: 1em 0; + padding: 0; + } + + pre, + code, + kbd, + samp { + padding: 0 0.3em; + font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; + // font-size: 0.8rem; + // line-height: 1.4; + } + + pre { + border: 0.1rem solid var(--_article-color); + // background-color: var(--_article-color); + border-radius: 0.5rem; + padding: 1rem; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + + code { + box-shadow: none; + background-color: transparent; + } + } + + b, + strong { + font-weight: bold; + color: var(--clr-foreground-900); + } + + dfn { + font-style: italic; + } + + ins { + background: #ff9; + color: #000; + text-decoration: none; + } + + mark { + background-color: var(--clr-black); + color: var(--clr-white); + + &:is(:hover, :focus) { + color: var(--clr-white); + } + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + + >a { + text-decoration: none !important; + } + } + + sup { + top: -0.5rem; + } + + sub { + bottom: -0.25rem; + } + + ul, + ol { + margin: 1em 0; + padding: 0 0 0 2rem; + } + + ul li { + list-style-type: disc; + } + + ol li { + list-style-type: decimal; + } + + li p:last-child { + margin: 0; + } + + dd { + margin: 0 0 0 2rem; + } + + img { + border: 0; + vertical-align: middle; + } + + table { + border-collapse: collapse; + overflow-x: scroll; + border-spacing: 0; + width: 100%; + background-color: var(--clr-background); + border-radius: 0.5rem; + overflow: hidden; + + td, + th { + padding: 0.4rem 0.8rem; + } + + tr { + :is(td, th):first-child { + text-align: center; + } + } + + th { + background-color: var(--_article-color); + color: var(--table-header); + // border-bottom: 0.25rem solid var(--clr-accent); + } + + td { + vertical-align: top; + } + + &.properties { + th { + border-bottom: 0.0625rem solid var(--clr-background-800); + border-left: 0.25rem solid var(--clr-accent); + } + } + } + + .table-of-contents { + .toc-container-header { + font-weight: 700; + } + + ul { + margin: 0; + + li { + margin-top: 0.15em; + list-style: circle; + } + } + } + + @media print { + * { + background: transparent !important; + color: var(--clr-accent-dark) !important; + filter: none !important; + -ms-filter: none !important; + } + + body { + font-size: 12pt; + max-width: 100%; + } + + a, + a:visited { + text-decoration: underline; + } + + hr { + height: 0.0625em; + border: 0; + border-bottom: 0.0625em solid var(--clr-accent-dark); + } + + a[href]:after { + content: ' (' attr(href) ')'; + } + + abbr[title]:after { + content: ' (' attr(title) ')'; + } + + .ir a:after, + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; + } + + pre, + blockquote { + border: 0.0625em solid #999; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page :left { + margin: 15mm 20mm 15mm 10mm; + } + + @page :right { + margin: 15mm 10mm 15mm 20mm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + } + + &-flex_list { + flex-wrap: wrap; + gap: 0.5em; + display: flex; + margin: unset !important; + padding: unset !important; + } + + &-detail { + &_list { + flex-wrap: wrap; + gap: 0.5em; + display: flex; + margin: unset !important; + padding: unset !important; + } + + &_item { + font-size: 0.9rem; + gap: 0.5em; + border-radius: 0.3em; + padding: 0.4em; + display: flex; + color: var(--clr-foreground); + border: 0.0625em solid var(--clr-foreground); + align-items: center; + + &:first-of-type { + border: none; + color: var(--clr-white); + box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4); + background-color: var(--clr-accent-light); + background-image: linear-gradient(45deg, + var(--clr-accent-dark), + var(--clr-accent)); + } + + &_svg { + width: 1.2rem; + } + } + } + + &-summary { + font-style: italic; + font-size: 1.2rem; + color: var(--clr-foreground-700); + } + + .more { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(20em, 60ch), 29.5rem)); + margin-top: 1em; + gap: 1em; + + div { + padding: 1rem; + background: var(--clr-background); + + a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + + } +} \ No newline at end of file diff --git a/src/assets/scss/pages/_contact.scss b/src/assets/scss/pages/_contact.scss new file mode 100644 index 0000000..17389b8 --- /dev/null +++ b/src/assets/scss/pages/_contact.scss @@ -0,0 +1,182 @@ +.contact { + .form-input { + display: flex; + flex-direction: column; + + &__captcha { + margin-top: 1rem; + margin-bottom: 1rem; + } + + label { + margin: 2em 0 0.5em 0; + } + + input, + textarea { + width: 100%; + padding: 1rem; + border: none; + background-color: var(--clr-background); + color: var(--clr-foreground-900); + resize: none; + } + + input[type='submit'] { + border: none; + color: var(--clr-white); + background-color: var(--clr-accent); + } + } + + &-container { + --_main-color: var(--clr-background); + --_transparent-limit: 30%; + + display: grid; + gap: 0.5rem; + + .contact-summary { + background-color: var(--_main-color); + padding: 2rem; + // border: 0.0625rem solid var(--clr-background-800); + border-radius: 0.5em; + margin-top: 2em; + + sup { + font-size: 0.6em; + } + + a { + color: var(--clr-accent-light); + text-decoration: underline; + text-underline-offset: 0.2em; + font-weight: 500; + transition: text-underline-offset 100ms ease-in-out; + + &:is(:hover, :focus) { + text-underline-offset: 0.3em; + } + } + } + + .social { + &-container { + --_size: 20em; + --_minGridSize: min(var(--_size), calc(100% - 4rem + 0.5rem)); + --_minMax: minmax(var(--_minGridSize), 1fr); + --_gridSize: repeat(auto-fit, var(--_minMax)); + display: grid; + grid-template-columns: var(--_gridSize); + gap: 0.5rem; + + &__small { + --_size: 18em; + + .social-item { + aspect-ratio: unset; + padding: 1em; + + &-text { + + h2 { + font-size: 0.9em; + } + } + } + } + + li:nth-of-type(odd) { + .social-item { + grid-template-areas: "text text"; + } + } + + } + + &-item { + --_disabledColor: var(--clr-background-800); + aspect-ratio: 3/1; + border: 0.0625rem solid var(--_disabledColor); + border-radius: 0.5em; + overflow: hidden; + color: var(--_disabledColor); + cursor: not-allowed; + + &[href] { + border: 0.0625rem solid var(--_main-color); + cursor: pointer; + color: var(--clr-foreground); + } + + user-select: none; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "text text"; + align-items: center; + justify-content: space-around; + position: relative; + padding: 2em; + + &-text { + font-variant: all-small-caps; + font-weight: 700; + font-size: 1.2rem; + grid-area: text; + text-align: center; + z-index: 99; + + h2 { + font-size: inherit; + line-height: 1; + } + + span { + font-size: 0.8rem; + font-style: italic; + color: var(--clr-foreground-700); + font-weight: 500; + font-variant: normal; + text-transform: lowercase; + } + } + + svg { + position: absolute; + color: var(--clr-background-800); + z-index: 0; + bottom: -80%; + left: -20%; + height: 160%; + } + + * { + z-index: 4; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &[href]::after { + content: ""; + position: absolute; + background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--_main-color)); + width: 300%; + aspect-ratio: 1/1; + z-index: 1; + transition: width 250ms ease-in-out; + } + + &[href]:is(:hover, :focus) { + color: inherit; + + outline-offset: 0.1em; + + &::after { + width: 100%; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/pages/_error.scss b/src/assets/scss/pages/_error.scss new file mode 100644 index 0000000..8539576 --- /dev/null +++ b/src/assets/scss/pages/_error.scss @@ -0,0 +1,123 @@ +@use "../abstracts/mixin" as mix; +@use "./contact"; + +.error { + &-container { + @extend .contact-container; + } + + &-summary { + @extend .contact-summary; + + h2 { + line-height: 1; + font-size: 1.8rem; + font-variant: all-small-caps; + margin-bottom: 1rem; + } + } + + &-decorative { + aspect-ratio: 10/1; + width: 100%; + margin-bottom: 1em; + border-radius: 0.7em; + background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent)); + position: relative; + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5); + + .decorative { + user-select: none; + position: absolute; + filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5)); + + &-left { + position: absolute; + font-size: 9rem; + font-variant: all-small-caps; + font-weight: 900; + height: 100%; + + animation: bounce-up-down 1.5s infinite forwards; + + @include mix.breakpoint-down('small') { + font-size: 7rem; + } + } + + &-exclamation { + top: 50%; + translate: 0% -50%; + rotate: -20deg; + } + + &-question { + top: 0%; + left: 0.2em; + translate: 0% -50%; + rotate: 15deg; + } + } + + svg { + position: absolute; + aspect-ratio: 1/1; + height: 120%; + width: auto; + rotate: -20deg; + top: 50%; + right: 0; + translate: 0% -50%; + animation: svg-move 4s infinite forwards; + + filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5)); + } + + @include mix.breakpoint-down('small') { + aspect-ratio: 4/1; + } + + @keyframes svg-move { + 40% { + rotate: 30deg; + } + + 50% { + rotate: 20deg; + } + + 90% { + rotate: -30deg; + } + + 100% { + rotate: -20deg; + } + } + + @keyframes bounce-up-down { + 50% { + margin-top: -0.6rem; + rotate: 2deg; + } + + 100% { + margin-top: 0; + rotate: 0; + } + } + } + + &-button { + @extend .social-container; + @extend .social-container__small; + + li:first-of-type .error-link:first-of-type:after { + background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent)); + } + } + + &-link { + @extend .social-item; + } +} \ No newline at end of file diff --git a/src/assets/scss/pages/index.scss b/src/assets/scss/pages/index.scss new file mode 100644 index 0000000..205b36b --- /dev/null +++ b/src/assets/scss/pages/index.scss @@ -0,0 +1,3 @@ +@use "_article"; +@use "_contact"; +@use "_error"; \ No newline at end of file diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 32df595..a20d8e7 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -1,25 +1,9 @@ -@import './modules/vars'; -@import './modules/mixin'; -@import './modules/global'; +@use "./abstracts/" as *; -@import './modules/header'; -@import './modules/component/nav'; -@import './modules/component/title'; -@import './modules/main'; -@import './modules/footer'; +@use "./base/" as *; -@import './modules/component/prototype'; -@import './modules/component/card'; -@import './modules/component/partof'; -@import './modules/component/preload'; +@use "./layouts/" as *; -@import './modules/component/aboutme'; -@import './modules/component/hero'; -@import './modules/component/featured'; -@import './modules/component/post'; -@import './modules/component/article'; -@import './modules/component/clients'; -@import './modules/component/animation'; -@import './modules/component/contact'; +@use "./components/" as *; -@import './modules/component/error'; \ No newline at end of file +@use "./pages/" as *; \ No newline at end of file From 61109954c3e8b5a8ee8069cc0b0a353ecaa2c2d8 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Wed, 28 May 2025 08:58:36 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20`dotenv`=20=E2=80=94=20to=20support?= =?UTF-8?q?=20development=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eleventy.js | 13 +++++++++++-- .gitignore | 1 + package-lock.json | 13 +++++++++++++ package.json | 1 + 4 files changed, 26 insertions(+), 2 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index e6a57d0..55bbc16 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,5 @@ const pluginRss = require('@11ty/eleventy-plugin-rss') +require('dotenv').config() module.exports = function (eleventyConfig) { const { DateTime } = require('luxon') @@ -36,6 +37,9 @@ module.exports = function (eleventyConfig) { eleventyConfig.setLibrary('md', markdownIt) + const isDevelopment = process.env.NODE_ENV === 'development'; + eleventyConfig.addGlobalData("isDevelopment", isDevelopment); + eleventyConfig.addPlugin(pluginRss, { posthtmlRenderOptions: { closingSingleTag: 'default', @@ -85,10 +89,15 @@ module.exports = function (eleventyConfig) { const [year, ...title] = titleParts const titleInitials = title.map(title => title.split('')[0]).join('') const yearSuffix = year.slice(-yearSplice) - + return `${yearSuffix}-${titleInitials}` }) + eleventyConfig.addFilter("development", (link) => { + console.log(isDevelopment) + return isDevelopment ? "/" : link; + }); + eleventyConfig.addFilter('breakLine', (string, cutAt = 3, maxSize = 30) => { const titleWords = string.split(' ') const titleLength = string.length @@ -97,7 +106,7 @@ module.exports = function (eleventyConfig) { const hasTitleRemaining = !!titleRemaining const formattedTitleWithBreak = hasTitleRemaining ? `${titlePreview}
${titleRemaining}` : titlePreview - + const returnTitle = titleLength <= maxSize || !hasTitleRemaining ? string : formattedTitleWithBreak return returnTitle }) diff --git a/.gitignore b/.gitignore index 110ebec..427103d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # dependencies /node_modules +.env # public files /public diff --git a/package-lock.json b/package-lock.json index 74413c3..963379b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "dotenv": "^16.5.0", "highlight.js": "^11.5.1", "markdown-it-anchor": "^8.6.2", "markdown-it-attrs": "^4.1.4", @@ -1353,6 +1354,18 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dotenv": { + "version": "16.5.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz", + "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", diff --git a/package.json b/package.json index d0fae63..613cea2 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@11ty/eleventy-plugin-rss": "^1.2.0" }, "dependencies": { + "dotenv": "^16.5.0", "highlight.js": "^11.5.1", "markdown-it-anchor": "^8.6.2", "markdown-it-attrs": "^4.1.4", From 7c7278009d12906644c180aafe8a924175c6b847 Mon Sep 17 00:00:00 2001 From: EmptyWork <22065214+EmptyWork@users.noreply.github.com> Date: Wed, 28 May 2025 09:02:24 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20`development`=20=E2=80=94=20process?= =?UTF-8?q?=20the=20website=20link=20on=20development?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_includes/article.njk | 1 + src/_includes/components/nav.njk | 2 +- src/blog.njk | 1 + src/contact.njk | 1 + src/error.njk | 2 +- 5 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/_includes/article.njk b/src/_includes/article.njk index 8c9d23a..264109c 100644 --- a/src/_includes/article.njk +++ b/src/_includes/article.njk @@ -1,5 +1,6 @@ --- layout: 'layouts/secondary.njk' +style: 'use/article.css' --- {% set previousPost = collections.post | getPreviousCollectionItem(page) %} {% set nextPost = collections.post | getNextCollectionItem(page) %} diff --git a/src/_includes/components/nav.njk b/src/_includes/components/nav.njk index ad8ba34..3fbef25 100644 --- a/src/_includes/components/nav.njk +++ b/src/_includes/components/nav.njk @@ -2,7 +2,7 @@
Skip to Main - +