diff --git a/app/components/banner/banner.module.scss b/app/components/banner/banner.module.scss index 07f6ad0..6f8a84b 100644 --- a/app/components/banner/banner.module.scss +++ b/app/components/banner/banner.module.scss @@ -19,7 +19,7 @@ } .profile img { - width: calc($profile-size) - 4rem; + width: $profile-size - 4rem; height: auto; border: 6px ridge white; } @@ -33,6 +33,7 @@ padding: 1rem; text-shadow: 0 0 4px black; font-weight: bold; + color: white; } @media screen and (max-width: 640px) { diff --git a/app/components/card/card.module.scss b/app/components/card/card.module.scss index ef01e97..89a1771 100644 --- a/app/components/card/card.module.scss +++ b/app/components/card/card.module.scss @@ -1,7 +1,7 @@ @import "../../constants.module.scss"; .card { - @include window-border($large-border); + @include content-border; position: relative; transition: 0.1s; aspect-ratio: 4/3; @@ -15,7 +15,7 @@ left: 0; width: 100%; padding: 1rem; - background-color: rgba($menu-color, 0.75); + background-color: rgba($content-color, 0.75); } .title { diff --git a/app/components/footer/footer.module.scss b/app/components/footer/footer.module.scss index 5c20447..fe2bd51 100644 --- a/app/components/footer/footer.module.scss +++ b/app/components/footer/footer.module.scss @@ -6,4 +6,8 @@ line-height: 1.5; text-align: center; padding: 4rem 2rem; + + a { + color: blue; + } } diff --git a/app/components/header/header.module.scss b/app/components/header/header.module.scss index 166c081..2d9ba31 100644 --- a/app/components/header/header.module.scss +++ b/app/components/header/header.module.scss @@ -11,7 +11,7 @@ } .innerHeader { - @include menu-border; + @include content-border; background: $content-color; padding: 0.75rem; height: 4rem; @@ -31,13 +31,13 @@ .nav a { transition: 0.1s; - color: white; text-decoration: none; font-size: 18px; font-weight: bold; - margin-left: $window-spacing; + margin-left: $window-spacing / 2; padding: 0; line-height: 0; + color: black; } .nav a:hover { @@ -58,8 +58,9 @@ display: inline-block; width: 1px; height: 2rem; - background-color: white; + background-color: black; margin-left: $window-spacing; + margin-right: $window-spacing / 2; } @media screen and (max-width: 1024px) { diff --git a/app/components/section/section.module.scss b/app/components/section/section.module.scss index 32974a0..a709615 100644 --- a/app/components/section/section.module.scss +++ b/app/components/section/section.module.scss @@ -1,12 +1,12 @@ @import "../../constants.module.scss"; .section { - margin-top: calc(-1 * ($window-spacing + 3.25rem)); - padding-top: calc($window-spacing + 3.25rem); + margin-top: -1 * ($window-spacing + 3.25rem); + padding-top: $window-spacing + 3.25rem; } .titleBar { - background: #eda870; + background: $window-color; } .cards { diff --git a/app/components/window/window.module.scss b/app/components/window/window.module.scss index b325576..8dbce72 100644 --- a/app/components/window/window.module.scss +++ b/app/components/window/window.module.scss @@ -1,9 +1,9 @@ @import "../../constants.module.scss"; .outerWindow { - @include window-border($large-border); + @include outer-window-border($large-border); margin-top: $window-spacing; - background: #eda870; + background: $window-color; padding: 4px; @media screen and (max-width: 640px) { @@ -12,24 +12,42 @@ } .innerWindow { - @include content-border; + @include double-border( + $small-border, + $window-border-color2, + $window-border-color1 + ); } -.windowContent { +.content { + @include content-border; background: $content-color; } .titleBar { - height: 2rem; - line-height: 2rem; + display: grid; + grid-template-columns: 2rem 1fr 2rem 2rem; + grid-template-rows: 2rem; text-align: center; font-size: $medium-font-size; } +.title { + @include outer-window-border($small-border); + @include flex-center; + color: white; + overflow: hidden; +} + .menu { - @include menu-border; + @include double-border( + $small-border, + $menu-border-color1, + $menu-border-color2 + ); + display: flex; + align-items: center; height: 2.5rem; - line-height: 2.5rem; background-color: $menu-color; font-size: $medium-font-size; @@ -39,15 +57,11 @@ } .button { - @include window-border($small-border); - display: flex; - justify-content: center; - align-items: center; - width: 2rem; - height: 2rem; + @include outer-window-border($small-border); + @include flex-center; div { - @include window-border($small-border); + @include outer-window-border($small-border); } } diff --git a/app/components/window/window.tsx b/app/components/window/window.tsx index e875ffc..2715e6b 100644 --- a/app/components/window/window.tsx +++ b/app/components/window/window.tsx @@ -14,10 +14,10 @@ export default function Window({ title, children }: WindowProps) {
{title} -
+
-
+
@@ -32,7 +32,7 @@ export default function Window({ title, children }: WindowProps) { View
-
{children}
+
{children}
); diff --git a/app/constants.module.scss b/app/constants.module.scss index 158d495..ce4ac74 100644 --- a/app/constants.module.scss +++ b/app/constants.module.scss @@ -1,15 +1,32 @@ -/* colors */ -$header-color: #999999; -$header-border-color1: #d1d1d2; -$header-border-color2: #4e4e4e; -$window-color: #eda870; -$window-border-color1: #f7d9c0; -$window-border-color2: #7d593b; -$menu-color: #4992a7; -$menu-border-color1: #adced7; -$menu-border-color2: #244953; -$content-color: #c6b2a8; -$content-color-dark: #a8988f; +/* cde colors */ +// $header-color: #999999; +// $header-border-color1: #d1d1d2; +// $header-border-color2: #4e4e4e; +// $window-color: #eda870; +// $window-border-color1: #f7d9c0; +// $window-border-color2: #7d593b; +// $menu-color: #4992a7; +// $menu-border-color1: #adced7; +// $menu-border-color2: #244953; +// $content-color: #c6b2a8; +// $content-border-color1: #dedee7; +// $content-border-color2: #5c6373; +// $background-color: #524a8c; + +/* solaris colors */ +$header-color: #adb5c6; +$header-border-color1: #dedee7; +$header-border-color2: #5c6373; +$window-color: #b54a7b; +$window-border-color1: #deadc6; +$window-border-color2: #522139; +$menu-color: #adb5c6; +$menu-border-color1: #dedee7; +$menu-border-color2: #5c6373; +$content-color: #adb5c6; +$content-border-color1: #dedee7; +$content-border-color2: #5c6373; +$background-color: #524a8c; /* font sizes */ $small-font-size: 12px; @@ -19,7 +36,7 @@ $large-font-size: 24px; /* dimensions */ $window-spacing: 1.5rem; -$card-spacing: 0.75rem; +$card-spacing: 0.5rem; $small-border: 1.75px; $large-border: $small-border * 2; $min-width: 60rem; @@ -29,7 +46,7 @@ $card-height: 20rem; $medium-card-height: 17.5rem; $small-card-height: 15rem; $mobile-card-height: 70vmin; -$mobile-small-card-height: calc(70vmin / 2); +$mobile-small-card-height: 70vmin / 2; :export { cardSpacing: $card-spacing; @@ -38,6 +55,12 @@ $mobile-small-card-height: calc(70vmin / 2); mediumFontSize: $medium-font-size; } +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} + @mixin double-border($width, $color1, $color2) { border-top: $width solid $color1; border-left: $width solid $color1; @@ -53,22 +76,14 @@ $mobile-small-card-height: calc(70vmin / 2); ); } -@mixin window-border($width) { +@mixin outer-window-border($width) { @include double-border($width, $window-border-color1, $window-border-color2); } @mixin content-border { @include double-border( $small-border, - $window-border-color2, - $window-border-color1 - ); -} - -@mixin menu-border { - @include double-border( - $small-border, - $menu-border-color1, - $menu-border-color2 + $content-border-color1, + $content-border-color2 ); } diff --git a/app/globals.scss b/app/globals.scss index fdcd9d0..d60949b 100644 --- a/app/globals.scss +++ b/app/globals.scss @@ -9,11 +9,13 @@ html, body { max-width: 100vw; - background-color: $menu-color; - color: white; + // background-image: url("../public/images/background.png"); + // background-repeat: repeat; + // background-size: 10rem; + background-color: $background-color; + color: black; } a { - color: $menu-color; text-decoration: none; } diff --git a/app/layout.tsx b/app/layout.tsx index e935412..0abd873 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,9 +1,9 @@ import type { Metadata } from "next"; -import { Imprima } from "next/font/google"; +import { Jura } from "next/font/google"; import "./globals.scss"; import Header from "./components/header/header"; -const inter = Imprima({ +const inter = Jura({ weight: "400", subsets: ["latin"], }); diff --git a/public/images/background.png b/public/images/background.png new file mode 100644 index 0000000..d39b9ff Binary files /dev/null and b/public/images/background.png differ diff --git a/public/images/banner.jpg b/public/images/banner.jpg index adad504..33045eb 100644 Binary files a/public/images/banner.jpg and b/public/images/banner.jpg differ diff --git a/public/images/banner2.jpg b/public/images/banner2.jpg new file mode 100644 index 0000000..adad504 Binary files /dev/null and b/public/images/banner2.jpg differ diff --git a/public/images/logo.svg b/public/images/logo.svg index a1e7507..ae98dfe 100644 --- a/public/images/logo.svg +++ b/public/images/logo.svg @@ -1 +1,9 @@ - \ No newline at end of file + + + + \ No newline at end of file