Correção no grid do CSS (#105)

* style(custom.css): altera a cor de fundo para #11191f style(custom.css): adiciona classe .grid com grid-template-columns: repeat(3, 1fr) style(custom.css): adiciona classe .navbar com background: #fff style(custom.css): remove a classe .contents article style(custom.css): remove o seletor footer view(contents/_content.html.erb): remove a seção e a classe .contents view(contents/_content.html.erb): adiciona a classe .grid e remove a seção spec(features/visits_home_page_spec.rb): atualiza os seletores para refletir as mudanças na view * feat(logo.png): adiciona o arquivo de imagem do logo style(custom.css): organizando css e resolvendo problema de estruturação view(contents/show.html.erb): remove a classe .contents da div .grid view(layouts/application.html.erb): altera o valor do atributo data-theme para dark view(shared/_navbar.html.erb): adiciona a classe .navbar para a div externa
negrosdev · Jul 29, 2023 · 85cf3fb · 85cf3fb
1 parent eb2e1d1
commit 85cf3fb
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 52 deletions.
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
diff --git a/app/assets/stylesheets/custom.css b/app/assets/stylesheets/custom.css
@@ -1,20 +1,30 @@
 html,
 body {
-  display       : flex;
-  min-height    : 100vh;
-  flex-direction: column;
+  display         : flex;
+  min-height      : 100vh;
+  flex-direction  : column;
+  background-color: #11191f !important;
 }
 
 main {
   flex: 1;
 }
 
+.grid.contents {
+  grid-template-columns: repeat(3, 1fr) !important;
+}
+
+.navbar strong {
+  color: #fff;
+}
+
 nav ul li strong {
   margin-left: 5px;
 }
 
 ion-icon {
   font-size: 30px;
+  color: #fff;
 }
 
 [data-category]:before {
@@ -34,23 +44,19 @@ ion-icon {
   line-height  : 1;
 }
 
-.contents article {
-  position: relative;
-  height  : 23vh;
-}
-
 a {
-  color          : #000 !important;
-  text-decoration: none;
+  color          : aliceblue;
 }
 
 a:hover {
   color: rgb(216, 232, 248);
+  text-decoration: none;
+
 }
 
 .avatar {
-  width        : 78px;
-  height       : auto;
+  width : 78px;
+  height: auto;
 }
 
 .text-right {
@@ -65,17 +71,16 @@ a:hover {
   display        : grid;
   justify-content: center;
   align-items    : center;
-  min-height     : 18vh;
+  height         : 279px !important;
+  position       : relative !important;
 }
 
 th,
 td {
   text-align: center;
 }
 
+
 footer {
   background-color: #18242c;
 }
-footer p {
-  color: #fff !important;
-}
diff --git a/app/views/contents/_content.html.erb b/app/views/contents/_content.html.erb
@@ -1,13 +1,11 @@
-<section class="contents">
-  <% contents.each_slice(3) do |contents| %>
-    <div class="grid">
-      <% contents.each do |content| %>
-        <a class="published_content" href="<%= content_path(content) %>">
-          <article  data-category="<%= content.category.name %>">
-            <h5> <%= content.name %>  </h5>
-          </article>
-        </a>
-      <% end %>
+<div class='grid contents'>
+  <% contents.each do |content| %>
+    <div>
+      <a class='published_content' href='<%= content_path(content) %>'>
+        <article  data-category='<%= content.category.name %>'>
+          <h5><%= content.name %></h5>
+        </article>
+      </a>
     </div>
   <% end %>
-</section>
+</div>
diff --git a/app/views/contents/show.html.erb b/app/views/contents/show.html.erb
@@ -1,5 +1,5 @@
 <section>
-  <div class="grid contents">
+  <div class="grid">
     <div>
       <article>
         <h3 class="text-center"><%= @content.name %></h3>
@@ -8,7 +8,7 @@
   </div>
 
   <% if  @content.embeded_video.html_safe.present? %>
-    <div class="grid contents">
+    <div class="grid">
       <div>
         <%= @content.embeded_video.html_safe %>
       </div>
@@ -17,7 +17,7 @@
 </section>
 
 <section>
-  <div class="grid contents">
+  <div class="grid">
     <div>
       <p>
         <%= @content.body %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="pt-BR" data-theme="light">
+<html lang="pt-BR" data-theme="dark">
   <head>
     <title>Negrosdev</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,19 +1,21 @@
-<div class="container">
-  <nav>
-    <ul class="text-center">
-      <li>
-        <a href="<%= root_path %>">
-          <%= image_tag 'logo.svg', { class: 'avatar', alt: "Negros.dev" } %>
-          <strong>negros.dev</strong>
-        </a>
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <a href="https://github.com/marcuxyz/">
-          <ion-icon name="logo-github"></ion-icon>
-        </a>
-      </li>
-    </ul>
-  </nav>
+<div class="navbar">
+  <div class="container">
+    <nav>
+      <ul class="text-center">
+        <li>
+          <a href="<%= root_path %>">
+            <%= image_tag 'logo.png', { class: 'avatar', alt: "Negros.dev" } %>
+            <strong>negros.dev</strong>
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a href="https://github.com/marcuxyz/">
+            <ion-icon name="logo-github"></ion-icon>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </div>
diff --git a/spec/features/visits_home_page_spec.rb b/spec/features/visits_home_page_spec.rb
@@ -72,13 +72,13 @@
 
       visit root_path
 
-      within 'section.contents > div:nth-child(1) > a:nth-child(1)' do
+      within 'section > div > div:nth-child(1) > a > article' do
         expect(page).to have_content('About Remix framework')
       end
-      within 'section.contents > div:nth-child(1) > a:nth-child(2)' do
+      within 'section > div > div:nth-child(2) > a > article' do
         expect(page).to have_content('Ruby On Rails - Configure Active Record')
       end
-      within 'section.contents > div:nth-child(1) > a:nth-child(3)' do
+      within 'section > div > div:nth-child(3) > a > article' do
         expect(page).to have_content('OOP With Ruby')
       end
     end