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>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<% if @current_user %>
|
<div class="container">
|
||||||
Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
|
<% if @current_user %>
|
||||||
<% end %>
|
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>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<div class="container">
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</body>
|
</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