diff --git a/Gemfile b/Gemfile index d64c25b..bdf69d8 100644 --- a/Gemfile +++ b/Gemfile @@ -4,6 +4,8 @@ source "https://rubygems.org" gem "rails", "~> 8.0.0" # The modern asset pipeline for Rails [https://github.com/rails/propshaft] gem "propshaft" +# Inline SGVs +gem "inline_svg" # Use sqlite3 as the database for Active Record gem "sqlite3", ">= 2.1" # Use the Puma web server [https://github.com/puma/puma] diff --git a/Gemfile.lock b/Gemfile.lock index b7c8a62..42fa301 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -113,6 +113,9 @@ GEM activesupport (>= 6.1) i18n (1.14.7) concurrent-ruby (~> 1.0) + inline_svg (1.10.0) + activesupport (>= 3.0) + nokogiri (>= 1.6) io-console (0.8.0) irb (1.15.2) pp (>= 0.6.0) @@ -263,6 +266,7 @@ DEPENDENCIES capybara cssbundling-rails debug + inline_svg jbuilder jsbundling-rails propshaft diff --git a/app/assets/images/gent-blue.svg b/app/assets/images/gent-blue.svg new file mode 100644 index 0000000..62d977b --- /dev/null +++ b/app/assets/images/gent-blue.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/application.postcss.css b/app/assets/stylesheets/application.postcss.css index b1470bd..221b0ab 100644 --- a/app/assets/stylesheets/application.postcss.css +++ b/app/assets/stylesheets/application.postcss.css @@ -1,4 +1,40 @@ /* Entry point for your PostCSS build */ + +body { + font-family: "Fira Sans", sans-serif; + font-weight: 400; + font-size: 16px; +} + +h4 { + font-size: 20px; + font-weight: 600; +} + +.body-container { + max-width: 1024px; + margin: 1rem auto; +} + +.container { + background-color: #e6f8ff; + padding: 6rem 4rem; +} + +.title-card-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 3rem; +} + +.title-card-container { + text-decoration: none; + align-self: stretch; + color: black; + background-color: white; + padding: 1rem; +} + .politicians-listing { display: flex; flex-direction: row; @@ -30,7 +66,7 @@ .connections-grid { display: grid; - grid-template-columns: 25% 25% 25% 25%; + grid-template-columns: 1fr 1fr 1fr 1fr; } .connections-element { @@ -38,3 +74,23 @@ margin: 0.5em; padding: 1em; } + +@media (max-width: 1024px) { + .body-container { + max-width: 768px; + } + + .title-card-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 768px) { + .body-container { + max-width: 512px; + } + + .title-card-grid { + grid-template-columns: 1fr; + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 4d3a5e8..ee8cfc4 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,23 +1,35 @@ - - <%= content_for(:title) || "Entrance Exam" %> - - <%= csrf_meta_tags %> - <%= csp_meta_tag %> + + <%= content_for(:title) || "Entrance Exam" %> + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> - <%= yield :head %> + <%= yield :head %> - - - + + + - <%# Includes all stylesheet files in app/assets/stylesheets %> - <%= stylesheet_link_tag :app %> - <%= javascript_include_tag "application" %> - + <%# Includes all stylesheet files in app/assets/stylesheets %> + <%= stylesheet_link_tag :app %> + <%= javascript_include_tag "application" %> + - - <%= yield %> - + +
+
+ + <%= inline_svg_tag("gent-blue.svg") %> + + <%= content_for(:header) %> +
+
+
+ <%= yield %> +
+
+
+ diff --git a/app/views/sections/index.html.erb b/app/views/sections/index.html.erb index 056d6fd..b99360f 100644 --- a/app/views/sections/index.html.erb +++ b/app/views/sections/index.html.erb @@ -1,5 +1,8 @@ -<% @sections.each do |section| %> -

- <%= link_to section.title, section_url(section) %> -

-<% end %> +
+ <% @sections.each do |section| %> + <%= link_to(section_url(section), html_options = { class: 'title-card-container' }) do %> +

<%= section.title %>

+

<%= section.description %>

+ <% end %> + <% end %> +
diff --git a/app/views/sections/show.html.erb b/app/views/sections/show.html.erb index 5735bb9..a45b429 100644 --- a/app/views/sections/show.html.erb +++ b/app/views/sections/show.html.erb @@ -1,6 +1,7 @@ -<%= link_to sections_url do %>Home<% end %> -<% @sections.each do |section| %> - <%= link_to section.title, section_url(section) %> +<% content_for(:header) do %> + <% @sections.each do |section| %> + <%= link_to section.title, section_url(section) %> + <% end %> <% end %>

<%= @section.title %>

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 4873244..3ce9469 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -3,5 +3,9 @@ # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = "1.0" +InlineSvg.configure do |config| + config.raise_on_file_not_found = true +end + # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path diff --git a/gemset.nix b/gemset.nix index 4db494f..525baa9 100644 --- a/gemset.nix +++ b/gemset.nix @@ -370,6 +370,17 @@ }; version = "1.14.7"; }; + inline_svg = { + dependencies = ["activesupport" "nokogiri"]; + groups = ["default"]; + platforms = []; + source = { + remotes = ["https://rubygems.org"]; + sha256 = "03x1z55sh7cpb63g46cbd6135jmp13idcgqzqsnzinbg4cs2jrav"; + type = "gem"; + }; + version = "1.10.0"; + }; io-console = { groups = ["default" "development" "test"]; platforms = [{