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
.index
p !{content}
span Recent
br
- if(recent_posts)
- var index = 0;
- for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
label= " "+recent_posts[index].created
br
- if(featured_posts)
.recent
span Recent
br
- if(recent_posts)
- var index = 0;
- for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
br
- if(featured_posts)
.featured
span Featured
br
- 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
br
br
a(href='/archives') Post Archive
label The whole dirty.
br
a(href='/archives') The Archives
footer
| © 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

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

@ -45,16 +45,26 @@ header
top 50%
left 50%
transform translate(-50%, -50%)
font-weight: 100
font-weight: 600
padding 15px 20px 10px 20px
font-size 3em
line-height 1
color $secondary
text-drop-shadow($black, .9, 1px, 1px, 1px)
.menu
padding 20px
width: 100%
width: 200px
text-align: left
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
width 30px
header,header:before
@ -97,6 +107,10 @@ header::before
span
custom-header(600, 2em, 1.5, $secondary)
.index, .page
.recent, .featured
display inline-block
width 50%
vertical-align top
margin 30px
label
background $black
@ -108,8 +122,6 @@ header::before
font-size: 0.8em
a
font-size: 0.8em
section
color $white
.archive-item
@ -119,7 +131,7 @@ header::before
footer
background $highlight
background $white
padding 10px
color $black
text-align center
@ -127,12 +139,6 @@ header::before
font-weight 600
/**
-------------------------------
-- Responsive
@ -140,75 +146,24 @@ header::before
**/
@media only screen and (max-width: 640px)
.main-container
.content
#the-intro
font-size: 31px;
line-height: 35px;
header
span
font-size 2.5em
@media only screen and (max-width: 480px)
.main-container
.content
#the-intro
font-size: 25px;
line-height: 33px;
#index-display
span, a
font 400 1.2em $bodyType
header
span
font-size 2em
width 60%
.index
p
font 400 0.8em/1.3em $bodyTypeSans
.recent, .featured
width 100% !important
@media only screen and (max-width: 375px)
.main-container
.header
width 90%
.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;
header
span
font-size 1.5em
width 75%

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

@ -38,15 +38,6 @@
@import "_structure"
/**
-------------------------------
-- Index
-------------------------------
**/
@import "_index"
/**
-------------------------------
-- Forms
@ -55,10 +46,3 @@
@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
.index
p !{content}
span Recent
br
- if(recent_posts)
- var index = 0;
- for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
label= " "+recent_posts[index].created
br
- if(featured_posts)
.recent
span Recent
br
- if(recent_posts)
- var index = 0;
- for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
br
- if(featured_posts)
.featured
span Featured
br
- 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
br
br
a(href='/archives') Post Archive
label The whole dirty.
br
a(href='/archives') The Archives
footer
| © 2020 Fipamo by PV

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

@ -1,6 +1,6 @@
{
"name": "default-light",
"display-name": "Fipamo Oh Won Light",
"display-name": "Fipamo Oh Won Lyte",
"author": "Are0h",
"description": "The most dangerous default theme in the known universe.",
"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

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

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

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

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