diff options
| -rw-r--r-- | assets/css/partials/article.scss | 11 | ||||
| -rw-r--r-- | assets/css/partials/footer.scss | 13 | ||||
| -rw-r--r-- | assets/css/partials/header.scss | 26 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 6 | ||||
| -rw-r--r-- | layouts/partials/header.html | 25 |
5 files changed, 50 insertions, 31 deletions
diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss index 91c79db..f93d460 100644 --- a/assets/css/partials/article.scss +++ b/assets/css/partials/article.scss @@ -2,11 +2,20 @@ main { margin: 0 auto 3rem; padding: 1rem; box-sizing: border-box; - + max-width: 65ch; width: 100%; font-size: 1.25rem; + a { + color: var(--accent-1); + transition: color 0.2s ease-in-out; + + &:hover { + color: var(--accent-2); + } + } + >* { margin-top: 0; margin-bottom: 1.75rem; diff --git a/assets/css/partials/footer.scss b/assets/css/partials/footer.scss index 8073bcc..60ad7a6 100644 --- a/assets/css/partials/footer.scss +++ b/assets/css/partials/footer.scss @@ -1,23 +1,12 @@ footer { background-color: #333; color: white; + text-align: center; padding: 0.5rem 1rem; - display: flex; - align-items: center; - justify-content: space-between; a { color: var(--accent-7); } - - div { - display: flex; - gap: 1rem; - - font-size: 1.125rem; - - font-family: var(--font-mono); - } }
\ No newline at end of file diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss index 16fb314..1562952 100644 --- a/assets/css/partials/header.scss +++ b/assets/css/partials/header.scss @@ -1,5 +1,6 @@ header { - background-color: var(--accent-5); + border-top: 4px solid var(--accent-5); + background-color: #EFEFEF; color: black; display: flex; @@ -7,9 +8,22 @@ header { align-items: center; justify-content: space-between; - padding: 1rem 2rem; + padding: 0 2rem; margin-bottom: 1rem; + a { + display: inline-block; + padding-top: 1rem; + padding-bottom: calc(1rem - 4px); + } + + >div { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + } + h1 { font-size: 2rem; margin: 0; @@ -26,7 +40,7 @@ header { font-weight: 300; } - nav > a { + nav>a { text-decoration: none; font-weight: 700; font-size: 1.2rem; @@ -36,7 +50,11 @@ header { transition: color 0.2s ease-in-out; &:hover { - color: var(--accent-dark); + color: var(--accent-3); + } + + &.active { + border-bottom: 2px solid var(--accent-3); } } } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8a06f09..1d98e95 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -5,10 +5,4 @@ Copyright © 2023 Ariel Costas Guerrero. Todos los derechos reservados.<br> Cedido bajo licencia <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.es">CC BY-SA 4.0</a> salvo que se indique lo contrario. </p> - - <div> - <a href="https://masto.es/@arielcg" rel="me">Mastodon</a> - <a href="https://github.com/arielcostas">GitHub</a> - <a href="https://linkedin.com/in/ariel-costas">LinkedIn</a> - </div> </footer>
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9e51d9b..5cf34fc 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,13 +1,22 @@ <header> - <h1> - <a href="{{ .Site.Home.RelPermalink }}"> - CostasDEV - </a> - </h1> + <div> + <h1> + <a href="{{ .Site.Home.RelPermalink }}"> + CostasDEV + </a> + </h1> + + <nav> + {{$current := .}} + {{ range .Site.Home.Pages }} + <a href="{{ .RelPermalink }}"{{ if eq .RelPermalink $current.RelPermalink }} class="active"{{ end }}>{{ .Title }}</a> + {{ end }} + </nav> + </div> <nav> - {{ range .Site.Home.Pages }} - <a href="{{ .RelPermalink }}">{{ .Title }}</a> - {{ end }} + <a rel="me" href="https://masto.es/@arielcg">Mastodon</a> + <a href="https://github.com/arielcostas">GitHub</a> + <a href="https://linkedin.com/in/ariel-costas">LinkedIn</a> </nav> </header>
\ No newline at end of file |