dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework layout

Browse Source
This commit is contained in:
Dan Head
2018-12-22 23:13:22 +00:00
parent 172619fdbd
commit 7769bf9f16
13 changed files with 99 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/archive.css
View File

@@ -2,7 +2,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.archive__list {
margin-bottom: var(--space-md);
}

9
css/article.css
View File

@@ -2,9 +2,14 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.article {
margin-bottom: var(--space-md);
}
}
@media (--viewport-lg) {
.article {
border-bottom: 1px solid var(--color-light-grey);
}
}
@@ -14,7 +19,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.article__date {
display: none;
}

2
css/comment.css
View File

@@ -2,7 +2,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.comment {
margin-bottom: var(--space-md);
}

2
css/comments.css
View File

@@ -15,7 +15,7 @@
margin-left: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.comments__list--sub-list {
margin-left: var(--space-md);
}

6
css/content.css
View File

@@ -28,7 +28,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.content p {
margin-bottom: var(--space-md);
}
@@ -99,7 +99,7 @@
display: none;
}
@media (--viewport-lg) {
@media (--viewport-md) {
.content .twitter-tweet,
.content .wp-caption {
margin: 0 0 var(--space-md);
@@ -124,7 +124,7 @@
width: auto !important;
}
@media (--viewport-lg) {
@media (--viewport-md) {
.content table {
max-width: 100%;
}

2
css/excerpt.css
View File

@@ -2,7 +2,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.excerpt {
margin-bottom: var(--space-md);
}

6
css/index.css
View File

@@ -32,6 +32,7 @@
--color-facebook: #3e5a98;
--color-twitter: #1da1f2;
--color-rss: #ee802f;
--space-xxs: 5px;
--space-xs: 10px;
--space-sm: 20px;
--space-md: 30px;
@@ -45,5 +46,8 @@
--link-focus: 0 3px 0 0 var(--color-light-blue);
}
@custom-media --viewport-sm (min-width: 480px);
@custom-media --viewport-md (min-width: 640px);
@custom-media --viewport-lg (min-width: 960px);
@custom-media --viewport-lg (min-width: 900px);
@custom-media --viewport-xl (min-width: 1200px);
@custom-media --viewport-wordpress-admin-bar (min-width: 783px);

26
css/menu.css
View File

@@ -4,36 +4,42 @@
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
display: block;
height: 64px;
left: 5px;
height: 48px;
left: 2px;
position: fixed;
top: 5px;
top: 2px;
transform: translateX(-100px);
transition:
filter var(--transition-md) ease-out,
opacity var(--transition-md) ease-out,
transform var(--transition-md) ease-out;
width: 64px;
width: 48px;
will-change: opacity, transition;
z-index: 5;
}
.logged-in .menu {
top: 37px;
top: 48px;
}
@media (--viewport-wordpress-admin-bar) {
.logged-in .menu {
top: 34px;
}
}
.menu__line {
background-color: #fff;
border-radius: 2px;
height: 4px;
left: 15px;
height: 2px;
left: 12px;
position: absolute;
right: 15px;
right: 12px;
transform: translateY(-50%);
}
.menu__line:nth-of-type(1) {
top: 33%;
top: 33.34%;
}
.menu__line:nth-of-type(2) {
@@ -41,7 +47,7 @@
}
.menu__line:nth-of-type(3) {
top: 66%;
top: 66.67%;
}
.menu__text {

13
css/metadata.css
View File

@@ -1,7 +1,7 @@
.metadata {
display: flex;
flex-flow: row wrap;
font-size: 14px;
font-size: 12px;
margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-light-grey);
}
@@ -13,11 +13,16 @@
color: var(--color-dark-blue);
}
@media (--viewport-md) {
.metadata {
margin-bottom: var(--space-md);
}
}
@media (--viewport-lg) {
.metadata {
flex-flow: column wrap;
border-bottom: none;
margin-bottom: var(--space-md);
}
.metadata__item {
@@ -31,7 +36,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.metadata__item--light {
display: block;
}
@@ -43,7 +48,7 @@
}
.metadata__text {
margin-left: 10px;
margin-left: var(--space-xs);
text-transform: capitalize;
transition: box-shadow var(--transition-md) ease-out;
vertical-align: middle;

8
css/nav.css
View File

@@ -34,15 +34,21 @@
padding: var(--space-sm);
position: fixed;
top: 0;
transform: translateX(-100%);
transform: translateX(-110%);
transition: transform var(--nav-transition-duration) ease-out;
z-index: 10;
overflow-y: auto;
}
.logged-in .nav__content {
top: 46px;
}
@media (--viewport-wordpress-admin-bar) {
.logged-in .nav__content {
top: 32px;
}
}
.nav__body {
flex-grow: 1;

62
css/page.css
View File

@@ -1,11 +1,10 @@
.page {
display: grid;
grid-auto-flow: dense;
grid-gap: var(--space-sm);
grid-gap: var(--space-xs);
grid-template-columns: 1fr;
max-width: 1200px;
margin: var(--space-sm) var(--space-sm) 0;
padding: 0;
margin: var(--space-xs) var(--space-xs) 0;
}
.page__logo {
@@ -24,42 +23,67 @@
justify-content: center;
}
@media (--viewport-lg) {
@media (--viewport-sm) {
.page {
grid-template-columns: 224px 1fr;
grid-template-rows: 60px 134px 1fr;
grid-template-columns: 112px 1fr;
grid-template-rows: 112px 1fr;
grid-gap: var(--space-sm);
grid-auto-rows: auto;
grid-gap: var(--space-md);
padding: 0 var(--space-md);
}
.page__logo {
grid-row: span 2;
margin: var(--space-sm) var(--space-sm) 0;
}
.page__banner {
display: block;
grid-column-start: 2;
grid-column: 2 / -1;
grid-row-start: 1;
}
.page__content,
.page__article,
.page__comments {
grid-column-start: 2;
.page__comments,
.page__metadata,
.page__pagination,
.page__footer {
grid-column: 1 / -1;
}
}
@media (--viewport-md) {
.page {
grid-gap: var(--space-md);
margin: var(--space-md) var(--space-md) 0;
}
.page__content,
.page__article.is-first {
grid-row: span 2;
}
}
@media (--viewport-lg) {
.page {
grid-template-columns: 168px 1fr;
grid-template-rows: 32px 106px 1fr;
}
.page__logo {
grid-row: span 2;
}
.page__content,
.page__article,
.page__comments {
grid-column: 2 / -1;
}
.page__metadata {
grid-column-start: 1;
grid-column: 1;
}
}
.page__pagination,
.page__footer {
grid-column: 1 / -1;
@media (--viewport-xl) {
.page {
grid-template-columns: 224px 1fr 1fr;
grid-template-rows: 32px 162px 1fr;
}
}

4
css/social.css
View File

@@ -1,7 +1,5 @@
.social {
position: absolute;
right: var(--space-sm);
top: var(--space-sm);
text-align: right;
}
.social__link {

2
css/title.css
View File

@@ -4,7 +4,7 @@
margin-bottom: var(--space-sm);
}
@media (--viewport-lg) {
@media (--viewport-md) {
.title {
margin-bottom: var(--space-md);
}