Skip to content

tailwind-integration #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 9 additions & 13 deletions src/components/Aside.astro
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,14 @@ const icons = {

<style>
aside {
--aside-bg: var(--color-background-info);

padding: var(--space-4x);
gap: var(--space-4x);
background-color: var(--aside-bg);
border-radius: var(--border-radius-10);
color: var(--color-text-info);

/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
outline: 1px solid transparent;

--aside-bg: var(--color-background-info);
background-color: var(--aside-bg);

display: flex;
@apply p-4 gap-4 rounded-[4px] text-info;
}

.title {
Expand All @@ -53,7 +49,7 @@ const icons = {
}

aside p {
color: var(--color-text-info);
@apply text-info;
}

.icon {
Expand All @@ -67,16 +63,16 @@ const icons = {

aside :global(a),
aside :global(a > code:not([class*="language"])) {
color: var(--color-text-link);
@apply text-link;
}

aside :global(p),
aside.content :global(ul) {
color: var(--theme-text);
@apply text-text;
}

:global(.theme-dark) aside :global(code:not([class*="language"])) {
color: var(--theme-code-text);
@apply text-code-text;
}

aside :global(pre) {
Expand All @@ -102,6 +98,6 @@ const icons = {
}

.asideContent :global(p + p) {
margin-top: var(--space-2x);
@apply mt-2;
}
</style>
78 changes: 24 additions & 54 deletions src/components/Footer/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
// TODO: Replace all footer elements -- INCLUDING SOCIAL MEDIA ICONS!
---

<footer class="footer">
<div class="footer-grid container">
<footer class="pt-[82px] bg-gray-800 text-base">
<div class="footer-grid grid pb-16 gap-8 container">
<nav class="footer-col">
<h3 class="h3 footer-heading">Column 1</h3>
<ul role="list" class="footer-list">
Expand Down Expand Up @@ -110,114 +110,84 @@
</footer>

<style>
.footer {
padding: 82px 0 0;
background-color: var(--gray-800);
font-size: 16px;
}
.footer-grid {
display: grid;
padding-bottom: 64px;
gap: 32px;
}
.footer-heading {
color: var(--white);
font-size: 18px;
@apply text-white text-[18px];
}
.footer-chainlinkreg {
white-space: nowrap;
@apply whitespace-nowrap;
}

.footer-list-item {
display: flex;
margin-bottom: 16px;
align-items: center;
@apply flex mb-4 items-center;
}

.footer-list-item.footer-list-item-hidden {
display: none;
@apply hidden;
}

.footer-list-item-link {
color: #9ea2ab;
@apply text-[#9ea2ab];
}
.footer-list-item-link:hover {
color: white;
@apply text-white;
}

.footer-list-item-social {
display: flex;
margin-bottom: 16px;
@apply flex mb-4;
}

.footer-list-item-social-icon {
margin-right: 8px;
}

.footer-copyright-wrapper {
width: 100%;
background-color: var(--gray-900);
padding: var(--space-8x);
font-size: 14px;
@apply w-full bg-gray-900 p-8 text-sm;
}
.footer-copyright {
display: flex;
flex-direction: column;
gap: var(--space-8x);
@apply flex flex-col gap-8;
}
.footer-registry {
flex-wrap: wrap;
flex-direction: column;
@apply flex-wrap flex-col;
}
.footer-privacyandterms {
justify-content: space-evenly;
gap: var(--space-8x);
@apply place-content-evenly gap-8;
/* justify-content: space-evenly; */
}
.footer-privacyandterms a {
color: var(--white);
@apply text-white;
}

@media (min-width: 50em) {
.footer-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
@apply grid-cols-6;
}
.footer-copyright {
display: flex;
flex-direction: row;
justify-content: space-between;
@apply flex flex-row justify-between;
}
.footer-registry {
flex-direction: row;
@apply flex-row;
}
.footer-copyright-logo {
margin-right: var(--space-8x);
@apply mr-8;
}
.footer-chainlinkreg {
margin-right: var(--space-4x);
@apply mr-4;
}
}

/** Utilities */
.col {
display: flex;
align-items: center;
@apply flex items-center;
}
.footer-logo-text-hide {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 0;
height: 0;
min-width: 0;
opacity: 0;
@apply absolute left-0 top-0 z-[-1] w-0 h-0 min-w-0 opacity-0;
}
.hidden-sm {
display: none;
@apply hidden;
}
@media (min-width: 50em) {
.hidden-sm {
display: block;
@apply block;
}
}
</style>
57 changes: 11 additions & 46 deletions src/components/Footer/NewsletterCTA.css
Original file line number Diff line number Diff line change
@@ -1,85 +1,50 @@
.newsletter-cta {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-16x) var(--space-8x);
background-image: url(/images/newsletter_bg.svg);
background-position: center;
background-size: cover;
}

.newsletter-cta .hiddenLabel {
overflow: hidden;
display: none;
width: var(--space-0x);
height: var(--space-0x);
text-indent: 100%;
white-space: nowrap;
@apply flex flex-col items-center py-16 px-8 bg-center bg-cover bg-[url('/images/newsletter_bg.svg')];
}

.newsletter-cta :is(h2) {
margin-bottom: var(--space-12x);
@apply mb-12;
}

.newsletter-cta .w-inline-block {
max-width: 100%;
display: inline-block;
@apply max-w-full inline-block;
}

.form-subscribe {
max-width: 550px;
width: 100%;
@apply max-w-[550px] w-full;
}

.form-subscribe-field-wrapper {
display: flex;
gap: var(--space-2x);
flex-direction: column;
@apply flex gap-2 flex-col;
}

@media (min-width: 50em) {
.form-subscribe-field-wrapper {
flex-direction: row;

gap: var(--space-4x);
@apply flex-row gap-4;
}
}
.newsletter-cta .cta-subscribe-input {
width: 100%;
height: 56px;
max-height: 56px;
padding-right: 24px;
padding-left: 24px;
border-style: solid;
border-width: var(--border-width-secondary);
border-color: var(--gray-300);
border-radius: var(--border-radius-primary);
box-shadow: 0 12px 32px -12px rgb(12 22 44 / 32%);
@apply w-full h-[56px] max-h-[56px] px-6 border-solid border-2 border-gray-300 rounded-primary shadow-[0_12px_32px_-12px_rgba(12,22,44,0.32)];
}
.newsletter-cta .cta-subscribe-input::placeholder {
font-style: italic;
@apply italic;
}

/* #subscribe-button {
width: 100%;
} */
.subscribe-form-success-social {
margin-right: 4px;
margin-left: 4px;
@apply mx-1;
transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.subscribe-success-social {
margin-top: var(--space-2x);
display: flex;
justify-content: center;
@apply mt-2 flex justify-center;
}

.subscribe-form-success-social:hover {
transform: translate(0px, -4px);
}

.newsletter-cta .form-subscribe-checkbox {
display: block;
margin-top: var(--space-4x);
cursor: pointer;
@apply block mt-4 cursor-pointer;
}
2 changes: 1 addition & 1 deletion src/components/Footer/NewsletterCTA.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export type NewsletterCTAProps = {
}
export const NewsletterCTA = ({ title = "Stay updated on the latest Scroll news" }: NewsletterCTAProps) => {
return (
<section className={"newsletter-cta"}>
<section className="newsletter-cta">
<h2 className="cta-subscribe-h1 heading-600">{title}</h2>
<NewsletterSignupForm />
</section>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer/NewsletterSignupForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useState } from "preact/hooks"
import "./NewsletterCTA.css"
import button from "../../styles/cl-design-system/button.module.css"
import button from "../../styles/design-system/button.module.css"
import { clsx } from "~/lib"
import jsonp from "jsonp"
import toQueryString from "to-querystring"
Expand Down Expand Up @@ -54,7 +54,7 @@ export const NewsletterSignupForm = () => {
onSubmit={onSubmit}
>
<div className="form-subscribe-field-wrapper">
<label htmlFor="Email" className="hiddenLabel ">
<label htmlFor="Email" className="overflow-hidden hidden w-0 h-0 indent-[100%] whitespace-nowrap">
Email Address
</label>
<input
Expand Down
2 changes: 1 addition & 1 deletion src/components/HeadCommon.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import "../styles/migrated.css"
import "../styles/prism-darcula.css"
import "../styles/copy-to-clipboard.css"

import "../styles/cl-design-system/global-styles.css"
import "../styles/design-system/global-styles.css"
---

<!-- Global Metadata -->
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header/AstroLogo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ const { size } = Astro.props
<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
#flame {
fill: var(--theme-text-accent);
@apply fill-accent;
}
#a {
fill: var(--theme-text-accent);
@apply fill-accent;
}
</style>
<title>Logo</title>
Expand Down
Loading