are0h
/
FipamoThemeKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

cleaned up base theme structure, color tweaks

Browse Source
develop
Are0h 4 years ago
parent 2a821a9294
commit 006dcf8be3
9 changed files with 182 additions and 146 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape Escape 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"

2
pug.config.js
Unescape Escape 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: {

11
src/themes/theme-fipamo-default/fipamo-default/archive.pug
Unescape Escape View File

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

23
src/themes/theme-fipamo-default/fipamo-default/frame.pug
Unescape Escape 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
.container#main-content
block main-content
<!-- Hacky Brown, but it's here so parallax images can be set dynamically -->
style. style.
header::before { background: url(!{default_bg}); background-size: cover; } header { background: url(!{default_bg}); background-size: cover; }
header header
.menu nav
a(href='/') .left
a.logo-link(href='/')
img#logo(src='/assets/images/global/the-logo.svg') img#logo(src='/assets/images/global/the-logo.svg')
br .right
if menu if menu
- var index = 0; - var index = 0;
- for ( index; index < menu.length; index++) - for ( index; index < menu.length; index++)
a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug
br br
span= welcome_message
script(src='/assets/scripts/start.min.js' type="text/javascript")
//span= welcome_message
.container#main-content
block main-content
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
Unescape Escape 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

5
src/themes/theme-fipamo-default/fipamo-default/page.pug
Unescape Escape View File

@ -2,6 +2,8 @@ extends frame
block main-content block main-content
section section
.page-title
span= title
article article
.page .page
p !{content} p !{content}
@ -18,6 +20,3 @@ block main-content
- 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

5
src/themes/theme-fipamo-default/fipamo-default/tags.pug
Unescape Escape View File

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

4
src/themes/theme-fipamo-default/styles/_colors.styl
Unescape Escape 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;

185
src/themes/theme-fipamo-default/styles/_structure.styl
Unescape Escape 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
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 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 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
.index, .page
margin 0
p p
font 400 0.8em/1.3em $bodyTypeSans font 300 1em/1.6em $bodyTypeSans
section
.index-lists
.recent, .featured .recent, .featured
width 100% !important 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

Write Preview
Loading…
Cancel
Save