diff --git a/css/style.css b/css/style.css index 0b5b6a8..74b491b 100644 --- a/css/style.css +++ b/css/style.css @@ -2,79 +2,85 @@ body { margin: 0; padding: 0; position: relative; + font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + line-height: 1.6; + color: #333; } header { position: fixed; width: 100%; - padding: 15px; + padding: 20px 40px; top: 0; left: 0; display: flex; justify-content: space-between; + align-items: center; z-index: 100; box-sizing: border-box; - box-shadow: 0 10px 10px lightblue; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + + border-bottom: 1px solid rgba(0, 0, 0, 0.05); background-color: white; } header > img { aspect-ratio: initial; - height: 50px; + height: 55px; + transition: transform 0.3s ease; } /*https://getcssscan.com/css-buttons-examples button 6*/ nav > a { + position: relative; + + margin: 0; + padding: calc(0.675rem - 1px) calc(1.2rem - 1px); + min-height: 3rem; + + display: inline-flex; align-items: center; - justify-content: center; background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 0.25rem; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 8px; - box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0; + box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0; box-sizing: border-box; color: rgba(0, 0, 0, 0.85); cursor: pointer; - display: inline-flex; - font-family: - system-ui, - -apple-system, - system-ui, - "Helvetica Neue", - Helvetica, - Arial, - sans-serif; - font-size: 16px; - font-weight: 600; + text-decoration: none; + font-family: inherit; + font-size: 15px; + font-weight: 500; line-height: 1.25; - margin: 0; - min-height: 3rem; - padding: calc(0.675rem - 1px) calc(1.2rem - 1px); - position: relative; - text-decoration: none; - transition: all 250ms; - user-select: none; - vertical-align: baseline; - width: auto; - - animation: 0.5s; -} - -.current-tab { - background-color: #bbbbbb !important; + transition: all 0.2s ease; } nav > a:hover { - background-color: #eeeeee; + background-color: #f5f6f7; + box-shadow: rgba(0, 0, 0, 0.08) 0 4px 8px 0; + text-decoration: none; +} + +.current-tab { + background-color: #75b700; + color: white; + box-shadow: #75b70040 0 4px 12px 0; +} + +.current-tab:hover { + background-color: #559700; + color: white; + box-shadow: #55970040 0 4px 12px 0; } nav { @@ -84,36 +90,121 @@ nav { } main { - margin-top: 100px; + margin-top: 130px; width: 50vw; margin-left: 25vw; } table { - border: 1px solid black; + width: 100%; + margin: 2rem 0; + border-collapse: collapse; - gap: 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +th:first-child { + border-bottom-left-radius: 8px; +} + +th:last-child { + border-bottom-right-radius: 8px; + position: relative; +} + +th:last-child::before { + content: ""; + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; + + background-color: #27ae60; + z-index: -1; +} + +th { + width: 33%; + padding: 1rem; + + background-color: #2c3e50; + color: white; + + border: none; + text-align: center; + + font-weight: 600; + font-size: 0.85rem; + + text-transform: uppercase; + letter-spacing: 0.5px; } td { - width: 33%; + padding: 0.875rem 1rem; + text-align: center; + + border-bottom: 1px solid #e8e8e8; + vertical-align: middle; } -td, -th { - border: 1px solid black; - padding: 0; - text-align: center; +tr:last-child td { + border-bottom: none; +} + +td:first-child { + text-align: left; + font-weight: 500; + color: #2c3e50; } td.great { - background-color: green; + background-color: #27ae60; + color: white; + font-weight: 600; } td.sad { - background-color: red; + background-color: #e74c3c; + color: white; + font-weight: 600; } td.ok { - background-color: yellow; + background-color: #f39c12; + color: white; + font-weight: 600; +} + +h1, +h2, +h3 { + font-weight: 600; + color: #2c3e50; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 1.5rem; +} + +h2 { + font-size: 1.75rem; + margin-top: 2.5rem; + margin-bottom: 1rem; +} + +p { + margin-bottom: 1rem; +} + +a { + color: #3498db; + text-decoration: none; +} + +a:hover { + text-decoration: underline; } diff --git a/index.html b/index.html index b4afe87..3f4ff20 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@ - Lepší karty podporují RTX / Ray Tracing + Lepší karty podporují RTX