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

cleaned up responsive for default themes, adjusted colors for light theme

Browse source
This commit is contained in:
Are0h 2020-08-04 14:27:53 -07:00
parent 0ea0efcb09
commit e24e7c9c2b
11 changed files with 105 additions and 400 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/themes/theme-default-dark/default-dark/index.pug
View file

@ -4,15 +4,16 @@ block main-content
article article
.index .index
p !{content} p !{content}
span Recent .recent
br span Recent
- if(recent_posts) br
- var index = 0; - if(recent_posts)
- for ( index; index < recent_posts.length; index++) - var index = 0;
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title - for ( index; index < recent_posts.length; index++)
label= " "+recent_posts[index].created a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
br br
- if(featured_posts) - if(featured_posts)
.featured
span Featured span Featured
br br
- var index = 0; - var index = 0;
@ -20,8 +21,8 @@ block main-content
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') Post Archive br
label The whole dirty. a(href='/archives') The Archives
footer footer
| © 2020 Fipamo by PV | © 2020 Fipamo by PV

24
src/themes/theme-default-dark/styles/_index.styl
View file

@ -1,24 +0,0 @@
#index-content
width 100%
max-width 1024px
margin 0 auto;
header
#header-one
#header-two
#the-intro
margin 80px 0 0 0
#index-display
padding 20px
width 100%
max-width 1024px
z-index 10
position relative
#recent-title
color $white
font 400 2em $titleType
vertical-align top
.index-block
width 50%
display inline-block
vertical-align top
margin-bottom 50px

64
src/themes/theme-default-dark/styles/_page.styl
View file

@ -1,64 +0,0 @@
#blog-content
#blog-display
#blog-list
.blog-entry
display inline-block
height 500px;
width 50%
background-size cover
background $black
position relative
text-align: center;
vertical-align: middle;
line-height: 250px;
label
background $secondary
padding 5px
border-radius 3px
#post-content
width 100%
margin -10px 0 0 0
#header-post
width 100%
min-height 350px
background $black
position relative
padding 0
margin 0
img
padding 0
margin 0
position relative
display block
width 100%
#header-one
position relative
width 80%
margin 0 auto
padding 30px 0 0 0
label#the-title a
font 500 2em $titleType
width 97px
height 115px
color $secondary
text-decoration none
display block
word-break: break-all
margin 10px 0 0 10px
span#post-title
font 200 4.5em/1em $titleType
color $white
margin 20px 0 0 10px
padding 20px 0 80px 0
display block
#post-display
color $tertiary
width 80%
margin 50px auto
font 400 1.5em $bodyType
padding-bottom 50px

113
src/themes/theme-default-dark/styles/_structure.styl
View file

@ -45,16 +45,26 @@ header
top 50% top 50%
left 50% left 50%
transform translate(-50%, -50%) transform translate(-50%, -50%)
font-weight: 100 font-weight: 600
padding 15px 20px 10px 20px padding 15px 20px 10px 20px
font-size 3em font-size 3em
line-height 1 line-height 1
color $secondary color $secondary
text-drop-shadow($black, .9, 1px, 1px, 1px)
.menu .menu
padding 20px padding 20px
width: 100% width: 200px
text-align: left text-align: left
color $white color $white
a.menu-link
background $black
margin-bottom 4px
padding 3px
border-radius 3px
display inline-block
font-size 0.8em
&:hover
color $white
#logo #logo
width 30px width 30px
header,header:before header,header:before
@ -97,6 +107,10 @@ header::before
span span
custom-header(600, 2em, 1.5, $secondary) custom-header(600, 2em, 1.5, $secondary)
.index, .page .index, .page
.recent, .featured
display inline-block
width 50%
vertical-align top
margin 30px margin 30px
label label
background $black background $black
@ -108,8 +122,6 @@ header::before
font-size: 0.8em font-size: 0.8em
a a
font-size: 0.8em font-size: 0.8em
section section
color $white color $white
.archive-item .archive-item
@ -119,19 +131,13 @@ header::before
footer footer
background $highlight background $white
padding 10px padding 10px
color $black color $black
text-align center text-align center
font-size 0.8em font-size 0.8em
font-weight 600 font-weight 600
/** /**
------------------------------- -------------------------------
@ -140,75 +146,24 @@ header::before
**/ **/
@media only screen and (max-width: 640px) @media only screen and (max-width: 640px)
.main-container header
.content span
#the-intro font-size 2.5em
font-size: 31px;
line-height: 35px;
@media only screen and (max-width: 480px) @media only screen and (max-width: 480px)
.main-container header
.content span
#the-intro font-size 2em
font-size: 25px; width 60%
line-height: 33px; .index
#index-display p
span, a font 400 0.8em/1.3em $bodyTypeSans
font 400 1.2em $bodyType .recent, .featured
width 100% !important
@media only screen and (max-width: 375px) @media only screen and (max-width: 375px)
header
.main-container span
.header font-size 1.5em
width 90% width 75%
.header-desc
h1
line-height: 1rem;
font-size: 3.3rem;
span a
color $white
width 250px
font-weight 300
display inline-block
word-break: break-all;
font 300 7em/1em $titleType
text-decoration none
margin 0 0 50px 0
#the-intro
color $secondary
opacity 0
font 400 1.8em $titleType
display inline-block
width 95%
#item-intro
width 95%
label
font-size 2em
.content
#the-intro
font-size: 24px;
line-height: 33px;
#index-display
label
font-size 7em
#recent-work, #recent-blog
float none
display block
margin 0 auto
text-align left
padding-bottom 30px
@media only screen and (max-width: 320px)
.main-container
.header
.header-desc
h1
line-height: 1rem;
font-size: 2.9rem;
.content
#the-intro
font-size: 19px;
line-height: 28px;

16
src/themes/theme-default-dark/styles/base.styl
View file

@ -38,15 +38,6 @@
@import "_structure" @import "_structure"
/**
-------------------------------
-- Index
-------------------------------
**/
@import "_index"
/** /**
------------------------------- -------------------------------
-- Forms -- Forms
@ -55,10 +46,3 @@
@import '_forms' @import '_forms'
/**
-------------------------------
-- Blog
-------------------------------
**/
@import '_page'

23
src/themes/theme-default-light/default-light/index.pug
View file

@ -4,15 +4,16 @@ block main-content
article article
.index .index
p !{content} p !{content}
span Recent .recent
br span Recent
- if(recent_posts) br
- var index = 0; - if(recent_posts)
- for ( index; index < recent_posts.length; index++) - var index = 0;
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title - for ( index; index < recent_posts.length; index++)
label= " "+recent_posts[index].created a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
br br
- if(featured_posts) - if(featured_posts)
.featured
span Featured span Featured
br br
- var index = 0; - var index = 0;
@ -20,8 +21,8 @@ block main-content
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') Post Archive br
label The whole dirty. a(href='/archives') The Archives
footer footer
| © 2020 Fipamo by PV | © 2020 Fipamo by PV

2
src/themes/theme-default-light/default-light/theme.json
View file

@ -1,6 +1,6 @@
{ {
"name": "default-light", "name": "default-light",
"display-name": "Fipamo Oh Won Light", "display-name": "Fipamo Oh Won Lyte",
"author": "Are0h", "author": "Are0h",
"description": "The most dangerous default theme in the known universe.", "description": "The most dangerous default theme in the known universe.",
"version": "1.0.0" "version": "1.0.0"

24
src/themes/theme-default-light/styles/_index.styl
View file

@ -1,24 +0,0 @@
#index-content
width 100%
max-width 1024px
margin 0 auto;
header
#header-one
#header-two
#the-intro
margin 80px 0 0 0
#index-display
padding 20px
width 100%
max-width 1024px
z-index 10
position relative
#recent-title
color $white
font 400 2em $titleType
vertical-align top
.index-block
width 50%
display inline-block
vertical-align top
margin-bottom 50px

64
src/themes/theme-default-light/styles/_page.styl
View file

@ -1,64 +0,0 @@
#blog-content
#blog-display
#blog-list
.blog-entry
display inline-block
height 500px;
width 50%
background-size cover
background $black
position relative
text-align: center;
vertical-align: middle;
line-height: 250px;
label
background $secondary
padding 5px
border-radius 3px
#post-content
width 100%
margin -10px 0 0 0
#header-post
width 100%
min-height 350px
background $black
position relative
padding 0
margin 0
img
padding 0
margin 0
position relative
display block
width 100%
#header-one
position relative
width 80%
margin 0 auto
padding 30px 0 0 0
label#the-title a
font 500 2em $titleType
width 97px
height 115px
color $secondary
text-decoration none
display block
word-break: break-all
margin 10px 0 0 10px
span#post-title
font 200 4.5em/1em $titleType
color $white
margin 20px 0 0 10px
padding 20px 0 80px 0
display block
#post-display
color $tertiary
width 80%
margin 50px auto
font 400 1.5em $bodyType
padding-bottom 50px

136
src/themes/theme-default-light/styles/_structure.styl
View file

@ -20,10 +20,10 @@ body
a a
color $primary color $primary
text-decoration none text-decoration none
border-bottom 1px solid $white border-bottom 1px solid $highlight
object-transitions(.2s) object-transitions(.2s)
&:hover &:hover
border-bottom 1px solid $highlight border-bottom 1px solid $secondary
svg.icons svg.icons
width 25px width 25px
@ -37,24 +37,34 @@ header
width 100vw width 100vw
//text-align center //text-align center
color $white color $white
border-bottom 1px $white solid border-bottom 1px $black solid
border-top 5px $highlight solid border-top 5px $primary solid
span span
margin 0 margin 0
position absolute position absolute
top 50% top 50%
left 50% left 50%
transform translate(-50%, -50%) transform translate(-50%, -50%)
font-weight: 100 font-weight: 600
padding 15px 20px 10px 20px padding 15px 20px 10px 20px
font-size 3em font-size 3em
line-height 1 line-height 1
color $secondary color $white
text-drop-shadow($black, .9, 1px, 1px, 1px)
.menu .menu
padding 20px padding 20px
width: 100% width: 200px
text-align: left text-align: left
color $white color $primary
a.menu-link
background $secondary
margin-bottom 4px
padding 3px
border-radius 3px
display inline-block
font-size 0.8em
&:hover
background $secondary + 20%
#logo #logo
width 30px width 30px
header,header:before header,header:before
@ -90,17 +100,22 @@ header::before
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 span
custom-header(600, 2em, 1.5, $secondary) custom-header(600, 2em, 1.5, $primary)
.index, .page .index, .page
margin 30px margin 30px
.index
.recent, .featured
display inline-block
width 50%
vertical-align top
label label
background $white background $black
color $black color $white
font-size 1.5em font-size 1.5em
line-height 1.3 line-height 1.3
.meta .meta
@ -108,8 +123,6 @@ header::before
font-size: 0.8em font-size: 0.8em
a a
font-size: 0.8em font-size: 0.8em
section section
color $white color $white
.archive-item .archive-item
@ -119,19 +132,13 @@ header::before
footer footer
background $highlight background $black
padding 10px padding 10px
color $black color $white
text-align center text-align center
font-size 0.8em font-size 0.8em
font-weight 600 font-weight 600
/** /**
------------------------------- -------------------------------
@ -140,75 +147,24 @@ header::before
**/ **/
@media only screen and (max-width: 640px) @media only screen and (max-width: 640px)
.main-container header
.content span
#the-intro font-size 2.5em
font-size: 31px;
line-height: 35px;
@media only screen and (max-width: 480px) @media only screen and (max-width: 480px)
.main-container header
.content span
#the-intro font-size 2em
font-size: 25px; width 60%
line-height: 33px; .index
#index-display p
span, a font 400 0.8em/1.3em $bodyTypeSans
font 400 1.2em $bodyType .recent, .featured
width 100% !important
@media only screen and (max-width: 375px) @media only screen and (max-width: 375px)
header
.main-container span
.header font-size 1.5em
width 90% width 75%
.header-desc
h1
line-height: 1rem;
font-size: 3.3rem;
span a
color $white
width 250px
font-weight 300
display inline-block
word-break: break-all;
font 300 7em/1em $titleType
text-decoration none
margin 0 0 50px 0
#the-intro
color $secondary
opacity 0
font 400 1.8em $titleType
display inline-block
width 95%
#item-intro
width 95%
label
font-size 2em
.content
#the-intro
font-size: 24px;
line-height: 33px;
#index-display
label
font-size 7em
#recent-work, #recent-blog
float none
display block
margin 0 auto
text-align left
padding-bottom 30px
@media only screen and (max-width: 320px)
.main-container
.header
.header-desc
h1
line-height: 1rem;
font-size: 2.9rem;
.content
#the-intro
font-size: 19px;
line-height: 28px;

16
src/themes/theme-default-light/styles/base.styl
View file

@ -38,15 +38,6 @@
@import "_structure" @import "_structure"
/**
-------------------------------
-- Index
-------------------------------
**/
@import "_index"
/** /**
------------------------------- -------------------------------
-- Forms -- Forms
@ -55,10 +46,3 @@
@import '_forms' @import '_forms'
/**
-------------------------------
-- Blog
-------------------------------
**/
@import '_page'