diff --git a/icons/youtube.png b/icons/youtube.png index b6b77b2..c3bd27f 100644 Binary files a/icons/youtube.png and b/icons/youtube.png differ diff --git a/index.html b/index.html index 8de484f..95aaf2c 100644 --- a/index.html +++ b/index.html @@ -16,31 +16,70 @@

Kliknij mnie!

-

Sador

-

Bonusowe punkty z minigry: 0

- - - +
+

Sador

+

Bonusowe punkty z minigry: 0

+ + + + -

Media społecznościowe/moje konta

- +
+

Media społecznościowe/moje konta

+ -

O mnie

-

hej, mam ??? lat i kocham hardrock/metalcore. mieszkam w okolicach Myślenic.

-

slipknot, my chemical romance, lil peep ♡

+

O mnie

+

hej, mam ??? lat. mieszkam w okolicach Myślenic.

+

do niedawna byłem dość aspołeczny, jednak wiele ludzi uważa, że zmieniam się na lepsze.

+

moje zainteresowania:

+
    +
  • programowanie
    • +
  • stara motoryzacja
    • +
  • elektronika
    • +
  • muzyka
    • +
+

jestem fanem/entuzjastą:

+
    +
  • + metalu +
      +
    • heavy metalu
      • +
    • groove metalu
      • +
    • metalu progresywnego
      • +
    • nu metalu
      • +
    +
    • +
  • rocka
    • +
  • części amerykańskiego rapu
    • +
  • + zespołów/artystów: +
      +
    • Slipknot
      • +
    • Poisonblack
      • +
    • Lil Peep
      • +
    • Death
      • +
    • System of a Down
      • +
    • Judas Priest
      • +
    • Iron Maiden
      • +
    +
    • +
+
diff --git a/projects.html b/projects.html index 21c877e..cb49cf7 100644 --- a/projects.html +++ b/projects.html @@ -13,44 +13,50 @@
-

Sador

- - -

Moje projekty

-

Opuszczone projekty mają czarno-białe zdjęcie tła!

-
-
- Zine thumbnail -
-

Zine

-

Mój własny bot na platformy Guilded&Discord napisany w języku Rust.

-
-
-
- Website thumbnail -
-

Personalna strona

-

Moja własna strona internetowa, ta, którą teraz przeglądasz.

-
-
- +
+

Sador

+ + + +
+
diff --git a/script.js b/script.js index 9d1a70a..280d3c2 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,7 @@ +const rightSideContainer = document.getElementById('right-side'); const contentContainer = document.getElementById('content'); + +const swapButton = document.getElementById('swap'); const ageElement = document.getElementById('age'); const points = document.getElementById('points'); @@ -15,7 +18,7 @@ async function updateOpacity(block, show) { await wait(0.3); block.style.display = 'none'; } else { - block.style.display = 'block'; + block.style.display = 'flex'; await wait(0.3); block.style.opacity = '1'; } @@ -35,6 +38,11 @@ function resetPoints() { boxPoints.textContent = bonusPoints; } +function swapContent() { + contentContainer.style.flexDirection = + contentContainer.style.flexDirection === 'row-reverse' ? 'row' : 'row-reverse'; +} + // listeners if (box) box.addEventListener('click', () => { bonusPoints++; @@ -46,7 +54,7 @@ window.onload = async () => { if (boxPoints) boxPoints.textContent = bonusPoints; if (box) await updateOpacity(box, true); - await updateOpacity(contentContainer, true); + await updateOpacity(rightSideContainer, true); } // update theme @@ -54,7 +62,9 @@ if (currentTheme === 'dark') document.body.classList.add('dark'); // update age -if (typeof ageElement !== 'undefined') { +if (ageElement) { const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365); ageElement.innerText = difference.toFixed(4); -} \ No newline at end of file +} + +swapButton.addEventListener('click', swapContent); \ No newline at end of file diff --git a/style.css b/style.css index f6100b4..1a0de1d 100644 --- a/style.css +++ b/style.css @@ -4,30 +4,52 @@ --size: 100px; } +html { + height: 100vh; +} + +body { + min-height: 100vh; +} + body { font-family: 'Geologica', sans-serif; font-weight: 700; - width: 100%; - height: 100%; margin: 0; } #content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - margin: auto; - max-width: 100%; - max-height: 100%; + display: flex; + align-items: stretch; + justify-content: center; + flex-direction: row; + width: 100vw; + min-height: 100vh; +} + +#content>* { + padding: 20px; + width: 100vw; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} + +#left-side { + background-color: #ffd9a4; + text-align: center; +} + +#right-side { transition: ease-in 0.2s; } -#content { +#right-side { opacity: 0 } -#content h4 { +#right-side h4 { color: #ffd9a4; text-transform: uppercase; } @@ -121,12 +143,13 @@ button a { margin-right: 10px; } -.social, button { +.social, +button { margin-bottom: 5px; } #points span { - color: lime; + color: #6c3877; font-size: 125%; } @@ -145,6 +168,7 @@ button a { flex-direction: column; justify-content: center; text-decoration: none; + border: 1px solid #000; border-radius: 10px; transition: ease-in 0.2s; @@ -169,7 +193,6 @@ button a { left: 0; width: 100%; height: 100%; - border-radius: 10px; display: flex; flex-direction: column; align-items: center; @@ -182,13 +205,13 @@ button a { .project-card .description * { background-color: #fff; - border-radius: 10px; + border-radius: 5px; padding: 5px; margin: 10px; color: #000; } -.project-card:hover > .description *:not(a) { +.project-card:hover>.description *:not(a) { opacity: 0; } @@ -230,7 +253,7 @@ body.dark #box p { color: #000; } -body.dark #content { +body.dark #right-side { color: #fff; } @@ -243,6 +266,10 @@ body.dark a { text-decoration-color: #fff; } +body.dark .project-card { + border: 1px solid #ffd9a4; +} + body.dark .project-card .description * { background-color: #fffdcc; } @@ -263,7 +290,7 @@ body:not(.dark) .social:hover { background-color: rgb(132, 125, 189); } -body:not(.dark) #content h4 { +body:not(.dark) #right-side h4 { color: #000; } @@ -276,4 +303,18 @@ body:not(.dark) #age { #projects { flex-direction: column; } -} + + #content { + flex-direction: column; + height: unset; + } + + #content>* { + padding: 0; + } + + #left-side { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } +} \ No newline at end of file