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

Jump to bottom

update font colors and sizing to match personal branding #8

Open
ProsperousHeart opened this issue Dec 21, 2022 · 5 comments · Fixed by #25 or #28
Open

update font colors and sizing to match personal branding #8

ProsperousHeart opened this issue Dec 21, 2022 · 5 comments · Fixed by #25 or #28
Assignees
@ProsperousHeart
Labels
enhancement requirement Requirement of project

Comments

@ProsperousHeart
Copy link
Owner

right now it is whatever was part of bootstrap and the templates originally based on
@ProsperousHeart ProsperousHeart added enhancement requirement Requirement of project labels Dec 21, 2022
@ProsperousHeart ProsperousHeart self-assigned this Dec 21, 2022
@ProsperousHeart ProsperousHeart mentioned this issue Dec 22, 2022
Open
@ProsperousHeart
Copy link
Owner Author

header active sections are now pink instead of maroon

@ProsperousHeart
Copy link
Owner Author

ProsperousHeart commented Dec 22, 2022 •
edited
Loading

putting specific personal branding on hold - need to update so it looks nice as is - personal branding colors & fonts can be done later

Looking at the following fonts:

image

image

image

  • Baloo 2 --- looks weird but my words look ok?

image

image

image

image

image

  • Marhey - also strange but my letters look good

image

image

image

image

image

image

image

image

image

image

image

@ProsperousHeart
Copy link
Owner Author

ProsperousHeart commented Dec 23, 2022 •
edited
Loading

Original Styling

Libre Baskerville

CSS Names file name font-size font-weight line-height Font To Change To
body base.css 1.6rem 400 (regular) 1.875 ?
em, i base.css ? 400 (regular - italics) ? ?
strong, b base.css ? 400 (regular - italics) ? ?
table base.css ? 400 (regular) ? ?
abbr base.css ? 700 (bold) ? ?
.page-header__title blog.css (not currently in use - may use to point to my own blog on WP) ? 700 (bold) ? ?

Montserrat

CSS Names font-weight font-size line-height letter-spacing text-transform file name Font To Change To
p.lead 400 (regular) 2rem 1.8 ? ? 00-base.css ?
blockquote p 400 (regular) 2.1rem 1.857 ? ? 00-base.css ?
blockquote cite 400 (regular) 1.4rem 1.5 ? ? 00-base.css ?
.alert-box 400 (regular) 1.5rem 1.6 ? ? 01-main.css ?
.header-menu-toggle 400 (regular) 1.4rem ? .2rem uppercase 02-home.css ?
.item-folio__cat 400 (regular) 1.5rem N/A N/A N/A 04-projects.css ?
.testimonials__author span 400 (regular) 1.3rem N/A 0 none 06-testimonials.css ?
h1, h2, h3, h4, h5, h6 (COMMENTED OUT) 500 (medium) ? ? ? ? 00-base.css ?
section-intro h3 600 (semi-bold) 2rem ? .15rem uppercase 00-sections.css ?
.btn, button, input[type="submit"], input[type="reset"], input[type="button"] 600 (semi-bold) font-size = 1.2rem line-height calculated letter-spacing: .3rem text-transform: uppercase 01-main.css ?
.home-content__scroll a 600 (semi-bold) font-size = 1.1rem ? letter-spacing: .3rem text-transform: uppercase 02-home.css ?
.item-folio__title 600 (semi-bold) 1.4rem N/A N/A uppercase 04-projects.css ?
.s-contact .form-field label 600 (semi bold) 1.1rem 2.4rem .1rem uppercase 10-contact.css ?
th 700 (bold) ? ? ? ? 00-base.css ?
.drop-cap:first-letter 700 (bold) ? 8.4rem 6rem .16rem uppercase - 01-main.css ?
.header-nav-wrap 700 (bold) 11px ? .25rem uppercase 02-home.css ?
.home-social 700 (bold) ? ? ? ? 02-home.css ?
.timeline__header .timeline__timeframe 700 (bold) 1.4rem 1.5rem .15rem uppercase 04-xp.css ?
.submit-loader .text-loader 700 (bold) 1.4rem N/A .2rem; uppercase 10-contact.css ?
.header-nav li.current a 800 (extra bold) ? ? ? ? 02-home.css ?
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select 400 (regular) 1.5rem 3rem N/A N/A 10-contact.css ?
label, legend 700 (bold) 1.4rem 1.714rem N/A N/A 10-contact.css ?
label > .label-text 400 (regular) N/A inherit N/A N/A 10-contact.css ?
footer 400 (regular) 14px N/A N/A N/A 11-footer.css ?
.footer-social 400 (regular) 1.3rem N/A .3rem uppercase 11-footer.css ?

Across the Board

Libre Baskerville

CSS Names font-weight font-size line-height file name Font To Change To
.section-intro h1 700 (bold) ? ? sections.css ?
.home-content h1 700 (bold) ? ? home.css ?
.testimonials-header h1 700 (bold) ? ? testimonials.css ?

Montserrat

CSS Names font-weight font-size line-height letter-spacing text-transform file name Font To Change To
- h1, .h01 700 (bold) 3.6rem 1.25rem -.1rem N/A 00-base.css ?
.home-content h3 700 (bold) ? 1.8rem .5rem uppercase 02-home.css ?
h6, .h06 700 (bold) 1.4rem 1.5 .16rem uppercase 00-base.css ?

Additional Info

  • There may be others later - will deal with that when the time comes
  • did not touch Montserrat for blog.css

@ProsperousHeart ProsperousHeart mentioned this issue Dec 23, 2022
Closed
@ProsperousHeart
Copy link
Owner Author

[fonts chosen for at LEAST general font + my name](CSS rules to specify families)

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Fredoka:wght@300;400;500;600;700&family=Grandstander:wght@200&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+Cherokee:wght@200;300;400;500;700&family=Radio+Canada:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Readex+Pro:wght@200;300;400;500;600;700&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,700;0,800;1,400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,800;1,400;1,700&family=Spline+Sans:wght@300;400;500;600;700&family=Urbanist:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;1,400&family=Yaldevi:wght@400;500;600;700&display=swap" rel="stylesheet">

CSS rules to specify families:

font-family: 'Comfortaa', cursive;
font-family: 'Fredoka', sans-serif;
font-family: 'Grandstander', cursive;
font-family: 'Libre Franklin', sans-serif;
font-family: 'Noto Sans Cherokee', sans-serif;
font-family: 'Radio Canada', sans-serif;
font-family: 'Readex Pro', sans-serif;
font-family: 'Red Hat Display', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Spline Sans', sans-serif;
font-family: 'Urbanist', sans-serif;
font-family: 'Yaldevi', sans-serif;

ProsperousHeart added a commit that referenced this issue Dec 24, 2022
@ProsperousHeart
Merge pull request #25 from ProsperousHeart/updates
ae6e37f 
multiple UX updates for #8 and #16
@ProsperousHeart ProsperousHeart mentioned this issue Dec 24, 2022
Merged
@ProsperousHeart ProsperousHeart linked a pull request Dec 28, 2022 that will close this issue
Optimizing CSS #28
Merged
@ProsperousHeart ProsperousHeart mentioned this issue Jan 23, 2023
Closed
@ProsperousHeart ProsperousHeart mentioned this issue Feb 7, 2023
Merged
@ProsperousHeart
Copy link
Owner Author

leaving open for the fonts - may update with the fonts later

@ProsperousHeart ProsperousHeart mentioned this issue Feb 13, 2023
Merged
@ProsperousHeart ProsperousHeart mentioned this issue May 9, 2023
Merged
ProsperousHeart added a commit that referenced this issue May 9, 2023
@ProsperousHeart
Merge pull request #53 from ProsperousHeart/updates-react
167ce17 
updates since migration to React:
- documentation updates
- updates from publishing with GitHub pages
- additional testimonials
- creation of Projects section
- addition of Projects section into nav bar
- updates to WayPoints with new section
- code cleanup (not complete)

resolves #51 
resolves #12 
related to #8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ProsperousHeart ProsperousHeart

Labels
enhancement requirement Requirement of project
Projects
None yet
Milestone
No milestone
1 participant
@ProsperousHeart