Skip to content

Commit

Permalink
Wipe view layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mbergman committed Apr 16, 2019
1 parent 7c313c1 commit 34a7f37
Show file tree
Hide file tree
Showing 9 changed files with 450 additions and 266 deletions.
270 changes: 133 additions & 137 deletions css/home.css
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,149 @@
.scale__Content {
overflow-y: hidden;
width: 100%;
height: 100vh;
background-image:
radial-gradient(
circle at bottom left,
#0f111e 0%,
#0a0918 80%
);
}
.stripes {
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 10;
transform: rotate(0deg);
width: 100%;
height: 100%;
transition: 0.5s;
transition-timing-function: ease-out;
}

.stripe {
visibility: hidden;
width: 3px;
margin-right: 18px;
height: calc(100% + 80px);
}

.stripe--active {
visibility: visible;
}

.stripe:nth-child(n+5) {
display: none;
}

.stripe:last-child {
margin-right: 0;
}

.stripe__0 {
background-color: #da7317;
}

.stripe__1 {
background-color: #da171b;
}

.stripe__2 {
background-color: #da7317;
}

.header__Home {
display: block;
position: absolute;
width: 275px;
height: 92px;
margin: 0;
padding: 0;
top: 0.5em;
right: 0.5em;
text-indent: -9999px;
z-index: 20;
background-image:url(../images/logo.svg);
}

.content__Home {
font-family: botanika-web, sans-serif;
color: #ffffff;
position: relative;
margin-right: 1em;
margin-left: 4em;
margin-top: 200px;
opacity: 0;
transition: 0.125s;
transition-delay: 0.25s;
transition-timing-function: ease-out;
}

.content__Home--active {
opacity: 1;
}

.content__Home__Polygon {
display: none;
shape-outside: polygon(0 0, 80px 0, 0 100%);
width: 100%;
height: 400px;
float: left;
}

.content__Home__Text {
font-size: 1.6em;
line-height: 1.4;
letter-spacing: .05em;
margin: 0;
}
.scale {
transition-timing-function: ease-in-out;
transition: 0.2s;
}

.scale__Content {
overflow-y: hidden;
width: 100%;
height: 100vh;
background-image: radial-gradient(
circle at bottom left,
#0f111e 0%,
#0a0918 80%
);
}

.scale__Article {
display: flex;
align-items: center;
line-height: 2em;
height: 100%;
}

.stripes {
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 10;
transform: rotate(0deg);
width: 100%;
height: 100%;
transition: 0.5s;
transition-timing-function: ease-out;
}

.stripe {
visibility: hidden;
width: 3px;
margin-right: 18px;
height: calc(100% + 80px);
}

@media only screen and (min-width: 768px) {
.stripe--active {
visibility: visible;
}

.stripe:nth-child(n + 5) {
display: none;
}

.stripe:last-child {
margin-right: 0;
}

.stripes {
width: auto;
transform: rotate(10.5deg);
}
.stripe__0 {
background-color: #da7317;
}

.stripe:nth-child(n+5) {
display: block;
}
.stripe__1 {
background-color: #da171b;
}

.header__Home {
right: -18px;
top: calc(33% - 105px);
width: 315px;
height: 105px;
}
.stripe__2 {
background-color: #da7317;
}

.content__Home {
margin-left: -200px;
margin-right: 2em;
position: absolute;
top: 33%;
left: 452px;
margin-top: 0;
}
.header__Home {
display: block;
position: absolute;
width: 275px;
height: 92px;
margin: 0;
padding: 0;
top: 0.5em;
right: 0.5em;
text-indent: -9999px;
z-index: 20;
background-image: url(../images/logo.svg);
}

.content__Home__Polygon {
display: block;
}
.content__Home {
font-family: botanika-web, sans-serif;
color: #ffffff;
position: relative;
margin-right: 1em;
margin-left: 4em;
margin-top: 200px;
}

.content__Home__Text {
font-size: 2em;
}
.content__Home__Polygon {
display: none;
shape-outside: polygon(0 0, 80px 0, 0 100%);
width: 100%;
height: 400px;
float: left;
}

.content__Home__Text {
font-size: 1.6em;
line-height: 1.4;
letter-spacing: 0.05em;
margin: 0;
}

@media only screen and (min-width: 960px) {
@media only screen and (min-width: 768px) {
.stripes {
width: auto;
transform: rotate(10.5deg);
}

.stripe:nth-child(n + 5) {
display: block;
}

.header__Home {
right: -18px;
top: calc(33% - 105px);
width: 315px;
height: 105px;
}

.content__Home {
margin-left: -200px;
margin-right: 2em;
position: absolute;
top: 33%;
left: 452px;
margin-top: 0;
}

.content__Home__Polygon {
display: block;
}

.content__Home__Text {
font-size: 2em;
}
}

.content__Home {
margin-left: 0;
}
@media only screen and (min-width: 960px) {
.content__Home {
margin-left: 0;
}

.stripes {
left: 200px;
}

}
.stripes {
left: 200px;
}
}
56 changes: 9 additions & 47 deletions css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ svg {
position: absolute;
width: 100%;
height: 100%;
background-color: #0a0918;
}

.view__Header {
Expand All @@ -60,7 +59,7 @@ svg {

#elem0 {
position: fixed;
z-index: 10;
z-index: 20;
width: 100%;
height: 100%;
top: 0;
Expand All @@ -72,7 +71,7 @@ svg {
position: fixed;
top: 0;
left: 0;
z-index: 20;
z-index: 10;
width: 100%;
height: 100%;
}
Expand All @@ -84,7 +83,6 @@ svg {
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: #ffffff;
}

#elem3 {
Expand All @@ -94,50 +92,15 @@ svg {
background-color: #cccccc;
}

.scale {
transition-timing-function: ease-in-out;
transition: 0.2s;
}

.scale__Article {
display: flex;
align-items: center;
line-height: 2em;
height: 100%;
}

.wipe {
position: absolute;
transition-timing-function: ease-in-out;
transition: 0.2s;
}

.wipe__Background {
background-color: #cccccc;
height: 100%;
z-index: 10;
}

.wipe__Content {
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-wrap: wrap;
z-index: 20;
width: 60%;
height: 100%;
}

.wipe__Article {
background-color: #999999;
border: 1px solid #000000;
z-index: 20;
width: auto;
margin: 1em;
.drawText {
opacity: 0;
transition: 0.125s;
transition-delay: 0.25s;
transition-timing-function: ease-out;
}

.wipe__Content {
font-size: 1em;
.drawText--Active {
opacity: 1;
}

.fadeIn {
Expand All @@ -158,7 +121,6 @@ svg {

.fadeIn__Article {
opacity: 0;
background-color: #999999;
width: 40%;
border: 1px solid #000000;
z-index: 20;
Expand Down
Loading

0 comments on commit 34a7f37

Please sign in to comment.