forked from projects/fipamo
responsive for dash index plugged in
This commit is contained in:
Ro
parent
2f5d121284
commit
c62fbf27c5
7 changed files with 169 additions and 216 deletions
|
|
@ -1599,33 +1599,31 @@ svg.icons {
|
|||
position: relative;
|
||||
}
|
||||
.main-container section header {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.main-container section header #header-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.main-container section header #header-wrapper #header-one,
|
||||
.main-container section header #header-wrapper #header-two {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.main-container section header #wrapper {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.main-container section header #header-wrapper #header-one #the-logo,
|
||||
.main-container section header #header-wrapper #header-two #the-logo {
|
||||
.main-container section header #wrapper #left,
|
||||
.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;
|
||||
}
|
||||
.main-container section header #header-wrapper #header-two {
|
||||
.main-container section header #wrapper #right {
|
||||
text-align: right;
|
||||
color: #f2f1ef;
|
||||
}
|
||||
.main-container section header #header-wrapper #header-two a {
|
||||
.main-container section header #wrapper #right a {
|
||||
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-weight: 400;
|
||||
color: #f5ab35;
|
||||
|
|
@ -1633,7 +1631,7 @@ svg.icons {
|
|||
display: block;
|
||||
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;
|
||||
}
|
||||
::-moz-selection {
|
||||
|
|
@ -1656,77 +1654,18 @@ svg.icons {
|
|||
background-color: #fc6399;
|
||||
color: #f2f1ef;
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.main-container .content #the-intro {
|
||||
font-size: 31px;
|
||||
line-height: 35px;
|
||||
@media only screen and (max-width: 800px) {
|
||||
.main-container section header #wrapper #left,
|
||||
.main-container section header #wrapper #right {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.main-container .content #the-intro {
|
||||
font-size: 25px;
|
||||
line-height: 33px;
|
||||
.main-container section header #wrapper #left {
|
||||
width: 30%;
|
||||
}
|
||||
.main-container .content #index-display span,
|
||||
.main-container .content #index-display a {
|
||||
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;
|
||||
.main-container section header #wrapper #right {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
|
@ -1853,7 +1792,7 @@ svg.icons {
|
|||
float: right;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-family: "Apercu-mono";
|
||||
font-family: 'Apercu-mono';
|
||||
font-size: 0.5em;
|
||||
padding: 7px;
|
||||
color: #161d23;
|
||||
|
|
@ -1889,6 +1828,35 @@ svg.icons {
|
|||
height: 275px;
|
||||
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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -17,11 +17,11 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
|||
.main-container#main-content
|
||||
section#dash-index-content
|
||||
header#header
|
||||
#header-wrapper.columns
|
||||
#header-one.column
|
||||
#wrapper
|
||||
#left
|
||||
a(href="/@/dashboard")
|
||||
img#the-logo(src="/dash/assets/images/the-logo.svg")
|
||||
#header-two.column
|
||||
#right
|
||||
label#the-title= welcome
|
||||
-if(user_status)
|
||||
include partials/dash-nav
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
- var index = 0;
|
||||
- var cap = 5; // number of posts to display
|
||||
- for ( index; index < cap; index++)
|
||||
a.post-link(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
|
||||
div
|
||||
label= items[index].post.title
|
||||
span= items[index].post.created
|
||||
|
||||
a.post-link(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
|
||||
div
|
||||
label= items[index].post.title
|
||||
span= items[index].post.created
|
||||
|
||||
|
|
|
|||
|
|
@ -3,72 +3,72 @@
|
|||
-- Bulma
|
||||
-------------------------------
|
||||
* */
|
||||
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all';
|
||||
@import '../../../../node_modules/bulma.styl/stylus/grid/columns';
|
||||
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all'
|
||||
@import '../../../../node_modules/bulma.styl/stylus/grid/columns'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Colors
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_colors';
|
||||
@import 'main/_colors'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Mixins
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_mixins';
|
||||
@import 'main/_mixins'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Normalize
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_normalize';
|
||||
@import 'main/_normalize'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Typography
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_typography';
|
||||
@import 'main/_typography'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Main Structure
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_structure';
|
||||
@import 'main/_structure'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Index
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_index';
|
||||
@import 'main/_index'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Settings
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_settings';
|
||||
@import 'main/_settings'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Navigation
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_navigation';
|
||||
@import 'main/_navigation'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Forms
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_forms';
|
||||
@import 'main/_forms'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Blog
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_posts';
|
||||
@import 'main/_posts'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Editor
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_editor';
|
||||
@import 'main/_editor-highlight';
|
||||
@import 'main/_editor'
|
||||
@import 'main/_editor-highlight'
|
||||
|
|
|
|||
|
|
@ -74,53 +74,60 @@
|
|||
#recent-list
|
||||
padding 0.75em
|
||||
position relative
|
||||
|
||||
.recent-header
|
||||
height 50px
|
||||
|
||||
h3
|
||||
vertical-align: top
|
||||
vertical-align top
|
||||
display inline-block
|
||||
width: 50%
|
||||
width 50%
|
||||
|
||||
.index-menu
|
||||
width: 50%
|
||||
text-align: right
|
||||
vertical-align: top
|
||||
width 50%
|
||||
text-align right
|
||||
vertical-align top
|
||||
display inline-block
|
||||
margin 24px 0 24px 0
|
||||
right 10px
|
||||
color $white
|
||||
|
||||
a
|
||||
text-decoration-color: $highlight
|
||||
text-decoration-color $highlight
|
||||
|
||||
a.post-link
|
||||
font-size 1.5em
|
||||
font-weight 300
|
||||
display inline-block
|
||||
border-radius 3px
|
||||
vertical-align top
|
||||
text-decoration: none
|
||||
text-decoration none
|
||||
position relative
|
||||
|
||||
label
|
||||
font-size: .7em
|
||||
font-weight: 700
|
||||
font-size 0.7em
|
||||
font-weight 700
|
||||
color $primary - 60%
|
||||
padding 5px
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
width: 60%
|
||||
vertical-align top
|
||||
display inline-block
|
||||
width 60%
|
||||
|
||||
span
|
||||
float: right
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
font-family: "Apercu-mono"
|
||||
font-size: .5em
|
||||
padding: 7px
|
||||
float right
|
||||
vertical-align top
|
||||
display inline-block
|
||||
font-family 'Apercu-mono'
|
||||
font-size 0.5em
|
||||
padding 7px
|
||||
color $primary - 60%
|
||||
|
||||
div
|
||||
width 100%
|
||||
background: $white;
|
||||
position: absolute
|
||||
bottom: 0
|
||||
border-radius: 0 0 3px 3px
|
||||
background $white
|
||||
position absolute
|
||||
bottom 0
|
||||
border-radius 0 0 3px 3px
|
||||
|
||||
a:nth-child(3)
|
||||
width 100%
|
||||
|
|
@ -144,4 +151,45 @@
|
|||
a:nth-child(7)
|
||||
width 49%
|
||||
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
|
||||
|
|
|
|||
|
|
@ -41,23 +41,21 @@ svg.icons
|
|||
section
|
||||
header
|
||||
width 100%
|
||||
height 100px
|
||||
margin 0
|
||||
padding 0
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#header-wrapper
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 50px auto
|
||||
#wrapper
|
||||
padding 0.75rem
|
||||
|
||||
#header-one, #header-two
|
||||
z-index 10
|
||||
position relative
|
||||
#left, #right
|
||||
width 50%
|
||||
display inline-block
|
||||
vertical-align top
|
||||
|
||||
#the-logo
|
||||
width 40px
|
||||
|
||||
#header-two
|
||||
#right
|
||||
text-align right
|
||||
color $white
|
||||
|
||||
|
|
@ -105,82 +103,21 @@ svg.icons
|
|||
-- Responsive
|
||||
-------------------------------
|
||||
* */
|
||||
@media only screen and (max-width: 640px)
|
||||
@media only screen and (max-width: 800px)
|
||||
.main-container
|
||||
.content
|
||||
#the-intro
|
||||
font-size 31px
|
||||
line-height 35px
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left, #right
|
||||
display inline-block
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
.main-container
|
||||
.content
|
||||
#the-intro
|
||||
font-size 25px
|
||||
line-height 33px
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left
|
||||
width 30%
|
||||
|
||||
#index-display
|
||||
span, a
|
||||
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
|
||||
#right
|
||||
width 70%
|
||||
|
|
|
|||
Loading…
Reference in a new issue