diff --git a/css/styles.css b/css/styles.css index 55deca2..9b4e195 100644 --- a/css/styles.css +++ b/css/styles.css @@ -580,6 +580,72 @@ img { } /* Media Queries */ +@media (max-width: 1200px) and (min-width: 769px) { + .sidebar { + width: 70px; + } + + .main-content { + margin-left: 70px; + width: calc(100% - 70px); + } + + .nav-item span, + .tag-item span, + .category-title span { + display: none; + } + + .nav-item, + .tag-item { + justify-content: center; + padding: 15px 0; + position: relative; + } + + .nav-item i, + .tag-item .tag-dot { + margin-right: 0; + font-size: 20px; + } + + /* Tooltip for compact mode */ + .nav-item:hover::after, + .tag-item:hover::after { + content: attr(data-title); + position: absolute; + left: 70px; + top: 50%; + transform: translateY(-50%); + background: var(--sidebar-bg); + color: var(--text-color); + padding: 5px 10px; + border-radius: 4px; + white-space: nowrap; + box-shadow: 0 1px 5px rgba(0,0,0,0.2); + z-index: 100; + } + + .category-title { + text-align: center; + padding: 10px 0; + } + + .category-title i { + margin: 0 auto; + display: block; + } + + .logo { + text-align: center; + padding: 10px 0; + } + + .logo img { + height: 30px; + } +} + @media (max-width: 992px) { .video-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); diff --git a/index.php b/index.php index fc286a4..cfd5eca 100644 --- a/index.php +++ b/index.php @@ -21,51 +21,51 @@