diff --git a/TODO.md b/TODO.md index 3754db3..0a3b557 100644 --- a/TODO.md +++ b/TODO.md @@ -13,7 +13,7 @@ - [ ] pore through template files to update theming - [X] ~~*initial front-page.php*~~ [2021-07-06] - [X] ~~*create social-icons working for front page*~~ [2021-07-06] - - [ ] create About page and suitable index.php modifications for it + - [X] ~~*create About page and suitable page.php for it & other generic pages*~~ [2021-07-06] - [ ] create some blog entries - [ ] create Blog page and is index.php also ok for it? - [ ] create Resume page and decide on using general or specific template diff --git a/assets/css/app.scss b/assets/css/app.scss index 0dd522f..8aa4d4d 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -13,6 +13,13 @@ /* Navbar custom styling */ @import "nav-bar-help"; + +.font-monospace { + font-family: $font-family-monospace; + font-weight: 300; + font-size: 15px; +} + /* main */ html, body { @@ -91,6 +98,9 @@ a { padding-top: 2px; padding-bottom: 2px; } +.mt--05r { + margin-top: -0.5rem; +} /* social icons */ #social-icons .link-light { @@ -101,3 +111,64 @@ a { } } +blockquote { + p { + margin-bottom: 0 !important; + } + &.wp-block-quote { + @extend .blockquote; + cite { + @extend .blockquote-footer; + @extend .text-gray-300; + font-size: 0.75em; + margin-top: -1rem; + margin-bottom: 0 !important; + font-style: normal; + } + } +} + +/* resume separators */ +.separator { + display: flex; + align-items: center; + text-align: center; + color: $gray-400; + font-family: $font-family-monospace; + font-size: smaller; + text-transform: uppercase; + font-weight: 700; + &::before, + &::after { + content: ""; + flex: 1; + border-bottom: 1px solid $secondary; + } + &:not(:empty)::before { + margin-right: 0.5em; + } + &:not(:empty)::after { + margin-left: 0.33em; + } +} + +/* blog */ +.post-title a { + color: $gray-100; + text-decoration: none; + border-bottom: none; + &:hover { + color: $primary; + border-bottom: $secondary 3px solid; + } +} +.post-lede, +.post-body { + h2, h3, h4, h5, h6 { + color: $gray-200; + margin-top: 2rem; + } +} +.post li { + line-height: 1.75rem; +} \ No newline at end of file diff --git a/content-templates/content-article.php b/content-templates/content-article.php index 63c958f..523a3c8 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -22,28 +22,29 @@ namespace WP_73k; echo get_the_title(); } ?> </h2> - </header> -</article> + <?php $posttags = get_the_tags(); ?> + <div class="post-date font-monospace text-gray-300 <?php if (count($posttags) == 0) { echo 'mb-3'; } ?>"> + <?php echo svg_icon_use("mdi-calendar-clock", "icon baseline me-2") . get_the_date('F j, Y'); ?> + by <?php echo svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author(); ?> + </div> -<article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork"> - <header> - <h2 class="m-0"> - <?php + <?php + if (count($posttags) > 0) { + echo '<div class="post-tags fs-smaller mb-4">' . svg_icon_use("mdi-tag-multiple", "icon baseline text-gray-300 me-1"); + + $tag_strings = array_map(function ($tag) { + $tag_str = '<span class="text-gray-300">#</span>'; + $tag_str .= '<a href="' . get_bloginfo('url') . '/tag/' . $tag->slug . '">' . $tag->name . '</a>'; + return $tag_str; + }, $posttags); + echo implode(", ", $tag_strings) . '</div>'; + } + ?> - if ( is_archive() || is_home() ) { - printf( '<a href="%s" rel="bookmark">%s</a>', - esc_url( get_the_permalink() ), - esc_html( get_the_title() ) - ); - } else { - echo get_the_title(); - } ?> - </h2> - <p class="text-sm">Published on <?= get_the_date(); ?></p> </header> - <div class="article"> + <div class="article post-body"> <?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] ); @@ -51,8 +52,4 @@ namespace WP_73k; the_content(); ?> </div> - - <footer> - Categorized under: <?= get_the_category_list( ',' ); ?> - </footer> </article> diff --git a/footer.php b/footer.php index 81e263b..62adcba 100644 --- a/footer.php +++ b/footer.php @@ -26,10 +26,10 @@ namespace WP_73k; </div> </footer> --> <footer class="footer73k footer bottom-0 end-0 bg-dark"> - <div class="px-2 px-sm-3"> - <span class="text-gray-300">© Copyright <?php echo date("Y") ?> Adam Piontek</span> - </div> - </footer> + <div class="px-2 px-sm-3"> + <span class="text-gray-300">© Copyright <?php echo date("Y") ?> Adam Piontek</span> + </div> + </footer> <?php wp_footer(); ?> </body> diff --git a/front-page.php b/front-page.php index 4631e3c..05d590c 100644 --- a/front-page.php +++ b/front-page.php @@ -8,8 +8,8 @@ namespace WP_73k; -get_header(); ?> -<main class="container-fluid d-flex justify-content-center align-items-center" style="height: 80%;"> +get_header('', array('fixednav'=>true)); ?> +<main class="container-fluid h-100 d-flex justify-content-center align-items-center"> <div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5"> diff --git a/header.php b/header.php index 5ae1bd9..a1f1270 100644 --- a/header.php +++ b/header.php @@ -24,7 +24,7 @@ namespace WP_73k; <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> -<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3"> +<nav class="navbar <?php echo ($args['fixednav'] ? 'fixed-top' : ''); ?> navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3"> <div class="container-fluid"> <h1 class="my-0 py-0 lh-base"> diff --git a/home.php b/home.php new file mode 100644 index 0000000..fe6378f --- /dev/null +++ b/home.php @@ -0,0 +1,34 @@ +<?php +/** + * The default single page template. + * + * @author Freeshifter LLC + * @since 1.0.0 + */ + +namespace WP_73k; + +get_header(); ?> +<main class="container d-flex justify-content-center"> + + <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3"> + + <?php + if ( have_posts() ) { + while ( have_posts() ) { + the_post(); + echo get_template_part( 'content-templates/content', 'article' ); + } + } ?> + + <?php + // if ( !is_active_sidebar( 'sidebar' ) ) : ?> + <!-- <aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8"> --> + <?php // dynamic_sidebar( 'sidebar' ); ?> + <!-- </aside> --> + <?php + // endif; ?> + </div> +</main> +<?php +get_footer();