diff --git a/index.html b/index.html index 27d01b7..7205dc6 100644 --- a/index.html +++ b/index.html @@ -10,75 +10,92 @@ +
+ + + + + +
-

Joseph Ferano

-
- -

Projects

-

-
-

Wargate Heroes

-
- Gameplay | Trailer -
- Moon Miners -
- Kanban TUI -
- Basicterm -
- Elm Graphics -
- dotfiles -

Resume

- PDF | - HTML -

Socials

-
- - - - - - - - - - - - - - -
-

Contact

- Ask for my email - +
+ + + + +
+

Joseph Ferano

+
+ +

Projects

+

+
+

Wargate Heroes

+
+ Gameplay | Trailer +
+ Moon Miners +
+ Kanban TUI +
+ Basicterm +
+ Elm Graphics +
+ dotfiles +

Resume

+ PDF | + HTML +

Socials

+
+ + + + + + + + + + + + + + +
+

Contact

+ Ask for my email +
diff --git a/main.css b/main.css index d68d9ec..ec19e0e 100644 --- a/main.css +++ b/main.css @@ -1,11 +1,71 @@ +#topbar { + position: absolute; + top: 0; + left: 0; + background-color: #594F4F; + width: 100%; + height: 12px; +} + +.content-topbar { + width: 600px; + height: 20px; + margin: -24px; +} + +#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); } +#content-topbar-2 { background-color: hsla(134,52%,75%,0.9); } +#content-topbar-3 { background-color: hsla(177,43%,47%,0.9); } +#content-topbar-4 { background-color: hsla(190,21%,42%,0.9); } +#content-topbar-5 { background-color: hsla(0,6%,33%, 0.9); } +/* #E5FCC2, 5%) 0%, */ +/* #9DE0AD, 5%) 20%, */ +/* #45ADA8, 5%) 30%, */ +/* #547980, 5%) 40%, */ +/* #594F4F, 5%) 60%, */ +/* #594F4F, 5%) 100%) */ + body { - background-color: #f1faee; - margin: 20px auto; - max-width: 600px; - line-height: 1.6; - font-size: 18px; - color: #444; - padding: 10px 20px; + margin: 0; + overflow: hidden; +} + +.o-grad { + position: absolute; + top: 0; + left: 0; + pointer-events: none; /* Allow clicks to reach underlying content */ +} +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: url(#noiseFilter); + opacity: 0.25; /* Adjust the opacity value as needed */ + z-index: -1; + mix-blend-mode: difference; +} + +body { + background: linear-gradient( + 180deg, + hsla(84, 91%, 87%, 0.8) 0%, + hsla(134, 52%, 75%, 0.8) 20%, + hsla(177, 43%, 47%, 0.8) 30%, + hsla(190, 21%, 42%, 0.8) 40%, + hsla(0, 6%, 25%, 0.8) 60%, + hsla(0, 6%, 25%, 1) 100% + ) no-repeat; + background-color: hsla(0, 6%, 25%, 1); + margin: 20px auto; + max-width: 600px; + line-height: 1.6; + font-size: 18px; + color: #4f5b66; + padding: 10px 20px; } p { @@ -19,16 +79,16 @@ span { } #content { - background-color: #fff; + background-color: hsla(84, 20%, 99%, 1); padding: 24px; } hr { - color: #777; + color: hsla(134, 52%, 75%, 1); } h1, h2, h3 { - color: #457b9d; + color: hsla(190, 21%, 36%, 1); line-height: 1.6; margin-top: 40px; margin-bottom: 10px; @@ -66,4 +126,3 @@ a:active { a:visited { color: #666; } -