diff --git a/assets/css/header.css b/assets/css/header.css index 2577b60..9634419 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -21,7 +21,7 @@ header h1 { } #menu li a:hover { - background-color: var(--c-menu-hover); + background-color: var(--c-a-secondary); } #menu li a { diff --git a/assets/css/style.css b/assets/css/style.css index fbf0227..d61971f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,20 +1,27 @@ :root { - --c-bg: #0d1117; - --c-title: white; - --c-text: #8b949e; - --c-menu-hover: #1c2431; + --c-a-primary: #0d1117; + --c-a-secondary: #1c2431; + --c-b-primary: white; + --c-b-secondary: #ddd; + --c-links: #0087ca; + --c-bg: var(--c-a-primary); + --c-title: var(--c-b-primary); + --c-text: var(--c-b-secondary); --c-bg-footer: var(--c-bg); - --c-footer-text: var(--c-text); + --c-footer-text: var(--c-b-primary); } @media (prefers-color-scheme: light) { :root { - --c-bg: white; - --c-title: black; - --c-text: black; - --c-menu-hover: #ddd; + --c-a-primary: white; + --c-a-secondary: #ddd; + --c-b-primary: #0d1117; + --c-b-secondary: #1c2431; + --c-bg: var(--c-a-primary); + --c-title: var(--c-b-primary); + --c-text: var(--c-b-secondary); --c-bg-footer: #616A6B; - --c-footer-text: white; + --c-footer-text: var(--c-a-primary); } } @@ -44,17 +51,52 @@ h1, h2, h3, h4, h5, h6, .title { } main { - padding: 0 3.75rem; + width: 100%; + max-width: 1280px; + margin-right: auto; + margin-left: auto; + padding: 2rem 1rem; } -@media screen and (max-width: 700px){ - main { - padding: 0 1.875rem; +main a { + display: inline-block; + position: relative; + color: var(--c-links); + text-decoration: none; +} + +main a::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: var(--c-links); + transform-origin: bottom left; + transition: transform 0.25s ease-out; +} + +main a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} + +@media screen and (min-width: 700px) { + .right { + grid-column: 2; + grid-row: 1; + } + + .left { + grid-column: 1; + grid-row: 1; } } -@media screen and (max-width: 575px) { - main { - padding: 0 .625rem; +@media screen and (max-width: 700px) { + .right, .left { + grid-column: 1; } } \ No newline at end of file