diff --git a/package.json b/package.json index c307c70..ba35eb1 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "description": "Theming tool pack for Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo", "scripts": { - "dev-default-theme": "stylus -w -m -o src/themes/theme-fipamo-default/default-light/assets/css src/themes/theme-fipamo-default/styles/base.styl & parcel watch src/themes/theme-fipamo-default/com/Start.mjs --out-dir src/themes/theme-fipamo-default/default-light/assets/scripts --out-file start.min.js & parcel src/themes/theme-fipamo-default/fipamo-default/*.pug" + "dev-default-theme": "stylus -w -m -o src/themes/theme-fipamo-default/fipamo-default/assets/css src/themes/theme-fipamo-default/styles/base.styl & parcel watch src/themes/theme-fipamo-default/com/Start.mjs --out-dir src/themes/theme-fipamo-default/fipamo-default/assets/scripts --out-file start.min.js & parcel src/themes/theme-fipamo-default/fipamo-default/*.pug" }, "engines": { "node": ">=10.16.0" diff --git a/pug.config.js b/pug.config.js index 37f5264..4c67d3f 100644 --- a/pug.config.js +++ b/pug.config.js @@ -10,7 +10,7 @@ module.exports = { default_bg: '/assets/images/global/default-bg.jpg', default_avi: '/assets/images/global/default-avi.png', content: - "The path of the righteous man is beset on ALL sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.", + "
The path of the righteous man is beset on ALL sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.", bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }], tag_list: [{ title: 'Swaggy Disgust', slug: 'swaggy-disgust', path: '2020/06' }], meta: { diff --git a/src/themes/theme-fipamo-default/fipamo-default/archive.pug b/src/themes/theme-fipamo-default/fipamo-default/archive.pug index 21f9e0f..d398b74 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/archive.pug +++ b/src/themes/theme-fipamo-default/fipamo-default/archive.pug @@ -2,20 +2,21 @@ extends frame block main-content section - article + .page-title + span Archive + article + .page - var index = 0; - for ( index; index < archives.length; index++) .archive-item - h1= archives[index].year + span.year= archives[index].year - var i = 0; - for (i; i < archives[index].year_data.length; i++) - var data = archives[index].year_data[i]; - p= data.full_month - - var x = 0; - - for (x; x < data.pages.length; x++) - -var page = data.pages[x]; - a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title - br - - footer - | © 2020 Fipamo by PV \ No newline at end of file + .archive-month + span.month= data.full_month + - var x = 0; + - for (x; x < data.pages.length; x++) + -var page = data.pages[x]; + a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title + br \ No newline at end of file diff --git a/src/themes/theme-fipamo-default/fipamo-default/frame.pug b/src/themes/theme-fipamo-default/fipamo-default/frame.pug index e0245e9..d633d31 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/frame.pug +++ b/src/themes/theme-fipamo-default/fipamo-default/frame.pug @@ -10,22 +10,27 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en") meta(name="twitter:image" content=image) link(rel='stylesheet', href='/assets/css/base.css', type='text/css') body + style. + header { background: url(!{default_bg}); background-size: cover; } + header + nav + .left + a.logo-link(href='/') + img#logo(src='/assets/images/global/the-logo.svg') + .right + if menu + - var index = 0; + - for ( index; index < menu.length; index++) + a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug + br + + + //span= welcome_message .container#main-content block main-content - - style. - header::before { background: url(!{default_bg}); background-size: cover; } - header - .menu - a(href='/') - img#logo(src='/assets/images/global/the-logo.svg') - br - if menu - - var index = 0; - - for ( index; index < menu.length; index++) - a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug - br - span= welcome_message + footer + .inner + a(href='/archives') Archives + br + | © 2020 Fipamo by PV script(src='/assets/scripts/start.min.js' type="text/javascript") - - diff --git a/src/themes/theme-fipamo-default/fipamo-default/index.pug b/src/themes/theme-fipamo-default/fipamo-default/index.pug index 3f5042b..b627df5 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/index.pug +++ b/src/themes/theme-fipamo-default/fipamo-default/index.pug @@ -3,7 +3,10 @@ extends frame block main-content article .index + h2= title p !{content} + section + .index-lists .recent span Recent br @@ -20,9 +23,5 @@ block main-content - for ( index; index < featured_posts.length; index++) a(href="/"+featured_posts[index].metadata.path+"/"+featured_posts[index].metadata.slug)= featured_posts[index].metadata.title br - br - br - a(href='/archives') The Archives - footer - | © 2020 Fipamo by PV + diff --git a/src/themes/theme-fipamo-default/fipamo-default/page.pug b/src/themes/theme-fipamo-default/fipamo-default/page.pug index 8fc4002..ad9a1e5 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/page.pug +++ b/src/themes/theme-fipamo-default/fipamo-default/page.pug @@ -2,22 +2,21 @@ extends frame block main-content section - article - .page - p !{content} - .meta - | !{meta.who} - - | dropped this - - | !{meta.when} - br + .page-title + span= title + article + .page + p !{content} + .meta + | !{meta.who} + + | dropped this + + | !{meta.when} + br - | tags: - - var i = 0; - - for (i; i < meta.tags.length; i++) - - var tag = meta.tags[i] - a(href="/tags/"+tag.slug)= tag.label - - footer - | © 2020 Fipamo by PV \ No newline at end of file + | tags: + - var i = 0; + - for (i; i < meta.tags.length; i++) + - var tag = meta.tags[i] + a(href="/tags/"+tag.slug)= tag.label diff --git a/src/themes/theme-fipamo-default/fipamo-default/tags.pug b/src/themes/theme-fipamo-default/fipamo-default/tags.pug index 72bebd5..cd46084 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/tags.pug +++ b/src/themes/theme-fipamo-default/fipamo-default/tags.pug @@ -2,12 +2,11 @@ extends frame block main-content section - article - .page - - var index = 0; - - for ( index; index < tag_list.length; index++) - a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title} - br - - footer - | © 2020 Fipamo by PV \ No newline at end of file + .page-title + span= title + article + .page + - var index = 0; + - for ( index; index < tag_list.length; index++) + a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title} + br diff --git a/src/themes/theme-fipamo-default/styles/_colors.styl b/src/themes/theme-fipamo-default/styles/_colors.styl index 0731289..7ef1b44 100644 --- a/src/themes/theme-fipamo-default/styles/_colors.styl +++ b/src/themes/theme-fipamo-default/styles/_colors.styl @@ -1,5 +1,5 @@ -$primary = #34495e; +$primary = #151d26; $secondary = #FC6399; $highlight = #7ED07E; -$white = #d5cfba; +$white = #ebe5d4; $black = #32302f; diff --git a/src/themes/theme-fipamo-default/styles/_structure.styl b/src/themes/theme-fipamo-default/styles/_structure.styl index 222764e..12b9b9c 100644 --- a/src/themes/theme-fipamo-default/styles/_structure.styl +++ b/src/themes/theme-fipamo-default/styles/_structure.styl @@ -4,10 +4,10 @@ html width 100% height 100% overflow hidden - font 400 1.3em/1.1em $bodyTypeSans + font 400 1.2em/1.4em $bodyTypeSans body - color white + background $white margin 0 padding 0 perspective 1px @@ -30,64 +30,43 @@ svg.icons fill $white header - box-sizing border-box - min-height 100vh - position relative - transform-style inherit - width 100vw - //text-align center - color $white - border-bottom 1px $black solid - border-top 5px $primary solid - span - margin 0 - position absolute - top 50% - left 50% - transform translate(-50%, -50%) - font-weight: 600 - padding 15px 20px 10px 20px - font-size 3em - line-height 1 - color $white - text-drop-shadow($black, .9, 1px, 1px, 1px) - .menu - padding 20px - width: 200px - text-align: left - color $primary + background $primary + height 90% + width 100% + border-top $white 3px solid + nav + width 97% + margin 10px auto + 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 3px + border-radius 2px display inline-block font-size 0.8em + border-bottom none &:hover - background $secondary + 20% - #logo - width 30px -header,header:before - background 50% 50% / cover + background $secondary + 50% + -header::before - content "" - position absolute - top 0 - left 0 - right 0 - bottom 0 - display block - background-size cover - transform-origin center center 0 - transform translateZ(-1px) scale(2) - z-index -1 - min-height 100vh .container z-index 2 - position absolute - top 100vh background $white line-height 30px font-weight lighter @@ -99,16 +78,62 @@ header::before width: 80% height 80% max-width 840px - min-height 500px + //min-height 500px background $white vertical-align top color $black margin 0 auto - span - custom-header(600, 2em, 1.5, $primary) + //.index, .page + //margin 30px .index, .page - margin 30px - .index + padding 0 0 15px 0 + img + display block + width 100% + h1 + color $primary + p + font 300 1.25em/1.6em $bodyTypeSans + //meta datea for page + .meta + font 500 0.8em/1.3em $bodyTypeSans + padding 5px 0 0 0 + border-top 1px solid $primary + background $white + 10% + 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% + 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 + span + custom-header(600, 2em, 1.5, $white) + width 80% + margin 0 auto + padding 20px 0 0 0 .recent, .featured display inline-block width 50% @@ -118,26 +143,23 @@ header::before color $white font-size 1.5em line-height 1.3 - .meta - label - font-size: 0.8em - a - font-size: 0.8em - section - color $white - .archive-item - display inline-block - width 30% - vertical-align top + + - footer - background $black - padding 10px - color $white - text-align center - font-size 0.8em - font-weight 600 + footer + background $white - 5% + 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 /** @@ -148,23 +170,34 @@ header::before @media only screen and (max-width: 640px) header + .menu + width 98% span font-size 2.5em @media only screen and (max-width: 480px) header - span - font-size 2em - width 60% - .index - p - font 400 0.8em/1.3em $bodyTypeSans - .recent, .featured - width 100% !important + .menu + width 96% + .container + article + .index, .page + margin 0 + p + font 300 1em/1.6em $bodyTypeSans + section + .index-lists + .recent, .featured + width 100% !important @media only screen and (max-width: 375px) header - span - font-size 1.5em - width 75% + .menu + width 95% + .container + article + .index, .page + margin 0 + p + font 300 0.9em/1.7em $bodyTypeSans