projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

responsive for dash index plugged in

Browse source
This commit is contained in:
Ro 2019-03-03 11:49:03 -05:00
parent 2f5d121284
commit c62fbf27c5
7 changed files with 169 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
themes/dash/assets/css/dash.css
View file

@ -1599,33 +1599,31 @@ svg.icons {
position: relative; position: relative;
} }
.main-container section header { .main-container section header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.main-container section header #header-wrapper {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 50px auto; margin: 0 auto;
} }
.main-container section header #header-wrapper #header-one, .main-container section header #wrapper {
.main-container section header #header-wrapper #header-two { padding: 0.75rem;
z-index: 10;
position: relative;
} }
.main-container section header #header-wrapper #header-one #the-logo, .main-container section header #wrapper #left,
.main-container section header #header-wrapper #header-two #the-logo { .main-container section header #wrapper #right {
width: 50%;
display: inline-block;
vertical-align: top;
}
.main-container section header #wrapper #left #the-logo,
.main-container section header #wrapper #right #the-logo {
width: 40px; width: 40px;
} }
.main-container section header #header-wrapper #header-two { .main-container section header #wrapper #right {
text-align: right; text-align: right;
color: #f2f1ef; color: #f2f1ef;
} }
.main-container section header #header-wrapper #header-two a { .main-container section header #wrapper #right a {
text-decoration-color: #fc6399; text-decoration-color: #fc6399;
} }
.main-container section header #header-wrapper #header-two label#the-title { .main-container section header #wrapper #right label#the-title {
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
color: #f5ab35; color: #f5ab35;
@ -1633,7 +1631,7 @@ svg.icons {
display: block; display: block;
line-height: 0.8; line-height: 0.8;
} }
.main-container section header #header-wrapper #header-two #dash-menu { .main-container section header #wrapper #right #dash-menu {
text-align: right; text-align: right;
} }
::-moz-selection { ::-moz-selection {
@ -1656,77 +1654,18 @@ svg.icons {
background-color: #fc6399; background-color: #fc6399;
color: #f2f1ef; color: #f2f1ef;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 800px) {
.main-container .content #the-intro { .main-container section header #wrapper #left,
font-size: 31px; .main-container section header #wrapper #right {
line-height: 35px; display: inline-block;
} }
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.main-container .content #the-intro { .main-container section header #wrapper #left {
font-size: 25px; width: 30%;
line-height: 33px;
} }
.main-container .content #index-display span, .main-container section header #wrapper #right {
.main-container .content #index-display a { width: 70%;
font: 400 1.2em $bodyType;
}
}
@media only screen and (max-width: 375px) {
.main-container .header {
width: 90%;
}
.main-container .header .header-desc h1 {
line-height: 1rem;
font-size: 3.3rem;
}
.main-container .header .header-desc span a {
color: #f2f1ef;
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;
}
.main-container .header .header-desc #the-intro {
color: #b2cce5;
opacity: 0;
font: 400 1.8em $titleType;
display: inline-block;
width: 95%;
}
.main-container .header .header-desc #item-intro {
width: 95%;
}
.main-container .header .header-desc #item-intro label {
font-size: 2em;
}
.main-container .content #the-intro {
font-size: 24px;
line-height: 33px;
}
.main-container .content #index-display label {
font-size: 7em;
}
.main-container .content #index-display #recent-work,
.main-container .content #index-display #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;
}
.main-container .content #the-intro {
font-size: 19px;
line-height: 28px;
} }
} }
/** /**
@ -1853,7 +1792,7 @@ svg.icons {
float: right; float: right;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
font-family: "Apercu-mono"; font-family: 'Apercu-mono';
font-size: 0.5em; font-size: 0.5em;
padding: 7px; padding: 7px;
color: #161d23; color: #161d23;
@ -1889,6 +1828,35 @@ svg.icons {
height: 275px; height: 275px;
margin: 15px 0 0 0; margin: 15px 0 0 0;
} }
@media only screen and (max-width: 768px) {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
width: 48.9%;
}
}
@media only screen and (max-width: 640px) {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
width: 48.5%;
}
}
@media only screen and (max-width: 480px) {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 {
width: 40%;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu {
width: 60%;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
width: 100%;
margin: 15px 0 0 0;
height: 400px;
}
}
/** /**
------------------------------- -------------------------------
-- Settings -- Settings

2
themes/dash/assets/css/dash.css.map
View file

File diff suppressed because one or more lines are too long

6
themes/dash/frame.pug
View file

@ -17,11 +17,11 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
.main-container#main-content .main-container#main-content
section#dash-index-content section#dash-index-content
header#header header#header
#header-wrapper.columns #wrapper
#header-one.column #left
a(href="/@/dashboard") a(href="/@/dashboard")
img#the-logo(src="/dash/assets/images/the-logo.svg") img#the-logo(src="/dash/assets/images/the-logo.svg")
#header-two.column #right
label#the-title= welcome label#the-title= welcome
-if(user_status) -if(user_status)
include partials/dash-nav include partials/dash-nav

28
themes/dash/src/styles/dash.styl
View file

@ -3,72 +3,72 @@
-- Bulma -- Bulma
------------------------------- -------------------------------
* */ * */
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all'; @import '../../../../node_modules/bulma.styl/stylus/utilities/_all'
@import '../../../../node_modules/bulma.styl/stylus/grid/columns'; @import '../../../../node_modules/bulma.styl/stylus/grid/columns'
/** /**
------------------------------- -------------------------------
-- Colors -- Colors
------------------------------- -------------------------------
* */ * */
@import 'main/_colors'; @import 'main/_colors'
/** /**
------------------------------- -------------------------------
-- Mixins -- Mixins
------------------------------- -------------------------------
* */ * */
@import 'main/_mixins'; @import 'main/_mixins'
/** /**
------------------------------- -------------------------------
-- Normalize -- Normalize
------------------------------- -------------------------------
* */ * */
@import 'main/_normalize'; @import 'main/_normalize'
/** /**
------------------------------- -------------------------------
-- Typography -- Typography
------------------------------- -------------------------------
* */ * */
@import 'main/_typography'; @import 'main/_typography'
/** /**
------------------------------- -------------------------------
-- Main Structure -- Main Structure
------------------------------- -------------------------------
* */ * */
@import 'main/_structure'; @import 'main/_structure'
/** /**
------------------------------- -------------------------------
-- Index -- Index
------------------------------- -------------------------------
* */ * */
@import 'main/_index'; @import 'main/_index'
/** /**
------------------------------- -------------------------------
-- Settings -- Settings
------------------------------- -------------------------------
* */ * */
@import 'main/_settings'; @import 'main/_settings'
/** /**
------------------------------- -------------------------------
-- Navigation -- Navigation
------------------------------- -------------------------------
* */ * */
@import 'main/_navigation'; @import 'main/_navigation'
/** /**
------------------------------- -------------------------------
-- Forms -- Forms
------------------------------- -------------------------------
* */ * */
@import 'main/_forms'; @import 'main/_forms'
/** /**
------------------------------- -------------------------------
-- Blog -- Blog
------------------------------- -------------------------------
* */ * */
@import 'main/_posts'; @import 'main/_posts'
/** /**
------------------------------- -------------------------------
-- Editor -- Editor
------------------------------- -------------------------------
* */ * */
@import 'main/_editor'; @import 'main/_editor'
@import 'main/_editor-highlight'; @import 'main/_editor-highlight'

94
themes/dash/src/styles/main/_index.styl
View file

@ -74,53 +74,60 @@
#recent-list #recent-list
padding 0.75em padding 0.75em
position relative position relative
.recent-header .recent-header
height 50px height 50px
h3 h3
vertical-align: top vertical-align top
display inline-block display inline-block
width: 50% width 50%
.index-menu .index-menu
width: 50% width 50%
text-align: right text-align right
vertical-align: top vertical-align top
display inline-block display inline-block
margin 24px 0 24px 0 margin 24px 0 24px 0
right 10px right 10px
color $white color $white
a a
text-decoration-color: $highlight text-decoration-color $highlight
a.post-link a.post-link
font-size 1.5em font-size 1.5em
font-weight 300 font-weight 300
display inline-block display inline-block
border-radius 3px border-radius 3px
vertical-align top vertical-align top
text-decoration: none text-decoration none
position relative position relative
label label
font-size: .7em font-size 0.7em
font-weight: 700 font-weight 700
color $primary - 60% color $primary - 60%
padding 5px padding 5px
vertical-align: top vertical-align top
display: inline-block display inline-block
width: 60% width 60%
span span
float: right float right
vertical-align: top vertical-align top
display: inline-block display inline-block
font-family: "Apercu-mono" font-family 'Apercu-mono'
font-size: .5em font-size 0.5em
padding: 7px padding 7px
color $primary - 60% color $primary - 60%
div div
width 100% width 100%
background: $white; background $white
position: absolute position absolute
bottom: 0 bottom 0
border-radius: 0 0 3px 3px border-radius 0 0 3px 3px
a:nth-child(3) a:nth-child(3)
width 100% width 100%
@ -144,4 +151,45 @@
a:nth-child(7) a:nth-child(7)
width 49% width 49%
height 275px height 275px
margin: 15px 0 0 0 margin 15px 0 0 0
/**
-------------------------------
-- Responsive
-------------------------------
* */
@media only screen and (max-width: 768px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
a:nth-child(4), a:nth-child(6)
width 48.9%
@media only screen and (max-width: 640px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
a:nth-child(4), a:nth-child(6)
width 48.5%
@media only screen and (max-width: 480px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
.recent-header
h3
width 40%
.index-menu
width 60%
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
width 100%
margin 15px 0 0 0
height 400px

107
themes/dash/src/styles/main/_structure.styl
View file

@ -40,24 +40,22 @@ svg.icons
section section
header header
width 100%
height 100px
margin 0
padding 0
#header-wrapper
width 100% width 100%
max-width 900px max-width 900px
margin 50px auto margin 0 auto
#header-one, #header-two #wrapper
z-index 10 padding 0.75rem
position relative
#left, #right
width 50%
display inline-block
vertical-align top
#the-logo #the-logo
width 40px width 40px
#header-two #right
text-align right text-align right
color $white color $white
@ -105,82 +103,21 @@ svg.icons
-- Responsive -- Responsive
------------------------------- -------------------------------
* */ * */
@media only screen and (max-width: 640px) @media only screen and (max-width: 800px)
.main-container .main-container
.content section
#the-intro header
font-size 31px #wrapper
line-height 35px #left, #right
display inline-block
@media only screen and (max-width: 480px) @media only screen and (max-width: 480px)
.main-container .main-container
.content section
#the-intro header
font-size 25px #wrapper
line-height 33px #left
width 30%
#index-display #right
span, a width 70%
font 400 1.2em $bodyType
@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