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

Base font size change #853

Merged
merged 12 commits into from
Mar 4, 2024
Merged

Base font size change #853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2846821
change base font size to 16 in spectre.css overrides
austensen Feb 28, 2024
062cd86
update all rem sizes with `Math.round($1 / 1.6 * 100) / 100`
austensen Feb 28, 2024
00b5700
copy spectre files, remove from package.json
austensen Feb 29, 2024
078e960
convert all spectre rem values for 10px to 16px base size
austensen Feb 29, 2024
4830ef4
update yarn lock to remove spectre
austensen Feb 29, 2024
6a62689
update import path
austensen Feb 29, 2024
fbaa927
set new base font size to 16px
austensen Feb 29, 2024
22b7606
prettier
austensen Feb 29, 2024
2addbc5
change borders from rem px (1px, 2px, 3px)
austensen Feb 29, 2024
83357bd
changing more borders to px within spectre
austensen Feb 29, 2024
41de2f8
remove explicit font sze in html to use default 16px
austensen Feb 29, 2024
5dbcf28
prettier
austensen Feb 29, 2024
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
5 changes: 2 additions & 3 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@
"resize-observer-polyfill": "^1.5.1",
"rollbar": "^2.14.4",
"sass": "^1.49.9",
"spectre.scss": "0.0.2",
"typescript": "^4.9.3",
"widont": "^0.3.3",
"xstate": "^4.11.0"
Expand All @@ -88,8 +87,8 @@
"contentful": "node pull-contentful-data.js",
"contentful-common-strings": "contentful-common-strings fetch -o src/data/common-strings.json",
"typecheck": "tsc",
"build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/",
"watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/ --watch",
"build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/",
"watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --watch",
"start-js": "lingui compile && react-scripts start",
"start": "yarn contentful-common-strings --dev && npm-run-all -p watch-css start-js",
"build": "yarn contentful-common-strings && node write-version.js && yarn build-css && lingui compile && react-scripts build",
Expand Down
12 changes: 6 additions & 6 deletions client/src/components/CloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import classNames from "classnames";
type CloseButtonProps = withI18nProps & {
onClick: () => void;
/**
* Stroke width for the X svg (Default: "0.1rem")
* Stroke width for the X svg (Default: "1px")
*/
strokeWidth?: number | string;
/**
* Width for the X svg (Default: "1.6rem")
* Width for the X svg (Default: "1rem")
*/
width?: number | string;
/**
* Height for the X svg (Default: "1.6rem")
* Height for the X svg (Default: "1rem")
*/
height?: number | string;
className?: string;
Expand All @@ -29,9 +29,9 @@ export const CloseButton = withI18n()(
({
i18n,
onClick,
strokeWidth = "0.1rem",
height = "1.6rem",
width = "1.6rem",
strokeWidth = "1px",
height = "1rem",
width = "1rem",
className,
}: CloseButtonProps) => (
<button
Expand Down
2 changes: 1 addition & 1 deletion client/src/containers/PrivacyPolicyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const PrivacyPolicyPage = withI18n()((props: withI18nProps) => {
<Page title={i18n._(t`Privacy policy`)}>
<div className="PrivacyPolicy Page">
<div className="Page__content">
<h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
<h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
<p>Effective Date: October 18th, 2018 </p>
<h4> Introduction </h4>
<p>
Expand Down
2 changes: 1 addition & 1 deletion client/src/containers/TermsOfUsePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const TermsOfUsePage = withI18n()((props: withI18nProps) => {
<Page title={i18n._(t`Terms of use`)}>
<div className="TermsOfUse Page">
<div className="Page__content">
<h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Terms of Use</h4>
<h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Terms of Use</h4>
<p> Effective Date: October 18th, 2018 </p>
<p>
<b>
Expand Down
2 changes: 1 addition & 1 deletion client/src/styles/AboutPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
max-width: 60%;
margin-left: 0;
margin-right: 0;
margin-bottom: 1.25rem;
margin-bottom: 0.78rem;

@include for-phone-only() {
max-width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions client/src/styles/Accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "_vars.scss";

details.accordion {
padding: 1.6rem 1.6rem 1.6rem 0.8rem;
padding: 1rem 1rem 1rem 0.5rem;
@include for-phone-only() {
padding-left: 0;
padding-right: 0;
Expand Down Expand Up @@ -35,7 +35,7 @@ details.accordion {
}

> div {
margin-top: 1.8rem;
margin-top: 1.13rem;
}

summary {
Expand Down
30 changes: 15 additions & 15 deletions client/src/styles/AccountSettingsPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
text-decoration: none;
text-align: left !important;
font-weight: 700;
padding-top: 0.6rem;
margin: 5.6rem 1.6rem 2.6rem;
padding-top: 0.37rem;
margin: 3.5rem 1rem 1.63rem;
}

h4.settings-section {
Expand All @@ -16,36 +16,36 @@
}

label {
font-size: 1.3rem;
font-size: 0.81rem;
font-weight: 600;
}

p {
font-size: 1.3rem;
font-size: 0.81rem;
font-weight: 500;
}

.settings-contact {
margin: 6rem 2rem 5rem;
margin: 3.75rem 1.25rem 3.13rem;
text-align: center;
}

.settings-no-subscriptions {
padding: 1.6rem;
padding: 1rem;
background-color: $justfix-grey-50;
border-radius: 4px;
margin: auto 1.6rem;
margin: auto 1rem;
}
}

.UserSetting {
form {
display: flex;
flex-direction: column;
margin: 3.2rem 1.6rem;
margin: 2rem 1rem;

p {
margin: -1rem 0 0.6rem 0;
margin: -0.63rem 0 0.37rem 0;
}
}

Expand All @@ -60,14 +60,14 @@
.user-setting-actions {
display: flex;
justify-content: right;
margin-top: 1.6rem;
margin-top: 1rem;

@include for-phone-only() {
justify-content: center;
}

input[type="submit"] {
margin: 0 1.6rem 0 0 !important;
margin: 0 1rem 0 0 !important;
}
}

Expand All @@ -76,22 +76,22 @@
// vars marked !important bc typography mixin is not available for inconsolata
font-weight: 600 !important;
font-family: $wow-font !important;
font-size: 1.3rem !important;
font-size: 0.81rem !important;

text-align: left;
margin-bottom: 1.6rem;
margin-bottom: 1rem;
}

.password-input-label {
margin-bottom: -1rem !important;
margin-bottom: -0.63rem !important;
}

.password-input-rules {
display: flex;
flex-direction: column;

span:last-child {
margin-bottom: 0.6rem !important;
margin-bottom: 0.37rem !important;
}
}
}
4 changes: 2 additions & 2 deletions client/src/styles/AddressPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@

h1 {
margin-bottom: 0;
font-size: 2rem;
font-size: 1.25rem;

&.primary {
line-height: 20px;
margin-bottom: 20px;

@include for-phone-only() {
font-size: 1.8rem;
font-size: 1.13rem;
}

a {
Expand Down
2 changes: 1 addition & 1 deletion client/src/styles/AddressSearch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

.geosuggest__item {
margin-top: 0;
padding: 0.75rem 1rem;
padding: 0.47rem 0.63rem;
list-style-type: none;

&:hover {
Expand Down
6 changes: 3 additions & 3 deletions client/src/styles/AddressToolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@

.btn-group {
flex-wrap: nowrap;
min-width: 19rem;
padding-left: 0.8rem;
min-width: 11.88rem;
padding-left: 0.5rem;
}

ul.menu {
border: 1px solid $gray-dark;
padding: 0;
width: 24rem;
width: 15rem;
right: 0;
left: inherit;
list-style: disc inside none;
Expand Down
36 changes: 18 additions & 18 deletions client/src/styles/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@
}

.App__banner {
padding: 0.5rem 1.5rem;
padding: 0.31rem 0.94rem;
color: $wowza-dark;
position: relative;

.close-button {
color: $wowza-dark;
position: absolute;
right: 0.5rem;
right: 0.31rem;
top: 0rem;
padding: 0 1rem;
font-size: 2rem;
padding: 0 0.63rem;
font-size: 1.25rem;
height: 100%;
cursor: pointer;
&:hover {
Expand Down Expand Up @@ -123,7 +123,7 @@
margin-top: 0rem;
height: min-content;
@include for-phone-only {
font-size: 1rem;
font-size: 0.63rem;
width: min-content;
}
}
Expand All @@ -133,10 +133,10 @@
color: $justfix-white;
line-height: 1.2;
font-weight: bold;
font-size: 1.8rem;
font-size: 1.13rem;

@include for-tablet-portrait-up() {
font-size: 2.4rem;
font-size: 1.5rem;
}
}

Expand All @@ -155,7 +155,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 -1rem 0;
margin: 0 -0.63rem 0;
}

nav {
Expand Down Expand Up @@ -190,8 +190,8 @@
text-decoration: none;
color: inherit;
display: inline;
margin: 0 -0.8rem;
padding: 0.6rem 0.8rem;
margin: 0 -0.5rem;
padding: 0.37rem 0.5rem;
}

.language-toggle a {
Expand Down Expand Up @@ -232,7 +232,7 @@ div.Page {
}
p {
// line-height: 1.6;
margin-bottom: 1.25rem;
margin-bottom: 0.78rem;
}

.page-container {
Expand All @@ -241,9 +241,9 @@ div.Page {
text-align: center;
}

width: min(calc(100vw - 4rem), 60rem);
max-width: 60rem;
margin: 4rem auto;
width: min(calc(100vw - 2.5rem), 37.5rem);
max-width: 37.5rem;
margin: 2.5rem auto;

form {
display: flex;
Expand All @@ -254,7 +254,7 @@ div.Page {
}

input[type="submit"] {
margin: 1rem auto;
margin: 0.63rem auto;
}
}
}
Expand All @@ -272,7 +272,7 @@ div.Page {
// mobile
@include for-tablet-landscape-down() {
h5 {
margin-top: 4rem;
margin-top: 2.5rem;
}
aside {
margin-top: 48px;
Expand All @@ -299,8 +299,8 @@ div.Page {
}
figcaption {
max-width: 300px;
margin: 1rem auto;
font-size: 1.25rem;
margin: 0.63rem auto;
font-size: 0.78rem;
line-height: 1.1;
}
}
Expand Down
Loading