Skip to content

Commit 4dcc4db

Browse files
vivian-hafenervivian-hafener
authored
Merge pull request #296 from viv-codes/develop
Pubsite modernization - for real this time
2 parents 737fe56 + aa29a43 commit 4dcc4db

File tree

7 files changed

+440
-98
lines changed

7 files changed

+440
-98
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ vendor/
22
_site
33
.sass-cache
44
.jekyll-metadata
5+
.jekyll-cache
56
npm-debug.log
67
.bundle/
78
node_modules/

‎_sass/_project_images.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.content {
2+
position: relative;
3+
width: 100%;
4+
margin: auto;
5+
overflow: hidden;
6+
}
7+
8+
.content-overlay {
9+
background: rgba(0,0,0,0.6);
10+
position: absolute;
11+
height: 100%;
12+
width: 100%;
13+
left: 0;
14+
top: 0;
15+
bottom: 0;
16+
right: 0;
17+
opacity: 0;
18+
-webkit-transition: all 0.4s ease-in-out 0s;
19+
-moz-transition: all 0.4s ease-in-out 0s;
20+
transition: all 0.4s ease-in-out 0s;
21+
}
22+
23+
.content:hover .content-overlay{
24+
opacity: 1;
25+
}
26+
27+
.content-image{
28+
width: 100%;
29+
}
30+
31+
.content-background {
32+
background: rgba(0, 0, 0, 0.45);
33+
}
34+
35+
.content-details {
36+
position: absolute;
37+
text-align: center;
38+
padding-left: 1em;
39+
padding-right: 1em;
40+
width: 100%;
41+
top: 50%;
42+
left: 50%;
43+
opacity: 0;
44+
-webkit-transform: translate(-50%, -50%);
45+
-moz-transform: translate(-50%, -50%);
46+
transform: translate(-50%, -50%);
47+
-webkit-transition: all 0.3s ease-in-out 0s;
48+
-moz-transition: all 0.3s ease-in-out 0s;
49+
transition: all 0.3s ease-in-out 0s;
50+
}
51+
52+
.content:hover .content-details{
53+
top: 50%;
54+
left: 50%;
55+
opacity: 1;
56+
}
57+
58+
.content-details h3{
59+
color: #fff;
60+
font-weight: 500;
61+
letter-spacing: 0.15em;
62+
margin-bottom: 0.5rem;
63+
padding: auto;
64+
text-transform: uppercase;
65+
}
66+
67+
.content-details p{
68+
color: #fff;
69+
font-size: 0.8em;
70+
}
71+
72+
.fadeIn-bottom{
73+
top: 80%;
74+
}
75+
76+
@media screen and (max-width: 700px) {
77+
.content-details{
78+
top: 50%;
79+
left: 50%;
80+
opacity: 1;
81+
}
82+
.content-overlay{
83+
opacity: 1;
84+
}
85+
}
86+

‎_sass/_triple_image.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
$card-size: 300px;
2+
$p-m-default: 20px;
3+
4+
$black: #111;
5+
$white: #FFF;
6+
7+
$csh-pink: #b0197e;
8+
$csh-blue: #404b69;
9+
$gray: #f4f4f6;
10+
11+
// Easing Properties
12+
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
13+
14+
// PX to EM
15+
$browser-context: 16;
16+
17+
@function em($pixels, $context: $browser-context) {
18+
@if (unitless($pixels)) {
19+
$pixels: $pixels * 1px;
20+
}
21+
22+
@if (unitless($context)) {
23+
$context: $context * 1px;
24+
}
25+
26+
@return $pixels / $context * 1em;
27+
}
28+
29+
// Transition Mixin
30+
@mixin transition($transition...) {
31+
-moz-transition: $transition;
32+
-o-transition: $transition;
33+
-webkit-transition: $transition;
34+
transition: $transition;
35+
}
36+
37+
38+
.triple_a {
39+
@include transition(all 300ms $easeOutQuad);
40+
&:hover {
41+
@include transition(all 300ms $easeOutQuad);
42+
}
43+
}
44+
45+
#wrapper {
46+
position: relative;
47+
display: flex;
48+
height: 100vh;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
article.card {
54+
background-image: linear-gradient(0deg, $csh-blue 0%, $csh-pink 100%);
55+
width: $card-size;
56+
height: $card-size;
57+
margin: $p-m-default;
58+
position: relative;
59+
overflow: hidden;
60+
}
61+
62+
.card-image {
63+
max-width: 100%;
64+
width: 100%;
65+
height: $card-size;
66+
object-fit: cover;
67+
transform: translate(0,0);
68+
@include transition(all 400ms $easeOutQuad);
69+
}
70+
71+
.card-meta {
72+
font-size: em(11);
73+
text-transform: uppercase;
74+
letter-spacing: 1px;
75+
&:before {
76+
content: '';
77+
height: 1px;
78+
width: 30px;
79+
background-color: #fff;
80+
position: relative;
81+
display: block;
82+
margin-bottom: 10px;
83+
backface-visibility: hidden;
84+
opacity: 0;
85+
transform: translate(0,-10px);
86+
@include transition(all 200ms $easeOutQuad);
87+
}
88+
}
89+
90+
.card-text {
91+
color: #FFF;
92+
// This next line controls the background opacity
93+
background-color: rgba($black, .40);
94+
position: absolute;
95+
padding: $p-m-default;
96+
z-index: 10;
97+
width:100%;
98+
height: 100%;
99+
display: flex;
100+
flex-wrap: wrap;
101+
align-content: flex-end;
102+
@include transition(all 200ms $easeOutQuad);
103+
}
104+
105+
.card-title {
106+
margin: 8px 0;
107+
font-weight: 300;
108+
font-size: em(30);
109+
}
110+
111+
@media screen and (min-width: 800px) {
112+
.card a {
113+
&:hover {
114+
.card-text {
115+
background-color: rgba($black, .60);
116+
}
117+
.card-meta {
118+
&:before {
119+
transform: translate(0,0);
120+
opacity: 1;
121+
@include transition(all 200ms $easeOutQuad);
122+
}
123+
}
124+
125+
.card-image {
126+
transform: translate(20px,0);
127+
@include transition(all 400ms $easeOutQuad);
128+
}
129+
}
130+
}
131+
}
132+
133+
134+

‎_sass/_typography.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ h2 {
1919
}
2020

2121
h3 {
22-
font-size: 1em;
22+
font-size: 1.2em;
2323
}
2424

2525
.long-form {
@@ -32,3 +32,14 @@ h3 {
3232
.row.spaced {
3333
margin-top: 2em;
3434
}
35+
36+
#headline {
37+
font-size: 1.4em;
38+
}
39+
@media screen and (max-width: 400px) {
40+
#headline {
41+
font-size: 1.0em;
42+
padding-right: 0.4em;
43+
padding-left: 0.4em;
44+
}
45+
}

‎about/tour.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<div class="gray-wrapper" id="tour-page">
88
<div class="container spaced">
9-
<div class="row">
9+
<div class="row" style="width: 100%;">
1010
<div class="col-12 col-sm-8 offset-sm-2">
1111
<div class="dropdown">
1212
<a href="#" class="btn btn-sm dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

‎assets/css/main.scss‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
# only Main files contain this front matter, not partials.
44
---
55

6-
$csh-pink: #b0197e;
76
$blue: #404b69;
87
$gray: #f4f4f6;
8+
$csh-pink: #b0197e;
9+
910

1011
body {
1112
width: 100%;
@@ -41,8 +42,44 @@ img.rounded,
4142
box-shadow: 0 2px 15px darken($gray, 20%);
4243
}
4344

45+
.container {
46+
display: flex;
47+
flex-direction: row;
48+
flex-wrap: wrap;
49+
justify-content: space-evenly;
50+
align-items: flex-start;
51+
}
52+
53+
.container_stat {
54+
display: flex;
55+
flex-direction: row;
56+
flex-wrap: wrap;
57+
justify-content: space-evenly;
58+
align-items: flex-start;
59+
}
60+
61+
.stat_big {
62+
color: $csh-pink;
63+
font-size: 2.5em;
64+
font-weight: 600;
65+
margin: 0%;
66+
}
67+
68+
.stat_tag {
69+
margin: 0.2em;
70+
}
71+
72+
.stat_card {
73+
text-align: center;
74+
width: 200px;
75+
}
76+
77+
.stat_desc {
78+
font-size: 0.6em;
79+
font-weight: 600;
80+
}
81+
4482
.card-header {
45-
white-space: nowrap;
4683
overflow: hidden;
4784
text-overflow: ellipsis;
4885
}
@@ -79,6 +116,28 @@ a.btn {
79116
margin-bottom: 1em;
80117
}
81118

119+
@media screen and (max-width: 570px) {
120+
.quad_image {
121+
display: block;
122+
}
123+
}
124+
125+
@media screen and (min-width: 571px) {
126+
.quad_image {
127+
display:grid;
128+
grid-template-columns: 50% 50%;
129+
}
130+
}
131+
132+
@media screen and (min-width: 1100px) {
133+
.quad_image {
134+
display:grid;
135+
grid-template-columns: 25% 25% 25% 25%;
136+
}
137+
}
138+
139+
140+
82141
@import "typography";
83142
@import "nav";
84143
@import "slider";
@@ -92,3 +151,5 @@ a.btn {
92151
@import "insights";
93152
@import "footer";
94153
@import "hackathon";
154+
@import "triple_image";
155+
@import "project_images.scss";

0 commit comments

Comments
 (0)