Skip to content

Commit

Permalink
fix: alignments with uikit, projects, navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@fivehanz
fivehanz committed Nov 23, 2024
1 parent f5efd71 commit 0e070dc
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 92 deletions.
28 changes: 5 additions & 23 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
<!doctype html>
<html lang="en" class="{% block html_class %}{% endblock %}">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- UI Kit -->
{% compress css file uikit %}
<link rel="stylesheet" href="{% static 'css/uikit.min.css' %}">
{% endcompress %}

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- SEO -->
{% include "wagtailseo/meta.html" %}

Expand Down Expand Up @@ -45,26 +45,16 @@
<!-- Favicon -->
<link rel="icon" href="{% static 'favicon.ico' %}" />

<!-- Tailwind -->
<!-- {% compress css file tailwind %} -->
<!-- <link rel="stylesheet" href="{% static 'css/output.css' %}"> -->
<!-- {% endcompress %} -->

{% block extra_css %}
<!-- Override this in templates to add extra stylesheets -->
{% endblock %}

<!-- HTMX -->
<!-- {% compress js file htmx %} -->
<!-- <script defer src="{% static 'js/htmx.min.js' %}"></script> -->
<!-- {% endcompress %} -->

<!-- PLAUSIBLE ANALYTICS -->
{% load plausible_wagtail %} {% plausible %}
</head>

<body
class="uk-container {% block body_class %}{% endblock %}"
class="{% block body_class %}{% endblock %}"
{% block body_attributes %}{% endblock%}
>
<!-- navbar / header -->
Expand All @@ -91,14 +81,6 @@
<script defer src="{% static 'js/alpine.min.js' %}"></script>
{% endcompress %}

{% compress js inline %}
<!-- <script> -->
<!-- htmx.onLoad(function(content) { -->
<!-- initFlowbite(); -->
<!-- }) -->
<!-- </script> -->
{% endcompress %}

{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
Expand Down
6 changes: 4 additions & 2 deletions templates/includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800">
<div class="mx-auto max-w-screen-xl">
<footer class="uk-container p-4 bg-white sm:p-6 dark:bg-gray-800">
<div class="mx-auto max-w-screen-xl">
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<div class="flex items-baseline justify-between">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
© {% now "Y" %} hanz.
</span>


<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
{% with twitter_url=settings.base.NavigationSettings.twitter_url github_url=settings.base.NavigationSettings.github_url linkedin_url=settings.base.NavigationSettings.linkedin_url %}
{% if twitter_url or github_url or mastodon_url %}
Expand Down
74 changes: 28 additions & 46 deletions templates/includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,33 @@
{% load wagtailcore_tags navigation_tags %}

<header>
<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">

<!-- brand / logo -->
<a href="/" class="flex items-center">
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">hanz</span>
</a>
<!-- end brand / logo -->
<div class="uk-navbar-container">
<div class="uk-container">
<nav uk-navbar>
{% get_site_root as site_root %}
<div class="uk-navbar-left">
<a href="{% pageurl site_root %}" class="uk-navbar-item uk-logo">hanz</a>
</div>

<!-- hamburger menu -->
<div class="flex items-center ">
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<!-- menu links -->
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
{% for menuitem in site_root.get_children.live.in_menu %}
<li>
<a class="uk-text-lowercase" href="{% pageurl site_root %}">
home
</a>
</li>
<li>
<a class="uk-text-lowercase" href="{% pageurl menuitem %}">
{{ menuitem.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- / end menu links -->
</nav>
</div>
<!-- end hamburger menu -->

<!-- menu -->
{% get_site_root as site_root %}
<nav class="hidden justify-between items-center w-full lg:flex lg:w-auto" id="mobile-menu-2">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<!-- links -->
<li>
<a
href="{% pageurl site_root %}"
class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white" aria-current="page">
home
</a>
</li>
{% for menuitem in site_root.get_children.live.in_menu %}
<li>
<a
href="{% pageurl menuitem %}"
class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
{{ menuitem.title }}
</a>
</li>
{% endfor %}
<!-- end links -->
</ul>
</nav>
<!-- end menu -->

</div>
</nav>
</header>
</div>
</header>
27 changes: 6 additions & 21 deletions templates/project/blocks/projects.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,37 @@
{% load wagtailcore_tags wagtailimages_tags %}
<section class="my-8">
<section class="uk-margin">
<h2>{{ self.heading }}</h2>
<div>{{ self.text|richtext }}</div>
{% if self.image %} {% image self.image width-480 %} {% endif %}

<div class="flex flex-row flex-wrap gap-24 my-8">
<div class="uk-flex uk-flex-row uk-flex-wrap">
{% if self.featured %} {% for card in self.featured %}
<div
class="max-w-md p-6 bg-primary-50 border border-primary-200 rounded-md shadow-lg shadow-primary-300/50 dark:bg-primary-800 dark:border-primary-700"
class="uk-card-small uk-card-default uk-card-body uk-card-hover uk-width-expand@l uk-width-1-2@l"
>
{% if card.page %}
<a
href="{% pageurl card.page %}"
class="text-2xl font-bold tracking-tight text-primary-700 dark:text-primary-300"
class="uk-card-title"
>
{{ card.heading }}
</a>
{% else %}
<h3
class="text-2xl font-bold tracking-tight text-primary-700 dark:text-primary-300"
class="uk-card-title"
>
{{ card.heading }}
</h3>
{% endif %} {% if card.text %} {{ card.text|richtext }} {% endif %}
{% if card.links %}
<div class="flex flex-col flex-wrap gap-2">
<div class="uk-flex uk-flex-column uk-flex-wrap">
{% for link in card.links %}
<a
class="inline-flex items-baseline text-primary-600"
target="_blank"
href="{{ link.url }}"
>
{{ link.name }}
<svg
class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
{% endfor %}
</div>
Expand Down

0 comments on commit 0e070dc

Please sign in to comment.