[FEATURE]: improve the styling of the site

[slackermorris]

• web design in 4 minutes

body {
  margin: 0 auto;
  max-width: 50em;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  padding: 4em 1em;
}

[slackermorris]

The site is not responsive at all. I need to ensure that the site is usable on mobile phones? Or I could just show an error page if the site is accessed on a phone in the meantime.

Yeah, what about just having a:

Sorry, I don't support mobiles

Perhaps with something like:

Or like this:

Or like this.

[slackermorris]

I could use react-device-detect to offer Desktop and Mobile specific UI's.

[slackermorris]

I want to add a background image to the do not support mobile Component.

In order to use images in Remix do I need to make use of Asset Preloading.

Or perhaps I import it directly and tag it as an image source? https://stackoverflow.com/questions/71015461/how-to-load-svg-components-in-remix-run-application/72928536#72928536

[slackermorris]

This doesn't seem right:

bg-[url('../../build/_assets/miguel-cruz-illustration-LGBWTWVJ.png')]

Surely I don't have to specify the build directory?

[slackermorris]

I think perhaps I should do the Remix Jokes Tutorial.

[slackermorris]

How to style a Remix app using just CSS

[slackermorris]

This is the exact issue that I have been having.

[slackermorris]

Perhaps my issue resides in not understanding the difference between relative and absolute paths?

• https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

[slackermorris]

It seems like people are having the same issue: https://github.com/tailwindlabs/tailwindcss/discussions/6617

[slackermorris]

I have left a comment on the tailwind forum so I will be watching the response on it.

The recommended fix didn't work. So I did string interpolation using.. I'm not too sure what. I think it is something native offered by Remix. But basically:

import image from '../public/image.png';

return {
     <div className={`... bg-[($image)]`}/>
}

[slackermorris]

I am moving onto trying to extract common styling from the level of the Component, e.g. Title, into Tailwind so that generic styles are managed via Tailwind.

This is a good resource.

O.K. I figured it out. I needed to point Tailwind to my entry CSS file, which makes use of CSS directives and to add custom CSS.

• https://tailwindcss.com/docs/installation#:~:text=Run%20the%20CLI%20tool%20to%20scan%20your%20template%20files%20for%20classes%20and%20build%20your%20CSS.

[slackermorris]

There are these annoying generated files server/_assets that I would like to get rid of. I'm not sure how..

[slackermorris]

I intend to read more on styling best practices.

This is really interesting. Abstracting away styles:

import clsx from 'clsx';
import * as React from 'react';

export default function Tag({
  children,
  className,
  ...rest
}: React.ComponentPropsWithoutRef<'button'>) {
  return (
    <button
      className={clsx(
        className,
        'inline-block rounded-md px-1.5 py-0.5 font-medium transition-colors',
        'bg-gray-100 text-gray-700 hover:text-black disabled:bg-gray-200 disabled:text-gray-300',
        'focus:outline-none focus-visible:ring focus-visible:ring-primary-300 disabled:cursor-not-allowed'
      )}
      {...rest}
    >
      {children}
    </button>
  );
}

Is there an issue w/r/t passing and applying classNames as props? See the point made here.

[slackermorris]

There is a really annoying issue of there being scrolling on pages where scrolling need not be occurring. It might have something to do with setting the height of <body/> as that of the viewport.

• https://stackoverflow.com/questions/12989931/body-height-100-displaying-vertical-scrollbar
• https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space

[slackermorris]

I fixed the above by explicitly setting the height of the <body/> contents. Something like flex h-[calc(100vh-4rem)]. With 4rem being the height of the fixed-in-place header.

[slackermorris]

Some random style thoughts/links:

// [TYPEFACE]: // https://fontsinuse.com/uses/47122/paul-and-the-microcosm-wenzel-rehbach // https://fontsinuse.com/uses/46970/frow // https://fontsinuse.com/uses/43980/ekin-fil-aquarius-pisces-single-cover // https://fontsinuse.com/uses/45808/futurissimo-l-utopie-du-design-italien

// [IRREGULAR CSS SHAPES]: // https://stackoverflow.com/questions/23711059/trapezium-shape-with-rounded-corners-and-pure-css // http://jsfiddle.net/webtiki/umV38/ // https://www.w3.org/TR/2010/WD-css3-background-20100612/Overview.src.html //

// [ADVANCED CSS]: // https://developpaper.com/css-advanced-use-css-gradient-to-make-gorgeous-gradient-texture-background-effect/ // peelable sticker (with animation): https://codepen.io/patrickkunka/details/DeZQXw // http://www.coding-dude.com/wp/css/highlight-text-css/ // https://alvarotrigo.com/blog/css-highlight-text/