I used to use a LinkTree, but I wanted a little more flexibility and something that didn't feel so... promotional. I just wanted a place with links to things I'm working on.

Anyway, I found this alternative called LittleLink.io by Seth Cottle, which is a simple HTML site with little buttons. Since it's all HTML, you can really go hog-wild; he's got a great video discussing how to customize it. Making LittleLink Yours - YouTube

I wanted to customize mine a little more, make the buttons a little bigger, etc. This was a bit of a bigger project than just customizing the links, so I wanted to go into what I did differently below.

Before we get started, here's my site for you to see the differences between a default LittleLink site (LittleLink.io) and my own (Wyz.Guru).

Changing the Buttons

I wanted my buttons to be a little wider with more details about the target site. Since I'm using this site to share my projects, I needed to share more context than just the site name.

I added a new group of classes for button content so that I could format the text differently; each button would have a "Title" and "subtext." I experimented with changing the subtext transparency to make it a little darker, but I found it made it hard to read against certain background colors, and switched it back.

I also wanted to switch around the icons, since now that we've got subtext, each button has a more vertical feel.

But then I ran into a problem on devices with smaller screens; everything was justified incorrectly. It took some experimenting, but I found that changing the rules to apply to devices with a maximum width of 25rem instead of a min-width of 25rem got most of it, and changing the button width to 100% with a max width of 25rem instead of as a set value allowed the site to render cleanly on smaller screens.

In the CSS below, I've included the Buttons and Icons sections with all of the changes, and an HTML sample of one of the buttons.

.column {
	position:center;
	width:100%;
	float:center;
	box-sizing:border-box;
}
/* For devices up to 400px */
  @media (max-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%;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,button {
	display:inline-flex;
	flex-direction: column;
	align-items:center;
	justify-content:flex-start;
	width: 100%;
	max-width:25rem;             	/* 400px */
 	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;
}

/* remove the right‐margin on the icon since we’re vertical */
.button .icon {
  margin-right: 0;
  margin-bottom: var(--spacing-s);
}

/* main title */
.btn-title {
  font-size: var(--scale-2);  /* e.g. ~25px */
  font-weight: 700;
  line-height: 1.2;
}

/* subtext / description */
.btn-subtext {
  font-size: var(--scale-0);  /* e.g. 16px */
  line-height: 1.3;
  margin-top: 0.25rem;
}



/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
  width: 4rem;
  height: 4rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

Here's the WisDump button as an example; for most of the buttons, I used one of the standard brand color sets, but for Wisdump I wanted to match the color of the logo, so I created a new button profile (button-wisdump) and updated the colors (CSS not shown).

<!-- Wisdump -->
  <a class="button button-wisdump" href="https://wisdump.work/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/wisdump.svg" alt="WisDump Logo">
	<span class="btn-content">
	  <span class="btn-title">WisDump</span>
	  <br>
	  <span class="btn-subtext">Personal Blog, Projects, Braindump, and Catch-all</span>
	</span>
  </a>

Fonts and Colors

I decided that I didn't like the sans-serif default font, and wanted to use Garamond instead. Garamond never answered the phone, so I settled for EB Garamond, an open Google Font that I could easily integrate.

To reduce visitor tracking, I downloaded the font from Google and added the variable font ttf file to the Fonts folder. This means that rather than ping Google every time someone visits the site and loads the font, it's just there and ready to go.

To change this, I went to the bottom of style.css and replaced the set of Open Sans font definitions for different weights to one for EB Garamond.

/* Font Face Definitions
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: bold;
  /* declare the full weight range your variable font supports */
  font-weight: 100 900;
  src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
}

I then searched for "Open Sans" and in the style sheet and replaced it with "EB Garamond" (only appearing once in the "Base Styles" section).

Deploying to Cloudflare

Since I am well-established on Cloudflare, I figured it would be easiest to manage this site from there. Because there isn't a build process (it's just an HTML file and CSS formatting), you don't need any special configuration.

In Cloudflare, go to "Workers & Pages," select "Create," linked the repo, and left the build command and output empty.

Let me say that again: the build command and build output values should be left empty.

Finally, I connected the domain I wanted to use and I was done! Or I would have been if I had done any of this in the order I described, and not through constant trial and error and many unnecessary commits.