Set .container .content width to 100%

Fixes #7
This commit is contained in:
Nishanth Shanmugham
2016-09-10 11:16:48 -05:00
parent d1c7de8860
commit df002a3f46
2 changed files with 32 additions and 24 deletions

View File

@@ -143,6 +143,11 @@ section {
width: 100%; width: 100%;
} }
// Introduced for https://github.com/nishanths/cocoa-hugo-theme/issues/7.
.container .content {
width: 100%;
}
@media (min-width: @wide-1-breakpoint) { @media (min-width: @wide-1-breakpoint) {
section { section {
padding: 0 @vspacing/2; padding: 0 @vspacing/2;

View File

@@ -3,10 +3,10 @@
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:500); @import url(https://fonts.googleapis.com/css?family=Raleway:500);
.dark { .dark {
color: #333 !important; color: #333333 !important;
} }
.light { .light {
color: #666 !important; color: #666666 !important;
} }
.accent { .accent {
color: #428bca !important; color: #428bca !important;
@@ -61,7 +61,7 @@ body {
min-height: 100%; min-height: 100%;
font-weight: 400; font-weight: 400;
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
color: #111; color: #111111;
line-height: 1.6; line-height: 1.6;
text-rendering: optimizeLegibility !important; text-rendering: optimizeLegibility !important;
} }
@@ -103,6 +103,9 @@ section {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.container .content {
width: 100%;
}
@media (min-width: 600px) { @media (min-width: 600px) {
section { section {
padding: 0 16px; padding: 0 16px;
@@ -186,8 +189,8 @@ section.header .name {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #333; color: #333333;
color: #555; color: #555555;
} }
section.header nav { section.header nav {
font-size: 14px; font-size: 14px;
@@ -215,7 +218,7 @@ section.header nav ul a:last-child {
margin-right: 0; margin-right: 0;
} }
section.header nav ul li { section.header nav ul li {
color: #555; color: #555555;
font-weight: 500; font-weight: 500;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -223,7 +226,7 @@ section.header nav ul li {
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
section.header nav ul li:hover { section.header nav ul li:hover {
color: #111; color: #111111;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
section.header { section.header {
@@ -242,7 +245,7 @@ section.header nav ul li:hover {
align-items: flex-start; align-items: flex-start;
} }
section.header .name { section.header .name {
color: #333; color: #333333;
} }
section.header nav { section.header nav {
font-size: 14px; font-size: 14px;
@@ -252,10 +255,10 @@ section.header nav ul li:hover {
text-align: left; text-align: left;
} }
section.header nav ul li { section.header nav ul li {
color: #666; color: #666666;
} }
section.header nav ul li:hover { section.header nav ul li:hover {
color: #333; color: #333333;
} }
} }
section.icons { section.icons {
@@ -274,7 +277,7 @@ section.icons .container {
section.icons .content a { section.icons .content a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: #555; color: #555555;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -287,7 +290,7 @@ section.icons .content a:last-child {
margin-right: 0; margin-right: 0;
} }
section.icons .content a:hover { section.icons .content a:hover {
color: #111; color: #111111;
} }
section.icons .content a .icon { section.icons .content a .icon {
font-size: 20px; font-size: 20px;
@@ -308,10 +311,10 @@ section.icons .content a .icon.larger {
section.icons .content a { section.icons .content a {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
color: #666; color: #666666;
} }
section.icons .content a:hover { section.icons .content a:hover {
color: #333; color: #333333;
} }
section.icons .content a .icon { section.icons .content a .icon {
font-size: 18px; font-size: 18px;
@@ -331,7 +334,7 @@ section.main .container {
justify-content: flex-start; justify-content: flex-start;
} }
section.main .content { section.main .content {
color: #111; color: #111111;
font-size: 16px; font-size: 16px;
} }
section.main .content .title-container { section.main .content .title-container {
@@ -355,18 +358,18 @@ section.main .content .title-container .initials {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #333; color: #333333;
color: #666; color: #666666;
} }
section.main .content .title-container .initials a { section.main .content .title-container .initials a {
color: #666; color: #666666;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
section.main .content .title-container .initials a:hover { section.main .content .title-container .initials a:hover {
color: #333; color: #333333;
} }
section.main .content .page-heading { section.main .content .page-heading {
font-size: 18px; font-size: 18px;
@@ -377,7 +380,7 @@ section.main .content .page-heading {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #333; color: #333333;
margin-bottom: 16px; margin-bottom: 16px;
} }
section.main .content .front-matter .page-heading { section.main .content .front-matter .page-heading {
@@ -385,7 +388,7 @@ section.main .content .front-matter .page-heading {
} }
section.main .content .front-matter .meta { section.main .content .front-matter .meta {
font-size: 14px; font-size: 14px;
color: #666; color: #666666;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -483,7 +486,7 @@ section.main .container .content .post-item {
} }
section.main .container .content .post-item .meta { section.main .container .content .post-item .meta {
font-size: 14px; font-size: 14px;
color: #666; color: #666666;
display: none; display: none;
min-width: 100px; min-width: 100px;
text-align: right; text-align: right;
@@ -555,7 +558,7 @@ img.profile {
} }
} }
.page-heading a { .page-heading a {
color: #333; color: #333333;
} }
section.main .content .markdown h1, section.main .content .markdown h1,
section.main .content .markdown h2, section.main .content .markdown h2,
@@ -571,7 +574,7 @@ section.main .content .markdown h6 {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #333; color: #333333;
text-transform: none; text-transform: none;
margin-top: 1.75rem; margin-top: 1.75rem;
} }