From d448b78f91b5fdb19d120ad8e695756b86599c51 Mon Sep 17 00:00:00 2001 From: Mike Rockwell Date: Thu, 17 Jul 2025 11:51:22 -0400 Subject: [PATCH] removed unused styles, added font, button, and value block styles --- style.css | 657 +++++------------------------------------------------- 1 file changed, 61 insertions(+), 596 deletions(-) diff --git a/style.css b/style.css index 9bfde9b..793b32c 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,16 @@ +/* Font Face Definitions + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + +@font-face { + font-family: "IBM Plex Sans"; + src: url(fonts/IBMPlexSans.ttf) +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url(fonts/IBMPlexMono.ttf) +} + /* * LittleLink Reset * A minimal CSS reset for LittleLink @@ -159,7 +172,7 @@ a { padding:0; background-color:#ffffff; color:#1a1a1a; - font-family:"Open Sans",system-ui; + font-family:"IBM Plex Sans",sans-serif; font-size:1.125rem; /* 18px */ font-weight:400; line-height:1.6; @@ -175,7 +188,6 @@ a { 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; @@ -187,7 +199,7 @@ a { :root { font-size:16px; /* Using a 1.25 modular scale for typography */ --scale-0:1rem; /* 16px */ - --scale-1:1.25rem; /* 20px */ + --scale-1:1.125rem; /* 20px */ --scale-2:1.563rem; /* 25px */ --scale-3:1.953rem; /* 31px */ --scale-4:2.441rem; /* 39px */ @@ -320,21 +332,11 @@ a:hover { margin-bottom: var(--spacing-l); } - /* 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 */ - } - /* Theme System –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Light theme is default above */ @@ -438,41 +440,6 @@ ul li { } } -/* 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-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-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-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'); -} - /* * LittleLink Button Styles * https://littlelink.io @@ -509,376 +476,38 @@ ul li { /* Default */ .button.button-default { --button-text:#ffffff; - --button-background:#2457F5; - --button-border:1px solid #ffffff; + --button-background:#0085ff; } -/* Amazon */ -.button-amazon { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; +/* Beeper */ +.button-beeper { + --button-text:#ffffff; + --button-background:#355bf3; } -/* Amazon Music */ -.button-amazon-music { - --button-text:#000000; - --button-background:#25D1DA; -} - -/* Apple App Store */ -.button-appstore { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* Apple Invites */ -.button-invites { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* Apple Music */ -.button-apple-music { +/* Initial Charge */ +.button-initialcharge { --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); -} - -/* Apple Podcasts */ -.button-apple-podcasts { - --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); -} - -/* Bandcamp */ -.button-bandcamp { - --button-text:#ffffff; - --button-background:#1d9fc3; -} - -/* Behance */ -.button-behance { - --button-text:#ffffff; - --button-background:#0057FF; - --button-border:1px solid #FFFFFF; -} - -/* Bluesky */ -.button-bluesky { - --button-text:#FFFFFF; - --button-background:#1185FE; -} - -/* Bluesky Alt */ -.button-bluesky-alt { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #000000; -} - -/* Buy Me a Coffee */ -.button-coffee { - --button-text:#000000; - --button-background:#ffdd00; -} - -/* Cal.com */ -.button-cal { - --button-text:#FFFFFF; - --button-background:#292929; - --button-border:1px solid #FFFFFF; -} - -/* Calendly */ -.button-calendly { - --button-text:#FFFFFF; - --button-background:#006BFF; -} - -/* Cash App */ -.button-cash-app { - --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; -} - -/* Discogs */ -.button-discogs { - --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; -} - -/* Discord */ -.button-discord { - --button-text:#ffffff; - --button-background:#5865F2; -} - -/* Dribbble */ -.button-dribbble { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; -} - -/* Etsy */ -.button-etsy { - --button-text:#ffffff; - --button-background:#F45800; -} - -/* Facebook */ -.button-faceb { - --button-text:#ffffff; - --button-background:#0866FF; -} - -/* Facebook Messenger */ -.button-messenger { - --button-text:#ffffff; - --button-background:#0866FF; -} - -/* Figma */ -.button-figma { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* Fiverr */ -.button-fiverr { - --button-text:#ffffff; - --button-background:#1DBF73; -} - -/* Flickr */ -.button-flickr { - --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; -} - -/* GitLab */ -.button-gitlab { - --button-text:#ffffff; - --button-background:#6151b2; -} - -/* GoFundMe */ -.button-gofundme { - --button-text:#ffffff; - --button-background:#02A95C; -} - -/* Goodreads */ -.button-goodreads { - --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; -} - -/* Google Play Store */ -.button-playstore { - --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; -} - -/* Hashnode */ -.button-hashnode { - --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); -} - -/* Kick */ -.button-kick { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #ffffff; -} - -/* Kick Alt */ -.button-kick-alt { - --button-text:#000000; - --button-background:#01e701; -} - -/* Kickstarter */ -.button-kickstarter { - --button-text:#ffffff; - --button-background:#05ce78; -} - -/* Kit */ -.button-kit { - --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-border:2px solid #ffffff; } /* Last.fm */ .button-last-fm { --button-text:#ffffff; - --button-background:#D51007; -} - -/* Letterboxd */ -.button-letterboxd { - --button-text:#ffffff; - --button-background:#2c3440; - --button-border:1px solid #FFFFFF; -} - -/* Line */ -.button-line { - --button-text:#FFFFFF; - --button-background:#06C755; -} - -/* LinkedIn */ -.button-linked { - --button-text:#ffffff; - --button-background:#2867b2; -} - -/* Mailchimp */ -.button-mailchimp { - --button-text:#000000; - --button-background:#FFE01B; + --button-background:#f71414; } /* Mastodon */ .button-mastodon { --button-text:#ffffff; - --button-background:#17063B; - --button-border:1px solid #FFFFFF; + --button-background:#1f232b; } -/* Matrix */ -.button-matrix { +/* MetaGamerScore */ +.button-metagamerscore { --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #000000; -} - -/* Meetup */ -.button-meetup { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #000000; -} - -/* Meetup Alt */ -.button-meetup-alt { - --button-text:#ffffff; - --button-background:#ED1C40; -} - -/* Medium */ -.button-medium { - --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; -} - -/* Notion */ -.button-notion { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; -} - -/* Obsidian */ -.button.button-obsidian { - --button-text:#ffffff; - --button-background:#262626; - --button-border:1px solid #ffffff; -} - -/* OnlyFans */ -.button-onlyfans { - --button-text:#ffffff; - --button-background:#00AEEF; -} - -/* Patreon */ -.button-patreon { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; + --button-background:#f0f0f0; } /* PayPal */ @@ -888,221 +517,57 @@ ul li { --button-border:1px solid #FFFFFF; } -/* Pinterest */ -.button-pinterest { +/* Pixelfed */ +.button-pixelfed { --button-text:#000000; --button-background:#ffffff; - --button-border:1px solid #212121; + --button-border:2px solid #000000; } -/* Product Hunt */ -.button-product-hunt { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; -} - -/* Reddit */ -.button-reddit { - --button-text:#FFFFFF; - --button-background:#FF4500; -} - -/* Shop */ -.button-shop { +/* Value for Value */ +.button-v4v { --button-text:#ffffff; - --button-background:#5A31F4; + --button-background:#1DBF73; } -/* Signal */ -.button-signal { +/* Value for Value */ +.button-v4v { --button-text:#ffffff; - --button-background:#3B45FD; + --button-background:#1DBF73; } -/* Signal Alt */ -.button-signal-alt { - --button-text:#3B45FD; - --button-background:#E3E8FE; - --button-border:1px solid #000000; +/* Custom Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +details.value-block > summary { + list-style: none; + width: fit-content; + margin-left: auto; + margin-right: auto; } -/* Slack */ -.button-slack { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #212121; +details.value-block > summary::-webkit-details-marker { + display: none; } -/* Snapchat */ -.button-snapchat { - --button-text:#000000; - --button-background:#fffc00; +.value-block ul { + list-style-type: none; + padding-inline-start: 0; } -/* SoundCloud */ -.button-soundcloud { - --button-text:#ffffff; - --button-background:#ff5500; +.value-block code { + font-size: .75rem } -/* Spotify */ -.button-spotify { - --button-text:#191414; - --button-background:#1db954; +code, kbd, pre, samp { + font-family: "IBM Plex Mono", monospace; } -/* Spotify Alt */ -.button-spotify-alt { - --button-text:#FFFFFF; - --button-background:#191414; - --button-border:1px solid #FFFFFF; -} - -/* Square */ -.button-square { - --button-text:#FFFFFF; - --button-background:#006AFF; -} - -/* Stack Overflow */ -.button-stack-overflow { - --button-text:#000000; - --button-background:#FFFFFF; - --button-border:1px solid #000000; -} - -/* Steam */ -.button-steam { - --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; -} - -/* Strava */ -.button-strava { - --button-text:#ffffff; - --button-background:#fc5200; -} - -/* Substack */ -.button-substack { - --button-text:#ffffff; - --button-background:#FF6719; -} - -/* Telegram */ -.button-telegram { - --button-text:#ffffff; - --button-background:#3faee8; -} - -/* Threads */ -.button-threads { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* Threema */ -.button-threema { - --button-text:#000000; - --button-background:#3fe669; -} - -/* TikTok */ -.button-tiktok { - --button-text:#ffffff; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* Trello */ -.button-trello { - --button-text:#ffffff; - --button-background:#0065ff; -} - -/* Tumblr */ -.button-tumb { - --button-text:#ffffff; - --button-background:#131313; - --button-border:1px solid #FFFFFF; -} - -/* Twitch */ -.button-twitch { - --button-text:#ffffff; - --button-background:#9146ff; -} - -/* Unsplash */ -.button-unsplash { - --button-text:#000000; - --button-background:#ffffff; - --button-border:1px solid #212121; -} - -/* Venmo */ -.button-venmo { - --button-text:#ffffff; - --button-background:#008CFF; -} - -/* Vimeo */ -.button-vimeo { - --button-text:#ffffff; - --button-background:#1ab7ea; -} - -/* VSCO */ -.button-vsco { - --button-text:#FFFFFF; - --button-background:#000000; - --button-border:1px solid #FFFFFF; -} - -/* WhatsApp */ -.button-whatsapp { - --button-text:#ffffff; - --button-background:#455a64; -} - -/* WordPress */ -.button-wordpress { - --button-text:#ffffff; - --button-background:#3858E9; -} - -/* X */ -.button-x { - --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; -} - -/* YouTube Alt */ -.button-yt-alt { - --button-text:#ffffff; - --button-background:#FF0000; -} - -/* Zoom */ -.button-zoom { - --button-text:#ffffff; - --button-background:#0B5CFF; - --button-border:1px solid #FFFFFF; +.value-block code { + padding: .2rem .5rem; + margin: 0 .2rem; + white-space: nowrap; + background: #f1f1f1; + border: 1px solid #e1e1e1; + border-radius: 4px; }