From e24e7c9c2bb354a980bc4e482bbb29ec46b49e28 Mon Sep 17 00:00:00 2001 From: Are0h Date: Tue, 4 Aug 2020 14:27:53 -0700 Subject: [PATCH] cleaned up responsive for default themes, adjusted colors for light theme --- .../theme-default-dark/default-dark/index.pug | 23 +-- .../theme-default-dark/styles/_index.styl | 24 ---- .../theme-default-dark/styles/_page.styl | 64 --------- .../theme-default-dark/styles/_structure.styl | 113 +++++---------- .../theme-default-dark/styles/base.styl | 16 --- .../default-light/index.pug | 23 +-- .../default-light/theme.json | 2 +- .../theme-default-light/styles/_index.styl | 24 ---- .../theme-default-light/styles/_page.styl | 64 --------- .../styles/_structure.styl | 136 ++++++------------ .../theme-default-light/styles/base.styl | 16 --- 11 files changed, 105 insertions(+), 400 deletions(-) delete mode 100644 src/themes/theme-default-dark/styles/_index.styl delete mode 100644 src/themes/theme-default-dark/styles/_page.styl delete mode 100644 src/themes/theme-default-light/styles/_index.styl delete mode 100644 src/themes/theme-default-light/styles/_page.styl diff --git a/src/themes/theme-default-dark/default-dark/index.pug b/src/themes/theme-default-dark/default-dark/index.pug index 323fca0..3f5042b 100644 --- a/src/themes/theme-default-dark/default-dark/index.pug +++ b/src/themes/theme-default-dark/default-dark/index.pug @@ -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 diff --git a/src/themes/theme-default-dark/styles/_index.styl b/src/themes/theme-default-dark/styles/_index.styl deleted file mode 100644 index ed6f9f5..0000000 --- a/src/themes/theme-default-dark/styles/_index.styl +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/themes/theme-default-dark/styles/_page.styl b/src/themes/theme-default-dark/styles/_page.styl deleted file mode 100644 index 571a6ed..0000000 --- a/src/themes/theme-default-dark/styles/_page.styl +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/themes/theme-default-dark/styles/_structure.styl b/src/themes/theme-default-dark/styles/_structure.styl index 5f59f7b..8419ddd 100644 --- a/src/themes/theme-default-dark/styles/_structure.styl +++ b/src/themes/theme-default-dark/styles/_structure.styl @@ -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,19 +131,13 @@ header::before footer - background $highlight + background $white padding 10px color $black text-align center font-size 0.8em font-weight 600 - - - - - - - + /** ------------------------------- @@ -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% diff --git a/src/themes/theme-default-dark/styles/base.styl b/src/themes/theme-default-dark/styles/base.styl index b80045c..b7bdad9 100644 --- a/src/themes/theme-default-dark/styles/base.styl +++ b/src/themes/theme-default-dark/styles/base.styl @@ -38,15 +38,6 @@ @import "_structure" -/** -------------------------------- --- Index -------------------------------- -**/ - -@import "_index" - - /** ------------------------------- -- Forms @@ -55,10 +46,3 @@ @import '_forms' -/** -------------------------------- --- Blog -------------------------------- -**/ - -@import '_page' diff --git a/src/themes/theme-default-light/default-light/index.pug b/src/themes/theme-default-light/default-light/index.pug index 323fca0..3f5042b 100644 --- a/src/themes/theme-default-light/default-light/index.pug +++ b/src/themes/theme-default-light/default-light/index.pug @@ -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 diff --git a/src/themes/theme-default-light/default-light/theme.json b/src/themes/theme-default-light/default-light/theme.json index 6c13ab8..d4c456b 100644 --- a/src/themes/theme-default-light/default-light/theme.json +++ b/src/themes/theme-default-light/default-light/theme.json @@ -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" diff --git a/src/themes/theme-default-light/styles/_index.styl b/src/themes/theme-default-light/styles/_index.styl deleted file mode 100644 index ed6f9f5..0000000 --- a/src/themes/theme-default-light/styles/_index.styl +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/themes/theme-default-light/styles/_page.styl b/src/themes/theme-default-light/styles/_page.styl deleted file mode 100644 index 571a6ed..0000000 --- a/src/themes/theme-default-light/styles/_page.styl +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/themes/theme-default-light/styles/_structure.styl b/src/themes/theme-default-light/styles/_structure.styl index 6a778d2..222764e 100644 --- a/src/themes/theme-default-light/styles/_structure.styl +++ b/src/themes/theme-default-light/styles/_structure.styl @@ -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 @@ -90,17 +100,22 @@ header::before height 80% max-width 840px min-height 500px - background $white + background $white vertical-align top 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,19 +132,13 @@ header::before footer - background $highlight + background $black padding 10px - color $black + color $white text-align center font-size 0.8em font-weight 600 - - - - - - - + /** ------------------------------- @@ -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% diff --git a/src/themes/theme-default-light/styles/base.styl b/src/themes/theme-default-light/styles/base.styl index b80045c..b7bdad9 100644 --- a/src/themes/theme-default-light/styles/base.styl +++ b/src/themes/theme-default-light/styles/base.styl @@ -38,15 +38,6 @@ @import "_structure" -/** -------------------------------- --- Index -------------------------------- -**/ - -@import "_index" - - /** ------------------------------- -- Forms @@ -55,10 +46,3 @@ @import '_forms' -/** -------------------------------- --- Blog -------------------------------- -**/ - -@import '_page'