Create a standard css & overall visual style for Minis and apply to template

[patudom]

(Once we have the "standard," we can retroactively apply it to existing Minis).

General

• Set up use of accent-color/accent-color2 that can be specified in each new Mini and then is always applied in the same ways in css/vue components (buttons/text headers, etc). Note: in the RadWave Mini, I added a new thing called button-color because the SME team requested that the buttons and border be different colors, whereas in older minis, they were always the same. So we probably want to set it up so we can specify a different button color if needed; else it defaults to the accent-color.
• Where possible, create duplicated content as a component in common folder.
• Standardize how we specify different screen sizes and style content based on screen size and which breakpoints we want to use. For example, from AnnularEclipse2023.vue - this way of specifying booleans for screen size was handy, but we probably don't need this many screen size breakpoints:

    smallSize(): boolean {
      return this.$vuetify.display.smAndDown;
    },
    smAndUp(): boolean {
      return this.$vuetify.display.smAndUp;
    },
    xSmallSize(): boolean {
      return this.$vuetify.display.xs;
    },
    mobile(): boolean {
      return this.smallSize && this.touchscreen;
    },

Splash Screen

• Border radius
• Font size
• Margins/padding
• Credit icons

Buttons overlaid on WWT canvas

• Consistent style for active/inactive/in focus buttons Our design scheme needs to match accessibility guidelines for contrast and for keyboard controls.
• Consistent placement? (Or ok to leave those on a case-by-case basis for different Minis?)
• Consistent styling for sliders
• Consistent styling for galleries

Information text

• Consistent formatting of Information/WWT tabs
• Consistent size/line spacing/formatting for fonts for paragraphs and different header styles

Credit Icons

• Use consistent size/spacing across different Minis. (We tried to make this a component, but there was some issue about the Minis not being able to access the images from a location specified by the common folder). (We have fixed this issue).

CSS

• Organize content in css to have an order that is consistent with the vue content. (Especially for the annular eclipse mini, there were so many different css specifications that appear in a kind of jumbled order - mostly my fault for building it piecemeal without having a big picture plan).
• Keep font sizes/styles consistent in css.