mirror of
https://github.com/danbee/my-images
synced 2025-03-04 08:49:05 +00:00
Looks of things to make it pretty
* Convert SASS to SCSS * Dark mode! (no light mode anymore though) * Pretty GitHub login button * Media queries to keep thumbnail sizes consistent by changing the number of grid columns
This commit is contained in:
parent
921788ba31
commit
6936911880
GPG Key ID:
931D8112E0103DD8
BIN
app/assets/images/github-64.png
Normal file
BIN
app/assets/images/github-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,14 +0,0 @@
|
||||
// Place all the styles related to the home controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
html
|
||||
font-size: 100%
|
||||
font-family: 'Helvetica Neue', 'Arial', sans-serif
|
||||
|
||||
header, main
|
||||
max-width: 60rem
|
||||
margin: 0 auto
|
||||
|
||||
header
|
||||
text-align: right
|
||||
35
app/assets/stylesheets/home.css.scss
Normal file
35
app/assets/stylesheets/home.css.scss
Normal file
@ -0,0 +1,35 @@
|
||||
// Place all the styles related to the home controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
html {
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #677b83;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0.5rem 4%;
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: black;
|
||||
text-align: right;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// Place all the styles related to the images controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
ul.images
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
display: grid
|
||||
grid-template-columns: repeat(6, 1fr)
|
||||
grid-gap: 0.75rem
|
||||
justify-content: space-between
|
||||
|
||||
li
|
||||
margin-bottom: 1em
|
||||
|
||||
img
|
||||
max-width: calc(100% - 0.5rem)
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
|
||||
border-radius: 2px
|
||||
padding: 0.25rem
|
||||
40
app/assets/stylesheets/images.css.scss
Normal file
40
app/assets/stylesheets/images.css.scss
Normal file
@ -0,0 +1,40 @@
|
||||
// Place all the styles related to the images controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
ul.images {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 0.75rem;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: white;
|
||||
max-width: calc(100% - 0.5rem);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
border-radius: 2px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 380px) {
|
||||
ul.images { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
@media (min-width: 590px) {
|
||||
ul.images { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
@media (min-width: 820px) {
|
||||
ul.images { grid-template-columns: repeat(5, 1fr); }
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
ul.images { grid-template-columns: repeat(6, 1fr); }
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
// Place all the styles related to the sessions controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
27
app/assets/stylesheets/sessions.css.scss
Normal file
27
app/assets/stylesheets/sessions.css.scss
Normal file
@ -0,0 +1,27 @@
|
||||
// Place all the styles related to the sessions controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
.centre-stage {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.github-button {
|
||||
display: block;
|
||||
background: white;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
img {
|
||||
width: 1.2rem;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
@ -9,15 +9,19 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<% if @current_user %>
|
||||
Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
|
||||
<% end %>
|
||||
<div class="container">
|
||||
<% if @current_user %>
|
||||
Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
|
||||
<% else %>
|
||||
<%= link_to 'Sign in with GitHub', '/auth/github' %>
|
||||
<% end %>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
<div class="container">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1 +1,6 @@
|
||||
<%= link_to 'Sign in with GitHub', '/auth/github' %>
|
||||
<div class="centre-stage">
|
||||
<%= link_to '/auth/github', class: "github-button" do %>
|
||||
<%= image_tag "github-64.png" %>
|
||||
Sign in with GitHub
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user