add scss

43461049 · sftblw · 7ca45ebb · 43461049 · 43461049 · 43461049
Commit 43461049 authored Apr 28, 2022 by sftblw
--- a/Gemfile
+++ b/Gemfile
@@ -43,7 +43,7 @@ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
 gem "bootsnap", require: false

 # Use Sass to process CSS
-# gem "sassc-rails"
+gem "sassc-rails"

 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -93,6 +93,7 @@ GEM
      reline (>= 0.2.7)
    digest (3.1.0)
    erubi (1.10.0)
+    ffi (1.15.5)
    globalid (1.0.0)
      activesupport (>= 5.0)
    i18n (1.10.0)
@@ -175,6 +176,14 @@ GEM
    ruby-debug-ide (0.7.3)
      rake (>= 0.8.1)
    rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
    selenium-webdriver (4.1.0)
      childprocess (>= 0.5, < 5.0)
      rexml (~> 3.2, >= 3.2.5)
@@ -191,6 +200,7 @@ GEM
      railties (>= 6.0.0)
    strscan (3.0.1)
    thor (1.2.1)
+    tilt (2.0.10)
    timeout (0.2.0)
    turbo-rails (1.0.1)
      actionpack (>= 6.0.0)
@@ -227,6 +237,7 @@ DEPENDENCIES
  puma (~> 5.0)
  rails (~> 7.0.2, >= 7.0.2.3)
  ruby-debug-ide
+  sassc-rails
  selenium-webdriver
  sprockets-rails
  sqlite3 (~> 1.4)

--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -12,4 +12,33 @@
 *
 *= require_tree .
 *= require_self
- */
\ No newline at end of file
+ */
+*, body {
+  padding: 0; margin: 0;
+}
+header {
+  padding: 1em;
+  border-bottom: 1px solid grey;
+
+  // https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  h1 { font-size: 1.5em; }
+
+  nav {
+    flex-grow: 1;
+    text-align: right;
+    ul li {
+      display: inline-block;
+      a { padding: 1em; }
+    }
+
+
+  }
+}
+
+main {
+  padding: 1em;
+}
\ No newline at end of file
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
 class HomeController < ApplicationController
+  def index
+
+  end
 end
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -9,13 +9,18 @@
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
-  <nav>
-    <h1>아무말 콜렉터</h1>
-    <ul>
-      <li><%= link_to "아무말", sentences_path %></li>
-    </ul>
-  </nav>
  <body>
-    <%= yield %>
+    <header>
+      <h1>아무말 콜렉터</h1>
+      <nav>
+        <ul>
+          <li><%= link_to "홈", root_path %></li>
+          <li><%= link_to "아무말", sentences_path %></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <%= yield %>
+    </main>
  </body>
 </html>
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -25,7 +25,8 @@ Rails.application.configure do
  config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?

  # Compress CSS using a preprocessor.
-  # config.assets.css_compressor = :sass
+  config.assets.css_compressor = :sass
+  config.assets.js_compressor = :terser

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -7,6 +7,6 @@ Rails.application.config.assets.version = "1.0"
 # Rails.application.config.assets.paths << Emoji.images_path

 # Precompile additional assets.
-# application.js, application.css, and all non-JS/CSS in the app/assets
+# application.js, application.scss, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )