From 4307f6182cd00baf7812d3d2b9e9974f0409d6cc Mon Sep 17 00:00:00 2001 From: Trevor Vallender Date: Fri, 18 Aug 2023 17:20:31 +0100 Subject: [PATCH] Initial CSS setup --- app/assets/stylesheets/_reset.css | 49 +++++++++++ app/assets/stylesheets/main.css | 116 +++++++++++++++++++++++++ app/views/layouts/application.html.erb | 28 +++--- app/views/sessions/new.html.erb | 4 +- app/views/users/new.html.erb | 2 +- config/application.rb | 12 +-- 6 files changed, 186 insertions(+), 25 deletions(-) create mode 100644 app/assets/stylesheets/_reset.css create mode 100644 app/assets/stylesheets/main.css diff --git a/app/assets/stylesheets/_reset.css b/app/assets/stylesheets/_reset.css new file mode 100644 index 0000000..d678be9 --- /dev/null +++ b/app/assets/stylesheets/_reset.css @@ -0,0 +1,49 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css new file mode 100644 index 0000000..63aa0f7 --- /dev/null +++ b/app/assets/stylesheets/main.css @@ -0,0 +1,116 @@ +:root { + --border-color: gray; + --highlight-color: #D36200; + --background-color: #CECECE; + --dark-background-color: #3A3A3A; + --inset-background-color: #FFFFFF; +} + +* { + box-sizing: border-box; +} + +body { + font-size: 1.2em; + font-family: sans-serif; + background-color: var(--background-color); +} + +h1, h2, h3, h4, h5, h6, h7 { + font-weight: bold; + padding: .5em 0; +} + +h1 { + font-size: 4em; + text-align: center; + color: var(--highlight-color); + -webkit-text-stroke: 1px var(--background-color); +} + +h2 { + font-size: 2.5em; +} + +header { + background-color: var(--dark-background-color); +} + +nav { + padding: 1em; + > ul { + text-align: center; + > li { + display: inline; + padding: 0 2em; + > a:link, > a:visited { + text-decoration: none; + font-size: 1.3em; + font-weight: bold; + } + > a:hover { + text-decoration: underline; + } + } + } +} + +a:link, a:visited { + color: var(--highlight-color); +} + +a:hover { + text-decoration: none; +} + +main { + padding: 1em; +} + +form { + display: grid; + grid-template-columns: 1fr 2fr; + gap: .5em; + align-items: center; + + max-width: 35em; + margin: 0 auto; + border: 1px solid var(--border-color); + border-radius: .5em; + font-size: 1.2em; + background-color: var(--inset-background-color); + box-shadow: .5em .5em 3em var(--dark-background-color); + + > label { + grid-column: 1; + text-align: right; + margin: 0 .1em 1em .5em; + } + + > input { + font-size: 1em; + grid-column: 2; + padding: .25em; + margin: 0 .5em 1em .1em; + } + + > input[type=submit] { + grid-column: 1/3; + margin: 0 .5em 1em .5em; + background-color: var(--highlight-color); + border: 1px solid var(--border-color); + border-radius: .25em; + } + + > input[type=text]:focus, > input[type=password]:focus, > textarea:focus { + box-shadow: 0 0 10px var(--highlight-color); + } + + > h2 { + text-align: center; + font-size: 1.5em; + background-color: var(--highlight-color); + grid-column: 1/3; + border-radius: .2em .2em 0 0; + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 8bb64ea..580a39e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,19 +11,21 @@ -

Summon Player

- +
+

Summon Player

+ +
<% flash.each do |type, msg| %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index 16776a5..cd892b9 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,6 +1,6 @@ -<%= t ".log_in" %> - <%= form_with url: sessions_path, method: :post do |f| %> +

<%= t ".log_in" %>

+ <%= f.label :username %> <%= f.text_field :username %> diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb index 282ab0b..a4ea91c 100644 --- a/app/views/users/new.html.erb +++ b/app/views/users/new.html.erb @@ -1,5 +1,5 @@ - <%= form_with model: @user do |f| %> +

<%= t(".register") %>

<%= f.label :username %> <%= f.text_field :username %> diff --git a/config/application.rb b/config/application.rb index 0c766dd..5f62e2a 100644 --- a/config/application.rb +++ b/config/application.rb @@ -1,5 +1,6 @@ -require_relative "boot" +# frozen_string_literal: true +require_relative "boot" require "rails/all" # Require the gems listed in Gemfile, including any gems @@ -8,15 +9,8 @@ Bundler.require(*Rails.groups) module SummonPlayer class Application < Rails::Application - # Initialize configuration defaults for originally generated Rails version. config.load_defaults 7.0 - # Configuration for the application, engines, and railties goes here. - # - # These settings can be overridden in specific environments using the files - # in config/environments, which are processed later. - # - # config.time_zone = "Central Time (US & Canada)" - # config.eager_load_paths << Rails.root.join("extras") + config.time_zone = "London" end end