diff --git a/style.css b/style.css index 31db1d3..ae44e8a 100644 --- a/style.css +++ b/style.css @@ -14,6 +14,11 @@ html * flex-direction: column; } +.logo { + font-weight: bold; + text-decoration: none; +} + .header { display: flex; justify-content: center; @@ -27,6 +32,13 @@ html * flex-direction: column; } +.grid-container { + display: grid; + justify-content: center; + grid-template-areas: + 'left middle right' +} + .middle-large { grid-area: middle; width: 80vw; @@ -50,6 +62,66 @@ html * justify-content: space-between; } +.button { + height: 1cm; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + padding: 10px 10px; + margin-top: 1cm; + margin-bottom: 1cm; + margin-right: 0.25cm; + transition-duration: 0.2s; +} + +.gtk-button-pill { + position: relative; + width: auto; + height: 44px; + border-radius: 22px; + background-color: rgba(53, 132, 228, 1); + color: white; + text-decoration: none; + font-weight: bold; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0px; + padding: 0px 32px; + flex-wrap: nowrap; +} + +.gtk-button { + height: 1cm; + border-radius: 6px; + background-color: rgba(53, 132, 228, 1); + color: white; + text-decoration: none; + font-weight: bold; + padding: 10px 10px; + margin-top: 1cm; + margin-bottom: 1cm; + margin-right: 0.25cm; + transition-duration: 0.2s; +} + +.gtk-button:hover { + background-color: rgba(53, 132, 228, 0.9); +} + +.itemcard { + display: grid; + border-radius: 12px; + text-decoration: none; + margin-bottom: 0.5cm; + height: 3cm; + min-width: 6cm; + width: 32.5%; + transition-duration: 0.2s; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); +} + .itemcard-placeholder { display: grid; border-radius: 12px; @@ -60,6 +132,22 @@ html * width: 32.5% } +.itemcard-stealth { + display: grid; + border-radius: 12px; + text-decoration: none; + margin-bottom: 0.5cm; + height: 3cm; + min-width: 6cm; + width: 32.5%; + transition-duration: 0.2s; +} + +.listaction { + display: flex; + align-items: center; +} + @media (prefers-color-scheme: light) { body { @@ -68,101 +156,27 @@ html * .logo { color: #000; - font-weight: bold; - text-decoration: none; } .grid-container { - display: grid; - justify-content: center; color: #000000; - grid-template-areas: - 'left middle right' } .listaction { - display: flex; color: black; - align-items: center; } .button { - height: 1cm; - border-radius: 6px; background-color: rgba(0, 0, 0, 0.08); color: black; - text-decoration: none; - font-weight: bold; - padding: 10px 10px; - margin-top: 1cm; - margin-bottom: 1cm; - margin-right: 0.25cm; - transition-duration: 0.2s; } .button:hover { background-color: rgba(0, 0, 0, 0.18); } - - .gtk-button-pill { - - position: relative; - width: auto; - height: 44px; - border-radius: 22px; - background-color: rgba(53, 132, 228, 1); - color: white; - text-decoration: none; - font-weight: bold; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0px; - padding: 0px 32px; - flex-wrap: nowrap; - } - - .gtk-button { - height: 1cm; - border-radius: 6px; - background-color: rgba(53, 132, 228, 1); - color: white; - text-decoration: none; - font-weight: bold; - padding: 10px 10px; - margin-top: 1cm; - margin-bottom: 1cm; - margin-right: 0.25cm; - transition-duration: 0.2s; - } - - .gtk-button:hover { - background-color: rgba(53, 132, 228, 0.9); - } - .itemcard { - display: grid; - border-radius: 12px; - text-decoration: none; background-color: #ffffff; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); - margin-bottom: 0.5cm; - height: 3cm; - min-width: 6cm; - width: 32.5%; - transition-duration: 0.2s; - } - .itemcard-stealth { - display: grid; - border-radius: 12px; - text-decoration: none; - margin-bottom: 0.5cm; - height: 3cm; - min-width: 6cm; - width: 32.5%; - transition-duration: 0.2s; } .itemcard:hover { @@ -182,99 +196,27 @@ html * .logo { color: #fff; - font-weight: bold; - text-decoration: none; } .grid-container { - display: grid; - justify-content: center; color: #fff; - grid-template-areas: - 'left middle right' } .listaction { - display: flex; color: white; - align-items: center; } .button { - height: 1cm; - border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: white; - text-decoration: none; - font-weight: bold; - padding: 10px 10px; - margin-top: 1cm; - margin-bottom: 1cm; - margin-right: 0.25cm; - transition-duration: 0.2s; } .button:hover { background: rgba(255, 255, 255, 0.18); } - .gtk-button-pill { - position: relative; - width: auto; - height: 44px; - border-radius: 22px; - background-color: rgba(53, 132, 228, 1); - color: white; - text-decoration: none; - font-weight: bold; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0px; - padding: 0px 32px; - flex-wrap: nowrap; - } - - .gtk-button { - height: 1cm; - border-radius: 6px; - background-color: rgba(53, 132, 228, 1); - color: white; - text-decoration: none; - font-weight: bold; - padding: 10px 10px; - margin-top: 1cm; - margin-bottom: 1cm; - margin-right: 0.25cm; - transition-duration: 0.2s; - } - - .gtk-button:hover { - background-color: rgba(53, 132, 228, 0.9); - } - .itemcard { - display: grid; - border-radius: 12px; - text-decoration: none; background-color: #303030; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); - margin-bottom: 0.5cm; - height: 3cm; - min-width: 6cm; - width: 32.5%; - transition-duration: 0.2s; - } - .itemcard-stealth { - display: grid; - border-radius: 12px; - text-decoration: none; - margin-bottom: 0.5cm; - height: 3cm; - min-width: 6cm; - width: 32.5%; - transition-duration: 0.2s; } .itemcard:hover {