Add basic styling

carisaelam · Sep 3, 2024 · 56a453c · 56a453c
1 parent 2b21478
commit 56a453c
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,5 @@
 !/app/assets/builds/.keep
 
 /node_modules
+
+/app/assets/stylesheets/logo_info.txt
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,3 +1,98 @@
+/* Josh Comeau Modern CSS 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;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  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;
+}
+/*
+  8. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/* End CSS Reset */
+
+:root {
+  --title-font: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+
+  --paragraph-font: 'IBM Plex Sans', system-ui, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+* {
+  font-family: var(--paragraph-font);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--title-font);
+  margin-bottom: 1rem;
+}
+
 .header__image__container {
   display: flex;
-}
+  margin-bottom: 2rem;
+}
+
+.body__container {
+  padding: 1rem;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,6 +4,9 @@
     <title><%= content_for(:title) || "Line Of Thought" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Questrial:regular" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic" rel="stylesheet" />
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -18,7 +21,9 @@
   </head>
 
   <body>
-    <%= render '/shared/header' %>
-    <%= yield %>
+    <div class="body__container">
+      <%= render '/shared/header' %>
+      <%= yield %>
+    </div>
   </body>
 </html>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
@@ -1,3 +1,4 @@
 <div class="header__image__container">
   <%= image_tag('logo.png', style: 'width: clamp(10rem, 50vw, 40rem); margin-inline: auto;') %>
-</div>
+</div>
+