rails/guides/source/layout.html.erb
John Athayde ee4a371645
Guides Dark Mode fixes (#51444)
* Guides feedback fixes

@claudioduarte in https://github.com/rails/rails/discussions/51415

- [x] Make alt, shorter SVG line for mobile, add responsive style
- [x] Add side padding on footer (goes to edge on mobile, does not align on desktop)
- [x] Shrink overall height of subCol so it doesn’t overlap footer

@ivanjuric in https://github.com/rails/rails/discussions/51398

- [x] Flip inverted dark modes on “more Ruby on Rails” nav bar

DHH/Core:

- [x] Darker dark mode (Github style)
- [x] Double box on WIP call out (index.html. editable?)
- [x] NavBar bottom issue clipping on some guides (pad the content?)
- [x] Rounded corners/better appearance on select form elements in header
- [x] Black border on bottom of interstitials

* Additional UI cleanup

- [x] tightening up white space, adding Rails brand HR after intro
- [x] base fontsize to 16px from 18px;
- [x] fixing some darker dark mode issues in the last commit

* Lightening syntax highlight colors
2024-03-30 19:09:38 +01:00

149 lines
6.3 KiB
Plaintext

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= yield(:page_title) %></title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbo-track="reload">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbo-track="reload">
<link rel="icon" href="images/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="images/icon.png">
<script src="javascripts/@hotwired--turbo.js" data-turbo-track="reload"></script>
<script src="javascripts/clipboard.js" data-turbo-track="reload"></script>
<script src="javascripts/guides.js" data-turbo-track="reload"></script>
<meta property="og:title" content="<%= yield(:page_title) %>" />
<meta name="description" content="<%= yield(:description) %>" />
<meta property="og:description" content="<%= yield(:description) %>" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Ruby on Rails Guides" />
<meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#C81418">
</head>
<body dir="<%= @direction %>" class="guide">
<nav id="topNav" aria-label="Secondary">
<div class="wrapper">
<strong class="more-info-label">More at <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong>
<span class="red-button more-info-button">
More Ruby on Rails
</span>
<ul class="more-info-links s-hidden">
<li class="more-info"><a href="https://rubyonrails.org/blog">Blog</a></li>
<li class="more-info"><a href="https://guides.rubyonrails.org/">Guides</a></li>
<li class="more-info"><a href="https://api.rubyonrails.org/">API</a></li>
<li class="more-info"><a href="https://discuss.rubyonrails.org/">Forum</a></li>
<li class="more-info"><a href="https://github.com/rails/rails">Contribute on GitHub</a></li>
</ul>
</div>
</nav>
<header id="page_header">
<div class="wrapper clearfix">
<nav id="feature_nav">
<div class="header-logo">
<a href="index.html" title="Return to the Guides Home for <%= @edge.present? ? 'Edge' : @version %> Guides">Guides</a>
<span id="version_switcher">
Version:
<select class="guides-version">
<option value="https://edgeguides.rubyonrails.org/"<%= " selected" if @edge %>>Edge</option>
<% %w[7.1 7.0 6.1 6.0 5.2 5.1 5.0 4.2 4.1 4.0 3.2 3.1 3.0 2.3].each do |version| %>
<option value="https://guides.rubyonrails.org/v<%= version %>/"<%= " selected" if @version&.start_with?(version) %>><%= version %></option>
<% end %>
</select>
</span>
</div>
<ul class="nav">
<li><a class="nav-item" id="home_nav" href="https://rubyonrails.org/">Home</a></li>
<li class="guides-index guides-index-large">
<a href="index.html" id="guidesMenu" class="guides-index-item nav-item">Guides Index</a>
<div id="guides" class="clearfix" style="display: none;">
<hr />
<dl class="guides-section-container">
<% documents_by_section.each do |section| %>
<div class="guides-section">
<dt><%= section['name'] %></dt>
<% finished_documents(section['documents']).each do |document| %>
<dd><a href="<%= document['url'] %>"><%= document['name'] %></a></dd>
<% end %>
</div>
<% end %>
</dl>
</div>
</li>
<li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li>
<li class="guides-index guides-index-small">
<select class="guides-index-item nav-item">
<option value="index.html">Guides Index</option>
<% docs_for_menu.each do |section| %>
<optgroup label="<%= section['name'] %>">
<% finished_documents(section['documents']).each do |document| %>
<option value="<%= document['url'] %>"><%= document['name'] %></option>
<% end %>
</optgroup>
<% end %>
</select>
</li>
</ul>
</nav>
</div>
</header>
<hr class="hide" />
<section id="feature">
<div class="wrapper">
<%= yield :header_section %>
<%= yield :index_section %>
<hr>
</div>
</section>
<main id="container">
<div class="wrapper">
<div id="mainCol">
<%= yield %>
<hr>
<h3>Feedback</h3>
<p>
You're encouraged to help improve the quality of this guide.
</p>
<p>
Please contribute if you see any typos or factual errors.
To get started, you can read our <%= link_to 'documentation contributions', 'https://edgeguides.rubyonrails.org/contributing_to_ruby_on_rails.html#contributing-to-the-rails-documentation' %> section.
</p>
<p>
You may also find incomplete content or stuff that is not up to date.
Please do add any missing documentation for main. Make sure to check
<%= link_to 'Edge Guides', 'https://edgeguides.rubyonrails.org' %> first to verify
if the issues are already fixed or not on the main branch.
Check the <%= link_to 'Ruby on Rails Guides Guidelines', 'ruby_on_rails_guides_guidelines.html' %>
for style and conventions.
</p>
<p>
If for whatever reason you spot something to fix but cannot patch it yourself, please
<%= link_to 'open an issue', 'https://github.com/rails/rails/issues' %>.
</p>
<p>And last but not least, any kind of discussion regarding Ruby on Rails
documentation is very welcome on the <%= link_to 'official Ruby on Rails Forum', 'https://discuss.rubyonrails.org/c/rubyonrails-docs' %>.
</p>
</div>
</div>
</main>
<hr class="hide" />
<footer id="page_footer">
<div class="wrapper">
<%= render 'license' %>
</div>
</footer>
</body>
</html>