updated template to handle file, style fixes
This commit is contained in:
are0h
parent
fd4ff2ea52
commit
a66377e597
7 changed files with 352 additions and 312 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -6,6 +6,7 @@ dist
|
||||||
.DS_Store
|
.DS_Store
|
||||||
*.sublime-project
|
*.sublime-project
|
||||||
*.sublime-workspace
|
*.sublime-workspace
|
||||||
|
*.code-workspace
|
||||||
assets
|
assets
|
||||||
vendor
|
vendor
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,132 +7,151 @@ class ThemeEngine
|
||||||
public $data = [];
|
public $data = [];
|
||||||
public $loader;
|
public $loader;
|
||||||
public $twig;
|
public $twig;
|
||||||
|
|
||||||
public function __construct(string $themePath, string $themeAssetPath)
|
public function __construct(string $themePath, string $themeAssetPath)
|
||||||
{
|
{
|
||||||
$var = [];
|
$var = [];
|
||||||
$this->themePath = $themePath;
|
$this->themePath = $themePath;
|
||||||
$this->themeAssetPath = $themeAssetPath;
|
$this->themeAssetPath = $themeAssetPath;
|
||||||
$path = explode("/", $themeAssetPath);
|
$path = explode('/', $themeAssetPath);
|
||||||
$this->themeFolder = $path[4];
|
$this->themeFolder = $path[4];
|
||||||
$this->settings = json_decode(
|
$this->settings = json_decode(
|
||||||
file_get_contents("./data/settings.json"),
|
file_get_contents('./data/settings.json'),
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
$this->posts = json_decode(file_get_contents("./data/posts.json"), true);
|
$this->posts = json_decode(file_get_contents('./data/posts.json'), true);
|
||||||
$this->archives = json_decode(
|
$this->archives = json_decode(
|
||||||
file_get_contents("./data/archives.json"),
|
file_get_contents('./data/archives.json'),
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
$this->loader = new \Twig\Loader\FilesystemLoader(
|
$this->loader = new \Twig\Loader\FilesystemLoader(
|
||||||
$themePath . "/" . $path[4]
|
$themePath.'/'.$path[4]
|
||||||
);
|
);
|
||||||
$this->twig = new \Twig\Environment($this->loader, []);
|
$this->twig = new \Twig\Environment($this->loader, []);
|
||||||
$this->router($_SERVER["REQUEST_URI"]);
|
$this->router($_SERVER['REQUEST_URI']);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function router(string $request)
|
public function router(string $request)
|
||||||
{
|
{
|
||||||
$pageInfo = [
|
$pageInfo = [
|
||||||
"keywords" => $this->settings["keywords"],
|
'keywords' => $this->settings['keywords'],
|
||||||
"description" => $this->settings["description"],
|
'description' => $this->settings['description'],
|
||||||
"image" => $this->themeAssetPath . "/assets/images/global/default-bg.jpg",
|
'image' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
];
|
];
|
||||||
|
|
||||||
$featureList = explode(",", $this->posts["feature"]);
|
$featureList = explode(',', $this->posts['feature']);
|
||||||
$fileList = explode(",", $this->posts["files"]);
|
$fileList = explode(',', $this->posts['files']);
|
||||||
|
|
||||||
$images = [];
|
$images = [];
|
||||||
$files = [];
|
$files = [];
|
||||||
foreach ($featureList as $file) {
|
foreach ($featureList as $file) {
|
||||||
$item = trim($file);
|
$item = trim($file);
|
||||||
$ext = pathinfo($item, PATHINFO_EXTENSION);
|
$ext = pathinfo($item, PATHINFO_EXTENSION);
|
||||||
if ($item != null || $item != "") {
|
if ($item != null || $item != '') {
|
||||||
array_push($images, ["file" => $item, "type" => trim($ext)]);
|
array_push($images, ['file' => $item, 'type' => trim($ext)]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
foreach ($fileList as $file) {
|
foreach ($fileList as $file) {
|
||||||
$item = trim($file);
|
$item = trim($file);
|
||||||
$ext = pathinfo($item, PATHINFO_EXTENSION);
|
$ext = pathinfo($item, PATHINFO_EXTENSION);
|
||||||
if ($item != null || $item != "") {
|
if ($item != null || $item != '') {
|
||||||
array_push($files, ["file" => $item, "type" => trim($ext)]);
|
array_push($files, ['file' => $item, 'type' => trim($ext)]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$menu = $this->settings["menu"];
|
$menu = $this->settings['menu'];
|
||||||
switch ($request) {
|
switch ($request) {
|
||||||
case "/":
|
case '/':
|
||||||
$recent = $this->posts["recent_posts"];
|
$recent = $this->posts['recent_posts'];
|
||||||
$featured = $this->posts["featured_posts"];
|
$featured = $this->posts['featured_posts'];
|
||||||
$template = "index.twig";
|
$template = 'index.twig';
|
||||||
$content = $this->posts["index-content"];
|
$content = $this->posts['index-content'];
|
||||||
|
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
"debug" => true, //for theme kit
|
'debug' => true, // for theme kit
|
||||||
"theme" => $this->themeFolder, //for theme kit
|
'theme' => $this->themeFolder, // for theme kit
|
||||||
"title" => "This is Fipamo",
|
'title' => 'This is Fipamo',
|
||||||
"dynamicRender" => $this->settings["dynamicRender"],
|
'dynamicRender' => $this->settings['dynamicRender'],
|
||||||
"background" =>
|
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
$this->themeAssetPath . "/assets/images/global/default-bg.jpg",
|
'recent' => $recent,
|
||||||
"recent" => $recent,
|
'featured' => $featured,
|
||||||
"featured" => $featured,
|
'info' => $pageInfo,
|
||||||
"info" => $pageInfo,
|
'menu' => $menu,
|
||||||
"menu" => $menu,
|
'content' => $content,
|
||||||
"content" => $content,
|
'media' => $images,
|
||||||
|
'files' => $files,
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
case "/page":
|
case '/page':
|
||||||
$content = $this->posts["content"];
|
$content = $this->posts['content'];
|
||||||
$meta = $this->posts["meta"];
|
$meta = $this->posts['meta'];
|
||||||
$template = $request . ".twig";
|
$template = $request.'.twig';
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
"debug" => true, //for theme kit
|
'debug' => true, // for theme kit
|
||||||
"theme" => $this->themeFolder, //for theme kit
|
'theme' => $this->themeFolder, // for theme kit
|
||||||
"title" => "Page Title",
|
'title' => 'Page Title',
|
||||||
"dynamicRender" => $this->settings["dynamicRender"],
|
'dynamicRender' => $this->settings['dynamicRender'],
|
||||||
"background" =>
|
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
$this->themeAssetPath . "/assets/images/global/default-bg.jpg",
|
'content' => $content,
|
||||||
"content" => $content,
|
'meta' => $meta,
|
||||||
"meta" => $meta,
|
'info' => $pageInfo,
|
||||||
"info" => $pageInfo,
|
'menu' => $menu,
|
||||||
"menu" => $menu,
|
'media' => $images,
|
||||||
"media" => $images,
|
'files' => $files,
|
||||||
"files" => $files,
|
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
case "/tags":
|
case '/tags':
|
||||||
$tags = $this->settings["tag_list"];
|
$tags = $this->settings['tag_list'];
|
||||||
$template = $this->themeFolder . "/tags.twig";
|
$template = 'tags.twig';
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
"debug" => true, //for theme kit
|
'debug' => true, // for theme kit
|
||||||
"theme" => $this->themeFolder, //for theme kit
|
'theme' => $this->themeFolder, // for theme kit
|
||||||
"title" => "Pages Tagged as Tag",
|
'title' => 'Pages Tagged as Tag',
|
||||||
"dynamicRender" => $this->settings["dynamicRender"],
|
'dynamicRender' => $this->settings['dynamicRender'],
|
||||||
"background" =>
|
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
$this->themeAssetPath . "/assets/images/global/default-bg.jpg",
|
'tag_list' => $tags,
|
||||||
"tag_list" => $tags,
|
'info' => $pageInfo,
|
||||||
"info" => $pageInfo,
|
'menu' => $menu,
|
||||||
"menu" => $menu,
|
'media' => $images,
|
||||||
|
'files' => $files,
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
case "/archive":
|
case '/archive':
|
||||||
$archive = $this->archives;
|
$archive = $this->archives;
|
||||||
$template = $this->themeFolder . "/archive.twig";
|
$template = 'archive.twig';
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
"debug" => true, //for theme kit
|
'debug' => true, // for theme kit
|
||||||
"theme" => $this->themeFolder, //for theme kit
|
'theme' => $this->themeFolder, // for theme kit
|
||||||
"title" => "Archive",
|
'title' => 'Archive',
|
||||||
"dynamicRender" => $this->settings["dynamicRender"],
|
'dynamicRender' => $this->settings['dynamicRender'],
|
||||||
"background" =>
|
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
$this->themeAssetPath . "/assets/images/global/default-bg.jpg",
|
'archives' => $archive['archives'],
|
||||||
"archives" => $archive,
|
'info' => $pageInfo,
|
||||||
"info" => $pageInfo,
|
'menu' => $menu,
|
||||||
"menu" => $menu,
|
'media' => $images,
|
||||||
|
'files' => $files,
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
http_response_code(404);
|
set_error_handler(function ($errno, $errstr, $errfile, $errline) {
|
||||||
require __DIR__ . "/views/404.php";
|
// throw new \ErrorException($errstr, $errno, 0, $errfile, $errline);
|
||||||
|
$error = $errstr;
|
||||||
|
});
|
||||||
|
$template = 'error.twig';
|
||||||
|
$pageOptions = [
|
||||||
|
'debug' => true, // for theme kit
|
||||||
|
'theme' => $this->themeFolder, // for theme kit
|
||||||
|
'title' => 'Uh oh',
|
||||||
|
'dynamicRender' => $this->settings['dynamicRender'],
|
||||||
|
'background' => $this->themeAssetPath.'/assets/images/global/default-bg.jpg',
|
||||||
|
'info' => $pageInfo,
|
||||||
|
'content' => "Uh Oh, so there's a problem.",
|
||||||
|
'menu' => $menu,
|
||||||
|
'media' => $images,
|
||||||
|
'files' => $files,
|
||||||
|
];
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,36 @@
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<p>{{content | raw}}</p>
|
<p>{{content | raw}}</p>
|
||||||
<div>
|
<div>
|
||||||
|
<div class="page_files">
|
||||||
|
<div class="page_doc">
|
||||||
|
<strong>Files</strong><br/>
|
||||||
|
{% for doc in files %}
|
||||||
|
{% if doc.type != "mp3" %}
|
||||||
|
{% set path = doc.file|split('/') %}
|
||||||
|
<a href="{{doc.file}}">{{path[6]}}</a>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div class="page_sounds">
|
||||||
|
<strong>Sounds</strong><br/>
|
||||||
|
{% for doc in files %}
|
||||||
|
{% if doc.type == "mp3" %}
|
||||||
|
<audio controls>
|
||||||
|
<source src="{{doc.file}}" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
{{meta['who']}} dropped this {{ meta['when'] }}<br />
|
{{meta['who']}} dropped this {{ meta['when'] }}<br />
|
||||||
<strong>tags: </strong>
|
<strong>tags: </strong>
|
||||||
{% for tag in meta['tags'] %}
|
{% for tag in meta['tags'] %}
|
||||||
{% if dynamicRender is defined %}
|
{% if dynamicRender is defined %}
|
||||||
{% if dynamicRender == 'false' %}
|
{% if dynamicRender == 'true' %}
|
||||||
<a href="{{ "/tags/"~tag.slug }}">{{ tag.label }}</a>
|
<a href="{{ "/tags/"~tag.slug }}">{{ tag.label }}</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
|
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
|
||||||
|
|
@ -28,6 +52,7 @@
|
||||||
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
|
<a href="{{ "/tags/"~tag.slug~".html" }}">{{ tag.label }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ button, input[type=submit]
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
border: 0
|
border: 0
|
||||||
padding: 10px 0 5px 0
|
padding: 10px 0 5px 0
|
||||||
@include object_transitions(.3s)
|
transition: all 0.3s linear
|
||||||
|
|
||||||
select
|
select
|
||||||
font: 14px $baseType
|
font: 14px $baseType
|
||||||
|
|
@ -63,5 +63,3 @@ select
|
||||||
:-ms-input-placeholder
|
:-ms-input-placeholder
|
||||||
font: 25px $baseType
|
font: 25px $baseType
|
||||||
color: $white
|
color: $white
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,6 @@
|
||||||
@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
|
@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
|
||||||
text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
|
text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
|
||||||
|
|
||||||
@mixin object-transitions($rate)
|
|
||||||
-moz-transition: all $rate linear
|
|
||||||
-webkit-transition: all $rate linear
|
|
||||||
-o-transition: all $rate linear
|
|
||||||
transition: all $rate linear
|
|
||||||
|
|
||||||
|
|
||||||
@mixin background-opacity($rgb_value, $opacity)
|
@mixin background-opacity($rgb_value, $opacity)
|
||||||
background: rgba($rgb_value, $opacity)
|
background: rgba($rgb_value, $opacity)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,240 +6,245 @@ html
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
font: 400 1.2em/1.4em $baseType
|
font: 400 1.2em/1.4em $baseType
|
||||||
|
|
||||||
body
|
body
|
||||||
background: $white
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
perspective: 1px
|
|
||||||
transform-style: preserve-3d
|
|
||||||
height: 100%
|
|
||||||
width: 100%
|
|
||||||
overflow-y: scroll
|
|
||||||
overflow-x: hidden
|
|
||||||
|
|
||||||
a
|
|
||||||
color: $primary
|
|
||||||
text-decoration: none
|
|
||||||
border-bottom: 1px solid $highlight
|
|
||||||
//@include object-transitions(.2s)
|
|
||||||
&:hover
|
|
||||||
border-bottom: 1px solid $secondary
|
|
||||||
|
|
||||||
code
|
|
||||||
background: $black
|
|
||||||
color: $highlight
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 3px
|
|
||||||
|
|
||||||
pre
|
|
||||||
background: $black
|
|
||||||
color: $highlight
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 3px
|
|
||||||
code
|
|
||||||
color: $secondary
|
|
||||||
background: none
|
|
||||||
|
|
||||||
svg.icons
|
|
||||||
width: 25px
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
header
|
|
||||||
background: $primary
|
|
||||||
height: 90%
|
|
||||||
width: 100%
|
|
||||||
border-top: $white 3px solid
|
|
||||||
#media
|
|
||||||
width: 100%
|
|
||||||
height: 90%
|
|
||||||
position: absolute
|
|
||||||
.slide
|
|
||||||
@include object-transitions(.7s)
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
position: absolute
|
|
||||||
.hide
|
|
||||||
opacity: 0
|
|
||||||
.show
|
|
||||||
opacity: 1
|
|
||||||
video
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
object-fit: cover
|
|
||||||
nav
|
|
||||||
width: 97%
|
|
||||||
margin: 10px auto
|
|
||||||
z-index: 1000
|
|
||||||
position: relative
|
|
||||||
color: $primary
|
|
||||||
.left,.right
|
|
||||||
width: 50%
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
.left
|
|
||||||
a.logo-link
|
|
||||||
border-bottom: none
|
|
||||||
margin: 0 0 20px 0
|
|
||||||
display: block
|
|
||||||
#logo
|
|
||||||
width: 50px
|
|
||||||
border-bottom: none
|
|
||||||
.right
|
|
||||||
text-align: right
|
|
||||||
a.menu-link
|
|
||||||
background: $secondary
|
|
||||||
margin-bottom: 4px
|
|
||||||
padding: 3px
|
|
||||||
border-radius: 2px
|
|
||||||
display: inline-block
|
|
||||||
font-size: 0.8em
|
|
||||||
border-bottom: none
|
|
||||||
&:hover
|
|
||||||
background: $secondary
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.container
|
|
||||||
z-index: 2
|
|
||||||
background: $white
|
|
||||||
line-height: 30px
|
|
||||||
font-weight: lighter
|
|
||||||
width: 100%
|
|
||||||
//padding 40px
|
|
||||||
color: $black
|
|
||||||
article
|
|
||||||
position: relative
|
|
||||||
width: 80%
|
|
||||||
height: 80%
|
|
||||||
max-width: 840px
|
|
||||||
//min-height 500px
|
|
||||||
background: $white
|
background: $white
|
||||||
vertical-align: top
|
margin: 0
|
||||||
color: $black
|
padding: 0
|
||||||
margin: 0 auto
|
perspective: 1px
|
||||||
//.index, .page
|
transform-style: preserve-3d
|
||||||
//margin 30px
|
height: 100%
|
||||||
.index, .page
|
width: 100%
|
||||||
padding: 0 0 15px 0
|
overflow-y: scroll
|
||||||
img
|
overflow-x: hidden
|
||||||
display: block
|
|
||||||
|
a
|
||||||
|
color: $primary
|
||||||
|
text-decoration: none
|
||||||
|
border-bottom: 1px solid $highlight
|
||||||
|
//@include object-transitions(.2s)
|
||||||
|
&:hover
|
||||||
|
border-bottom: 1px solid $secondary
|
||||||
|
|
||||||
|
code
|
||||||
|
background: $black
|
||||||
|
color: $highlight
|
||||||
|
border-radius: 3px
|
||||||
|
padding: 3px
|
||||||
|
|
||||||
|
pre
|
||||||
|
background: $black
|
||||||
|
color: $highlight
|
||||||
|
border-radius: 3px
|
||||||
|
padding: 3px
|
||||||
|
code
|
||||||
|
color: $secondary
|
||||||
|
background: none
|
||||||
|
|
||||||
|
svg.icons
|
||||||
|
width: 25px
|
||||||
|
fill: $white
|
||||||
|
|
||||||
|
header
|
||||||
|
background: $primary
|
||||||
|
height: 90%
|
||||||
|
width: 100%
|
||||||
|
border-top: $white 3px solid
|
||||||
|
#media
|
||||||
width: 100%
|
width: 100%
|
||||||
h1
|
height: 90%
|
||||||
|
position: absolute
|
||||||
|
.slide
|
||||||
|
transition: all 0.7s linear
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
position: absolute
|
||||||
|
.hide
|
||||||
|
opacity: 0
|
||||||
|
.show
|
||||||
|
opacity: 1
|
||||||
|
video
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
object-fit: cover
|
||||||
|
nav
|
||||||
|
width: 97%
|
||||||
|
margin: 10px auto
|
||||||
|
z-index: 1000
|
||||||
|
position: relative
|
||||||
color: $primary
|
color: $primary
|
||||||
p
|
.left,.right
|
||||||
font: 300 1.25em/1.6em $baseType
|
width: 50%
|
||||||
//meta datea for page
|
|
||||||
.meta
|
|
||||||
font: 500 0.8em/1.3em $baseType
|
|
||||||
padding: 5px 0 0 0
|
|
||||||
border-top: 1px solid $primary
|
|
||||||
background: $white
|
|
||||||
a
|
|
||||||
font-size: 0.8em
|
|
||||||
font-weight: 400
|
|
||||||
//archive styling
|
|
||||||
.archive-item
|
|
||||||
padding: 15px 0 20px 0
|
|
||||||
span.year
|
|
||||||
font-size: 1.5em
|
|
||||||
font-weight: 500
|
|
||||||
padding: 5px
|
|
||||||
display: block
|
|
||||||
color: $primary
|
|
||||||
.archive-month
|
|
||||||
display: inline-block
|
display: inline-block
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
width: 30%
|
.left
|
||||||
padding: 5px
|
a.logo-link
|
||||||
span.month
|
border-bottom: none
|
||||||
color: $secondary
|
margin: 0 0 20px 0
|
||||||
font-size: 1.5em
|
|
||||||
font-weight: 300
|
|
||||||
padding: 5px
|
|
||||||
display: block
|
display: block
|
||||||
section
|
#logo
|
||||||
padding: 0 0 20px 0
|
width: 50px
|
||||||
background: $primary
|
border-bottom: none
|
||||||
a
|
.right
|
||||||
color: $white
|
text-align: right
|
||||||
.index-lists, .page-title
|
a.menu-link
|
||||||
max-width: 840px
|
background: $secondary
|
||||||
span
|
margin-bottom: 4px
|
||||||
font-size: 2em
|
padding: 3px
|
||||||
color: $secondary
|
border-radius: 2px
|
||||||
font-weight: 400
|
display: inline-block
|
||||||
width: 80%
|
font-size: 0.8em
|
||||||
margin: 0 auto
|
border-bottom: none
|
||||||
padding: 20px 0 0 0
|
&:hover
|
||||||
.recent, .featured
|
background: $secondary
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
.container
|
||||||
|
z-index: 2
|
||||||
|
background: $white
|
||||||
|
line-height: 30px
|
||||||
|
font-weight: lighter
|
||||||
|
width: 100%
|
||||||
|
//padding 40px
|
||||||
|
color: $black
|
||||||
|
article
|
||||||
|
position: relative
|
||||||
|
width: 80%
|
||||||
|
height: 80%
|
||||||
|
max-width: 840px
|
||||||
|
//min-height 500px
|
||||||
|
background: $white
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
label
|
color: $black
|
||||||
background: $black
|
margin: 0 auto
|
||||||
color: $white
|
//.index, .page
|
||||||
font-size: 1.5em
|
//margin 30px
|
||||||
line-height: 1.3
|
.index, .page
|
||||||
|
padding: 0 0 15px 0
|
||||||
|
img
|
||||||
|
display: block
|
||||||
|
width: 100%
|
||||||
|
h1, h2
|
||||||
|
color: $primary
|
||||||
|
p
|
||||||
|
font: 300 1.25em/1.6em $baseType
|
||||||
|
//meta datea for page
|
||||||
|
.page_files
|
||||||
|
.page_doc
|
||||||
|
a
|
||||||
|
background: $black
|
||||||
|
border-radius: 3px
|
||||||
|
color: $white
|
||||||
|
padding: 3px
|
||||||
|
margin: 0 5px 0 0
|
||||||
|
.meta
|
||||||
|
font: 500 0.8em/1.3em $baseType
|
||||||
|
padding: 5px 0 0 0
|
||||||
|
border-top: 1px solid $primary
|
||||||
|
background: $white
|
||||||
|
a
|
||||||
|
font-size: 0.8em
|
||||||
|
font-weight: 400
|
||||||
|
//archive styling
|
||||||
|
.archive-item
|
||||||
|
padding: 15px 0 20px 0
|
||||||
|
span.year
|
||||||
|
font-size: 1.5em
|
||||||
|
font-weight: 500
|
||||||
|
padding: 5px
|
||||||
|
display: block
|
||||||
|
color: $primary
|
||||||
|
.archive-month
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: top
|
||||||
|
width: 30%
|
||||||
|
padding: 5px
|
||||||
|
span.month
|
||||||
|
color: $secondary
|
||||||
|
font-size: 1.5em
|
||||||
|
font-weight: 300
|
||||||
|
padding: 5px
|
||||||
|
display: block
|
||||||
|
section
|
||||||
|
padding: 0 0 20px 0
|
||||||
|
background: $primary
|
||||||
|
a
|
||||||
|
color: $white
|
||||||
|
.index-lists, .page-title
|
||||||
|
max-width: 840px
|
||||||
|
width: 80%
|
||||||
|
margin: 0 auto
|
||||||
|
padding: 20px 0 0 0
|
||||||
|
|
||||||
|
span
|
||||||
|
font-size: 2em
|
||||||
|
color: $secondary
|
||||||
|
font-weight: 400
|
||||||
|
width: 80%
|
||||||
|
margin: 0 auto
|
||||||
|
padding: 20px 0 0 0
|
||||||
|
.recent, .featured
|
||||||
|
display: inline-block
|
||||||
|
width: 50%
|
||||||
|
vertical-align: top
|
||||||
|
label
|
||||||
|
background: $black
|
||||||
|
color: $white
|
||||||
|
font-size: 1.5em
|
||||||
|
line-height: 1.3
|
||||||
|
|
||||||
|
footer
|
||||||
|
background: $white
|
||||||
|
padding: 10px
|
||||||
|
color: $primary
|
||||||
|
font-size: 0.8em
|
||||||
|
font-weight: 600
|
||||||
|
height: 100px
|
||||||
|
.inner
|
||||||
|
margin: 20px auto
|
||||||
|
width: 80%
|
||||||
|
max-width: 840px
|
||||||
|
a
|
||||||
|
color: $secondary
|
||||||
|
|
||||||
|
// RESPONSIVE
|
||||||
|
|
||||||
footer
|
@media only screen and (max-width: 640px)
|
||||||
background: $white
|
header
|
||||||
padding: 10px
|
nav
|
||||||
color: $primary
|
width: 98%
|
||||||
font-size: 0.8em
|
span
|
||||||
font-weight: 600
|
font-size: 2.5em
|
||||||
height: 100px
|
.container
|
||||||
.inner
|
article
|
||||||
margin: 20px auto
|
.index, .page
|
||||||
width: 80%
|
.archive-item
|
||||||
max-width: 840px
|
.archive-month
|
||||||
a
|
width: 45%
|
||||||
color: $secondary
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px)
|
||||||
|
header
|
||||||
|
nav
|
||||||
|
width: 96%
|
||||||
|
.container
|
||||||
|
article
|
||||||
|
.index, .page
|
||||||
|
margin: 0
|
||||||
|
p
|
||||||
|
font: 300 1em/1.6em $baseType
|
||||||
|
section
|
||||||
|
.index-lists
|
||||||
|
.recent, .featured
|
||||||
|
width: 100% !important
|
||||||
|
|
||||||
// RESPONSIVE
|
@media only screen and (max-width: 375px)
|
||||||
|
header
|
||||||
@media only screen and (max-width: 640px)
|
nav
|
||||||
header
|
width: 95%
|
||||||
nav
|
.container
|
||||||
width: 98%
|
article
|
||||||
span
|
.index, .page
|
||||||
font-size: 2.5em
|
margin: 0
|
||||||
.container
|
p
|
||||||
article
|
font: 300 0.9em/1.7em $baseType
|
||||||
.index, .page
|
.archive-item
|
||||||
.archive-item
|
.archive-month
|
||||||
.archive-month
|
width: 95%
|
||||||
width: 45%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px)
|
|
||||||
header
|
|
||||||
nav
|
|
||||||
width: 96%
|
|
||||||
.container
|
|
||||||
article
|
|
||||||
.index, .page
|
|
||||||
margin: 0
|
|
||||||
p
|
|
||||||
font: 300 1em/1.6em $baseType
|
|
||||||
section
|
|
||||||
.index-lists
|
|
||||||
.recent, .featured
|
|
||||||
width: 100% !important
|
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 375px)
|
|
||||||
header
|
|
||||||
nav
|
|
||||||
width: 95%
|
|
||||||
.container
|
|
||||||
article
|
|
||||||
.index, .page
|
|
||||||
margin: 0
|
|
||||||
p
|
|
||||||
font: 300 0.9em/1.7em $baseType
|
|
||||||
.archive-item
|
|
||||||
.archive-month
|
|
||||||
width: 95%
|
|
||||||
|
|
|
||||||
|
|
@ -15,4 +15,3 @@ h2
|
||||||
h3
|
h3
|
||||||
font-size: 1.5em
|
font-size: 1.5em
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue