Blank annotation for mockup image

[jarmoza]

@surchs For Friday's demo. Just drop an image in the assets folder and enter its name in the mockupImage.filename variable in the data object in annotation.vue

[surchs]

Awesome @jarmoza, thanks a lot! I'll check it out

[surchs]

@jarmoza I commented out the transform: translateY(50%) section to have the screenshot sit up top. We can revise that before we merge if you'd like

[jarmoza]

@surchs The translateY part is purely for aesthetics to center the image vertically. It's not a block. Feel free to merge if you want.

[surchs]

I have one question about stylesheet placement. Otherwise I think this is good to go @jarmoza

[surchs]

Does it make sense for the css to live in its own corner of the project? I'm worried that if each page has a stylesheet section it may become tricky to keep them in sync. This is just for demo now, but "nothing is as permanent as a temporary solution" (someone, probabably)

[jarmoza]

Global styles can be stored and made accessible using this addition to the nuxt.config.js file. See: https://nuxtjs.org/docs/configuration-glossary/configuration-css/#style-extensions

Typically I would tend to list global styles in a file like that and local ones per component if they are not going to be used elsewhere.

In Vue, the latter is accomplished by including the 'scoped' keyword as a boolean attribute in the style tag. (https://vue-loader.vuejs.org/guide/scoped-css.html) Otherwise, any style defined in a component file is considered global – and yes, can be initially confusing if referenced elsewhere.

[jarmoza]

@surchs We can go ahead and adopt that change if you want. We'll make a global css file in the assets/css folder.