Skip to content

Commit

Permalink
Improve templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ixkaito
ixkaito committed Sep 7, 2017
1 parent 4cf6e59 commit 3c4c05a
Show file tree
Hide file tree
Showing 14 changed files with 191 additions and 191 deletions.
146 changes: 146 additions & 0 deletions assets/_sass/dojoconjapan2017/layout/_hero.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
.hero {
background: url(../images/hero-nightsky.svg) no-repeat;
background-size: cover;
background-position: 60% 0;
color: $white;
min-height: calc(328.2px + 75.5625vw);
overflow: hidden;
padding-top: 15px;
position: relative;

&::before {
background: url(../images/hero-stars.svg) no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

&::after {
background: $flamingo;
border-radius: 50%;
content: "";
height: 400vw;
left: 50%;
position: absolute;
top: calc(328.2px + 41vw);
transform: translateX(-50%);
width: 400vw;
}

.hero-image {
left: 0;
position: absolute;
top: calc(328.2px + 24vw);
width: 100vw;
z-index: 5;

img {
left: 0;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}

.neon {
width: 44vw;
left: 7vw;
top: -24vw;
}

.bigtop,
.bigtop-shadow {
left: -6vw;
width: 130vw;
}

.people,
.people-shadow {
left: 3vw;
top: 3vw;
width: 108vw;
}

.andyou {
width: 150vw;
left: -40vw;
top: -4vw;
}

.shadow {
opacity: 0.4;
}

&::after {
content: "";
background: url(../images/coderdojo-logo.svg) no-repeat center center;
background-size: contain;
height: 25px;
left: 50%;
position: absolute;
top: 40vw;
transform: translateX(-50%);
width: 86px;

}
}

.site-title {
font-family: $roboto-condensed;
font-size: 37.8px;
font-weight: bold;
letter-spacing: -0.125em;
text-align: center;
}

.site-description {
font-family: $pixelmplus10;
font-size: 17.4px;
letter-spacing: -0.02em;
margin: -20px auto 0;
text-align: center;
width: 120px;

&::before {
content: "▶";
font-family: $pixelmplus10;
font-size: 16px;
margin-right: 20px;
}
}

.dojocon-day {
color: $flamingo;
font-family: $pixelmplus10;
letter-spacing: -0.03em;
text-align: center;

.date {
font-size: 34px;
}

.day {
font-size: 19px;
}
}

.dojocon-venue {
font-family: $pixelmplus10;
font-size: 14px;
margin: auto;
line-height: 22px;
padding: 4px 0;
text-align: center;
width: 16.5em;

.preposition {
display: block;
font-size: 14px;
}
}
}
149 changes: 1 addition & 148 deletions assets/_sass/dojoconjapan2017/project/_about.scss
View file
Original file line number Diff line number Diff line change
@@ -1,161 +1,14 @@
.page-about {
background: $flamingo;
color: $white;
padding-top: 0;
padding-top: 20px;
padding-bottom: 0;

@media (min-width: $tablet) {
background-image: url(../images/hero-1500.png);
background-size: auto;
}

.hero {
background: url(../images/hero-nightsky.svg) no-repeat;
background-size: cover;
background-position: 60% 0;
margin-bottom: 20px;
min-height: calc(328.2px + 75.5625vw);
overflow: hidden;
padding-top: 15px;
position: relative;

&::before {
background: url(../images/hero-stars.svg) no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

&::after {
background: $flamingo;
border-radius: 50%;
content: "";
height: 400vw;
left: 50%;
position: absolute;
top: calc(328.2px + 41vw);
transform: translateX(-50%);
width: 400vw;
}

.hero-image {
left: 0;
position: absolute;
top: calc(328.2px + 24vw);
width: 100vw;
z-index: 5;

img {
left: 0;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}

.neon {
width: 44vw;
left: 7vw;
top: -24vw;
}

.bigtop,
.bigtop-shadow {
left: -6vw;
width: 130vw;
}

.people,
.people-shadow {
left: 3vw;
top: 3vw;
width: 108vw;
}

.andyou {
width: 150vw;
left: -40vw;
top: -4vw;
}

.shadow {
opacity: 0.4;
}

&::after {
content: "";
background: url(../images/coderdojo-logo.svg) no-repeat center center;
background-size: contain;
height: 25px;
left: 50%;
position: absolute;
top: 40vw;
transform: translateX(-50%);
width: 86px;

}
}

.site-title {
font-family: $roboto-condensed;
font-size: 37.8px;
font-weight: bold;
letter-spacing: -0.125em;
text-align: center;
}

.site-description {
font-family: $pixelmplus10;
font-size: 17.4px;
letter-spacing: -0.02em;
margin: -20px auto 0;
text-align: center;
width: 120px;

&::before {
content: "▶";
font-family: $pixelmplus10;
font-size: 16px;
margin-right: 20px;
}
}

.dojocon-day {
color: $flamingo;
font-family: $pixelmplus10;
letter-spacing: -0.03em;
text-align: center;

.date {
font-size: 34px;
}

.day {
font-size: 19px;
}
}

.dojocon-venue {
font-family: $pixelmplus10;
font-size: 14px;
margin: auto;
line-height: 22px;
padding: 4px 0;
text-align: center;
width: 16.5em;

.preposition {
display: block;
font-size: 14px;
}
}
}

.entry-content {
font-size: 14px;
font-weight: 300;
Expand Down
1 change: 1 addition & 0 deletions assets/_sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import "dojoconjapan2017/component/merlon";
@import "dojoconjapan2017/layout/header";
@import "dojoconjapan2017/layout/footer";
@import "dojoconjapan2017/layout/hero";
@import "dojoconjapan2017/layout/front-page-content";
@import "dojoconjapan2017/layout/page";
@import "dojoconjapan2017/layout/entry-content";
Expand Down
2 changes: 1 addition & 1 deletion assets/css/main.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion front-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
get_template_part( 'templates/front-page-content/' . $post->post_name );
else : ?>

<section class="front-page-content page page-<?php echo esc_attr( $post->post_name ); ?>">
<section id="front-page-<?php echo esc_attr( $post->post_name ); ?>" class="front-page-content page page-<?php echo esc_attr( $post->post_name ); ?>">

<h1 class="page-title"><?php the_title(); ?></h1>

Expand Down
33 changes: 33 additions & 0 deletions header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,36 @@
<span class="hamburger-inner">Menu</span>
</span>
</button>

<div class="hero" <?php if ( get_header_image() ) : ?>
style="background-image: <?php header_image(); ?>;"
<?php endif; ?>>
<div class="hero-text">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php if ( get_theme_mod( 'dojocon_date' ) && get_theme_mod( 'dojocon_day' ) ) : ?>
<p class="dojocon-day">
<span class="date"><?php echo esc_html( get_theme_mod( 'dojocon_date' ) ); ?></span>
<span class="day"><?php echo esc_html( get_theme_mod( 'dojocon_day' ) ); ?></span>
</p>
<?php endif; ?>
<?php if ( get_theme_mod( 'dojocon_venue' ) ) : ?>
<p class="dojocon-venue">
<span class="preposition">in</span>
<span class="venue"><?php echo esc_html( get_theme_mod( 'dojocon_venue' ) ); ?></span>
</p>
<?php endif; ?>
</div>
<?php if ( ! get_header_image() ) : ?>
<div class="hero-image">
<img class="neon" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-neon.svg' ) ); ?>" alt="DojoCon Japan">
<div class="shadow">
<img class="bigtop-shadow" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-bigtop-shadow.svg' ) ); ?>">
<img class="people-shadow" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-people-shadow.svg' ) ); ?>">
</div>
<img class="bigtop" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-bigtop.svg' ) ); ?>">
<img class="people" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-people.svg' ) ); ?>">
<img class="andyou" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-andyou.svg' ) ); ?>">
</div>
<?php endif; ?>
</div>
Loading

0 comments on commit 3c4c05a

Please sign in to comment.