I am new to ionic and stencil.
I have a basic page and it is not displaying the content inside the ionic-content tags. I can see it in the DOM and that the page has reserved space but it appears to be being hidden once the .css loads somehow.
What am I doing wrong?
Running using the stencil dev environment
@stencil/core 2.8.1
Chrome Version 94.0.4606.61 (Official Build) (64-bit) for Windows
index.html:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Edify</title>
<meta name="Description" content="Edify takes enterprise architecture data and makes it beautiful">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#052c44">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="apple-touch-icon" href="/assets/icon/icon.png">
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
</ion-app>
</body>
</html>
app.css:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
font-family: 'dolce_vita_heavybold';
src: url('assets/fonts/dolce_vita_heavy_bold-webfont.woff2') format('woff2'),
url('assets/fonts/dolce_vita_heavy_bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dolce_vita_lightregular';
src: url('assets/fonts/dolce_vita_light-webfont.woff2') format('woff2'),
url('assets/fonts/dolce_vita_light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dolce_vitaregular';
src: url('assets/fonts/dolce_vita-webfont.woff2') format('woff2'),
url('assets/fonts/dolce_vita-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Set variables for all modes */
:root {
/* Set the background of the entire app */
--ion-background-color: #052c44;
/* Set the font family of the entire app */
--ion-font-family: 'Poppins', sans-serif;
--ion-color-primary: #052c44;
--ion-color-primary-rgb: 5,44,68;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #04273c;
--ion-color-primary-tint: #1e4157;
--ion-color-secondary: #e49d22;
--ion-color-secondary-rgb: 228,157,34;
--ion-color-secondary-contrast: #000000;
--ion-color-secondary-contrast-rgb: 0,0,0;
--ion-color-secondary-shade: #c98a1e;
--ion-color-secondary-tint: #e7a738;
--ion-color-tertiary: #3b5974;
--ion-color-tertiary-rgb: 59,89,116;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #344e66;
--ion-color-tertiary-tint: #4f6a82;
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45,211,111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255,196,9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235,68,90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34,36,40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255,255,255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146,148,156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255,255,255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244,245,248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
--ion-toolbar-background: #e49d22;
}