tgrosinger/orcashub-discourse-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove tailwind from footer

Browse Source
This commit is contained in:
Tony Grosinger 2024-03-02 18:27:04 -08:00
parent 6a6ef20344
commit 122a706436
2 changed files with 93 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
common/common.scss
View File

@ -731,12 +731,76 @@ html body #main-outlet {
// Footer // Footer
.orcashub-footer { .orcashub-footer {
background-color: rgb(31 41 55/1);
.outer-container {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding: 3rem 1.5rem;
}
.inner-container {
padding-bottom: 2rem;
@media (min-width: 1280) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
}
}
.grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media (min-width: 1280) {
grid-column: span 4/span 4;
}
}
.grid-row {
@media (min-width: 768px) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
}
.second-group {
margin-top: 3rem;
@media (min-width: 768px) {
margin-top: 0;
}
}
h3 {
color: white;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
}
ul { ul {
margin: 0; margin: 0;
} }
li {
a {
color: rgb(209 213 219/var(--tw-text-opacity));
font-size: 1rem;
line-height: 1.5rem;
}
a:hover {
color: white;
}
a:visited { a:visited {
// I couldn't get this to work with normal tailwind classes.
color: rgb(209 213 219/var(--tw-text-opacity)) !important; color: rgb(209 213 219/var(--tw-text-opacity)) !important;
} }
} }
}

80
common/footer.html
View File

@ -1,70 +1,42 @@
<link rel="stylesheet" href="https://orcas.is/files/css/styles.css"> <footer class=" orcashub-footer">
<div class="outer-container">
<footer class=" orcashub-footer bg-gray-800" aria-labelledby="footer-heading"> <div class="inner-container">
<h2 id="footer-heading" class="sr-only">Footer</h2> <div class="grid">
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="grid-row">
<div class="pb-8 xl:grid xl:grid-cols-4 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-4">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div> <div>
<h3 class="text-base font-medium text-white">Classifieds</h3> <h3>Classifieds</h3>
<ul> <ul>
<li><a href="https://orcas.community/classified/for-sale" <li><a href="https://orcas.community/classified/for-sale">For Sale</a></li>
class="text-base text-gray-300 hover:text-white">For <li><a href="https://orcas.community/classified/for-free">For Free</a></li>
Sale</a></li> <li><a href="https://orcas.community/classified/want-to-buy">Looking For</a></li>
<li><a href="https://orcas.community/classified/for-free" <li><a href="https://orcas.community/classified/want-to-borrow">Want to Borrow</a></li>
class="text-base text-gray-300 hover:text-white">For <li><a href="https://orcas.community/classified/new">New Post</a> </li>
Free</a></li>
<li><a href="https://orcas.community/classified/want-to-buy"
class="text-base text-gray-300 hover:text-white">Looking
For</a></li>
<li><a href="https://orcas.community/classified/want-to-borrow"
class="text-base text-gray-300 hover:text-white">Want to
Borrow</a></li>
<li><a href="https://orcas.community/classified/new"
class="text-base text-gray-300 hover:text-white">New Post</a>
</li>
</ul> </ul>
</div> </div>
<div class="mt-12 md:mt-0"> <div class="second-group">
<h3 class="text-base font-medium text-white">Housing</h3> <h3>Housing</h3>
<ul> <ul>
<li><a href="https://orcas.community/housing/for-rent" <li><a href="https://orcas.community/housing/for-rent">For Rent</a></li>
class="text-base text-gray-300 hover:text-white">For <li><a href="https://orcas.community/housing/request">Requests</a> </li>
Rent</a></li> <li><a href="https://orcas.community/housing/new">New Post</a> </li>
<li><a href="https://orcas.community/housing/request"
class="text-base text-gray-300 hover:text-white">Requests</a>
</li>
<li><a href="https://orcas.community/housing/new"
class="text-base text-gray-300 hover:text-white">New Post</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="md:grid md:grid-cols-2 md:gap-8"> <div class="grid-row">
<div> <div>
<h3 class="text-base font-medium text-white">Other Services</h3> <h3>Other Services</h3>
<ul> <ul>
<li><a href="/" class="text-base text-gray-300 hover:text-white" target="_blank">Groups</a> <li><a href="/" target="_blank">Groups</a> </li>
</li> <li><a href="https://orcas.community/events">Events</a> </li>
<li><a href="https://orcas.community/events" <li><a href="https://sanjuans.online/" target="_blank">San Juans Online</a></li>
class="text-base text-gray-300 hover:text-white">Events</a>
</li>
<li><a href="https://sanjuans.online/" class="text-base text-gray-300 hover:text-white"
target="_blank">San Juans Online</a></li>
</ul> </ul>
</div> </div>
<div class="mt-12 md:mt-0"> <div class="second-group">
<h3 class="text-base font-medium text-white">About</h3> <h3>About</h3>
<ul> <ul>
<li><a href="https://orcas.community/terms-of-service" <li><a href="https://orcas.community/terms-of-service">Terms of Service</a></li>
class="text-base text-gray-300 hover:text-white">Terms of <li><a href="https://orcas.community/privacy-policy">Privacy Policy</a></li>
Service</a></li> <li><a href="https://opencollective.com/orcas-community" target="_blank">Donate</a></li>
<li><a href="https://orcas.community/privacy-policy"
class="text-base text-gray-300 hover:text-white">Privacy
Policy</a></li>
<li><a href="https://opencollective.com/orcas-community"
class="text-base text-gray-300 hover:text-white" target="_blank">Donate</a></li>
</ul> </ul>
</div> </div>
</div> </div>