1
0
mirror of https://github.com/restoreddev/phpapprentice.git synced 2025-08-05 14:27:54 +02:00

Merge pull request #23 from restoreddev/develop

Design tweaks
This commit is contained in:
Andrew
2019-01-07 17:11:56 -06:00
committed by GitHub
3 changed files with 26 additions and 17 deletions

View File

@@ -7,20 +7,23 @@ $drop-shadow: rgba(0, 0, 0, 0.4);
$code-background: #FDF6E3; $code-background: #FDF6E3;
body { body {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 16px; font-size: 16px;
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
} }
button {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
code { code {
background-color: #F0F0F0; background-color: #F0F0F0;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 14px; font-size: 14px;
padding: 0.10em 0.25em; padding: 0.10em 0.25em;
} }
pre, pre code { pre, pre code {
background-color: transparent; background-color: transparent;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 14px; font-size: 14px;
margin: 0 !important; margin: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
@@ -88,7 +91,8 @@ button:hover .icon svg {
background-color: $primary-color; background-color: $primary-color;
color: $white; color: $white;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 1em; border-radius: 2em;
display: inline-block;
} }
.button:hover { .button:hover {
color: $white; color: $white;
@@ -203,6 +207,10 @@ button:hover .icon svg {
width: 150px; width: 150px;
height: 100px; height: 100px;
} }
.home-buttons .menu {
display: inline-block;
padding: 0.5em 1em;
}
.menu { .menu {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
@@ -225,7 +233,7 @@ button:hover .icon svg {
height: 100%; height: 100%;
animation-name: animateleft; animation-name: animateleft;
animation-duration: .4s; animation-duration: .4s;
overflow: scroll; overflow: auto;
box-shadow: 0 0 10px 0 $drop-shadow; box-shadow: 0 0 10px 0 $drop-shadow;
box-sizing: border-box; box-sizing: border-box;
} }

View File

@@ -1,6 +1,6 @@
<div class="menu"> <div class="menu">
<button class="menu-button" title="Open Menu"> <button class="menu-button" title="Open Menu">
<div class="icon"><?= icon('show-sidebar') ?></div> <div class="icon"><?= icon('show-sidebar') ?></div>
Menu Table of Contents
</button> </button>
</div> </div>

View File

@@ -1,8 +1,6 @@
<?php partial('header', ['title' => 'PHP Apprentice']) ?> <?php partial('header', ['title' => 'PHP Apprentice']) ?>
<div class="container small center"> <div class="container small center">
<?php partial('menu_button') ?>
<div> <div>
<div class="home-title-wrapper"> <div class="home-title-wrapper">
<div class="home-logo"><?= icon('elephant') ?></div> <div class="home-logo"><?= icon('elephant') ?></div>
@@ -23,10 +21,13 @@
Each example in PHP Apprentice can by typed into a PHP file and executed in the terminal. Each example in PHP Apprentice can by typed into a PHP file and executed in the terminal.
Let's get started! 😃 Let's get started! 😃
</p> </p>
<div class="home-buttons">
<a href="<?= page_path('basics') ?>" class="button"> <a href="<?= page_path('basics') ?>" class="button">
<div class="icon"><?= icon('book-reference') ?></div> <div class="icon"><?= icon('book-reference') ?></div>
Open First Chapter Open First Chapter
</a> </a>
<?php partial('menu_button') ?>
</div>
</div> </div>
</div> </div>