cleaned up base theme structure, color tweaks

This commit is contained in:
Are0h 2020-09-02 22:49:59 -07:00
parent 2a821a9294
commit 006dcf8be3
9 changed files with 182 additions and 146 deletions

View file

@ -5,7 +5,7 @@
"description": "Theming tool pack for Fipamo", "description": "Theming tool pack for Fipamo",
"repository": "https://code.playvicio.us/Are0h/Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo",
"scripts": { "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": { "engines": {
"node": ">=10.16.0" "node": ">=10.16.0"

View file

@ -10,7 +10,7 @@ module.exports = {
default_bg: '/assets/images/global/default-bg.jpg', default_bg: '/assets/images/global/default-bg.jpg',
default_avi: '/assets/images/global/default-avi.png', default_avi: '/assets/images/global/default-avi.png',
content: content:
"The path of the <a href='#'>righteous</a> 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.", "<img src='/assets/images/global/default-avi.png'><br>The path of the <a href='#'>righteous</a> 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' }], bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }],
tag_list: [{ title: 'Swaggy Disgust', slug: 'swaggy-disgust', path: '2020/06' }], tag_list: [{ title: 'Swaggy Disgust', slug: 'swaggy-disgust', path: '2020/06' }],
meta: { meta: {

View file

@ -2,20 +2,21 @@ extends frame
block main-content block main-content
section section
article .page-title
span Archive
article
.page
- var index = 0; - var index = 0;
- for ( index; index < archives.length; index++) - for ( index; index < archives.length; index++)
.archive-item .archive-item
h1= archives[index].year span.year= archives[index].year
- var i = 0; - var i = 0;
- for (i; i < archives[index].year_data.length; i++) - for (i; i < archives[index].year_data.length; i++)
- var data = archives[index].year_data[i]; - var data = archives[index].year_data[i];
p= data.full_month .archive-month
- var x = 0; span.month= data.full_month
- for (x; x < data.pages.length; x++) - var x = 0;
-var page = data.pages[x]; - for (x; x < data.pages.length; x++)
a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title -var page = data.pages[x];
br a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title
br
footer
| © 2020 Fipamo by PV

View file

@ -10,22 +10,27 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
meta(name="twitter:image" content=image) meta(name="twitter:image" content=image)
link(rel='stylesheet', href='/assets/css/base.css', type='text/css') link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
body 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 .container#main-content
block main-content block main-content
<!-- Hacky Brown, but it's here so parallax images can be set dynamically --> footer
style. .inner
header::before { background: url(!{default_bg}); background-size: cover; } a(href='/archives') Archives
header br
.menu | © 2020 Fipamo by PV
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
script(src='/assets/scripts/start.min.js' type="text/javascript") script(src='/assets/scripts/start.min.js' type="text/javascript")

View file

@ -3,7 +3,10 @@ extends frame
block main-content block main-content
article article
.index .index
h2= title
p !{content} p !{content}
section
.index-lists
.recent .recent
span Recent span Recent
br br
@ -20,9 +23,5 @@ block main-content
- for ( index; index < featured_posts.length; index++) - for ( index; index < featured_posts.length; index++)
a(href="/"+featured_posts[index].metadata.path+"/"+featured_posts[index].metadata.slug)= featured_posts[index].metadata.title a(href="/"+featured_posts[index].metadata.path+"/"+featured_posts[index].metadata.slug)= featured_posts[index].metadata.title
br br
br
br
a(href='/archives') The Archives
footer
| © 2020 Fipamo by PV

View file

@ -2,22 +2,21 @@ extends frame
block main-content block main-content
section section
article .page-title
.page span= title
p !{content} article
.meta .page
| !{meta.who} p !{content}
.meta
| dropped this | !{meta.who}
| !{meta.when} | dropped this
br
| !{meta.when}
br
| tags: | tags:
- var i = 0; - var i = 0;
- for (i; i < meta.tags.length; i++) - for (i; i < meta.tags.length; i++)
- var tag = meta.tags[i] - var tag = meta.tags[i]
a(href="/tags/"+tag.slug)= tag.label a(href="/tags/"+tag.slug)= tag.label
footer
| © 2020 Fipamo by PV

View file

@ -2,12 +2,11 @@ extends frame
block main-content block main-content
section section
article .page-title
.page span= title
- var index = 0; article
- for ( index; index < tag_list.length; index++) .page
a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title} - var index = 0;
br - for ( index; index < tag_list.length; index++)
a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title}
footer br
| © 2020 Fipamo by PV

View file

@ -1,5 +1,5 @@
$primary = #34495e; $primary = #151d26;
$secondary = #FC6399; $secondary = #FC6399;
$highlight = #7ED07E; $highlight = #7ED07E;
$white = #d5cfba; $white = #ebe5d4;
$black = #32302f; $black = #32302f;

View file

@ -4,10 +4,10 @@ html
width 100% width 100%
height 100% height 100%
overflow hidden overflow hidden
font 400 1.3em/1.1em $bodyTypeSans font 400 1.2em/1.4em $bodyTypeSans
body body
color white background $white
margin 0 margin 0
padding 0 padding 0
perspective 1px perspective 1px
@ -30,64 +30,43 @@ svg.icons
fill $white fill $white
header header
box-sizing border-box background $primary
min-height 100vh height 90%
position relative width 100%
transform-style inherit border-top $white 3px solid
width 100vw nav
//text-align center width 97%
color $white margin 10px auto
border-bottom 1px $black solid color $primary
border-top 5px $primary solid .left,.right
span width 50%
margin 0 display inline-block
position absolute vertical-align top
top 50% .left
left 50% a.logo-link
transform translate(-50%, -50%) border-bottom none
font-weight: 600 margin 0 0 20px 0
padding 15px 20px 10px 20px display block
font-size 3em #logo
line-height 1 width 50px
color $white border-bottom none
text-drop-shadow($black, .9, 1px, 1px, 1px) .right
.menu text-align right
padding 20px
width: 200px
text-align: left
color $primary
a.menu-link a.menu-link
background $secondary background $secondary
margin-bottom 4px margin-bottom 4px
padding 3px padding 3px
border-radius 3px border-radius 2px
display inline-block display inline-block
font-size 0.8em font-size 0.8em
border-bottom none
&:hover &:hover
background $secondary + 20% background $secondary + 50%
#logo
width 30px
header,header:before
background 50% 50% / cover
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 .container
z-index 2 z-index 2
position absolute
top 100vh
background $white background $white
line-height 30px line-height 30px
font-weight lighter font-weight lighter
@ -99,16 +78,62 @@ header::before
width: 80% width: 80%
height 80% height 80%
max-width 840px max-width 840px
min-height 500px //min-height 500px
background $white background $white
vertical-align top vertical-align top
color $black color $black
margin 0 auto margin 0 auto
span //.index, .page
custom-header(600, 2em, 1.5, $primary) //margin 30px
.index, .page .index, .page
margin 30px padding 0 0 15px 0
.index 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 .recent, .featured
display inline-block display inline-block
width 50% width 50%
@ -118,26 +143,23 @@ header::before
color $white color $white
font-size 1.5em font-size 1.5em
line-height 1.3 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 footer
background $black background $white - 5%
padding 10px padding 10px
color $white color $primary
text-align center font-size 0.8em
font-size 0.8em font-weight 600
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) @media only screen and (max-width: 640px)
header header
.menu
width 98%
span span
font-size 2.5em font-size 2.5em
@media only screen and (max-width: 480px) @media only screen and (max-width: 480px)
header header
span .menu
font-size 2em width 96%
width 60% .container
.index article
p .index, .page
font 400 0.8em/1.3em $bodyTypeSans margin 0
.recent, .featured p
width 100% !important font 300 1em/1.6em $bodyTypeSans
section
.index-lists
.recent, .featured
width 100% !important
@media only screen and (max-width: 375px) @media only screen and (max-width: 375px)
header header
span .menu
font-size 1.5em width 95%
width 75% .container
article
.index, .page
margin 0
p
font 300 0.9em/1.7em $bodyTypeSans