diff --git a/assets/css/app.css b/assets/css/app.css
index 426111f..e666e2a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,13 +1,74 @@
-@layer theme, layout;
+@layer reset theme,layout;
@font-face {
font-family: "BerkeleyMono";
- src: url("/assets/BerkeleyMonoVariable-Regular") format("woff2");
+ src: url("/fonts/BerkeleyMonoVariable-Regular.woff2") format("woff2");
}
@font-face {
font-family: "BerkeleyMonoItalic";
- src: url("/assets/BerkeleyMonoVariable-Italic") format("woff2");
+ src: url("/fonts/BerkeleyMonoVariable-Italic.woff2") format("woff2");
+}
+
+@layer reset {
+ /*
+ 1. Use a more-intuitive box-sizing model.
+ */
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+ /*
+ 2. Remove default margin
+ */
+ * {
+ margin: 0;
+ }
+ /*
+ Typographic tweaks!
+ 3. Add accessible line-height
+ 4. Improve text rendering
+ */
+ body {
+ line-height: 1.5;
+ }
+ /*
+ 5. Improve media defaults
+ */
+ img,
+ picture,
+ video,
+ canvas,
+ svg {
+ display: block;
+ max-width: 100%;
+ }
+ /*
+ 6. Remove built-in form typography styles
+ */
+ input,
+ button,
+ textarea,
+ select {
+ font: inherit;
+ }
+ /*
+ 7. Avoid text overflows
+ */
+ p,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ overflow-wrap: break-word;
+ }
+
+ p {
+ margin-bottom: 1em;
+ }
}
@layer theme {
@@ -18,9 +79,7 @@
--main-background-color: #001626;
--main-text-color: #ffffff;
- --default-grid-repeat: 3;
- --default-grid-gap: 3vmax;
- --fluid-min: 35ch;
+ --default-grid-gap: 0vmax;
}
}
@@ -30,5 +89,73 @@
body {
color: var(--main-text-color);
background: var(--main-background-color);
- font: BerkeleyMono;
+ font-family: var(--header-font);
+ margin: 1rem;
+}
+
+main {
+ display: grid;
+ gap: var(--default-grid-gap);
+ grid-template-areas:
+ "header"
+ "sidebar"
+ "content"
+ "sidebar2"
+ "footer";
+ overflow: hidden;
+ height: 90vh;
+}
+
+@media only screen and (min-width: 600px) {
+ body {
+ margin: 1rem;
+ }
+
+ main {
+ grid-template-columns: 1fr 4fr;
+ grid-template-areas:
+ "header header"
+ "sidebar content"
+ "sidebar2 sidebar2"
+ "footer footer";
+ }
+}
+
+@media only screen and (min-width: 1100px) {
+ body {
+ margin: 1rem 5rem;
+ }
+
+ main {
+ grid-template-columns: min-content 3fr min-content;
+ grid-template-areas:
+ "header header header"
+ "sidebar content sidebar2"
+ "footer footer footer";
+ }
+}
+
+header {
+ grid-area: header;
+ color: var(--main-accent-color);
+}
+
+div#sidebar {
+ grid-area: sidebar;
+}
+
+div#sidebar2 {
+ grid-area: sidebar2;
+}
+
+div#content {
+ grid-area: content;
+ padding: 0 1em;
+}
+
+footer {
+ grid-area: footer;
+}
+
+.gridbox {
}
diff --git a/lib/jol_web/components/layouts/app.html.heex b/lib/jol_web/components/layouts/app.html.heex
index 0132b69..c0ecf4b 100644
--- a/lib/jol_web/components/layouts/app.html.heex
+++ b/lib/jol_web/components/layouts/app.html.heex
@@ -1,6 +1,11 @@
-Jessica Phoenix Canady
+
Hey I'm Jessica.
+You probably know me from nothing.
+Suggit.