search

ProsperousHeart / ProsperousHeart.github.io

My Digital Resume
https://resume.prosperousheart.com
3 stars 0 forks source link

update font colors and sizing to match personal branding #8

Open ProsperousHeart opened 1 year ago

ProsperousHeart commented 1 year ago

right now it is whatever was part of bootstrap and the templates originally based on

ProsperousHeart commented 1 year ago

header active sections are now pink instead of maroon

ProsperousHeart commented 1 year ago

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

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

ProsperousHeart commented 1 year ago

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 ?
.timelineheader .timelinetimeframe 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

ProsperousHeart commented 1 year ago

[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 commented 1 year ago

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