diff --git a/css/brands.css b/css/brands.css index d3955484..3d8faa85 100644 --- a/css/brands.css +++ b/css/brands.css @@ -8,24 +8,26 @@ /* Brand Button Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Only include brand-specific button styling here */ -.button,button { - color:var(--button-text,#000000); - background-color:var(--button-background,transparent); - border:var(--button-border,none); - transition:filter 0.2s ease,transform 0.2s ease; +.button, +button { + color: var(--button-text, #000000); + background-color: var(--button-background, transparent); + border: var(--button-border, none); + transition: filter 0.2s ease, transform 0.2s ease; } /* Global Button Hover Effect –––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button:hover,button:hover { - filter:brightness(90%); - transform:translateY(-1px); +.button:hover, +button:hover { + filter: brightness(90%); + transform: translateY(-1px); } /* Button Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .icon { - filter:var(--icon-filter,none); + filter: var(--icon-filter, none); } /* Brand-Specific Styles @@ -33,561 +35,583 @@ /* Default */ .button.button-default { - --button-text:#ffffff; - --button-background:#2457F5; - --button-border:1px solid #ffffff; + --button-text: #ffffff; + --button-background: #2457f5; + --button-border: 1px solid #082fa5; +} + +/* White */ +.button.button-white { + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #1e1e1e; +} + +/* Purple */ +.button.button-purple { + --button-text: #ffffff; + --button-background: #692d8e; + --button-border: 1px solid #43016c; } /* Amazon */ .button-amazon { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Amazon Music */ .button-amazon-music { - --button-text:#000000; - --button-background:#25D1DA; + --button-text: #000000; + --button-background: #25d1da; } /* Apple App Store */ .button-appstore { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Apple Music */ .button-apple-music { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Apple Music Alt */ .button-apple-music-alt { - --button-text:#ffffff; - background-image:linear-gradient(to bottom,#FB5C74,#FA233B); + --button-text: #ffffff; + background-image: linear-gradient(to bottom, #fb5c74, #fa233b); } /* Apple Podcasts */ .button-apple-podcasts { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Apple Podcasts Alt */ .button-apple-podcasts-alt { - --button-text:#ffffff; - background-image:linear-gradient(to bottom,#F452FF,#832BC1); + --button-text: #ffffff; + background-image: linear-gradient(to bottom, #f452ff, #832bc1); } /* Bandcamp */ .button-bandcamp { - --button-text:#ffffff; - --button-background:#1d9fc3; + --button-text: #ffffff; + --button-background: #1d9fc3; } /* Behance */ .button-behance { - --button-text:#ffffff; - --button-background:#0057FF; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #0057ff; + --button-border: 1px solid #ffffff; } /* Bluesky */ .button-bluesky { - --button-text:#FFFFFF; - --button-background:#1185FE; + --button-text: #ffffff; + --button-background: #1185fe; } /* Bluesky Alt */ .button-bluesky-alt { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #000000; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #000000; } /* Buy Me a Coffee */ .button-coffee { - --button-text:#000000; - --button-background:#ffdd00; + --button-text: #000000; + --button-background: #ffdd00; } /* Cal.com */ .button-cal { - --button-text:#FFFFFF; - --button-background:#292929; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #292929; + --button-border: 1px solid #ffffff; } /* Calendly */ .button-calendly { - --button-text:#FFFFFF; - --button-background:#006BFF; + --button-text: #ffffff; + --button-background: #006bff; } /* Cash App */ .button-cash-app { - --button-text:#ffffff; - background-image:linear-gradient(to bottom,#00d64b,#00c244); + --button-text: #ffffff; + background-image: linear-gradient(to bottom, #00d64b, #00c244); } /* dev.to */ .button-dev-to { - --button-text:#000000; - --button-background:#f5f5f5; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #f5f5f5; + --button-border: 1px solid #212121; } /* Discogs */ .button-discogs { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #000000; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #000000; } /* Discogs Alt */ .button-discogs-alt { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Discord */ .button-discord { - --button-text:#ffffff; - --button-background:#5865F2; + --button-text: #ffffff; + --button-background: #5865f2; } /* Dribbble */ .button-dribbble { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Etsy */ .button-etsy { - --button-text:#ffffff; - --button-background:#F45800; + --button-text: #ffffff; + --button-background: #f45800; } /* Facebook */ .button-faceb { - --button-text:#ffffff; - --button-background:#1877f2; + --button-text: #ffffff; + --button-background: #1877f2; } /* Facebook Messenger */ .button-messenger { - --button-text:#ffffff; - background-image:linear-gradient(25deg,#0099ff,#5f5dff,#a033ff,#c740cc,#ff5280,#ff7061); + --button-text: #ffffff; + background-image: linear-gradient( + 25deg, + #0099ff, + #5f5dff, + #a033ff, + #c740cc, + #ff5280, + #ff7061 + ); } /* Figma */ .button-figma { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Fiverr */ .button-fiverr { - --button-text:#ffffff; - --button-background:#1DBF73; + --button-text: #ffffff; + --button-background: #1dbf73; } /* Flickr */ .button-flickr { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* GitHub */ .button-github { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* GitLab */ .button-gitlab { - --button-text:#ffffff; - --button-background:#6151b2; + --button-text: #ffffff; + --button-background: #6151b2; } /* GoFundMe */ .button-gofundme { - --button-text:#ffffff; - --button-background:#02A95C; + --button-text: #ffffff; + --button-background: #02a95c; } /* Goodreads */ .button-goodreads { - --button-text:#333333; - --button-background:#f3f1e6; - --button-border:1px solid #212121; + --button-text: #333333; + --button-background: #f3f1e6; + --button-border: 1px solid #212121; } /* Google Black */ .button-google-black { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Google Play Store */ .button-playstore { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Google Scholar */ .button-google-scholar { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Hashnode */ .button-hashnode { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Instagram */ .button-instagram { - --button-text:#ffffff; - background-image:linear-gradient(-135deg,#1400c8,#b900b4,#f50000); + --button-text: #ffffff; + background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); } /* Kick */ .button-kick { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #ffffff; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Kick Alt */ .button-kick-alt { - --button-text:#000000; - --button-background:#01e701; + --button-text: #000000; + --button-background: #01e701; } /* Kickstarter */ .button-kickstarter { - --button-text:#ffffff; - --button-background:#05ce78; + --button-text: #ffffff; + --button-background: #05ce78; } /* Kit */ .button-kit { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Ko-fi */ .button-ko-fi { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Last.fm */ .button-last-fm { - --button-text:#ffffff; - --button-background:#D51007; + --button-text: #ffffff; + --button-background: #d51007; } /* Letterboxd */ .button-letterboxd { - --button-text:#ffffff; - --button-background:#2c3440; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #2c3440; + --button-border: 1px solid #ffffff; } /* Line */ .button-line { - --button-text:#FFFFFF; - --button-background:#06C755; + --button-text: #ffffff; + --button-background: #06c755; } /* LinkedIn */ .button-linked { - --button-text:#ffffff; - --button-background:#2867b2; + --button-text: #ffffff; + --button-background: #2867b2; } /* Mailchimp */ .button-mailchimp { - --button-text:#000000; - --button-background:#FFE01B; + --button-text: #000000; + --button-background: #ffe01b; } /* Mastodon */ .button-mastodon { - --button-text:#ffffff; - --button-background:#17063B; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #17063b; + --button-border: 1px solid #ffffff; } /* Medium */ .button-medium { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Microsoft */ .button-microsoft { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Notion */ .button-notion { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* OnlyFans */ .button-onlyfans { - --button-text:#ffffff; - --button-background:#00AEEF; + --button-text: #ffffff; + --button-background: #00aeef; } /* Patreon */ .button-patreon { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* PayPal */ .button-paypal { - --button-text:#ffffff; - --button-background:#002991; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #002991; + --button-border: 1px solid #ffffff; } /* Pinterest */ .button-pinterest { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Product Hunt */ .button-product-hunt { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Read.cv */ .button-read-cv { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Reddit */ .button-reddit { - --button-text:#FFFFFF; - --button-background:#FF4500; + --button-text: #ffffff; + --button-background: #ff4500; } /* Shop */ .button-shop { - --button-text:#ffffff; - --button-background:#5A31F4; + --button-text: #ffffff; + --button-background: #5a31f4; } /* Signal */ .button-signal { - --button-text:#ffffff; - --button-background:#3a76f0; + --button-text: #ffffff; + --button-background: #3a76f0; } /* Slack */ .button-slack { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Snapchat */ .button-snapchat { - --button-text:#000000; - --button-background:#fffc00; + --button-text: #000000; + --button-background: #fffc00; } /* SoundCloud */ .button-soundcloud { - --button-text:#ffffff; - --button-background:#ff5500; + --button-text: #ffffff; + --button-background: #ff5500; } /* Spotify */ .button-spotify { - --button-text:#191414; - --button-background:#1db954; + --button-text: #191414; + --button-background: #1db954; } /* Spotify Alt */ .button-spotify-alt { - --button-text:#FFFFFF; - --button-background:#191414; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #191414; + --button-border: 1px solid #ffffff; } /* Square */ .button-square { - --button-text:#FFFFFF; - --button-background:#006AFF; + --button-text: #ffffff; + --button-background: #006aff; } /* Stack Overflow */ .button-stack-overflow { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #000000; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #000000; } /* Steam */ .button-steam { - --button-text:#ffffff; - background-image:linear-gradient(90deg,#08BBFF,#2B75FF); + --button-text: #ffffff; + background-image: linear-gradient(90deg, #08bbff, #2b75ff); } /* Steam Alt */ .button-steam-alt { - --button-text:#ffffff; - background-image:linear-gradient(90deg,#09172a,#072a57,#0c5085); - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085); + --button-border: 1px solid #ffffff; } /* Strava */ .button-strava { - --button-text:#ffffff; - --button-background:#fc5200; + --button-text: #ffffff; + --button-background: #fc5200; } /* Substack */ .button-substack { - --button-text:#ffffff; - --button-background:#FF6719; + --button-text: #ffffff; + --button-background: #ff6719; } /* Telegram */ .button-telegram { - --button-text:#ffffff; - --button-background:#3faee8; + --button-text: #ffffff; + --button-background: #3faee8; } /* Threads */ .button-threads { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Threema */ .button-threema { - --button-text:#000000; - --button-background:#3fe669; + --button-text: #000000; + --button-background: #3fe669; } /* TikTok */ .button-tiktok { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* Trello */ .button-trello { - --button-text:#ffffff; - --button-background:#0065ff; + --button-text: #ffffff; + --button-background: #0065ff; } /* Tumblr */ .button-tumb { - --button-text:#ffffff; - --button-background:#131313; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #131313; + --button-border: 1px solid #ffffff; } /* Twitch */ .button-twitch { - --button-text:#ffffff; - --button-background:#9146ff; + --button-text: #ffffff; + --button-background: #9146ff; } /* Unsplash */ .button-unsplash { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; + --button-text: #000000; + --button-background: #ffffff; + --button-border: 1px solid #212121; } /* Venmo */ .button-venmo { - --button-text:#ffffff; - --button-background:#008CFF; + --button-text: #ffffff; + --button-background: #008cff; } /* Vimeo */ .button-vimeo { - --button-text:#ffffff; - --button-background:#1ab7ea; + --button-text: #ffffff; + --button-background: #1ab7ea; } /* VSCO */ .button-vsco { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* WhatsApp */ .button-whatsapp { - --button-text:#ffffff; - --button-background:#455a64; + --button-text: #ffffff; + --button-background: #455a64; } /* WordPress */ .button-wordpress { - --button-text:#ffffff; - --button-background:#3858E9; + --button-text: #ffffff; + --button-background: #3858e9; } /* X */ .button-x { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #000000; + --button-border: 1px solid #ffffff; } /* YouTube */ .button-yt { - --button-text:#ffffff; - --button-background:#282828; - --button-border:1px solid #FFFFFF; + --button-text: #ffffff; + --button-background: #282828; + --button-border: 1px solid #ffffff; } /* Zoom */ .button-zoom { - --button-text:#ffffff; - --button-background:#0B5CFF; - --button-border:1px solid #FFFFFF; -} \ No newline at end of file + --button-text: #ffffff; + --button-background: #0b5cff; + --button-border: 1px solid #ffffff; +} diff --git a/css/style.css b/css/style.css index afb4ce46..5f5b6658 100644 --- a/css/style.css +++ b/css/style.css @@ -8,375 +8,419 @@ /* Base Typography Settings –––––––––––––––––––––––––––––––––––––––––––––––––– */ :root { - font-size:16px; + font-size: 16px; } /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ - .container { - position:relative; - width:100%; - max-width:37.5rem; /* 600px */ - text-align:center; - margin:0 auto; - padding:3rem 1.25rem 0 1.25rem; - box-sizing:border-box; +.container { + position: relative; + width: 100%; + max-width: 37.5rem; /* 600px */ + text-align: center; + margin: 0 auto; + padding: 3rem 1.25rem 0 1.25rem; + box-sizing: border-box; } .container-left { - position:relative; - width:100%; - max-width:37.5rem; - text-align:left; - margin:0 auto; - padding:0 1.25rem; - box-sizing:border-box; + position: relative; + width: 100%; + max-width: 37.5rem; + text-align: left; + margin: 0 auto; + padding: 0 1.25rem; + box-sizing: border-box; } .container-left p { - margin-bottom: 1rem; /* 16px space between paragraphs */ - } + margin-bottom: 1rem; /* 16px space between paragraphs */ +} .column { - position:center; - width:100%; - float:center; - box-sizing:border-box; + position: center; + width: 100%; + float: center; + box-sizing: border-box; } /* For devices larger than 400px */ - @media (min-width:25rem) { /* 400px */ - .container { - width:85%; - padding-left:0; - padding-right:0; -} -}/* For devices larger than 550px */ - @media (min-width:34.375rem) { /* 550px */ - .container { - width:80%; -} -.column,.columns { - margin-left:0; -} -.column:first-child,.columns:first-child { - margin-left:0; -} +@media (min-width: 25rem) { + /* 400px */ + .container { + width: 85%; + padding-left: 0; + padding-right: 0; + } +} /* For devices larger than 550px */ +@media (min-width: 34.375rem) { + /* 550px */ + .container { + width: 80%; + } + .column, + .columns { + margin-left: 0; + } + .column:first-child, + .columns:first-child { + margin-left: 0; + } } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ - body { - margin:0; - padding:0; - background-color:#ffffff; - color:#1a1a1a; - font-family:"Open Sans",system-ui; - font-size:1.125rem; /* 18px */ - font-weight:400; - line-height:1.6; +body { + margin: 0; + padding: 0; + background-color: #ffffff; + color: #1a1a1a; + font-family: "Open Sans", system-ui; + font-size: 1.125rem; /* 18px */ + font-weight: 400; + line-height: 1.6; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ - h1 { - margin:0 0 0.5rem 0; - font-size:3rem; /* 48px */ - font-weight:800; - line-height:1; - letter-spacing:0; - word-wrap:break-word; - overflow-wrap:break-word; - hyphens:auto; /* Delete this to remove automatic hyphen on line break */ +h1 { + margin: 0 0 0.5rem 0; + font-size: 3rem; /* 48px */ + font-weight: 800; + line-height: 1; + letter-spacing: 0; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; /* Delete this to remove automatic hyphen on line break */ } .container p { - margin:0 0 2rem 0; + margin: 0 0 2rem 0; } /* Base Typography Settings –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Base size - 16px browser default */ :root { - font-size:16px; /* Using a 1.25 modular scale for typography */ - --scale-0:1rem; /* 16px */ - --scale-1:1.25rem; /* 20px */ - --scale-2:1.563rem; /* 25px */ - --scale-3:1.953rem; /* 31px */ - --scale-4:2.441rem; /* 39px */ - --scale-5:3.052rem; /* 49px */ - + font-size: 16px; /* Using a 1.25 modular scale for typography */ + --scale-0: 1rem; /* 16px */ + --scale-1: 1.25rem; /* 20px */ + --scale-2: 1.563rem; /* 25px */ + --scale-3: 1.953rem; /* 31px */ + --scale-4: 2.441rem; /* 39px */ + --scale-5: 3.052rem; /* 49px */ + /* Spacing units */ - --spacing-xs:0.5rem; /* 8px */ - --spacing-s:1rem; /* 16px */ - --spacing-m:1.5rem; /* 24px */ - --spacing-l:2rem; /* 32px */ - --spacing-xl:3rem; /* 48px */ - --spacing-xxl:4rem; /* 64px */ + --spacing-xs: 0.5rem; /* 8px */ + --spacing-s: 1rem; /* 16px */ + --spacing-m: 1.5rem; /* 24px */ + --spacing-l: 2rem; /* 32px */ + --spacing-xl: 3rem; /* 48px */ + --spacing-xxl: 4rem; /* 64px */ } /* Avatar */ .avatar { - width: 8rem; /* 128px */ - height: 8rem; - border-radius: 50%; - object-fit: cover; - background-position: center; - margin-bottom: var(--spacing-l); - margin-left: auto; - margin-right: auto; - display: block; - } + width: 8rem; /* 128px */ + height: 8rem; + border-radius: 50%; + object-fit: cover; + background-position: center; + margin-bottom: var(--spacing-l); + margin-left: auto; + margin-right: auto; + display: block; +} /* Typography Scale */ h1 { - margin:0 0 var(--spacing-m) 0; - font-size:var(--scale-5); /* ~49px */ - font-weight:800; - line-height:1.1; - letter-spacing:-0.02em; - word-wrap:break-word; - overflow-wrap:break-word; + margin: 0 0 var(--spacing-m) 0; + font-size: var(--scale-5); /* ~49px */ + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.02em; + word-wrap: break-word; + overflow-wrap: break-word; } body { - font-size:var(--scale-1); /* 20px */ - line-height:1.6; + font-size: var(--scale-1); /* 20px */ + line-height: 1.6; } .container p { - margin:0 0 var(--spacing-xl) 0; - font-size:var(--scale-1); - line-height:1.6; + margin: 0 0 var(--spacing-xl) 0; + font-size: var(--scale-1); + line-height: 1.6; } /* Container spacing */ .container { - padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m); - text-align:center; + padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m); + text-align: center; } /* Footer */ footer { - margin:var(--spacing-xxl) 0; /* 4rem (64px) top and bottom */ - font-size:var(--scale-0); + margin: var(--spacing-xxl) 0; /* 4rem (64px) top and bottom */ + font-size: var(--scale-0); } /* Responsive adjustments */ -@media (max-width:34.375rem) { /* 550px */ +@media (max-width: 34.375rem) { + /* 550px */ h1 { - font-size:var(--scale-4); -} -body { - font-size:var(--scale-0); -} -.container p { - font-size:var(--scale-0); -} -.avatar { - margin-bottom:var(--spacing-m); -} -footer { - margin:var(--spacing-xl) 0; /* 3rem (48px) top and bottom */ -} + font-size: var(--scale-4); + } + body { + font-size: var(--scale-0); + } + .container p { + font-size: var(--scale-0); + } + .avatar { + margin-bottom: var(--spacing-m); + } + footer { + margin: var(--spacing-xl) 0; /* 3rem (48px) top and bottom */ + } } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ - a { - color:#2457F5; - text-decoration:underline; +a { + color: #2457f5; + text-decoration: underline; } a:hover { - color:#083BDA; + color: #083bda; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button,button { - display:inline-flex; - align-items:center; - justify-content:center; - width:18.75rem; /* 300px */ - min-height:3rem; /* 48px */ - padding:0.75rem 1rem; /* 12px ; 16px */ - font-size:1.125rem; /* 18px */ - font-weight:700; - text-decoration:none; - white-space:normal; - background-color:var(--button-background,transparent); - color:var(--button-text,#000000); - border:var(--button-border,none); - border-radius:0.5rem; - cursor:pointer; - box-sizing:border-box; - hyphens:auto; /* Delete this to remove automatic hyphen on line break */ - margin-bottom:1rem; - text-align:center; - line-height:1.3; +.button, +button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18.75rem; /* 300px */ + min-height: 3rem; /* 48px */ + padding: 0.75rem 1rem; /* 12px ; 16px */ + font-size: 1.125rem; /* 18px */ + font-weight: 700; + text-decoration: none; + white-space: normal; + background-color: var(--button-background, transparent); + color: var(--button-text, #000000); + border: var(--button-border, none); + border-radius: 0.5rem; + cursor: pointer; + box-sizing: border-box; + hyphens: auto; /* Delete this to remove automatic hyphen on line break */ + margin-bottom: 1rem; + text-align: center; + line-height: 1.3; } /* Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .icon { - width:1.25rem; - height:1.25rem; - margin-right:0.5rem; - flex-shrink:0; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.5rem; + flex-shrink: 0; } /* Avatar –––––––––––––––––––––––––––––––––––––––––––––––––– */ .avatar { - width: 8rem; /* 128px */ - height: 8rem; - object-fit: cover; - background-position: center; - margin-bottom: var(--spacing-l); - } + width: 8rem; /* 128px */ + height: 8rem; + object-fit: cover; + background-position: center; + margin-bottom: var(--spacing-l); +} - /* Modifier for no avatar rounding */ - .avatar--none { - border-radius: 0%; - } +/* Modifier for no avatar rounding */ +.avatar--none { + border-radius: 0%; +} - /* Modifier for rounded avatar */ - .avatar--rounded { - border-radius: 50%; - } - - /* Modifier for slightly rounded corners */ - .avatar--soft { - border-radius: 0.5rem; /* 8px rounded corners */ - } +/* Modifier for rounded avatar */ +.avatar--rounded { + border-radius: 50%; +} + +/* Modifier for slightly rounded corners */ +.avatar--soft { + border-radius: 0.5rem; /* 8px rounded corners */ +} /* Theme System –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Light theme is default above */ - + /* Dark theme */ :root.theme-dark { - color-scheme:dark; + color-scheme: dark; } :root.theme-dark :focus-visible { - outline: 2px solid #4899F7; - outline-offset: 2px; - } + outline: 2px solid #4899f7; + outline-offset: 2px; +} :root.theme-dark body { - background-color:#121212; - color:#ffffff; + background-color: #27272a; + color: #ffffff; } :root.theme-dark a:not(.button) { - color:#4899F7; + color: #4899f7; } :root.theme-dark a:not(.button):hover { - color:#7AB8FF; + color: #7ab8ff; } /* Auto theme */ :root.theme-auto { - color-scheme:light dark; + color-scheme: light dark; } -@media (prefers-color-scheme:dark) { - :root.theme-auto body { - background-color:#121212; - color:#ffffff; -} -:root.theme-auto :focus-visible { - outline: 2px solid #4899F7; +@media (prefers-color-scheme: dark) { + :root.theme-auto body { + background-color: #121212; + color: #ffffff; + } + :root.theme-auto :focus-visible { + outline: 2px solid #4899f7; outline-offset: 2px; } -:root.theme-auto a:not(.button) { - color:#4899F7; -} -:root.theme-auto a:not(.button):hover { - color:#7AB8FF; -} + :root.theme-auto a:not(.button) { + color: #4899f7; + } + :root.theme-auto a:not(.button):hover { + color: #7ab8ff; + } } /* Button Text Color Override –––––––––––––––––––––––––––––––––––––––––––––––––– */ - .button:hover,button:hover { - color:var(--button-text); +.button:hover, +button:hover { + color: var(--button-text); } /* Responsive Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ - @media (max-width:34.375rem) { /* 550px */ - h1 { - font-size:2rem; /* 32px */ - } - body { - font-size:1rem; /* 16px */ - } +@media (max-width: 34.375rem) { + /* 550px */ + h1 { + font-size: 2rem; /* 32px */ + } + body { + font-size: 1rem; /* 16px */ + } } /* Privacy Page Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ nav { - margin:var(--spacing-l) 0; - text-align:left; + margin: var(--spacing-l) 0; + text-align: left; } section { - margin:var(--spacing-xl) 0; - text-align:left; + margin: var(--spacing-xl) 0; + text-align: left; } h2 { - font-size:var(--scale-3); - font-weight:700; - margin-bottom:var(--spacing-m); + font-size: var(--scale-3); + font-weight: 700; + margin-bottom: var(--spacing-m); } h3 { - font-size:var(--scale-2); - font-weight:600; - margin:var(--spacing-l) 0 var(--spacing-s) 0; + font-size: var(--scale-2); + font-weight: 600; + margin: var(--spacing-l) 0 var(--spacing-s) 0; } ul { - list-style:none; - padding:0; - margin:0 0 var(--spacing-m) 0; + list-style: none; + padding: 0; + margin: 0 0 var(--spacing-m) 0; } ul li { - margin-bottom:var(--spacing-xs); + margin-bottom: var(--spacing-xs); } /* Privacy page specific responsive adjustments */ - @media (max-width:34.375rem) { - h2 { - font-size:var(--scale-2); - } - h3 { - font-size:var(--scale-1); - } - section { - margin:var(--spacing-l) 0; - } +@media (max-width: 34.375rem) { + h2 { + font-size: var(--scale-2); + } + h3 { + font-size: var(--scale-1); + } + section { + margin: var(--spacing-l) 0; + } } /* Font Face Definitions –––––––––––––––––––––––––––––––––––––––––––––––––– */ @font-face { - font-display:swap; - font-family:'Open Sans'; - font-style:normal; - font-weight:400; - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot'); - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg'); + font-display: swap; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot"); + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix") + format("embedded-opentype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2") + format("woff2"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff") + format("woff"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf") + format("truetype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans") + format("svg"); } @font-face { - font-display:swap; - font-family:'Open Sans'; - font-style:normal; - font-weight:600; - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot'); - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg'); + font-display: swap; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot"); + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix") + format("embedded-opentype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2") + format("woff2"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff") + format("woff"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf") + format("truetype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans") + format("svg"); } @font-face { - font-display:swap; - font-family:'Open Sans'; - font-style:normal; - font-weight:700; - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg'); + font-display: swap; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot"); + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix") + format("embedded-opentype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2") + format("woff2"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff") + format("woff"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf") + format("truetype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans") + format("svg"); } @font-face { - font-display:swap; - font-family:'Open Sans'; - font-style:normal; - font-weight:800; - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot'); - src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg'); + font-display: swap; + font-family: "Open Sans"; + font-style: normal; + font-weight: 800; + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot"); + src: url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix") + format("embedded-opentype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2") + format("woff2"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff") + format("woff"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf") + format("truetype"), + url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans") + format("svg"); } diff --git a/images/avatar.png b/images/avatar.png index b88ecad6..0af70e17 100644 Binary files a/images/avatar.png and b/images/avatar.png differ diff --git a/images/avatar@2x.png b/images/avatar@2x.png deleted file mode 100644 index 2255a425..00000000 Binary files a/images/avatar@2x.png and /dev/null differ diff --git a/images/icons/digital-garden.svg b/images/icons/digital-garden.svg new file mode 100644 index 00000000..7db6dff7 --- /dev/null +++ b/images/icons/digital-garden.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/resume.svg b/images/icons/resume.svg new file mode 100644 index 00000000..32902868 --- /dev/null +++ b/images/icons/resume.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 18f20bcb..9c2abeb4 100644 --- a/index.html +++ b/index.html @@ -7,33 +7,36 @@ - theme-dark: Forces dark theme --> - + - LittleLink + Hey! It's Justin! - - - - - - - - - - - - + + + + + + + + + + + + + + + @@ -49,328 +52,56 @@ Be sure to replace the src with your own image path and update the alt text --> - LittleLink + Justin Smith

-
LittleLink
+
Justin Smith

-

An open source DIY Linktree alternative.

+

Currently turning data challenges into streamlined solutions. I design real-time pipelines, event-driven systems, and architectures that perform and scale. Problem solver, tech enthusiast, and team player. Secret PCL Clearance — trustworthy and ready to deliver. 🚀

diff --git a/privacy.html b/privacy.html index f21e6674..f8cfb161 100644 --- a/privacy.html +++ b/privacy.html @@ -7,19 +7,19 @@ - theme-dark: Forces dark theme --> - + - Privacy Policy | LittleLink - + Privacy Policy | Justin Smith + - + @@ -42,10 +42,10 @@

Analytics

The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior.

-

Example LLC

+

Umami

@@ -54,10 +54,10 @@

This type of service allows you to view content hosted on external platforms directly from the pages of this website and interact with them.

This type of service might still collect web traffic data for the pages where the service is installed, even when Users do not use it.

-

Example LLC

+

GitHub

@@ -66,10 +66,10 @@

This type of service has the purpose of hosting Data and files that enable this website to exist.

Some services among those listed below, if any, may work through geographically distributed servers, making it difficult to determine the actual location where the Personal Data are stored.

-

Example LLC

+

Vercel