Skip to content

Commit

Permalink
Read me + slide style
Browse files Browse the repository at this point in the history
  • Loading branch information
KienTrong committed Jun 8, 2016
1 parent c5374b4 commit e3bba16
Showing 6 changed files with 205 additions and 111 deletions.
14 changes: 14 additions & 0 deletions assets/sass/_elements.scss
Original file line number Diff line number Diff line change
@@ -33,3 +33,17 @@
border-color: $primary;
}
}

.slide_content {
.btn {
margin: 10px;
}
.btn-secondary-outline {
border-color: #FFF;
color: #FFF;
&:hover {
background: #FFFFFF;
color: #333333;
}
}
}
186 changes: 102 additions & 84 deletions assets/sass/_sections.scss
Original file line number Diff line number Diff line change
@@ -147,19 +147,13 @@
display: block;
overflow: hidden;
position: relative;


background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: $primary;

.swiper-slide-intro {

}
/*
img, video {
position: absolute;
@@ -177,28 +171,6 @@
transform: translate(-50.01111111%, -50.01111111%);
}
*/

.swiper-slide-intro {
position: relative;

//top: 50%;
width: 100%;
z-index: 4;

@include rem('max-width', 1140px);
margin: 0 auto;
//-webkit-transform: translateY(-50%);
//transform: translateY(-50%);

color: #fff;
text-align: center;
@include rem('font-size', 22px);
h2 {
@include rem('font-size', 65px);
color: #fff;
}

}
.swiper-intro-inner {
padding-top: 25%;
padding-bottom: 25%;
@@ -269,11 +241,9 @@
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);

-webkit-transition: 500ms linear;
-moz-transition: 500ms linear;
transition: 500ms linear;

visibility: hidden;
}

@@ -404,55 +374,55 @@


.btn-next-section {
text-align: center;
text-align: center;
position: absolute;
left: 50%;
z-index: 11;
color: #fff;
cursor: pointer;
@include rem('width', 60px);
@include rem('height', 60px );
@include rem('bottom', 30px );
@include rem('margin-left', - ( 60px / 2 ) );

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
&:hover {
background-color: rgba( 0, 0, 0, .5 );
}
&:before, &:after {
@include rem('width', 30px);
@include rem('height', 1px);
background: #fff;
content: " ";
display: block;
position: absolute;
left: 50%;
z-index: 11;
color: #fff;
cursor: pointer;
@include rem('width', 60px);
@include rem('height', 60px );
@include rem('bottom', 30px );
@include rem('margin-left', - ( 60px / 2 ) );

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
&:hover {
background-color: rgba( 0, 0, 0, .5 );
}
&:before, &:after {
@include rem('width', 30px);
@include rem('height', 1px);
background: #fff;
content: " ";
display: block;
position: absolute;
}
&:before {
/* Safari */
-webkit-transform: rotate(-135deg);
/* Firefox */
-moz-transform: rotate(-135deg);
/* IE */
-ms-transform: rotate(-135deg);
/* Opera */
-o-transform: rotate(-135deg);
@include rem('bottom', ( 60px / 2 ) );
@include rem('left', ( 5px ) );
}
&:after {
/* Safari */
-webkit-transform: rotate(135deg);
/* Firefox */
-moz-transform: rotate(135deg);
/* IE */
-ms-transform: rotate(135deg);
/* Opera */
-o-transform: rotate(135deg);
@include rem('bottom', ( 60px / 2 ) );
@include rem('right', ( 5px ) );
}
}
&:before {
/* Safari */
-webkit-transform: rotate(-135deg);
/* Firefox */
-moz-transform: rotate(-135deg);
/* IE */
-ms-transform: rotate(-135deg);
/* Opera */
-o-transform: rotate(-135deg);
@include rem('bottom', ( 60px / 2 ) );
@include rem('left', ( 5px ) );
}
&:after {
/* Safari */
-webkit-transform: rotate(135deg);
/* Firefox */
-moz-transform: rotate(135deg);
/* IE */
-ms-transform: rotate(135deg);
/* Opera */
-o-transform: rotate(135deg);
@include rem('bottom', ( 60px / 2 ) );
@include rem('right', ( 5px ) );
}
}

.swiper-container.over-1-3 {
@@ -486,8 +456,56 @@
vertical-align: middle;
}
}
}

.slide_content {
@include rem('font-size', 22px);
@include media-breakpoint-down(sm) {
@include rem('font-size', 18px);
}

.btn {
margin: 10px;
}

.btn-secondary-outline {
border-color: #FFF;
color: #FFF;
&:hover {
background: #FFFFFF;
color: #333333;
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
letter-spacing: 1px;
@include rem('margin-bottom', 20px);
strong {
font-weight: 900;
}
}
p {
@include rem('margin-bottom', 20px);
}
h1 {
line-height: 1.3;
@include rem('font-size', 35px);
@include media-breakpoint-up(md) {
@include rem('font-size', 50px);
}
}

}

.swiper-slide-intro {
position: relative;
width: 100%;
z-index: 4;
@include rem('max-width', 1140px);
margin: 0 auto;
color: #fff;
text-align: center;
//@include rem('font-size', 22px);
}


@@ -681,8 +699,8 @@
}
.entry-grid-elements {
border: 1px solid $border;
border-top: none;
padding: 25px 30px 20px 30px;
border-top: 3px solid $primary;
padding: 25px 30px 25px 30px;
background: #FFF;

}
8 changes: 4 additions & 4 deletions inc/class-slider.php
Original file line number Diff line number Diff line change
@@ -34,17 +34,17 @@ function render( ){

return join( "\n", $slider_data );
}


function render_item( $item ){
// if has filter for this item
if ( $html = apply_filters( 'screenr_slider_render_item', '', $item ) ) {
return $html;
}

$url = screenr_get_media_url( $item['media'] );

$html = '<div class="swiper-slide slide-align-'.esc_attr( $item['position'] ).' slide-'.esc_attr( $item['layout'] ).'" style="background-image: url(\''.esc_attr( $url ).'\')">';
$html = '<div class="swiper-slide slide-align-'.esc_attr( $item['position'] ).' slide_content slide_content_'.esc_attr( $item['layout'] ).'" style="background-image: url(\''.esc_attr( $url ).'\')">';

$style = '';
if ( $item['pd_top'] != '' ) {
@@ -70,4 +70,4 @@ function render_item( $item ){
return $html;
}

}
}
5 changes: 3 additions & 2 deletions readme.txt
Original file line number Diff line number Diff line change
@@ -9,8 +9,8 @@ Stable tag: 0.0.2
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

OnePress Theme, Copyright 2016 FameThemes
OnePress is distributed under the terms of the GNU GPL
Screenr Theme, Copyright 2016 FameThemes
Screenr is distributed under the terms of the GNU GPL

== Description ==

@@ -39,6 +39,7 @@ Big - Bold and stylish, Screenr is a multiuse fullscreen theme.
* Parallax.js https://github.com/bfintal/Counter-Up, (C) 2015 PixelCog, Inc, [MIT](https://opensource.org/licenses/MIT)
* FontAwesome http://fontawesome.io/, (C) Dave Gandy, [MIT](https://opensource.org/licenses/MIT)
* Bootstrap https://github.com/twbs/bootstrap, (C) 2011-2016 Twitter, Inc. [MIT](https://opensource.org/licenses/MIT)
* Image use in screenshot: https://www.pexels.com/photo/night-building-architecture-3766/. [CC0](https://creativecommons.org/publicdomain/zero/1.0/)

== Changelog ==

Binary file modified screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e3bba16

Please sign in to comment.