Skip to content

Commit acd0fbe

Browse files
alexandrerubanalexandreruban
committed
Design landing page
1 parent f716685 commit acd0fbe

20 files changed

+396
-20
lines changed

Diff for: ‎Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
4343
gem "bootsnap", require: false
4444

4545
# Use Sass to process CSS
46-
# gem "sassc-rails"
46+
gem "sassc-rails"
4747

4848
# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
4949
# gem "image_processing", "~> 1.2"

Diff for: ‎Gemfile.lock

+11
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ GEM
8888
irb (>= 1.5.0)
8989
reline (>= 0.3.1)
9090
erubi (1.12.0)
91+
ffi (1.15.5)
9192
globalid (1.1.0)
9293
activesupport (>= 5.0)
9394
i18n (1.12.0)
@@ -170,6 +171,14 @@ GEM
170171
io-console (~> 0.5)
171172
rexml (3.2.5)
172173
rubyzip (2.3.2)
174+
sassc (2.4.0)
175+
ffi (~> 1.9)
176+
sassc-rails (2.1.2)
177+
railties (>= 4.0.0)
178+
sassc (>= 2.0)
179+
sprockets (> 3.0)
180+
sprockets-rails
181+
tilt
173182
selenium-webdriver (4.9.0)
174183
rexml (~> 3.2, >= 3.2.5)
175184
rubyzip (>= 1.2.2, < 3.0)
@@ -184,6 +193,7 @@ GEM
184193
stimulus-rails (1.2.1)
185194
railties (>= 6.0.0)
186195
thor (1.2.1)
196+
tilt (2.1.0)
187197
timeout (0.3.2)
188198
turbo-rails (1.4.0)
189199
actionpack (>= 6.0.0)
@@ -222,6 +232,7 @@ DEPENDENCIES
222232
puma (~> 5.0)
223233
rails (~> 7.0.4, >= 7.0.4.3)
224234
redis (~> 4.0)
235+
sassc-rails
225236
selenium-webdriver
226237
sprockets-rails
227238
stimulus-rails

Diff for: ‎app/assets/images/courses/stimulus.png

99.9 KB
Loading

Diff for: ‎app/assets/images/icons/email.svg

+3
Loading

Diff for: ‎app/assets/images/icons/github.svg

+3
Loading

Diff for: ‎app/assets/images/icons/twitter.svg

+3
Loading

Diff for: ‎app/assets/stylesheets/application.css

-15
This file was deleted.

Diff for: ‎app/assets/stylesheets/application.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
2+
3+
@import "config/variables";
4+
@import "config/mixins";
5+
@import "config/reset";
6+
@import "config/globals";
7+
8+
@import "components/course_card";
9+
@import "components/btn";
10+
11+
@import "pages/homepage";

Diff for: ‎app/assets/stylesheets/components/_btn.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.btn {
2+
display: inline-flex;
3+
align-items: center;
4+
flex: 0 0 auto;
5+
gap: 0.25rem;
6+
padding: 0.15rem 0.5rem;
7+
border-radius: 999px;
8+
font-weight: bold;
9+
text-decoration: none;
10+
11+
&--primary {
12+
color: var(--color-primary-text-body);
13+
background-color: var(--color-primary-background);
14+
}
15+
16+
&--small {
17+
font-size: 87.5%;
18+
}
19+
}

Diff for: ‎app/assets/stylesheets/components/_course_card.scss

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.course-card {
2+
width: 100%;
3+
max-width: 80ch;
4+
margin-right: auto;
5+
margin-left: auto;
6+
7+
border-radius: 0.5rem;
8+
box-shadow: 0 0.25rem 2rem hsla(202, 16%, 90%, 50%);
9+
overflow: hidden;
10+
11+
@include media(tabletPortrait) {
12+
display: flex;
13+
}
14+
15+
&__image-wrapper {
16+
flex-shrink: 0;
17+
height: 20rem;
18+
19+
@include media(tabletPortrait) {
20+
width: 15rem;
21+
height: auto;
22+
}
23+
}
24+
25+
&__image {
26+
object-fit: cover;
27+
object-position: center;
28+
height: 100%;
29+
width: 100%;
30+
}
31+
32+
&__content {
33+
flex: 1;
34+
display: flex;
35+
flex-direction: column;
36+
37+
padding: 1rem;
38+
}
39+
40+
&__title {
41+
font-size: 150%;
42+
margin-bottom: 1rem;
43+
}
44+
45+
&__description {
46+
margin-bottom: 2rem;
47+
}
48+
49+
&__footer {
50+
margin-top: auto;
51+
52+
@include media(tabletPortrait) {
53+
align-self: flex-end;
54+
}
55+
}
56+
}

Diff for: ‎app/assets/stylesheets/config/_globals.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
html {
2+
font-size: var(--font-size-base);
3+
}
4+
5+
body {
6+
font-family: var(--font-family-serif);
7+
line-height: var(--line-height-body);
8+
color: var(--color-text-body);
9+
}
10+
11+
h1, h2, h3, h4, h5, h6 {
12+
font-weight: 700;
13+
line-height: var(--line-height-header);
14+
color: var(--color-text-header);
15+
}
16+
17+
a {
18+
color: inherit;
19+
}

Diff for: ‎app/assets/stylesheets/config/_mixins.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@mixin media($query) {
2+
@if $query == tabletPortrait {
3+
@media (min-width: 40em) { @content; }
4+
} @else if $query == tabletLandscape {
5+
@media (min-width: 66em) { @content; }
6+
} @else if $query == desktop {
7+
@media (min-width: 94em) { @content; }
8+
}
9+
}

Diff for: ‎app/assets/stylesheets/config/_reset.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
*, *::before, *::after {
2+
box-sizing: border-box;
3+
}
4+
5+
* {
6+
margin: 0;
7+
}
8+
9+
html, body {
10+
height: 100%;
11+
}
12+
13+
body {
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
img, picture, video, canvas, svg {
18+
display: block;
19+
width: 100%;
20+
}
21+
22+
input, button, textarea, select {
23+
font: inherit;
24+
}
25+
26+
p, h1, h2, h3, h4, h5, h6 {
27+
overflow-wrap: break-word;
28+
}

Diff for: ‎app/assets/stylesheets/config/_variables.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:root {
2+
--font-family-serif: 'Merriweather', serif;
3+
--font-family-mono: 'Fira Code', monospace;
4+
5+
--font-size-base: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
6+
7+
--line-height-header: 1.1;
8+
--line-height-body: 1.65;
9+
10+
--color-text-header: hsl(202, 28%, 17%);
11+
--color-text-body: hsl(202, 23%, 24%);
12+
13+
--color-suface: hsl(202, 17%, 97%);
14+
15+
--color-primary-background: hsl(348, 80%, 95%);
16+
--color-primary-text-body: hsl(348, 60%, 58%);
17+
18+
--color-secondary-text-body: hsl(209, 60%, 50%);
19+
}

Diff for: ‎app/assets/stylesheets/pages/_homepage.scss

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.homepage {
2+
@include media(tabletLandscape) {
3+
display: flex;
4+
}
5+
6+
&__section {
7+
padding: 1rem;
8+
9+
@include media(tabletLandscape) {
10+
padding: 2rem;
11+
}
12+
}
13+
14+
&__hero-section {
15+
flex: 1 0 min-content;
16+
17+
display: flex;
18+
flex-direction: column;
19+
20+
overflow: auto;
21+
background-color: var(--color-suface);
22+
23+
@include media(tabletPortrait) {
24+
text-align: center;
25+
}
26+
27+
@include media(tabletLandscape) {
28+
position: sticky;
29+
top: 0;
30+
height: 100vh;
31+
text-align: left;
32+
}
33+
}
34+
35+
&__main-title {
36+
font-size: 500%;
37+
line-height: 1;
38+
39+
& br {
40+
display: none;
41+
}
42+
43+
@include media(tabletLandscape) {
44+
& br {
45+
display: initial;
46+
}
47+
}
48+
}
49+
50+
&__tagline {
51+
margin: 1rem auto;
52+
font-size: 125%;
53+
max-width: 60ch;
54+
}
55+
56+
&__newsletter-link {
57+
display: inline-block;
58+
font-style: italic;
59+
font-size: 125%;
60+
margin-bottom: 2rem;
61+
color: var(--color-secondary-text-body);
62+
}
63+
64+
&__courses-section {
65+
flex: 3 1 40rem;
66+
display: flex;
67+
flex-direction: column;
68+
gap: 3rem;
69+
}
70+
71+
&__social-links {
72+
margin-top: auto;
73+
74+
display: flex;
75+
flex-wrap: wrap;
76+
gap: 1rem;
77+
78+
@include media(tabletPortrait) {
79+
justify-content: center;
80+
}
81+
82+
@include media(tabletLandscape) {
83+
justify-content: flex-start;
84+
}
85+
}
86+
}

Diff for: ‎app/controllers/pages_controller.rb

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
class PagesController < ApplicationController
2+
def home; end
3+
end

Diff for: ‎app/helpers/svg_helper.rb

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module SvgHelper
2+
def inline_svg(path, **options)
3+
File.read("#{Rails.root}/app/assets/images/#{path}.svg").strip.then do |icon|
4+
raw options.any? ? icon.sub(/\A<svg(.*?)>/, "<svg\\1 #{tag.attributes(**options)}>") : icon
5+
end
6+
end
7+
end

0 commit comments

Comments
 (0)