boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-01-19 04:42:17 +00:00
Code Issues Projects Releases Wiki Activity
Files
develop
website-v2/templates/style_guide.html
Sam Darwin f44406d2df AWS S3 dualstack ipv6 support (#1776)
2025-05-16 10:48:00 -06:00

524 lines
29 KiB
HTML
Raw Permalink Blame History

{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}Style Guide{% endblock %}
{% block content %}
<div class="py-0 px-3 mb-3 md:py-6 md:px-0" x-data="{
mode: localStorage.getItem('colorMode'),
setColorMode: m => {
if (m === 'dark') {
document.documentElement.classList.add('dark')
localStorage.setItem('colorMode', 'dark')
} else {
document.documentElement.classList.remove('dark')
localStorage.setItem('colorMode', 'light')
}
document.head.querySelectorAll('.meta-theme').forEach((el) => {
el.setAttribute('content', el.getAttribute('data-' + m));
});
}
}">
<div class="grid grid-cols-1 gap-6">
<div class="p-2">
<div class="mb-4">
<h1 class="text-3xl font-extrabold md:text-6xl">
<span class="block xl:inline">Homepage header.</span>
</h1>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<h1 class="text-3xl font-extrabold md:text-6xl">
<span class="block xl:inline">Homepage header.</span>
</h1>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="mb-4">
<span class="text-xl md:text-3xl lg:text-3xl">Page Header</span>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<span class="text-xl md:text-3xl lg:text-3xl">Page Header</span>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="mb-4">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<h3 class="pb-2 mb-4 text-3xl capitalize border-b border-gray-400 text-orange dark:border-slate">Panel Header</h3>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:my-16 lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 lg:w-1/2 dark:bg-charcoal">
<h3 class="pb-2 mb-4 text-3xl capitalize border-b border-gray-400 text-orange dark:border-slate">Panel Header</h3>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
<h5 class="text-2xl leading-tight text-orange">Community Panel Header</h5>
<p class="py-1 my-2 border-b border-gray-700 text-slate dark:text-white">
Panel Subheader
</p>
<p class="text-slate dark:text-white">Panel paragraph text..</p>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
<h5 class="text-2xl leading-tight text-orange">Community Panel Header</h5>
<p class="py-1 my-2 border-b border-gray-700">
Panel Subheader
</p>
<p>Panel paragraph text..</p>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal !pr-60">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-orange/30">Homepage Panel Category</span>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-orange/30">Homepage Panel Category</span>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div>
<a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">Site Link</a>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">Site Link</a>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div>
<div class="items-center px-5 pt-4 mt-4 text-center">
<div class="justify-between pt-3 pb-3 sm:space-x-3 xl:space-x-6 border-dotted border-t-2 px-20 border-t-white/5 w-fit mx-auto">
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
<span class="inline sm:hidden text-white/30">&nbsp;&nbsp; | &nbsp;&nbsp;</span>
<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
</div>
<div><span class="text-sm">Additional text in footer with <a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">a link with the normal link style</a>.</span></div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="items-center px-5 pt-4 mt-4 text-center">
<div class="justify-between pt-3 pb-3 sm:space-x-3 xl:space-x-6 border-dotted border-t-2 px-20 border-t-white/5 w-fit mx-auto">
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
<span class="inline sm:hidden text-white/30">&nbsp;&nbsp; | &nbsp;&nbsp;</span>
<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
</div>
<div><span class="text-sm">Additional text in footer with <a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">a link with the normal link style</a>.</span></div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal !w-96">
<div class="absolute top-6 right-8 p-2 group">
<a href="{% url 'libraries' %}"
class="text-sm font-medium md:text-base lg:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
Homepage Panel All Items &nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
</a>
</div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<div class="absolute top-6 right-8 p-2 group">
<a href="{% url 'libraries' %}"
class="text-sm font-medium md:text-base lg:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
Homepage Panel All Items &nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
</a>
</div>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
<div class="grid grid-cols-2 lg:grid-cols-3">
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">News/Community Link/Button 1</h6>
<i class="fa fa-helmet-safety"></i>
</a>
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">News/Community Link/Button 2</h6>
<i class="fa fa-helmet-safety"></i>
</a>
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">News/Community Link/Button 3</h6>
<i class="fa fa-helmet-safety"></i>
</a>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
<div class="grid grid-cols-2 lg:grid-cols-3">
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">Community Link/Button 1</h6>
<i class="fa fa-helmet-safety"></i>
</a>
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">Community Link/Button 2</h6>
<i class="fa fa-helmet-safety"></i>
</a>
<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
<h6 class="pb-1 text-base">Community Link/Button 3</h6>
<i class="fa fa-helmet-safety"></i>
</a>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<div class="-ml-2 h-14">
<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
href="#">
<span class="dark:text-white text-slate">Button/Link on Releases/Library Detail</span>
<span class="block text-xs">additional text</span>
</a>
</div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<div class="-ml-2 h-14">
<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
href="#">
<span class="dark:text-white text-slate">Button/Link on Releases/Library Detail</span>
<span class="block text-xs">additional text</span>
</a>
</div>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="group flex space-y-3 max-w-md md:space-y-0 p-6">
<a href="{% url 'releases-most-recent' %}" class="w-80 flex justify-left items-center py-4 pl-6 md:pl-3 text-base font-medium link-header text-white rounded-md border md:text-lg border-orange bg-orange dark:bg-charcoal dark:hover:bg-charcoal/75">
<i class="pl-2 pr-7 md:pr-6 text-white group-hover:text-sky-600 fas fa-arrow-circle-down dark:text-orange"></i> Homepage Hero Button
</a>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<a href="{% url 'releases-most-recent' %}" class="w-80 flex justify-left items-center py-4 pl-6 md:pl-3 text-base font-medium link-header text-white rounded-md border md:text-lg border-orange bg-orange dark:bg-charcoal dark:hover:bg-charcoal/75">
<i class="pl-2 pr-7 md:pr-6 text-white group-hover:text-sky-600 fas fa-arrow-circle-down dark:text-orange"></i> Homepage Hero Button
</a>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="space-y-6 w-full text-center">
<a class="relative w-96 block px-20 py-3 text-base font-medium rounded-md border border-orange !text-white hover:!text-white bg-orange hover:bg-orange/80 dark:bg-slate dark:hover:bg-charcoal hover:drop-shadow-md md:py-4 md:text-lg md:px-10"
href="#">
<span class="absolute right-1 top-1 text-xs bg-white text-slate rounded p-1">Special Notice</span>
<i class="fas fa-icons"></i> Provider Button
</a>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="space-y-6 w-full text-center">
<a class="relative w-96 block px-20 py-3 text-base font-medium rounded-md border border-orange !text-white hover:!text-white bg-orange hover:bg-orange/80 dark:bg-slate dark:hover:bg-charcoal hover:drop-shadow-md md:py-4 md:text-lg md:px-10"
href="#">
<span class="absolute right-1 top-1 text-xs bg-white text-slate rounded p-1">Special Notice</span>
<i class="fas fa-icons"></i> Provider Button
</a>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<div class="flex justify-between space-x-16">
<a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="#">Cancel Button</a>
<button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md">Action Button</button>
</div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="flex justify-between">
<a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="#">Cancel Button</a>
<button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md">Action Button</button>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<div class="w-full bg-white dark:bg-charcoal mx-auto rounded py-6 px-3" id="signup_form">
<label>Text Field</label>
<input type="email" name="text" placeholder="Enter text.." required="" id="" />
</div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="w-full bg-white dark:bg-charcoal mx-auto rounded py-6 px-3" id="signup_form">
<label>Text Field</label>
<input type="email" name="text" placeholder="Enter text.." required="" id="" />
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="flex relative space-x-3 justify-between md:justify-start">
<div>
<div class="flex space-x-3">
<div><a title="Name View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-list p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
<div><a title="Grid View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] bg-gray-100 dark:bg-slate"></i></a></div>
<div><a title="Category View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-cat p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
</div>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="flex relative space-x-3 justify-between md:justify-start">
<div>
<div class="flex space-x-3">
<div><a title="Name View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-list p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
<div><a title="Grid View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] bg-gray-100 dark:bg-slate"></i></a></div>
<div><a title="Category View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-cat p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
</div>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div>
<select class="dropdown">
<option value="">Dropdown Menu</option>
</select>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div>
<select class="dropdown">
<option value="">Dropdown Menu</option>
</select>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<div class="space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<p>Paragraph text in panel..</p>
</div>
</div>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
<p>Paragraph text in panel..</p>
</div>
</div>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<p>Paragraph text outside panel..</p>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<p>Paragraph text outside panel..</p>
{% endfilter %}</pre></div>
</div>
</div>
<br clear="all" />
<div class="p-2">
<span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white mt-1 dark:bg-slate border border-gray-400 dark:border-gray-500">
<i class="fas fa-user text-2xl ml-[4px]"></i>
</span>
<br clear="all" />
<span class="inline-block h-[30px] w-[30px] overflow-hidden rounded mt-1 border border-gray-400 dark:border-gray-500">
<img src="https://s3.dualstack.us-east-2.amazonaws.com/boost.org.media/profile-images/IMG_6155_1.jpg" alt="user" class="h-full w-full cursor-pointer object-cover"/>
</span>
<p>User Avatars</p>
<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>
<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white mt-1 dark:bg-slate border border-gray-400 dark:border-gray-500">
<i class="fas fa-user text-2xl ml-[4px]"></i>
</span>
<span class="inline-block h-[30px] w-[30px] overflow-hidden rounded mt-1 border border-gray-400 dark:border-gray-500">
<img src="https://s3.dualstack.us-east-2.amazonaws.com/boost.org.media/profile-images/IMG_6155_1.jpg" alt="user" class="h-full w-full cursor-pointer object-cover"/>
</span>
{% endfilter %}</pre></div>
</div>
</div>
</div>
</div>
{% endblock %}
Reference in New Issue View Git Blame Copy Permalink