projects/fipamothemekit
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

cleaned up base theme structure, color tweaks

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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"

2
pug.config.js
View file

@ -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 <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' }],
tag_list: [{ title: 'Swaggy Disgust', slug: 'swaggy-disgust', path: '2020/06' }],
meta: {

23
src/themes/theme-fipamo-default/fipamo-default/archive.pug
View file

@ -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
.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

37
src/themes/theme-fipamo-default/fipamo-default/frame.pug
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)
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
<!-- Hacky Brown, but it's here so parallax images can be set dynamically -->
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")

9
src/themes/theme-fipamo-default/fipamo-default/index.pug
View file

@ -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

35
src/themes/theme-fipamo-default/fipamo-default/page.pug
View file

@ -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
| tags:
- var i = 0;
- for (i; i < meta.tags.length; i++)
- var tag = meta.tags[i]
a(href="/tags/"+tag.slug)= tag.label

17
src/themes/theme-fipamo-default/fipamo-default/tags.pug
View file

@ -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
.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

4
src/themes/theme-fipamo-default/styles/_colors.styl
View file

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

199
src/themes/theme-fipamo-default/styles/_structure.styl
View file

@ -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