Skip to content
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.

Sign up for GitHub

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

Remove header.css and replace with tailwind styles #784

Merged
merged 5 commits into from
Oct 9, 2020
Merged

Remove header.css and replace with tailwind styles #784

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b314341
Fully remove header.css
Oct 8, 2020
e24cc4a
add typography file
Oct 8, 2020
a50cb44
actually remove header.css
Oct 8, 2020
3336fa6
Merge branch 'master' into organize-css
Oct 8, 2020
0baa9f1
try to retrigger snyk
Oct 9, 2020
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
295 changes: 0 additions & 295 deletions app/assets/stylesheets/header.css
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion app/assets/stylesheets/homepage.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions app/assets/stylesheets/tailwind/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@layer components {
.container {
@apply mx-auto w-full;
}
}
38 changes: 27 additions & 11 deletions app/assets/stylesheets/tailwind/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
font-size: 62.5%;
Expand All @@ -13,7 +15,7 @@ h2 {
}

a {
@apply underline text-base;
@apply underline text-smaller;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the old css file had a smaller size for anchors - without this change, all the links on pages outside of signedout.html got larger and no longer matched the rest of the paragraph text.

}

p {
Expand All @@ -24,22 +26,36 @@ li {
@apply text-base leading-tight;
}

.btn {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will probably split out buttons and other form elements into another file in the next PR

padding: .526315em .789473em .263157em;
@apply no-underline inline-block text-white text-smaller leading-tight;
}

.btn-blue {
background-color: theme("colors.blue.lighter");
@apply py-4 px-5 font-bold no-underline border-b-2;
@apply px-5 py-4 border-b-2 border-black font-bold text-black text-base;
}

.btn-light {
color: theme("colors.green.default");
border-color: theme("colors.green.default");
background-color: theme("colors.white.default");
@apply py-4 px-6 font-bold no-underline border-2;
border-bottom: 4px solid theme("colors.green.dark");
.btn-green {
background-color: theme("colors.green.default");
box-shadow: 0 2px 0 theme("colors.green.border");
}
.btn-green:hover {
background-color: theme("colors.green.hover");
}

@tailwind components;

@tailwind utilities;
/* Homepage Button */
#contact-form .btn {
color: theme("colors.green.darker");
border-color: theme("colors.green.darker");
background-color: theme("colors.white.default");
@apply px-6 py-4 border-b-4 font-bold border-2;
border-bottom: 4px solid;
box-shadow: none;
}
#contact-form .btn:hover {
@apply bg-gray-selected;
}

.input {
border-color: #000;
Expand Down
4 changes: 4 additions & 0 deletions app/assets/stylesheets/tailwind/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@layer components {
/* links */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typography instead of links?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure what will end up in this file. I named it typography so that it could hold things like headers, paragraphs, links. But I haven't touched any headers or paragraphs yet.


}
2 changes: 1 addition & 1 deletion app/templates/components/page-footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<button
data-button-id={{button_id}}
type="submit"
class="btn-light text-base outline-none focus:shadow-outline hover:bg-gray-selected button{% if destructive %}-destructive{% endif %}"
class="btn btn-green text-base outline-none focus:shadow-outline {% if destructive %}-destructive{% endif %}"
{% if button_name %}name="{{ button_name }}"{% endif %}
{% if button_value %}value="{{ button_value }}"{% endif %}
>
Expand Down
Loading