implement some image resizing (todo: implement in whole website)

fix/improve css
change arrow-fade mode
This commit is contained in:
Bea 2020-08-16 17:58:46 +02:00
parent 3b4b716667
commit 061b6dc122
9 changed files with 206 additions and 70 deletions

View File

@ -147,7 +147,7 @@ article {
}
.post-card_author-image {
border-radius: 20%;
border-radius: 100%;
margin-left: 10px;
max-width: 30px;
}

View File

@ -35,20 +35,50 @@ h1 {
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;
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;

View File

@ -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-gallery-image {
.kg-card {
padding: 20px 0 20px;
}
}
.kg-gallery-row {
}
.kg-bookmark-card {
}
.kg-bookmark-container {
}
.kg-bookmark-content {
}
.kg-bookmark-title {
}
.kg-bookmark-description {
}
.kg-bookmark-metadata {
}
.kg-bookmark-icon {
}
.kg-bookmark-author {
}
.kg-bookmark-publisher {
}
.kg-bookmark-thumbnail {
}
.kg-image {
.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-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-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-title {
font-size: 15px;
font-weight: 700;
}
.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 {
display: flex;
align-items: center;
margin-bottom: 15px;
margin-top: auto;
}
.kg-bookmark-icon {
width: 22px;
height: 22px;
margin-right: 10px;
}
.kg-bookmark-author {
}
.kg-bookmark-publisher {
font-family: 'Roboto', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
}
.kg-bookmark-thumbnail {
font-size: 0;
max-height: 100%;
min-width: 33%;
}
.kg-bookmark-thumbnail img {
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 */
/* Generic class to make things unselectable */

View File

@ -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"});

View File

@ -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']

View File

@ -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>

View File

@ -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>

View File

@ -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
}
}
}

View File

@ -13,7 +13,7 @@
</aside>
{{#post}}
<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}}"/>
</div>
{{content}}