diff --git a/styles.css b/styles.css deleted file mode 100644 index 1c8f5a3..0000000 --- a/styles.css +++ /dev/null @@ -1,284 +0,0 @@ -/* Base styles */ -:root { - --github-dark: #0d1117; - --github-text: #c9d1d9; - --github-red: #ff2e2e; - --github-link: #58a6ff; - --gutter: 20px; - --padding: 12px; - --golden-ratio: 1.618; -} - -@font-face { - font-family: 'MesloLGS NF'; - src: url('MesloLGS-NF-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'MesloLGS NF'; - src: url('MesloLGS-NF-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; -} - -body, html { - margin: 0; - padding: 0; - height: 100%; - font-family: 'MesloLGS NF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; - background-color: var(--github-dark); - color: var(--github-text); - font-size: 16px; - line-height: 1.5; - overflow-x: hidden; -} - -.grid-container { - display: grid; - grid-template-columns: repeat(12, 1fr); - gap: var(--gutter); - padding: var(--gutter); - max-width: 1200px; - margin: 0 auto; -} - -/* Header and Navigation */ -header { - grid-column: 1 / -1; - background-color: rgba(13, 17, 23, 0.95); - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - backdrop-filter: blur(8px); - height: 80px; - display: flex; - align-items: center; - justify-content: center; -} - -nav { - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 0 var(--padding); - position: relative; - display: flex; - justify-content: center; -} - -nav ul { - display: flex; - list-style-type: none; - padding: 0; - margin: 0; - gap: calc(var(--gutter) * var(--golden-ratio)); - align-items: center; -} - -nav ul li a { - color: var(--github-red); - text-decoration: none; - font-weight: bold; - font-size: 1.1rem; - text-transform: uppercase; - transition: color 0.2s ease; - position: relative; - display: inline-block; - padding: 10px 0; -} - -nav ul li a:hover { - color: var(--github-link); -} - -nav ul li a::after { - content: ''; - position: absolute; - width: 100%; - height: 2px; - bottom: -4px; - left: 0; - background-color: var(--github-red); - transform: scaleX(0); - transition: transform 0.2s ease; -} - -nav ul li a:hover::after { - transform: scaleX(1); -} - -/* Hamburger Menu */ -.hamburger { - display: none; - border: none; - background: none; - cursor: pointer; - padding: 15px; - position: absolute; - right: 15px; - top: 50%; - transform: translateY(-50%); - z-index: 1001; -} - -.hamburger span { - display: block; - width: 25px; - height: 3px; - background-color: var(--github-red); - margin: 5px 0; - transition: all 0.3s ease; -} - -/* Main Content */ -main { - grid-column: 1 / -1; - padding-top: 100px; -} - -.content { - grid-column: 1 / -1; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - min-height: calc(100vh - 180px); - justify-content: center; -} - -.logo-container { - display: flex; - justify-content: center; - align-items: center; - height: calc(100vh - 100px); - width: 100%; -} - -.centered-logo { - max-width: 100%; - max-height: 80vh; - object-fit: contain; -} - -.markdown-content { - padding: calc(var(--padding) * var(--golden-ratio)); - background-color: rgba(13, 17, 23, 0.7); - border-radius: 10px; - backdrop-filter: blur(5px); - width: 100%; - max-width: 800px; - margin: 0 auto; -} - -h1 { - font-family: 'MesloLGS NF', monospace; - font-weight: bold; - font-size: calc(1.618rem * 1.618); - text-transform: uppercase; - color: var(--github-red); - margin-bottom: 0.5rem; - letter-spacing: 0.1em; -} - -.subheading { - font-family: 'MesloLGS NF', monospace; - font-weight: normal; - font-size: 1.2rem; - color: var(--github-text); - margin-top: 0; - letter-spacing: 0.05em; - text-transform: lowercase; - line-height: 1.2; -} - -/* Mobile Responsive Design */ -@media (max-width: 768px) { - body.menu-active { - overflow: hidden; - } - - .hamburger { - display: block; - } - - nav { - justify-content: flex-end; - } - - nav ul { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100vh; - background-color: var(--github-dark); - flex-direction: column; - justify-content: center; - align-items: center; - gap: 2rem; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease-in-out; - transform: translateY(-10px); - padding: 0; - margin: 0; - } - - nav ul.active { - opacity: 1; - visibility: visible; - transform: translateY(0); - } - - nav ul li { - opacity: 0; - transform: translateY(20px); - transition: all 0.3s ease-in-out; - } - - nav ul.active li { - opacity: 1; - transform: translateY(0); - transition-delay: 0.2s; - } - - nav ul li a { - font-size: 1.5rem; - padding: 15px 30px; - display: block; - text-align: center; - } - - .hamburger.active span:nth-child(1) { - transform: rotate(45deg) translate(8px, 8px); - } - - .hamburger.active span:nth-child(2) { - opacity: 0; - } - - .hamburger.active span:nth-child(3) { - transform: rotate(-45deg) translate(7px, -7px); - } - - .menu-active .logo-container { - display: none; - } - - h1 { - font-size: calc(1.618rem * 1.414); - } - - .subheading { - font-size: 1rem; - } - - .markdown-content { - margin: 0 var(--padding); - } -} \ No newline at end of file