init

routes/styles.css

@@ -0,0 +1,129 @@
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+*:not(dialog) {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/*
+  real css
+*/
+
+body {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  margin: 0 auto;
+  --brand-color: rebeccapurple;
+}
+
+header {
+  background-color: var(--brand-color);
+  color: whitesmoke;
+  font-weight: bold;
+  font-size: 50px;
+  padding: 1.5em 1em 1em 1em;
+}
+
+main {
+  padding: 1em;
+}
+
+footer {
+  background-color: var(--brand-color);
+  color: whitesmoke;
+  padding: 2em 1em;
+  margin-top: 3em;
+}
+
+p {
+  line-height: 1.3;
+}
+
+header > div,
+main,
+footer > div {
+  width: 100%;
+  max-width: 30rem;
+  margin: 0 auto;
+}
+
+header > a,
+a:visited {
+  color: white;
+}
+
+a:hover {
+  text-decoration-line: none;
+}