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 {
|
||||
border-radius: 20%;
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,20 +35,50 @@ h1 {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.mind-post_header {
|
||||
margin-top: 50px;
|
||||
.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;
|
||||
|
||||
CURRENTLY:
|
||||
full-size.
|
||||
*/
|
||||
|
||||
margin: 0 -60px;
|
||||
padding: 0 0 20px;
|
||||
}
|
||||
|
||||
img.mind-post_feature-image {
|
||||
width: 100%;
|
||||
/*
|
||||
TODO: see .mind-post_content-header.
|
||||
|
||||
SAME-AS-CONTENT:
|
||||
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;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(20, 20, 20);
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
|
|
@ -56,10 +86,7 @@ pre {
|
|||
}
|
||||
|
||||
.mind-post_content {
|
||||
overflow: hidden; /* to hide, eg. overflowing code */
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
overflow: hidden; /* to hide, eg., overflowing code */
|
||||
padding: 0 60px;
|
||||
text-align: justify;
|
||||
background-color: rgb(40, 40, 40);
|
||||
|
|
@ -68,6 +95,7 @@ pre {
|
|||
z-index: 2;
|
||||
font-size: 19px;
|
||||
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 {
|
||||
|
|
@ -75,22 +103,21 @@ pre {
|
|||
}
|
||||
|
||||
.mind-post_content blockquote {
|
||||
border-left: 4px solid paleturquoise;
|
||||
border-radius: 6px;
|
||||
|
||||
color: rgb(180, 180, 180);
|
||||
font-style: italic;
|
||||
margin-left: 0;
|
||||
padding-left: 40px;
|
||||
border-left: 2px solid paleturquoise;
|
||||
background-color: rgb(30, 30, 30);
|
||||
|
||||
margin: 20px 0;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
.mind-post_content li {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.mind-post_content a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mind-post_content a {
|
||||
/*.mind-post_content a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +140,7 @@ pre {
|
|||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}*/
|
||||
|
||||
.mind-post_sidebar {
|
||||
padding: 0 20px;
|
||||
|
|
@ -138,7 +165,12 @@ pre {
|
|||
background-color: rgb(40, 40, 40);
|
||||
border-radius: 5px;
|
||||
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 {
|
||||
|
|
@ -161,11 +193,6 @@ pre {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.post-card-sidebar_main:hover {
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
}
|
||||
|
||||
.post-card-sidebar_meta {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -21,28 +21,25 @@ a {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
color: rgb(230, 230, 230);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 38px 0 0;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -254,69 +251,170 @@ nav.mind-site-footer_nav {
|
|||
}
|
||||
|
||||
/* Begin Ghost mandatory CSS */
|
||||
.kg-width-wide {
|
||||
|
||||
}
|
||||
/* Begin images
|
||||
|
||||
.kg-width-full {
|
||||
[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)
|
||||
|
||||
.kg-gallery-container {
|
||||
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 {
|
||||
margin: 0 -60px;
|
||||
}
|
||||
|
||||
.kg-width-full img {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.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-gallery-image {
|
||||
.kg-bookmark-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-container {
|
||||
display: flex;
|
||||
min-height: 148px;
|
||||
border: 1px solid rgb(80, 80, 80);
|
||||
border-radius: 5px;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.kg-gallery-row {
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 20px 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.kg-bookmark-card {
|
||||
.kg-bookmark-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.kg-bookmark-container {
|
||||
.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-content {
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-metadata {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-top: auto;
|
||||
|
||||
.kg-bookmark-title {
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 10px;
|
||||
|
||||
.kg-bookmark-description {
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-author {
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-publisher {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
||||
.kg-bookmark-icon {
|
||||
}
|
||||
|
||||
}
|
||||
.kg-bookmark-thumbnail {
|
||||
font-size: 0;
|
||||
max-height: 100%;
|
||||
min-width: 33%;
|
||||
}
|
||||
|
||||
.kg-bookmark-author {
|
||||
.kg-bookmark-thumbnail img {
|
||||
border-radius: 0 5px 5px 0;
|
||||
object-fit: cover;
|
||||
height: 157px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
/* End Bookmarks */
|
||||
|
||||
.kg-bookmark-publisher {
|
||||
/* Begin Gallery */
|
||||
.kg-gallery-container {
|
||||
margin: 0 -40px;
|
||||
}
|
||||
|
||||
}
|
||||
.kg-gallery-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail {
|
||||
.kg-gallery-image {
|
||||
margin: 10px 10px;
|
||||
}
|
||||
.kg-gallery-image img {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.kg-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
/* End Gallery */
|
||||
/* End Ghost mandatory CSS */
|
||||
|
||||
/* Generic class to make things unselectable */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
// JavaScript Document
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if($(this).scrollTop() > $(window).height()*0.3){
|
||||
if($(this).scrollTop() >
|
||||
//$(window).height()*0.3){
|
||||
100) {
|
||||
$(".arrow-down").css({"opacity" : "0"});
|
||||
} else {
|
||||
$(".arrow-down").css({"opacity" : "0.4"});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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',
|
||||
components: ['embed'], // optional param; which components to load. default to ["embed"]
|
||||
// to load all components define components as ['embed', 'last-comments', 'counter']
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
<nav id="navbar" class="navbar unselectable">
|
||||
<a href="/">
|
||||
<img src="{{@site.icon}}" />
|
||||
<img src="{{img_url @site.icon size="xxs"}}" />
|
||||
</a>
|
||||
{{navigation}}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
{{#foreach posts}}
|
||||
<article class="{{post_class}}">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</section>
|
||||
<footer class="post-card_footer">
|
||||
{{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>
|
||||
</a>
|
||||
</article>
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "mindtheme",
|
||||
"description": "Mind Overflow's official website style",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.4",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
|
@ -13,8 +13,17 @@
|
|||
"config": {
|
||||
"posts_per_page": 10,
|
||||
"image_sizes": {
|
||||
"xxs": {
|
||||
"width": 64
|
||||
},
|
||||
"xs": {
|
||||
"width": 100
|
||||
},
|
||||
"s": {
|
||||
"width": 300
|
||||
},
|
||||
"m": {
|
||||
"width": 600
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue