Skip to content

Commit 77a9046

Browse files
jgthmsjgthms
committed
Add ff
1 parent c02ab76 commit 77a9046

10 files changed

Lines changed: 71 additions & 1 deletion

File tree

‎_includes/bsa.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<a class="ff is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
2+
<div class="ff-background"></div>
3+
<p class="ff-text">
4+
<strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="emoji">😃</span>
5+
</p>
6+
<span class="button is-primary is-rounded">
7+
<strong>Get it now →</strong>
8+
</span>
9+
</a>

‎_layouts/collection.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ <h1 class="heading-title">
5555
</a>
5656
</p>
5757
</header>
58+
{% include bsa.html %}
5859
<section class="properties">
5960
{{content}}
6061
</section>

‎_layouts/single.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<body>
3030
{% include menu.html %}
3131
<main class="main">
32+
{% include bsa.html %}
3233
<section class="properties">
3334
{{content}}
3435
</section>

‎css/website.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/website.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import "../sass/sister"
2323

2424
@import "../sass/elements"
25+
@import "../sass/ff"
2526

2627
.modal
2728
z-index: 50

‎images/fortyfour-background.jpg‎

14.5 KB
Loading

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ <h2 class="header-title">
5757
</div>
5858
</div>
5959
</header>
60+
{% include bsa.html %}
6061
<main class="index">
6162
<nav class="index-collections">
6263
<strong>Collections:</strong>

‎sass/elements.sass‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,7 @@
137137
background: $alpha
138138
border: 2px solid $alpha
139139
color: $plum
140+
141+
.emoji
142+
font-size: 1.25em
143+
vertical-align: middle

‎sass/ff.sass‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.ff
2+
align-items: center
3+
background-color: $fortyfour
4+
color: #fff
5+
display: flex
6+
justify-content: center
7+
overflow: hidden
8+
padding: 1rem
9+
position: relative
10+
strong
11+
color: currentColor
12+
.tag
13+
background-color: $red
14+
// border: 1px solid $red
15+
border-radius: 2px
16+
color: #fff
17+
margin-right: 0.5em
18+
padding: 0.25em 0.5em 0.375em
19+
.button
20+
position: relative
21+
transform-origin: center
22+
transition-duration: $speed
23+
transition-property: transform
24+
white-space: nowrap
25+
&:hover
26+
.button
27+
transform: scale(1.1)
28+
29+
.ff-background
30+
+overlay
31+
background-image: url("/images/fortyfour-background.jpg")
32+
background-position: center center
33+
background-size: cover
34+
opacity: 0.5
35+
36+
.ff-text
37+
line-height: 1.25
38+
margin-right: 0.5rem
39+
position: relative
40+
41+
.ff-button
42+
display: inline-block
43+
flex-shrink: 0
44+
height: 34px
45+
position: relative
46+
width: 145px
47+
img
48+
max-height: 100%
49+
50+
+from(480px)
51+
.ff-text
52+
margin-right: 1rem

‎sass/variables.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $plum: #310736
33
$plum-invert: #fff
44
$plum-dark: #622369
55
$plum-light: #94529c
6+
$fortyfour: #5f45bb
67

78
$alpha: #05ffb0
89
$alpha-invert: $plum

0 commit comments

Comments
 (0)