diff options
24 files changed, 168 insertions, 68 deletions
diff --git a/core/application.php b/core/application.php index be70f92..3c431f8 100644 --- a/core/application.php +++ b/core/application.php @@ -95,8 +95,8 @@ foreach($configuration as $name => $value) { # Set default configuration (for admin prefixes) #=============================================================================== foreach([ - 'ADMIN.PAGE.LIST_SIZE' => Application::get('PAGE.LIST_SIZE'), - 'ADMIN.POST.LIST_SIZE' => Application::get('POST.LIST_SIZE'), + 'ADMIN.PAGE.LIST_SIZE' => 12, # for 1/2/3-column grid layout + 'ADMIN.POST.LIST_SIZE' => 12, # for 1/2/3-column grid layout 'ADMIN.USER.LIST_SIZE' => Application::get('USER.LIST_SIZE'), 'ADMIN.PAGE.LIST_SORT' => Application::get('PAGE.LIST_SORT'), 'ADMIN.POST.LIST_SORT' => Application::get('POST.LIST_SORT'), diff --git a/theme/admin/html/403.php b/theme/admin/html/403.php index f9a0afd..7f23212 100644 --- a/theme/admin/html/403.php +++ b/theme/admin/html/403.php @@ -1,2 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-exclamation-triangle"></i><?=$Language->text('403_heading_text')?></h1> <p><?=$Language->text('403_heading_desc')?></p> +</main> diff --git a/theme/admin/html/404.php b/theme/admin/html/404.php index d53d1bc..7fb06d8 100644 --- a/theme/admin/html/404.php +++ b/theme/admin/html/404.php @@ -1,2 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-exclamation-triangle"></i><?=$Language->text('404_heading_text')?></h1> <p><?=$Language->text('404_heading_desc')?></p> +</main> diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php index a7b8b74..45b7e14 100644 --- a/theme/admin/html/auth.php +++ b/theme/admin/html/auth.php @@ -1,3 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-sign-in"></i><?=$Language->text('authentication_text')?></h1> <p><?=$Language->text('authentication_desc')?></p> @@ -34,3 +35,4 @@ <input type="submit" name="auth" value="<?=$Language->text('login')?>" /> </div> </form> +</main> diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php index b661a28..da41e68 100644 --- a/theme/admin/html/database.php +++ b/theme/admin/html/database.php @@ -1,3 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-database"></i><?=$Language->text('overview_database_text')?></h1> <p><?=$Language->text('overview_database_desc')?></p> @@ -28,3 +29,4 @@ <input id="insert-button" type="submit" name="execute" value="Execute" /> </div> </form> +</main> diff --git a/theme/admin/html/home.php b/theme/admin/html/home.php index 083ae30..5331fa8 100644 --- a/theme/admin/html/home.php +++ b/theme/admin/html/home.php @@ -1,3 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-dashboard"></i><?=$Language->text('overview_dashboard_text')?></h1> <p><?=$Language->text('overview_dashboard_desc')?></p> @@ -43,4 +44,4 @@ <?php else: ?> <p><em><?=$Language->text('home_no_users')?></em></p> <?php endif; ?> - +</main> diff --git a/theme/admin/html/main.php b/theme/admin/html/main.php index 874ae81..699a742 100644 --- a/theme/admin/html/main.php +++ b/theme/admin/html/main.php @@ -38,11 +38,9 @@ </div> </div> </header> - <div id="main-content"> - <main> - <?=$HTML?> - </main> - </div> + + <?=$HTML?> + <footer id="main-footer"> <ul> <li><i class="fa fa-github-square"></i><a href="https://github.com/Nerdmind/Blog/releases" target="_blank">Releases</a></li> diff --git a/theme/admin/html/page/delete.php b/theme/admin/html/page/delete.php index ccc569f..006090e 100644 --- a/theme/admin/html/page/delete.php +++ b/theme/admin/html/page/delete.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_page')?></h1> <p><?=$Language->text('delete_page_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/page/index.php b/theme/admin/html/page/index.php index 7067c40..bdc7f94 100644 --- a/theme/admin/html/page/index.php +++ b/theme/admin/html/page/index.php @@ -1,3 +1,4 @@ +<main id="main-content" class="wide"> <h1><i class="fa fa-file-text-o"></i><?=$Language->text('page_overview')?></h1> <p class="actions-before"><?=$Language->text('overview_page_desc')?></p> <ul class="actions"> @@ -5,10 +6,11 @@ <li><a href="<?=Application::getAdminURL('page/search.php')?>" title="<?=$Language->text('search_page')?>"><i class="fa fa-search"></i><?=$Language->text('search')?></a></li> </ul> -<div class="item-container page"> +<div class="item-container page grid"> <?php foreach($LIST['PAGES'] as $page): ?> <?php echo $page; ?> <?php endforeach; ?> </div> -<?=$PAGINATION['HTML']?>
\ No newline at end of file +<?=$PAGINATION['HTML']?> +</main> diff --git a/theme/admin/html/page/insert.php b/theme/admin/html/page/insert.php index 7442200..a77e47f 100644 --- a/theme/admin/html/page/insert.php +++ b/theme/admin/html/page/insert.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_page')?></h1> <p><?=$Language->text('insert_page_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php index 6506d34..145b0f9 100644 --- a/theme/admin/html/page/search.php +++ b/theme/admin/html/page/search.php @@ -1,3 +1,4 @@ +<main id="main-content" <?=!$PAGES ?: 'class="wide"'?>> <h1><i class="fa fa-search"></i><?=$Language->text('title_page_search')?></h1> <p><?=$Language->text('search_page_desc')?></p> @@ -10,8 +11,9 @@ </div> </form> -<div class="item-container post"> +<div class="item-container post grid"> <?php foreach($PAGES as $page): ?> <?php echo $page; ?> <?php endforeach; ?> </div> +</main> diff --git a/theme/admin/html/page/update.php b/theme/admin/html/page/update.php index 77a7eb2..ce51d2a 100644 --- a/theme/admin/html/page/update.php +++ b/theme/admin/html/page/update.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_page')?></h1> <p><?=$Language->text('update_page_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/post/delete.php b/theme/admin/html/post/delete.php index 6654377..ed82197 100644 --- a/theme/admin/html/post/delete.php +++ b/theme/admin/html/post/delete.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_post')?></h1> <p><?=$Language->text('delete_post_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/post/index.php b/theme/admin/html/post/index.php index f884b05..83dd5dc 100644 --- a/theme/admin/html/post/index.php +++ b/theme/admin/html/post/index.php @@ -1,3 +1,4 @@ +<main id="main-content" class="wide"> <h1><i class="fa fa-newspaper-o"></i><?=$Language->text('post_overview')?></h1> <p class="actions-before"><?=$Language->text('overview_post_desc')?></p> <ul class="actions"> @@ -5,10 +6,11 @@ <li><a href="<?=Application::getAdminURL('post/search.php')?>" title="<?=$Language->text('search_post')?>"><i class="fa fa-search"></i><?=$Language->text('search')?></a></li> </ul> -<div class="item-container post"> +<div class="item-container post grid"> <?php foreach($LIST['POSTS'] as $post): ?> <?php echo $post; ?> <?php endforeach; ?> </div> -<?=$PAGINATION['HTML']?>
\ No newline at end of file +<?=$PAGINATION['HTML']?> +</main> diff --git a/theme/admin/html/post/insert.php b/theme/admin/html/post/insert.php index dc32c24..9b7c588 100644 --- a/theme/admin/html/post/insert.php +++ b/theme/admin/html/post/insert.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_post')?></h1> <p><?=$Language->text('insert_post_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php index 1289879..00bd016 100644 --- a/theme/admin/html/post/search.php +++ b/theme/admin/html/post/search.php @@ -1,3 +1,4 @@ +<main id="main-content" <?=!$POSTS ?: 'class="wide"'?>> <h1><i class="fa fa-search"></i><?=$Language->text('title_post_search')?></h1> <p><?=$Language->text('search_post_desc')?></p> @@ -10,8 +11,9 @@ </div> </form> -<div class="item-container post"> +<div class="item-container post grid"> <?php foreach($POSTS as $post): ?> <?php echo $post; ?> <?php endforeach; ?> </div> +</main> diff --git a/theme/admin/html/post/update.php b/theme/admin/html/post/update.php index a577bec..aa3835d 100644 --- a/theme/admin/html/post/update.php +++ b/theme/admin/html/post/update.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_post')?></h1> <p><?=$Language->text('update_post_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/user/delete.php b/theme/admin/html/user/delete.php index 01927b2..b500a12 100644 --- a/theme/admin/html/user/delete.php +++ b/theme/admin/html/user/delete.php @@ -1,6 +1,8 @@ +<main id="main-content"> <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_user')?></h1> <p><?=$Language->text('delete_user_desc')?></p> <p class="red"><?=$Language->text('delete_user_warning')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/user/index.php b/theme/admin/html/user/index.php index aae8ee8..7e1d794 100644 --- a/theme/admin/html/user/index.php +++ b/theme/admin/html/user/index.php @@ -1,3 +1,4 @@ +<main id="main-content"> <h1><i class="fa fa-user"></i><?=$Language->text('user_overview')?></h1> <p class="actions-before"><?=$Language->text('overview_user_desc')?></p> <ul class="actions"> @@ -10,4 +11,5 @@ <?php endforeach; ?> </div> -<?=$PAGINATION['HTML']?>
\ No newline at end of file +<?=$PAGINATION['HTML']?> +</main> diff --git a/theme/admin/html/user/insert.php b/theme/admin/html/user/insert.php index 5cbdd06..7c7aba2 100644 --- a/theme/admin/html/user/insert.php +++ b/theme/admin/html/user/insert.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_user')?></h1> <p><?=$Language->text('insert_user_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/html/user/update.php b/theme/admin/html/user/update.php index e023925..ad12677 100644 --- a/theme/admin/html/user/update.php +++ b/theme/admin/html/user/update.php @@ -1,4 +1,6 @@ +<main id="main-content"> <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_user')?></h1> <p><?=$Language->text('update_user_desc')?></p> -<?=$HTML?>
\ No newline at end of file +<?=$HTML?> +</main> diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index 2d3d62a..e387c98 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -1,17 +1,34 @@ -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 50em) { +@media only screen and (max-width: 90em /*1440px*/) { + .item-container.grid { + grid-template-columns: auto auto; + } +} + +@media only screen and (min-width: 62.5em /*1000px*/) { + #main-content { + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } +} + +@media only screen and (max-width: 62.5em /*1000px*/) { + .item-container.grid { + grid-template-columns: auto; + } +} + +@media only screen and (max-width: 50em /*800px*/) { html { font-size: 1.125rem; /*18px*/ - background-image: none !important; } } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 37.5em) { +@media only screen and (max-width: 37.5em /*600px*/) { + #main-content { + padding: 0.5rem; + } + #main-navi { font-size: 1rem; @@ -34,6 +51,13 @@ display: none; } + .item-container.grid { + grid-column-gap: 0.75rem; + grid-row-gap: 0.75rem; + column-gap: 0.75rem; + row-gap: 0.75rem; + } + .form-grid { grid-template-columns: auto auto; } @@ -64,8 +88,4 @@ font-size: 0.5rem; line-height: 0.75rem; } - - main { - padding: 0.5rem; - } } diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css index 2677f19..f3a39c1 100644 --- a/theme/admin/rsrc/css/main.css +++ b/theme/admin/rsrc/css/main.css @@ -22,7 +22,7 @@ a:focus { # Headings ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1, h2, h3, h4, h5, h6 { - margin: 0; + margin-bottom: 0; text-transform: uppercase; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { @@ -33,6 +33,7 @@ h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa { } h1 { + margin-top: 0; font-size: 0.8rem; } @@ -81,10 +82,6 @@ body { flex-direction: column; } -main { - padding: 0.75rem; -} - /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main content ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -93,9 +90,10 @@ main { width: 100%; background: #FFF; box-sizing: border-box; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; + padding: 0.75rem; +} +#main-content.wide { + max-width: 90rem; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -230,6 +228,7 @@ main { display: flex; box-sizing: border-box; justify-content: space-between; + margin-top: 0.75rem; } #site-navi > div { display: flex; @@ -387,9 +386,9 @@ table, td { # Item Element ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .item { - display: block; + display: flex; + flex-direction: column; border: 0.05rem solid #AAA; - margin-bottom: 1rem; clear: both; } .item header { @@ -398,6 +397,9 @@ table, td { position: sticky; top: 0; } +.item header h2 { + margin-top: 0; +} .item footer { border-top: 0.05rem solid #AAA; } @@ -430,6 +432,7 @@ table, td { padding: 0.75rem; overflow: hidden; font-family: inherit; + flex-grow: 1; } .item blockquote p { margin-bottom: 0; @@ -448,6 +451,15 @@ table, td { background: #EEE; border: 0.05rem solid #AAA; } +.item-container.grid { + width: 100%; + display: grid; + grid-template-columns: auto auto auto; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + column-gap: 1rem; + row-gap: 1rem; +} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Argument list @@ -665,20 +677,34 @@ label:after { margin-bottom: 1rem; } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 90em) { + .item-container.grid { + grid-template-columns: auto auto; + } +} +@media only screen and (min-width: 62.5em) { + #main-content { + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } +} +@media only screen and (max-width: 62.5em) { + .item-container.grid { + grid-template-columns: auto; + } +} @media only screen and (max-width: 50em) { html { font-size: 1.125rem; /*18px*/ - background-image: none !important; } } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { + #main-content { + padding: 0.5rem; + } + #main-navi { font-size: 1rem; } @@ -696,6 +722,13 @@ label:after { display: none; } + .item-container.grid { + grid-column-gap: 0.75rem; + grid-row-gap: 0.75rem; + column-gap: 0.75rem; + row-gap: 0.75rem; + } + .form-grid { grid-template-columns: auto auto; } @@ -724,10 +757,6 @@ label:after { font-size: 0.5rem; line-height: 0.75rem; } - - main { - padding: 0.5rem; - } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # FontAwesome Main diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss index e00c60a..0397754 100644 --- a/theme/admin/rsrc/css/main.scss +++ b/theme/admin/rsrc/css/main.scss @@ -22,7 +22,7 @@ a { # Headings ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1, h2, h3, h4, h5, h6 { - margin: 0; + margin-bottom: 0; text-transform: uppercase; +p { @@ -35,6 +35,7 @@ h1, h2, h3, h4, h5, h6 { } h1 { + margin-top: 0; font-size: 0.80rem; } @@ -83,10 +84,6 @@ body { flex-direction: column; } -main { - padding: 0.75rem; -} - /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main content ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -95,9 +92,12 @@ main { width: 100%; background: #FFF; box-sizing: border-box; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; + padding: 0.75rem; + // border definition in _responsive.scss + + &.wide { + max-width: 90rem; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -249,6 +249,7 @@ main { display: flex; box-sizing: border-box; justify-content: space-between; + margin-top: 0.75rem; > div { display: flex; @@ -422,9 +423,9 @@ table, td { # Item Element ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .item { - display: block; + display: flex; + flex-direction: column; border: 0.05rem solid #AAA; - margin-bottom: 1rem; clear: both; header { @@ -432,6 +433,10 @@ table, td { border-bottom: 0.05rem solid #AAA; position: sticky; top: 0; + + h2 { + margin-top: 0; + } } footer { @@ -473,6 +478,7 @@ table, td { padding: 0.75rem; overflow: hidden; font-family: inherit; + flex-grow: 1; p { margin-bottom: 0; @@ -494,6 +500,16 @@ table, td { background: #EEE; border: 0.05rem solid #AAA; } + + &-container.grid { + width: 100%; + display: grid; + grid-template-columns: auto auto auto; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + column-gap: 1rem; + row-gap: 1rem; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |