📱 Reflow some elements at smaller screen sizes

pull/2/head
James Panther 2021-08-14 13:33:45 +10:00
parent 5aa764976c
commit 1b1615476d
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
5 changed files with 7 additions and 5 deletions

View File

@ -9,11 +9,13 @@ Congo is designed to be a fast, lightweight theme for Hugo. It's based upon Tail
## Features ## Features
- Built with Tailwind CSS JIT for minified stylesheets without any excess code - Built with Tailwind CSS JIT for minified stylesheets without any excess code
- Fully responsive layout
- Dark mode (auto-switching based upon browser) - Dark mode (auto-switching based upon browser)
- Highly customisable configuration - Highly customisable configuration
- Flexible with any content types, taxonomies and menus - Flexible with any content types, taxonomies and menus
- Diagrams and visualisations using Mermaid JS - Diagrams and visualisations using Mermaid JS
- SVG icons from FontAwesome 5 - SVG icons from FontAwesome 5
- Heading anchors
- HTML and Emoji support in articles - HTML and Emoji support in articles
- SEO friendly - SEO friendly
- Fathom Analytics and Google Analytics support - Fathom Analytics and Google Analytics support

View File

@ -2,7 +2,7 @@
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}"> <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body <body
class="flex flex-col h-screen px-8 text-lg leading-7 text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white" class="flex flex-col h-screen px-6 m-auto text-lg leading-7 text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white max-w-7xl"
> >
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<main class="flex-grow">{{- block "main" . }}{{- end }}</main> <main class="flex-grow">{{- block "main" . }}{{- end }}</main>

View File

@ -9,7 +9,7 @@
</div> </div>
{{ end }} {{ end }}
{{ with .Site.Author.links }} {{ with .Site.Author.links }}
<div class="flex text-lg text-gray-400 dark:text-gray-500"> <div class="flex flex-wrap text-lg text-gray-400 dark:text-gray-500">
{{ range $links := . }} {{ range $links := . }}
{{ range $name, $url := $links }} {{ range $name, $url := $links }}
<a <a

View File

@ -3,9 +3,9 @@
<a class="hover:underline" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <a class="hover:underline" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
</div> </div>
<nav> <nav>
<ul class="flex list-none"> <ul class="flex flex-col list-none sm:flex-row">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="mr-7 last:mr-0"> <li class="text-right sm:mr-7 sm:last:mr-0">
<a class="hover:underline" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a> <a class="hover:underline" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
</li> </li>
{{ end }} {{ end }}

File diff suppressed because one or more lines are too long