From 4f8d4d9dc9174b61e0faa39150b8a402fdf7d0cb Mon Sep 17 00:00:00 2001 From: sadorowo Date: Wed, 28 Feb 2024 20:07:22 +0100 Subject: [PATCH] update: small redesign --- index.html | 101 ++++++++++++++++++++++++++++++++++++++++++++++------- script.js | 20 ++++++++++- style.css | 61 ++++++++++++++++++++++++++++---- 3 files changed, 163 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 52550e9..9a88915 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,6 @@ - -

Media społecznościowe/moje konta

@@ -53,20 +51,46 @@
  • muzyka

    • jestem fanem/po prostu słucham:

    -
    + +
    +

    rocka

    +
    +

    szczególnie:

    +
      +
    • Foo Fighters
      • +
    • Evanescence
      • +
    • 30 Seconds To Mars
      • +
    • HIM
      • +
    +
    +
    +
    +

    części amerykańskiego rapu

    +
    +

    szczególnie:

    +
      +
    • Lil Peep
      • +
    • Lil Tracy
      • +
    • XXXTENTACION
      • +
    • Juice WRLD
      • +
    • Mackned
      • +
    • Fat Nick
      • +
    +
    +
    +
    +

    zespołów/artystów

    +
    • Slipknot
    • Poisonblack
      • @@ -82,8 +106,61 @@
    • System of a Down
    • Evanescence
    - - +
    +
    +

    sprzęt/oprogramowanie, który posiadam:

    +
    +

    sprzęt

    +
    +
      +
    • CPU: Intel i5-4590
      • +
    • GPU: NVIDIA GTX 970 + Radeon RX 5500 XT
      • +
    • Bluetooth: CSR 4.0
      • +
    • Wi-Fi: TP-LINK TL-WN722N V2
      • +
    • Klawiatura: Microsoft All-In-One Media Keyboard
      • +
    • Mysz: coś z defendera :)
      • +
    • Słuchawki: Beats Studio Buds
      • +
    • Monitor: LG M2450D
      • +
    • Płyta główna: ASRock H97M Pro4
      • +
    • RAM: 16GB DDR3
      • +
    • Dysk: ADATA 500GB
      • +
    +
    +
    +
    +

    systemy operacyjne

    +
    +
      +
    • Hackintosh Sonoma
      • +
    • Windows 10 Pro
      • +
    +
    +
    +
    +

    oprogramowanie

    +
    +
      +
    • DaVinci Resolve
      • +
    • Firefox
      • +
    • GIMP
      • +
    • OBS Studio
      • +
    • Handbrake
      • +
    • VSC (only product from ms trash that I'm using LMAO)
      • +
    • BitTorrent Web
      • +
    • Apple Music
      • +
    • JetBrains IDEs
      • +
    +
    +
    +
    +

    subskrypcje

    +
    +
      +
    • Apple Music Individual
      • +
    +
    +
    +

    cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.

    diff --git a/script.js b/script.js index eab9d47..d07002e 100644 --- a/script.js +++ b/script.js @@ -72,4 +72,22 @@ if (ageElement) { ageElement.innerText = difference.toFixed(4); } -swapButton.addEventListener('click', swapContent); \ No newline at end of file +swapButton.addEventListener('click', swapContent); + +const accordions = document.querySelectorAll('.accordion'); + +function closeOtherAccordions(accordion) { + accordions.forEach(acc => { + if (acc !== accordion) + acc.classList.remove('active'); + }); +} + +function openAccordion(accordion) { + closeOtherAccordions(accordion); + accordion.classList.toggle('active'); +} + +accordions.forEach(accordion => { + accordion.addEventListener('click', () => openAccordion(accordion)); +}); \ No newline at end of file diff --git a/style.css b/style.css index da554b3..488d024 100644 --- a/style.css +++ b/style.css @@ -4,10 +4,6 @@ --size: 100px; } -html { - height: 100vh; -} - body { min-height: 100vh; } @@ -23,11 +19,13 @@ body { align-items: stretch; justify-content: center; flex-direction: row; - min-height: 100vh; + height: 100vh; + width: 100%; } #content>* { - width: 100vw; + overflow-y: auto; + width: 100%; display: flex; align-items: center; flex-direction: column; @@ -213,6 +211,53 @@ button { opacity: 0; } +.accordion { + width: 100%; + background-color: #ffb54c; + padding: 10px 0 10px 0; + cursor: pointer; + transition: ease-in 0.2s; +} + +.accordion.active, .accordion:hover { + background-color: #fffdcc; +} + +.accordion p { + text-align: center; + margin: 0; +} + +.accordion>p::after { + content: '▼'; + margin-left: 5px; +} + +.accordion.active>p::after { + content: '▲'; +} + +.accordion-content { + display: none; + padding: 10px 0 10px 0; + border-radius: 10px; + text-align: center; +} + +.accordion-content > *:is(ol, ul) { + list-style-type: none; +} + +.accordion-content > *:is(ol, ul) li::before { + content: '•'; + margin: 0 5px 0 5px; +} + +.accordion.active>.accordion-content { + display: block; +} + +/* ANIMATIONS */ @keyframes bounce { 0% { top: 0; @@ -321,4 +366,8 @@ body:not(.dark) #age { flex-direction: column; justify-content: center; } + + #box { + display: none; + } } \ No newline at end of file