diff options
| author | Ariel Costas <94913521+arielcostas@users.noreply.github.com> | 2023-12-03 18:54:59 +0100 |
|---|---|---|
| committer | Ariel Costas <94913521+arielcostas@users.noreply.github.com> | 2023-12-03 18:54:59 +0100 |
| commit | bcd6753b81b4f03e9613a42836f5f8afad61887a (patch) | |
| tree | 3dea2a7e82e483980b29b08aa00d03015d30702c | |
| parent | 1a33aa0315481a18d8e75b568924e16114786509 (diff) | |
Mix mobile styles
| -rw-r--r-- | assets/css/base.scss | 1 | ||||
| -rw-r--r-- | assets/css/partials/article.scss | 19 | ||||
| -rw-r--r-- | assets/css/partials/header.scss | 18 | ||||
| -rw-r--r-- | layouts/_default/single.html | 16 |
4 files changed, 40 insertions, 14 deletions
diff --git a/assets/css/base.scss b/assets/css/base.scss index 6fa6990..ddfed8f 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -16,6 +16,7 @@ body { body { min-height: 100vh; + max-width: 100vw; display: flex; flex-direction: column; } diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss index b4fdda8..91c79db 100644 --- a/assets/css/partials/article.scss +++ b/assets/css/partials/article.scss @@ -1,9 +1,10 @@ main { - max-width: 65ch; margin: 0 auto 3rem; - width: 100%; padding: 1rem; - + box-sizing: border-box; + + max-width: 65ch; + width: 100%; font-size: 1.25rem; >* { @@ -11,8 +12,14 @@ main { margin-bottom: 1.75rem; } + >p>code { + word-break: break-word; + font-size: 0.9em; + color: var(--accent-1); + } + h1 { - font-size: 3.5rem; + font-size: 2.25rem; line-height: 1; margin-bottom: 1rem; } @@ -22,4 +29,8 @@ main { font-size: 0.85rem; margin-bottom: 1rem; } + + pre { + overflow: scroll; + } }
\ No newline at end of file diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss index 65f71b4..16fb314 100644 --- a/assets/css/partials/header.scss +++ b/assets/css/partials/header.scss @@ -3,7 +3,7 @@ header { color: black; display: flex; - flex-direction: horizontal; + flex-direction: row; align-items: center; justify-content: space-between; @@ -39,4 +39,20 @@ header { color: var(--accent-dark); } } +} + +@media (max-width: 768px) { + header { + flex-direction: column; + align-items: center; + justify-content: center; + + h1 { + margin-bottom: 0.5rem; + } + + p { + margin-bottom: 0; + } + } }
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a8257e9..78c5ccb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,11 +1,9 @@ {{ define "main" }} -<article> - <h1>{{ .Title }}</h1> - <p class="meta"> - {{ if gt .Date.Unix 0 }} - <time datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" }}">{{ .Date.Format "January 2, 2006" }}</time> - {{ end }} - </p> - {{ .Content }} -</article> +<h1>{{ .Title }}</h1> +<p class="meta"> + {{ if gt .Date.Unix 0 }} + <time datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" }}">{{ .Date.Format "January 2, 2006" }}</time> + {{ end }} +</p> +{{ .Content }} {{ end }}
\ No newline at end of file |