ettore.dreucci/cocoa-eh-hugo-theme
1
0
Fork 0
mirror of https://github.com/Noettore/cocoa-eh-hugo-theme.git synced 2025-10-15 11:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Image profile class

Browse Source
This commit is contained in:
Nishanth Shanmugham
2015-10-14 16:28:31 -05:00
parent 4331c6ee6d
commit e7c05bde28
2 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
main.less
View File

@@ -11,7 +11,7 @@
@vspacing: @base-font-size*2; @vspacing: @base-font-size*2;
@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace"; @monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace";
@body-font-stack: ~"'Open Sans', 'Helvetica Neue', 'Arial', sans-serif"; @body-font-stack: ~"'Proxima Nova', 'Helvetica Neue', 'Arial', sans-serif";
@heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; @heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; @special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
@@ -549,6 +549,17 @@ img {
max-width: 100%; max-width: 100%;
} }
img.profile {
min-width:100%;
}
@media (min-width: 550px) {
img.profile {
min-width: 400px;
max-width: 400px !important;
}
}
.page-heading a { .page-heading a {
color: @black; color: @black;
} }

55
static/css/main.css
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:700); @import url(https://fonts.googleapis.com/css?family=Raleway:700);
.dark { .dark {
color: #444444 !important; color: #444 !important;
} }
.light { .light {
color: #999999 !important; color: #999 !important;
} }
.accent { .accent {
color: #0096cc !important; color: #0096cc !important;
@@ -60,8 +60,8 @@ body {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
font-weight: 400; font-weight: 400;
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Proxima Nova', 'Helvetica Neue', 'Arial', sans-serif;
color: #444444; color: #444;
line-height: 1.6; line-height: 1.6;
text-rendering: optimizeLegibility !important; text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
@@ -188,8 +188,8 @@ body {
-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: #444444; color: #444;
color: #555555; color: #555;
} }
.section.header nav { .section.header nav {
font-size: 14px; font-size: 14px;
@@ -216,7 +216,7 @@ body {
margin-right: 0; margin-right: 0;
} }
.section.header nav ul li { .section.header nav ul li {
color: #999999; color: #999;
-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);
@@ -242,7 +242,7 @@ body {
align-items: flex-start; align-items: flex-start;
} }
.section.header .name { .section.header .name {
color: #444444; color: #444;
} }
.section.header nav { .section.header nav {
font-size: 13px; font-size: 13px;
@@ -252,10 +252,10 @@ body {
text-align: left; text-align: left;
} }
.section.header nav ul li { .section.header nav ul li {
color: #999999; color: #999;
} }
.section.header nav ul li:hover { .section.header nav ul li:hover {
color: #444444; color: #444;
} }
} }
.section.icons { .section.icons {
@@ -274,7 +274,7 @@ body {
.section.icons .content a { .section.icons .content a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: #999999; color: #999;
-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);
@@ -308,10 +308,10 @@ body {
.section.icons .content a { .section.icons .content a {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
color: #999999; color: #999;
} }
.section.icons .content a:hover { .section.icons .content a:hover {
color: #444444; color: #444;
} }
.section.icons .content a .icon { .section.icons .content a .icon {
font-size: 18px; font-size: 18px;
@@ -331,7 +331,7 @@ body {
justify-content: flex-start; justify-content: flex-start;
} }
.section.main .content { .section.main .content {
color: #444444; color: #444;
font-size: 16px; font-size: 16px;
} }
.section.main .content .title-container { .section.main .content .title-container {
@@ -355,18 +355,18 @@ body {
-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: #444444; color: #444;
color: #999999; color: #999;
} }
.section.main .content .title-container .initials a { .section.main .content .title-container .initials a {
color: #999999; color: #999;
-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: #444444; color: #444;
} }
.section.main .content .page-heading { .section.main .content .page-heading {
font-size: 18px; font-size: 18px;
@@ -377,7 +377,7 @@ body {
-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: #444444; color: #444;
margin-bottom: 16px; margin-bottom: 16px;
} }
.section.main .content .front-matter .page-heading { .section.main .content .front-matter .page-heading {
@@ -385,7 +385,7 @@ body {
} }
.section.main .content .front-matter .meta { .section.main .content .front-matter .meta {
font-size: 14px; font-size: 14px;
color: #999999; color: #999;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -482,7 +482,7 @@ body {
} }
.section.main .container .content .post-item .meta { .section.main .container .content .post-item .meta {
font-size: 14px; font-size: 14px;
color: #999999; color: #999;
min-width: 100px; min-width: 100px;
text-align: right; text-align: right;
margin-right: 16px; margin-right: 16px;
@@ -536,8 +536,17 @@ a:hover {
img { img {
max-width: 100%; max-width: 100%;
} }
img.profile {
min-width: 100%;
}
@media (min-width: 550px) {
img.profile {
min-width: 400px;
max-width: 400px !important;
}
}
.page-heading a { .page-heading a {
color: #444444; color: #444;
} }
.section.main .content .markdown h1, .section.main .content .markdown h1,
.section.main .content .markdown h2, .section.main .content .markdown h2,
@@ -553,7 +562,7 @@ img {
-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: #444444; color: #444;
} }
.section.main .content .markdown h1 { .section.main .content .markdown h1 {
font-size: 1.75rem; font-size: 1.75rem;