implement some image resizing (todo: implement in whole website)
fix/improve css change arrow-fade mode
This commit is contained in:
parent
3b4b716667
commit
061b6dc122
@ -147,7 +147,7 @@ article {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-card_author-image {
|
.post-card_author-image {
|
||||||
border-radius: 20%;
|
border-radius: 100%;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
max-width: 30px;
|
max-width: 30px;
|
||||||
}
|
}
|
||||||
|
@ -35,20 +35,50 @@ h1 {
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_header {
|
.mind-post_content-header {
|
||||||
|
/*
|
||||||
|
TODO: decide whether the image should be full-size (without rounded borders),
|
||||||
|
or with the same margin as the content, with rounded borders.
|
||||||
|
|
||||||
|
SAME-AS-CONTENT:
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
|
||||||
|
CURRENTLY:
|
||||||
|
full-size.
|
||||||
|
*/
|
||||||
|
|
||||||
|
margin: 0 -60px;
|
||||||
|
padding: 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.mind-post_feature-image {
|
img.mind-post_feature-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
/*
|
||||||
|
TODO: see .mind-post_content-header.
|
||||||
|
|
||||||
|
SAME-AS-CONTENT:
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
.mind-post_content code {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: rgb(20, 20, 20);
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 7px 5px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mind-post_content pre code {
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mind-post_content pre {
|
||||||
|
background-color: rgb(20, 20, 20);
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgb(20, 20, 20);
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -56,10 +86,7 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_content {
|
.mind-post_content {
|
||||||
overflow: hidden; /* to hide, eg. overflowing code */
|
overflow: hidden; /* to hide, eg., overflowing code */
|
||||||
display: flex;
|
|
||||||
max-width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
background-color: rgb(40, 40, 40);
|
background-color: rgb(40, 40, 40);
|
||||||
@ -68,6 +95,7 @@ pre {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
color: rgb(200, 200, 200);
|
color: rgb(200, 200, 200);
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
|
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
|
||||||
@ -75,22 +103,21 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_content blockquote {
|
.mind-post_content blockquote {
|
||||||
|
border-left: 4px solid paleturquoise;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
color: rgb(180, 180, 180);
|
color: rgb(180, 180, 180);
|
||||||
font-style: italic;
|
background-color: rgb(30, 30, 30);
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 40px;
|
margin: 20px 0;
|
||||||
border-left: 2px solid paleturquoise;
|
padding: 10px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_content li {
|
.mind-post_content li {
|
||||||
margin: 0 0 1em;
|
margin: 0 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-post_content a {
|
/*.mind-post_content a {
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mind-post_content a {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,7 +140,7 @@ pre {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
-webkit-transform: scaleX(1);
|
-webkit-transform: scaleX(1);
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
}
|
}*/
|
||||||
|
|
||||||
.mind-post_sidebar {
|
.mind-post_sidebar {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
@ -138,7 +165,12 @@ pre {
|
|||||||
background-color: rgb(40, 40, 40);
|
background-color: rgb(40, 40, 40);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
|
box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
|
||||||
transition: 0.5s;
|
transition: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-sidebar_main:hover {
|
||||||
|
transform:translate3d(0,-5px,0);
|
||||||
|
box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-sidebar_feature-image {
|
.post-card-sidebar_feature-image {
|
||||||
@ -161,11 +193,6 @@ pre {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-sidebar_main:hover {
|
|
||||||
transform:translate3d(0,-5px,0);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-sidebar_meta {
|
.post-card-sidebar_meta {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
@ -21,28 +21,25 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-family: 'Montserrat', sans-serif;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: rgb(230, 230, 230);
|
color: rgb(230, 230, 230);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 38px 0 0;
|
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin: 0;
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
margin: 0;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -254,51 +251,120 @@ nav.mind-site-footer_nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Begin Ghost mandatory CSS */
|
/* Begin Ghost mandatory CSS */
|
||||||
.kg-width-wide {
|
|
||||||
|
|
||||||
|
/* Begin images
|
||||||
|
|
||||||
|
[structure]
|
||||||
|
class ".kg-card" is applied to all cards!
|
||||||
|
|
||||||
|
class ".kg-image" is applied to all images.
|
||||||
|
class ".kg-image-card" is applied to all image containers (includes description)
|
||||||
|
|
||||||
|
there are 3 sizes:
|
||||||
|
- normal
|
||||||
|
- wide (class ".kg-width-wide")
|
||||||
|
- full (class ".kg-width-full")
|
||||||
|
|
||||||
|
if an image has a description, class ".kg-card-hascaption" is applied to the container.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.kg-card {
|
||||||
|
padding: 20px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-image {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-image-card img {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-image-card {
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-width-wide {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-width-full {
|
.kg-width-full {
|
||||||
|
margin: 0 -60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-gallery-container {
|
.kg-width-full img {
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
}
|
|
||||||
.kg-gallery-image {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-gallery-row {
|
.kg-card-hascaption figcaption {
|
||||||
|
padding: 0 20px 0;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1em;
|
||||||
|
color: rgb(150, 150, 150);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* End images */
|
||||||
|
|
||||||
|
/* Begin Bookmarks */
|
||||||
|
|
||||||
|
|
||||||
.kg-bookmark-card {
|
.kg-bookmark-card {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-container {
|
.kg-bookmark-container {
|
||||||
|
display: flex;
|
||||||
|
min-height: 148px;
|
||||||
|
border: 1px solid rgb(80, 80, 80);
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-bookmark-container:hover {
|
||||||
|
transform:translate3d(0,-3px,0);
|
||||||
|
box-shadow: 0 0 3px rgb(0,0,0),0 3px 10px rgb(0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-content {
|
.kg-bookmark-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px 20px 0;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-title {
|
.kg-bookmark-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-description {
|
.kg-bookmark-description {
|
||||||
|
margin-top: 12px;
|
||||||
|
max-height: 48px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-metadata {
|
.kg-bookmark-metadata {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-top: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-icon {
|
.kg-bookmark-icon {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -307,16 +373,48 @@ nav.mind-site-footer_nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-publisher {
|
.kg-bookmark-publisher {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-thumbnail {
|
.kg-bookmark-thumbnail {
|
||||||
|
font-size: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
min-width: 33%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-image {
|
.kg-bookmark-thumbnail img {
|
||||||
max-width: 100%;
|
border-radius: 0 5px 5px 0;
|
||||||
|
object-fit: cover;
|
||||||
|
height: 157px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* End Bookmarks */
|
||||||
|
|
||||||
|
/* Begin Gallery */
|
||||||
|
.kg-gallery-container {
|
||||||
|
margin: 0 -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-image {
|
||||||
|
margin: 10px 10px;
|
||||||
|
}
|
||||||
|
.kg-gallery-image img {
|
||||||
|
object-fit: cover;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End Gallery */
|
||||||
/* End Ghost mandatory CSS */
|
/* End Ghost mandatory CSS */
|
||||||
|
|
||||||
/* Generic class to make things unselectable */
|
/* Generic class to make things unselectable */
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
// JavaScript Document
|
// JavaScript Document
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$(window).scroll(function(){
|
$(window).scroll(function(){
|
||||||
if($(this).scrollTop() > $(window).height()*0.3){
|
if($(this).scrollTop() >
|
||||||
|
//$(window).height()*0.3){
|
||||||
|
100) {
|
||||||
$(".arrow-down").css({"opacity" : "0"});
|
$(".arrow-down").css({"opacity" : "0"});
|
||||||
} else {
|
} else {
|
||||||
$(".arrow-down").css({"opacity" : "0.4"});
|
$(".arrow-down").css({"opacity" : "0.4"});
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
var remark_config = {
|
var remark_config = {
|
||||||
host: "https://comments.mind-overflow.net", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
|
host: "https://comments.mind-overflow.net",
|
||||||
site_id: 'mindoverflow',
|
site_id: 'mindoverflow',
|
||||||
components: ['embed'], // optional param; which components to load. default to ["embed"]
|
components: ['embed'], // optional param; which components to load. default to ["embed"]
|
||||||
// to load all components define components as ['embed', 'last-comments', 'counter']
|
// to load all components define components as ['embed', 'last-comments', 'counter']
|
||||||
|
@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
<nav id="navbar" class="navbar unselectable">
|
<nav id="navbar" class="navbar unselectable">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="{{@site.icon}}" />
|
<img src="{{img_url @site.icon size="xxs"}}" />
|
||||||
</a>
|
</a>
|
||||||
{{navigation}}
|
{{navigation}}
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
<article class="{{post_class}}">
|
<article class="{{post_class}}">
|
||||||
<a class="post-card_main" href="{{url}}">
|
<a class="post-card_main" href="{{url}}">
|
||||||
<img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
|
<img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
|
||||||
<header class="post-card_header">
|
<header class="post-card_header">
|
||||||
<p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
<p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||||
<h3>{{title}}</h3>
|
<h3>{{title}}</h3>
|
||||||
@ -27,7 +27,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<footer class="post-card_footer">
|
<footer class="post-card_footer">
|
||||||
{{primary_author.name}}
|
{{primary_author.name}}
|
||||||
{{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
|
{{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
|
||||||
</footer>
|
</footer>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
11
package.json
11
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "mindtheme",
|
"name": "mindtheme",
|
||||||
"description": "Mind Overflow's official website style",
|
"description": "Mind Overflow's official website style",
|
||||||
"version": "0.0.3",
|
"version": "0.0.4",
|
||||||
"engines": {
|
"engines": {
|
||||||
"ghost-api": "v3"
|
"ghost-api": "v3"
|
||||||
},
|
},
|
||||||
@ -13,8 +13,17 @@
|
|||||||
"config": {
|
"config": {
|
||||||
"posts_per_page": 10,
|
"posts_per_page": 10,
|
||||||
"image_sizes": {
|
"image_sizes": {
|
||||||
|
"xxs": {
|
||||||
|
"width": 64
|
||||||
|
},
|
||||||
|
"xs": {
|
||||||
|
"width": 100
|
||||||
|
},
|
||||||
"s": {
|
"s": {
|
||||||
"width": 300
|
"width": 300
|
||||||
|
},
|
||||||
|
"m": {
|
||||||
|
"width": 600
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
2
post.hbs
2
post.hbs
@ -13,7 +13,7 @@
|
|||||||
</aside>
|
</aside>
|
||||||
{{#post}}
|
{{#post}}
|
||||||
<div class="mind-post_content">
|
<div class="mind-post_content">
|
||||||
<div class="mind-post_header">
|
<div class="mind-post_content-header">
|
||||||
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
|
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
|
||||||
</div>
|
</div>
|
||||||
{{content}}
|
{{content}}
|
||||||
|
Loading…
Reference in New Issue
Block a user