Skip to content

Instantly share code, notes, and snippets.

@zzin

zzin/SpoqaHanSans-kr.css

Last active November 16, 2017 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zzin/b4ccc700299b2e6e89134bd68bb52860 to your computer and use it in GitHub Desktop.
Save zzin/b4ccc700299b2e6e89134bd68bb52860 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-cdn-1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Raw
bootstrap-cdn-2
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
Raw
bootstrap-css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
Raw
bootstrap-js
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Raw
bootstrap-starter-template.html
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Raw
custom-1.js
(function ($) {
function initSlick() {
var $slider = $('.slick-slider')
.on('init', function(slick) {
$('.slick-slider .bg-wrap').addClass('init');
})
.slick({
dots: true,
infinite: true,
speed: 350,
cssEase: 'ease-in-out'
});
}
$( document ).ready(function() {
initSlick();
});
})(jQuery);
Raw
custom.js
(function ($) {
$( document ).ready(function() {
});
})(jQuery);
Raw
functions(20171110).php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// css: bootstrap
wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' );
// script
// jquery
wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false );
// bootstrap
wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true );
wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true );
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
Raw
functions-1.php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// css: bootstrap
wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' );
// css: main.css
wp_enqueue_style( 'zeein-main', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), 'v1.0' );
// script
// jquery
wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false );
// bootstrap
wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true );
wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true );
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
Raw
functions-2.php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// css: bootstrap
wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' );
// css: main.css
wp_enqueue_style( 'zeein-main', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), 'v1.0' );
// script
// jquery
wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false );
// navigation
wp_enqueue_script( 'zeein-navigation', get_stylesheet_directory_uri() . '/assets/js/navigation.js', array(), 'v10.0', true );
// bootstrap
wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true );
wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true );
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
Raw
functions-3.php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// css: bootstrap
wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' );
// css: slick
wp_enqueue_style( 'zeein-slick', get_stylesheet_directory_uri() . '/assets/slick-1.8.0/slick/slick.css', array(), 'v1.8.0' );
// css: main.css
wp_enqueue_style( 'zeein-main', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), 'v1.0' );
// script
// jquery
wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false );
// navigation
wp_enqueue_script( 'zeein-navigation', get_stylesheet_directory_uri() . '/assets/js/navigation.js', array(), 'v10.0', true );
// bootstrap
wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true );
wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true );
// slick
wp_enqueue_script( 'zeein-slick.js', get_stylesheet_directory_uri() . '/assets/slick-1.8.0/slick/slick.min.js', array(), 'v1.8.0', true );
// custom
wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
Raw
functions.php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// custom
// script
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
Raw
header-1.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'zeein-yellow' ); ?></a><!-- .skip-link -->
<header id="mastheads" class="site-header">
<div class="container">
<div class="row">
<div class="col-12">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo bloginfo('template_url'); ?>/assets/img/logo/logo-default-84x40.svg" /></a>
</div>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e('Primary menu', 'zeein-yellow' ); ?><span></span></button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</div><!-- .col-12 -->
</div><!-- .row -->
</div><!-- .container -->
</header><!-- .header -->
<div id="content" class="site-content">
Raw
header-2.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'zeein-yellow' ); ?></a><!-- .skip-link -->
<header id="mastheads" class="site-header">
<div class="container">
<div class="row">
<div class="col-12">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo bloginfo('template_url'); ?>/assets/img/logo/logo-default-84x40.svg" /></a>
</div>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e('Primary menu', 'zeein-yellow' ); ?><span></span></button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</div><!-- .col-12 -->
</div><!-- .row -->
</div><!-- .container -->
</header><!-- .header -->
<div class="slick-slider-wrap">
<div class="slick-slider">
<div>
<div class="bg-wrap bg-wrap-1"></div>
<div class="div-content">
<p class="lead">Welcome to our company.</p>
<h1>ZEEIN <strong>YELLOW</strong> THEME</h1>
<p>Branding / Development / Web / Photo</p>
<button class="zeein-button">READ MORE</button>
</div>
</div>
<div>
<div class="bg-wrap bg-wrap-2"></div>
<div class="div-content">
<p class="lead">Good artists copy, great artists steal.</p>
<h1>ZEEIN <strong>WOW</strong> STORY</h1>
<p>CI / BI / Print</p>
<a href="#" class="zeein-button">READ MORE</a>
</div>
</div>
</div>
</div>
<div id="content" class="site-content">
Raw
header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div><!-- #header -->
Raw
index-1.php
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<!-- services -->
<section id="section_1" class="services">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 mb-3">
<h6 class="bar">OUR SERVICES</h6>
<h3>Maecenas sed diam eget risus varius.</h3>
<hr>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere fringilla eros sed fermentum.
</p>
<hr>
<p class="fs-14 fw-300">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 mb-3">
<div class="div-box-wrap text-center">
<figure>
<img src="/wp-content/uploads/2017/11/icon-service-1.svg" alt="icon-responsive">
</figure>
<h4>RESPONSIVE</h4>
<p class="fs-14 fw-300">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p class="mt-3">
<a href="#" class="zeein-button">READ MORE</a>
</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 mb-3">
<div class="div-box-wrap text-center">
<figure>
<img src="/wp-content/uploads/2017/11/icon-service-2.svg" alt="icon-customizable">
</figure>
<h4>CUSTOMIZABLE</h4>
<p class="fs-14 fw-300">
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<p class="mt-3">
<a href="#" class="zeein-button">READ MORE</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main><!-- #main.site-main -->
</div><!-- #prmary.content-area -->
<?php get_footer(); ?>
Raw
index.php
<?php get_header(); ?>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
</p>
</div><!-- .entry -->
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>
Raw
main-1.css
@charset "utf-8";
/* ==========================================================================
웹 접근성
========================================================================== */
.screen-reader-text {
border: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==========================================================================
텍스트
========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
color: rgba(0, 0, 0, 0.65);
background-color: rgba(222, 222, 222, 1);
font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300; }
.font__eng {
font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
}
/* ==========================================================================
Logo & Navigation
========================================================================== */
/* 모바일 햄버거 메뉴 */
.menu-toggle {
position: absolute;
top: 10px;
right: 15px;
display: none;
text-indent: -9999rem;
border: none;
padding: 0;
width: 40px;
height: 40px;
z-index: 10;
background-color: rgba(0, 0, 0, 0); }
.menu-toggle:active,
.menu-toggle:focus {
cursor: pointer;
outline: none; }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background-color: black;
transition-duration: 0.15s, 0.15s;
transition-delay: 0.15s, 0s; }
.menu-toggle span {
top: 18px; }
.menu-toggle span::before {
top: -12px;
transition-property: top, transform; }
.menu-toggle span::after {
bottom: -12px;
transition-property: bottom, transform; }
.menu-toggle[aria-expanded="true"] span {
background-color: rgba(0, 0, 0, 0); }
.menu-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after {
bottom: 0px;
transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::after {
transition-delay: 0s, 0.15s; }
/* 로고 및 메뉴 */
.site-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
transition: all 0.25s ease-in-out; }
/* 로고 */
.site-header .site-branding {
position: absolute;
display: inline;
top: 50px;
width: 83px;
z-index: 10; }
/* 메뉴 */
.site-header .main-navigation {}
.site-header .main-navigation ul {
list-style: none;
margin: 0;
padding: 0; }
.site-header .main-navigation .menu-main-container { }
.site-header .main-navigation .menu-main-container ul.nav-menu {
position: absolute;
right: 0; }
.site-header .main-navigation .menu-main-container ul li {
float: left; }
.site-header .main-navigation .menu-main-container ul li a {
background-color: transparent;
padding: 60px 15px 30px;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
outline: none;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out; }
.site-header .main-navigation .menu-main-container ul li a:active,
.site-header .main-navigation .menu-main-container ul li a:hover {
color: black;
background-color: rgba(251, 207, 75, 0.8); }
.site-content {
margin-top: 1400px;
}
/* ==========================================================================
미디어 쿼리
========================================================================== */
@media only screen and (max-width: 991px) {
/* 모바일 햄버거 메뉴 */
.menu-toggle {
display: block; }
/* 모바일 사이즈에서 상단 좌우 폭을 100% */
.site-header .container {
max-width: 100%; }
/* 로고 */
.site-header .site-branding {
top: 10px;
left: 50%;
transform: translateX(-50%); }
/* 메뉴 */
.site-header .main-navigation .menu-main-container {
position: absolute;
top: calc(-100vh + 60px);
left: 0;
width: 100%;
height: 100vh;
background-color: white;
transition: all 0.3s ease-in-out; }
.site-header .main-navigation.toggled .menu-main-container {
top: 0;
}
.site-header .main-navigation .menu-main-container ul {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
right: inherit !important;
transform: translate( -50%, -50% ); }
.site-header .main-navigation .menu-main-container ul li {
float: none; }
.site-header .main-navigation .menu-main-container ul li a {
color: rgba(0, 0, 0, 0.2);
font-size:1.6rem;
line-height: 1.6rem;
padding: 0.8rem 1rem;
width: 100%; }
}
Raw
main-2.css
@charset "utf-8";
/* ==========================================================================
웹 접근성
========================================================================== */
.screen-reader-text {
border: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==========================================================================
텍스트
========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
color: rgba(0, 0, 0, 0.65);
background-color: rgba(222, 222, 222, 1);
font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300; }
.font__eng {
font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
}
h1 {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 64px;
font-weight: 300;
color: white;
transition: all 0.3s ease; }
h1 strong {
color: #FBD04B; }
/* ==========================================================================
Button
========================================================================== */
.zeein-button {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
border: 2px solid white;;
padding: 0.8rem 1.5rem;
background: none;
color: white;
font-size: 0.8rem;
line-height: 0.8rem;
display: inline-block;
border-radius: 100px;
cursor: pointer;
transition: all 0.25s ease; }
.zeein-button:active,
.zeein-button:focus,
.zeein-button:hover {
color: black;
text-decoration: none;
background-color: #FBD04B;
border-color: #FBD04B;
outline: none;
}
/* ==========================================================================
Logo & Navigation
========================================================================== */
/* 모바일 햄버거 메뉴 */
.menu-toggle {
position: absolute;
top: 10px;
right: 15px;
display: none;
text-indent: -9999rem;
border: none;
padding: 0;
width: 40px;
height: 40px;
z-index: 10;
background-color: rgba(0, 0, 0, 0); }
.menu-toggle:active,
.menu-toggle:focus {
cursor: pointer;
outline: none; }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background-color: black;
transition-duration: 0.15s, 0.15s;
transition-delay: 0.15s, 0s; }
.menu-toggle span {
top: 18px; }
.menu-toggle span::before {
top: -12px;
transition-property: top, transform; }
.menu-toggle span::after {
bottom: -12px;
transition-property: bottom, transform; }
.menu-toggle[aria-expanded="true"] span {
background-color: rgba(0, 0, 0, 0); }
.menu-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after {
bottom: 0px;
transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::after {
transition-delay: 0s, 0.15s; }
/* 로고 및 메뉴 */
.site-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
transition: all 0.25s ease-in-out; }
/* 로고 */
.site-header .site-branding {
position: absolute;
display: inline;
top: 50px;
width: 83px;
z-index: 10; }
/* 메뉴 */
.site-header .main-navigation {}
.site-header .main-navigation ul {
list-style: none;
margin: 0;
padding: 0; }
.site-header .main-navigation .menu-main-container { }
.site-header .main-navigation .menu-main-container ul.nav-menu {
position: absolute;
right: 0; }
.site-header .main-navigation .menu-main-container ul li {
float: left; }
.site-header .main-navigation .menu-main-container ul li a {
background-color: transparent;
color: white;
padding: 60px 15px 30px;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
outline: none;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out; }
.site-header .main-navigation .menu-main-container ul li a:active,
.site-header .main-navigation .menu-main-container ul li a:hover {
color: black;
background-color: rgba(251, 207, 75, 0.8); }
.site-content {
/* margin-top: 1400px; */
}
/* ==========================================================================
Slick Slider
========================================================================== */
/* 메인 슬라이드 */
.slick-slider-wrap { }
.slick-slider-wrap .slick-slider {}
.slick-slider-wrap .slick-slider .slick-arrow {
position: absolute;
font-size: 0;
line-height: 0;
z-index: 50;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
opacity: 0.5;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-arrow.slick-next {
right: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev {
left: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before,
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev::before {
content: '\e800';
font-family: 'fontello';
color: white;
display: inline-block;
font-size: 1rem;
line-height: 1.2rem;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before {
content: '\e801';
}
.slick-slider-wrap .slick-slider .slick-arrow:active,
.slick-slider-wrap .slick-slider .slick-arrow:hover {
opacity: 1;
}
.slick-slider-wrap .slick-slider .slick-dots {
position: absolute;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
list-style: none; }
.slick-slider-wrap .slick-slider .slick-dots li {
float: left; }
.slick-slider-wrap .slick-slider .slick-dots li button {
font-size: 0;
line-height: 0;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
opacity: 0.3;
transition: opacity 0.5s ease; }
.slick-slider-wrap .slick-slider .slick-dots li button::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: white;
border-radius: 100%;
}
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button { opacity: 1; }
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button::before {
width: 12px;
height: 12px;
}
.slick-slider-wrap .slick-slider .slick-slide {
position: relative;
height: 70vh;
background-color: black;
outline: none;
transition: height 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: all 0.3s ease-in-out; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.init {
opacity: 0.3;
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-1 {
background-image: url('/wp-content/uploads/2017/11/top-slide-01.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-2 {
background-image: url('/wp-content/uploads/2017/11/top-slide-02.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .div-content {
position: relative;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
color: white;
}
/* ==========================================================================
미디어 쿼리
========================================================================== */
@media only screen and (max-width: 991px) {
h1 {
padding: 0 2.6rem;
font-size: 250%; }
/* 모바일 햄버거 메뉴 */
.menu-toggle {
display: block; }
/* 모바일 사이즈에서 상단 좌우 폭을 100% */
.site-header .container {
max-width: 100%; }
/* 로고 */
.site-header .site-branding {
top: 10px;
left: 50%;
transform: translateX(-50%); }
/* 메뉴 */
.site-header .main-navigation .menu-main-container {
position: absolute;
top: calc(-100vh + 60px);
left: 0;
width: 100%;
height: 100vh;
background-color: white;
transition: all 0.3s ease-in-out; }
.site-header .main-navigation.toggled .menu-main-container {
top: 0;
}
.site-header .main-navigation .menu-main-container ul {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
right: inherit !important;
transform: translate( -50%, -50% ); }
.site-header .main-navigation .menu-main-container ul li {
float: none; }
.site-header .main-navigation .menu-main-container ul li a {
color: rgba(0, 0, 0, 0.2);
font-size:1.6rem;
line-height: 1.6rem;
padding: 0.8rem 1rem;
width: 100%; }
/* 메인 슬라이드 */
.slick-slider-wrap .slick-slider .slick-slide {
height: 80vh; }
.slick-slider-wrap .slick-slider .slick-slide .div-content {
top: calc( 50% + 60px);
transform: translate( -50%, calc( -50% + -30px) );
}
}
Raw
main-3.css
@charset "utf-8";
/* ==========================================================================
웹 접근성
========================================================================== */
.screen-reader-text {
border: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==========================================================================
텍스트
========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
color: rgba(0, 0, 0, 0.65);
font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300; }
.font__eng {
font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
}
/* ==========================================================================
Button
========================================================================== */
.zeein-button {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
border: 2px solid white;;
padding: 0.8rem 1.5rem;
background: none;
color: white;
font-size: 0.8rem;
line-height: 0.8rem;
display: inline-block;
border-radius: 100px;
cursor: pointer;
transition: all 0.25s ease; }
.zeein-button:active,
.zeein-button:focus,
.zeein-button:hover {
color: black;
text-decoration: none;
background-color: #FBD04B;
border-color: rgba(255, 255, 255, 0.4);
outline: none;
}
/* ==========================================================================
Logo & Navigation
========================================================================== */
/* 모바일 햄버거 메뉴 */
.menu-toggle {
position: absolute;
top: 10px;
right: 15px;
display: none;
text-indent: -9999rem;
border: none;
padding: 0;
width: 40px;
height: 40px;
z-index: 10;
background-color: rgba(0, 0, 0, 0); }
.menu-toggle:active,
.menu-toggle:focus {
cursor: pointer;
outline: none; }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background-color: black;
transition-duration: 0.15s, 0.15s;
transition-delay: 0.15s, 0s; }
.menu-toggle span {
top: 18px; }
.menu-toggle span::before {
top: -12px;
transition-property: top, transform; }
.menu-toggle span::after {
bottom: -12px;
transition-property: bottom, transform; }
.menu-toggle[aria-expanded="true"] span {
background-color: rgba(0, 0, 0, 0); }
.menu-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after {
bottom: 0px;
transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::after {
transition-delay: 0s, 0.15s; }
/* 로고 및 메뉴 */
.site-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
transition: all 0.25s ease-in-out; }
/* 로고 */
.site-header .site-branding {
position: absolute;
display: inline;
top: 50px;
width: 83px;
z-index: 10; }
/* 메뉴 */
.site-header .main-navigation {}
.site-header .main-navigation ul {
list-style: none;
margin: 0;
padding: 0; }
.site-header .main-navigation .menu-main-container { }
.site-header .main-navigation .menu-main-container ul.nav-menu {
position: absolute;
right: 0; }
.site-header .main-navigation .menu-main-container ul li {
float: left; }
.site-header .main-navigation .menu-main-container ul li a {
background-color: transparent;
color: white;
padding: 60px 15px 30px;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
outline: none;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out; }
.site-header .main-navigation .menu-main-container ul li a:active,
.site-header .main-navigation .menu-main-container ul li a:hover {
color: black;
background-color: rgba(251, 207, 75, 0.8); }
.site-content {
/* margin-top: 1400px; */
}
/* ==========================================================================
Slick Slider
========================================================================== */
/* 메인 슬라이드 */
.slick-slider-wrap { }
.slick-slider-wrap .slick-slider {}
.slick-slider-wrap .slick-slider .slick-arrow {
position: absolute;
font-size: 0;
line-height: 0;
z-index: 50;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
opacity: 0.5;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-arrow.slick-next {
right: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev {
left: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before,
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev::before {
content: '\e800';
font-family: 'fontello';
color: white;
display: inline-block;
font-size: 1rem;
line-height: 1.2rem;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before {
content: '\e801';
}
.slick-slider-wrap .slick-slider .slick-arrow:active,
.slick-slider-wrap .slick-slider .slick-arrow:hover {
opacity: 1;
}
.slick-slider-wrap .slick-slider .slick-dots {
position: absolute;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
list-style: none; }
.slick-slider-wrap .slick-slider .slick-dots li {
float: left; }
.slick-slider-wrap .slick-slider .slick-dots li button {
font-size: 0;
line-height: 0;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
opacity: 0.3;
transition: opacity 0.5s ease; }
.slick-slider-wrap .slick-slider .slick-dots li button::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: white;
border-radius: 100%;
}
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button { opacity: 1; }
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button::before {
width: 12px;
height: 12px;
}
.slick-slider-wrap .slick-slider .slick-slide {
position: relative;
height: 70vh;
background-color: black;
outline: none;
transition: height 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: all 0.3s ease-in-out; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.init {
opacity: 0.3;
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-1 {
background-image: url('/wp-content/uploads/2017/11/top-slide-01.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-2 {
background-image: url('/wp-content/uploads/2017/11/top-slide-02.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .div-content {
position: relative;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
color: white;
}
/* ==========================================================================
Global & Section
========================================================================== */
/*
light yellow - #FFDC71;
yellow - #FBD04B;
orange - #FBBB4B;
dark orange - #FC9E21;
light gray - #F2F2F2;
dark gray - #1D1D1D;
*/
/* basic */
/* Header font type */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 1rem;
color: black; }
h1.bar,
h2.bar,
h3.bar,
h4.bar,
h5.bar,
h6.bar {
overflow: hidden; }
h1.bar::after,
h2.bar::after,
h3.bar::after,
h4.bar::after,
h5.bar::after,
h6.bar::after {
content: '';
display: inline-block;
height: 1rem;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 0.6rem;
border-bottom: 1px solid #F2F2F2; }
h1 {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 64px;
font-weight: 300;
color: white;
transition: all 0.3s ease; }
h1 strong {
color: #FBD04B; }
h3 {
font-size: 36px;
font-weight: 300; }
h4 {
font-size: 30px;
font-weight: 600; }
h5 {
font-family: 'Libre Baskerville', serif;
font-size: 28px;
font-weight: 300;
color: white; }
h6 {
font-size: 1rem;
font-weight: 600; }
p.lead {
font-size: 20px;
font-weight: 300; }
hr {
border-top-color: #F2F2F2;
margin-top: 2rem;
margin-bottom: 2rem; }
.fs-14 {
font-size: 14px; }
.fw-300 {
font-weight: 300; }
/* div-box-wrap */
.div-box-wrap {
background-color: #FBD04B;
height: 100%;
padding: 1rem;
margin-bottom: 1rem;
}
.div-box-wrap figure {
padding: 1rem 0;
}
.div-box-wrap figure img {
width: 100px;
height: auto;
}
section {
padding: 5rem 0; }
section.bg-light-gray {
background-color: #F2F2F2; }
section.bg-dark-gray {
background-color: #1D1D1D;
color: white; }
section.bg-dark-gray h1,
section.bg-dark-gray h2,
section.bg-dark-gray h3,
section.bg-dark-gray h4,
section.bg-dark-gray h5,
section.bg-dark-gray h6 {
color: white;
}
section.about .about-box-wrap {
min-height: 780px; }
/* ==========================================================================
미디어 쿼리
========================================================================== */
@media only screen and (max-width: 991px) {
h1 {
padding: 0 2.6rem;
font-size: 250%; }
/* 모바일 햄버거 메뉴 */
.menu-toggle {
display: block; }
/* 모바일 사이즈에서 상단 좌우 폭을 100% */
.site-header .container {
max-width: 100%; }
/* 로고 */
.site-header .site-branding {
top: 10px;
left: 50%;
transform: translateX(-50%); }
/* 메뉴 */
.site-header .main-navigation .menu-main-container {
position: absolute;
top: calc(-100vh + 60px);
left: 0;
width: 100%;
height: 100vh;
background-color: white;
transition: all 0.3s ease-in-out; }
.site-header .main-navigation.toggled .menu-main-container {
top: 0;
}
.site-header .main-navigation .menu-main-container ul {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
right: inherit !important;
transform: translate( -50%, -50% ); }
.site-header .main-navigation .menu-main-container ul li {
float: none; }
.site-header .main-navigation .menu-main-container ul li a {
color: rgba(0, 0, 0, 0.2);
font-size:1.6rem;
line-height: 1.6rem;
padding: 0.8rem 1rem;
width: 100%; }
/* 메인 슬라이드 */
.slick-slider-wrap .slick-slider .slick-slide {
height: 80vh; }
.slick-slider-wrap .slick-slider .slick-slide .div-content {
top: calc( 50% + 60px);
transform: translate( -50%, calc( -50% + -30px) );
}
}
Raw
main.css
@charset "utf-8";
/* ==========================================================================
웹 접근성
========================================================================== */
.screen-reader-text {
border: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==========================================================================
텍스트
========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
color: rgba(0, 0, 0, 0.65);
background-color: rgba(222, 222, 222, 1);
font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300; }
.font__eng {
font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
}
Raw
media.css
/*
////////////////////////// mobile first
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
////////////////////////// pc first
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
*/
Raw
navigation.js
/**
* File navigation.js.
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
( function() {
var container, button, menu, links, i, len;
container = document.getElementById( 'site-navigation' );
if ( ! container ) {
return;
}
button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
return;
}
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' );
button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
/**
* Toggles `focus` class to allow submenu access on tablets.
*/
( function( container ) {
var touchStartFn, i,
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
if ( 'ontouchstart' in window ) {
touchStartFn = function( e ) {
var menuItem = this.parentNode, i;
if ( ! menuItem.classList.contains( 'focus' ) ) {
e.preventDefault();
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
if ( menuItem === menuItem.parentNode.children[i] ) {
continue;
}
menuItem.parentNode.children[i].classList.remove( 'focus' );
}
menuItem.classList.add( 'focus' );
} else {
menuItem.classList.remove( 'focus' );
}
};
for ( i = 0; i < parentLink.length; ++i ) {
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
}
}
}( container ) );
} )();
Raw
SpoqaHanSans-kr.css
@font-face {
font-family: 'Spoqa Han Sans';
font-weight: 700;
src: local('Spoqa Han Sans Bold'),
url('./Spoqa Han Sans Bold.woff2') format('woff2'),
url('./Spoqa Han Sans Bold.woff') format('woff'),
url('./Spoqa Han Sans Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Spoqa Han Sans';
font-weight: 400;
src: local('Spoqa Han Sans Regular'),
url('./Spoqa Han Sans Regular.woff2') format('woff2'),
url('./Spoqa Han Sans Regular.woff') format('woff'),
url('./Spoqa Han Sans Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Spoqa Han Sans';
font-weight: 300;
src: local('Spoqa Han Sans Light'),
url('./Spoqa Han Sans Light.woff2') format('woff2'),
url('./Spoqa Han Sans Light.woff') format('woff'),
url('./Spoqa Han Sans Light.ttf') format('truetype');
}
@font-face {
font-family: 'Spoqa Han Sans';
font-weight: 100;
src: local('Spoqa Han Sans Thin'),
url('./Spoqa Han Sans Thin.woff2') format('woff2'),
url('./Spoqa Han Sans Thin.woff') format('woff'),
url('./Spoqa Han Sans Thin.ttf') format('truetype');
}
Raw
style-1.css
/*
Theme Name: zeein yellow
Theme URI: blog.d1p2.com
Description: zeein yellow theme
Version: 1.0
Author: zeein
Author URI: http://blog.d1p2.com
*/
@charset "utf-8";
/* font : kor */
@import url('./assets/font/SpoqaHanSans_subset/SpoqaHanSans-kr.css');
/* font : eng */
@import url('./assets/font/OpenSans/stylesheet.css');
Raw
style-2.css
/*
Theme Name: zeein yellow
Theme URI: blog.d1p2.com
Description: zeein yellow theme
Version: 1.0
Author: zeein
Author URI: http://blog.d1p2.com
*/
@charset "utf-8";
/* font : kor */
@import url('./assets/font/SpoqaHanSans_subset/SpoqaHanSans-kr.css');
/* font : eng */
@import url('./assets/font/OpenSans/stylesheet.css');
/* font : fontello */
@import url('./assets/font/fontello/css/fontello.css');
Raw
style.css
/*
Theme Name: zeein yellow
Theme URI: blog.d1p2.com
Description: zeein yellow theme
Version: 1.0
Author: zeein
Author URI: http://blog.d1p2.com
*/
Raw
stylesheet.css
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 11, 2017 */
@font-face {
font-family: 'Open Sans';
src: url('opensans-light-webfont.eot');
src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-light-webfont.woff2') format('woff2'),
url('opensans-light-webfont.woff') format('woff'),
url('opensans-light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('opensans-semibold-webfont.eot');
src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-semibold-webfont.woff2') format('woff2'),
url('opensans-semibold-webfont.woff') format('woff'),
url('opensans-semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff2') format('woff2'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('opensans-extrabold-webfont.eot');
src: url('opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-extrabold-webfont.woff2') format('woff2'),
url('opensans-extrabold-webfont.woff') format('woff'),
url('opensans-extrabold-webfont.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
Raw
zeein-yellow
zeein-yellow theme : zeein81@gmail.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment