boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-02-27 05:32:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #107 from revsys/tailwind-fu

Browse Source
This commit is contained in:
Greg Newman
2023-02-03 09:34:55 -05:00
committed by GitHub
parent bc20a0d3ef fd88562640
commit d607ae6fda
10 changed files with 122 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/styles.css
View File

@@ -4,6 +4,10 @@
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
@layer base {
[x-cloak] {
display: none !important;
}
body {
color: white;
@apply font-cairo;

130
static/css/styles.css
View File

@@ -16,7 +16,7 @@
/* 2 */
border-style: solid;
/* 2 */
border-color: currentColor;
border-color: #e5e7eb;
/* 2 */
}
@@ -582,6 +582,10 @@ select {
outline: 1px auto -webkit-focus-ring-color;
}
[x-cloak] {
display: none !important;
}
body {
color: white;
font-family: 'Cairo', sans-serif;
@@ -1339,18 +1343,6 @@ input[type=file] {
transform-origin: top right;
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@@ -1529,6 +1521,11 @@ input[type=file] {
border-color: rgb(49 74 87 / var(--tw-divide-opacity));
}
.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-divide-opacity));
}
.divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 0.2;
}
@@ -1618,6 +1615,11 @@ input[type=file] {
border-color: rgb(49 74 87 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-charcoal {
--tw-border-opacity: 1;
border-color: rgb(23 42 52 / var(--tw-border-opacity));
@@ -1642,25 +1644,48 @@ input[type=file] {
background-color: rgb(90 213 153 / 0.1);
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-charcoal\/60 {
background-color: rgb(23 42 52 / 0.6);
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-slate {
--tw-bg-opacity: 1;
background-color: rgb(49 74 87 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-30 {
--tw-bg-opacity: 0.3;
}
.bg-opacity-25 {
--tw-bg-opacity: 0.25;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
.bg-opacity-70 {
--tw-bg-opacity: 0.7;
}
.bg-gradient-to-r {
@@ -2030,6 +2055,16 @@ input[type=file] {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-orange {
--tw-text-opacity: 1;
color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -2049,6 +2084,21 @@ input[type=file] {
color: rgb(49 74 87 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.text-gold {
--tw-text-opacity: 1;
color: rgb(244 202 31 / var(--tw-text-opacity));
@@ -2068,12 +2118,19 @@ input[type=file] {
color: rgb(255 255 255 / 0.6);
}
.opacity-0 {
opacity: 0;
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.opacity-100 {
opacity: 1;
.placeholder-gray-500::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.placeholder-gray-500::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.shadow {
@@ -2108,22 +2165,6 @@ input[type=file] {
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-200 {
transition-duration: 200ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.last\:border-0:last-child {
border-width: 0px;
}
@@ -2133,11 +2174,26 @@ input[type=file] {
background-color: rgb(255 159 0 / var(--tw-bg-opacity));
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:bg-orange:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 159 0 / var(--tw-bg-opacity));
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));

1
tailwind.config.js
View File

@@ -9,6 +9,7 @@ module.exports = {
current: 'currentColor',
white: colors.white,
emerald: colors.emerald,
gray: colors.gray,
indigo: colors.indigo,
yellow: colors.yellow,
red: colors.red,

6
templates/forum/forum_list.html
View File

@@ -12,7 +12,7 @@
{% if node.level == root_level %}
{% if node.obj.is_category %}
<div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist rounded">
<div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
<div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
<div class="flex m-0 px-3 py-2 border-b border-slate">
<div class="pl-0 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-full forum-name-col">
<h3 class="m-0 mb-3 h5"><a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="text-gray-900">{{ node.obj.name }}</a></h3>
@@ -30,7 +30,7 @@
{% with node.previous_sibling.obj as previous_sibling %}
{% if previous_sibling and previous_sibling.is_category or not previous_sibling in forum_contents.visible_forums or not previous_sibling %}
<div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist">
<div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-slate text-gray-900">
<div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate text-gray-900">
<div class="flex m-0 px-3 py-2 border-b border-slate">
<div class="pl-0 w-3/4 forum-name-col">
<h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>
@@ -198,7 +198,7 @@
{% endrecurseforumcontents %}
{% else %}
<div class="mt-3 relative flex flex-col min-w-0 rounded break-words border border-1 border-gray-300 forumlist">
<div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
<div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
<div class="flex flex-wrap m-0 px-3 py-2">
<div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-3/4 forum-name-col">
<h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>

4
templates/homepage.html
View File

@@ -16,7 +16,7 @@
<p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-gray-500 text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
<div class="mt-5 max-w-md md:flex justify-center md:justify-between md:mt-8 space-y-3 md:space-y-0">
<a href="#" class="flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
<a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
<a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
</div>
</div>
</div>
@@ -63,7 +63,7 @@
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Download </a>
</div>
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Version Details > </a>
</div>
</div>
</div>

16
templates/includes/_header.html
View File

@@ -2,7 +2,7 @@
{% load account socialaccount %}
<div class="relative bg-gray-50">
<div class="relative">
<div class="relative pb-11 md:pb-6">
<div>
<div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
@@ -66,7 +66,7 @@
<span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
</div>
<button type="button"
class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
x-bind:aria-expanded="open.toString()">
<svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened" class="hidden h-6 w-6"
@@ -81,7 +81,7 @@
<a href="{% url 'home' %}"><img class="inline w-auto h-[30px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost"></a>
</div>
<button type="button"
class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
x-bind:aria-expanded="open.toString()">
<span class="sr-only">Open main menu</span>
@@ -113,15 +113,15 @@
<a href="{% url 'donate' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
</div>
<div class="px-2 pt-2 pb-3 absolute bottom-10 left-0 text-sm">
<a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
<a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">About</a>
<a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>
<a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Support</a>
<a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>
<a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Resources</a>
<a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Sign Up</a>
<a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Sign Up</a>
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Log In </a>
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Log In </a>
</div>
</div>
</div>

6
templates/libraries/includes/search_command_palatte.html
View File

@@ -6,10 +6,10 @@
x-transition
x-cloak
>
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
<div class="fixed inset-0 bg-black bg-opacity-70 transition-opacity"></div>
<div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
<div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-black shadow-2xl transition-all">
<div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20" x-on:click="showSearch = false">
<div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-charcoal shadow-2xl transition-all">
<div class="relative">
<!-- Heroicon name: outline/magnifying-glass -->
<svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">

9
templates/libraries/list.html
View File

@@ -29,10 +29,10 @@
{% csrf_token %}
<div>
<label for="id_categories" hidden="true">Categories:</label>
<select onchange="this.form.submit()"
name="categories"
class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
id="id_categories"
<select onchange="this.form.submit()"
name="categories"
class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
id="id_categories"
>
<option>Filter by category</option>
{% for c in categories %}
@@ -42,6 +42,7 @@
</div>
</form>
</div>
<!-- command palatte for search -->
{% include "libraries/includes/search_command_palatte.html" %}
</div>

2
templates/socialaccount/snippets/provider_list.html
View File

@@ -6,7 +6,7 @@
{% if provider.id == "openid" %}
{% for brand in provider.get_brands %}
<a title="{{brand.name}}"
class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
>{{brand.name}}</a>
{% endfor %}

4
templates/versions/_past_version_list_item.html
View File

@@ -10,8 +10,8 @@
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
</div>
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
<a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
</div>
</div>
</div>
</div>
</div>