general style update:

- update homepage style
- update navbar style
- update footer style
- update feed animation
- add website logo
This commit is contained in:
Bea 2020-08-13 19:35:53 +02:00
parent 25b37da7ce
commit 121708786d
5 changed files with 61 additions and 28 deletions

View File

@ -29,9 +29,6 @@ h1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
/* This padding is used so that the last posts' shadows doesn't overlap the footer */
padding-bottom: 50px;
}
.post-card_main {
@ -66,7 +63,7 @@ h1 {
ATM: scale up
*/
transform: scale(1.04);
transform:translate3d(0,-5px,0);
}
a.post-card_main {
@ -79,7 +76,9 @@ a.post-card_main:hover {
footer.post-card_footer {
display: flex;
align-items: center;
align-items: flex-end;
height: 100%;
margin-top: 20px;
justify-content: flex-end;
}

View File

@ -34,8 +34,7 @@ h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0;
padding: 38px 0 0;
margin: 38px 0 38px;
font-size: 60px;
}
@ -58,18 +57,19 @@ h4 {
}
.nav {
width: 100%;
padding: 0;
}
.navbar {
position: absolute;
width: 100%;
position: absolute; /* only used if JS is disabled */
top: 0;
width: 100%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
text-align: center;
text-transform: uppercase;
text-decoration: none;
@ -91,23 +91,42 @@ is applied by the script on scroll.
background: rgba(0, 0, 0, 1);
}
.navbar-colored img {
transform:translate(50px, 0);
}
.navbar-transparent {
background: rgba(0, 0, 0, 0.0);
}
.navbar li {
display: inline-block;
.navbar-transparent img {
opacity: 0;
}
.navbar a {
color: white;
.navbar img {
margin-left: -30px;
width: 30px;
height: 30px;
transition: 1s;
}
.navbar li {
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 30px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
margin: 0;
padding: 10px;
padding: 0 10px;
}
.navbar a {
color: white;
margin: 0;
padding: 0;
text-decoration: none;
display: flex;
align-items: center;
}
.navbar li.nav-services {
@ -130,20 +149,27 @@ main {
text-align: justify;
display: block;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
/* End Main Content */
/* Begin footer */
/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */
.mind-fullscreen-title, footer.mind-site-footer {
.mind-fullscreen-title, footer.mind-site-footer_main {
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
animation-direction: alternate-reverse;
color: white;
}
nav.mind-site-footer_nav {
text-align: right;
margin: 20px;
}
/* End footer */
/* Begin policy popup */

View File

@ -24,14 +24,14 @@
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
<title>{{@site.title}} - {{meta_title}}</title>
<title>{{meta_title}} {{@site.title}}</title>
{{/is}}
<!-- End Posts & Pages only code -->
<!-- Begin Index only code -->
{{#is "index"}}
<title>{{meta_title}}</title>
<title>{{@site.title}}</title>
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
{{/is}}
@ -43,9 +43,12 @@
</head>
<body class="{{body_class}}" onload="openPolicyPopup()">
<div id="navbar" class="navbar unselectable">
<nav id="navbar" class="navbar unselectable">
<a href="/">
<img src="{{@site.icon}}" />
</a>
{{navigation}}
</div>
</nav>
<div class="mind-policy-popup" id="mind-policy-popup">
<h4>This website uses cookies.</h4>
@ -60,8 +63,13 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
<footer class="mind-site-footer unselectable">
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
<footer class="mind-site-footer_main unselectable">
<div>
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
</div>
<nav class="mind-site-footer_nav">
<a href="/">Privacy Policy</a>
</nav>
</footer>
{{!-- <foot> --}}

View File

@ -7,7 +7,7 @@
<main>
<h2>Last posts</h2>
<h2>Most recent posts</h2>
<div class="mind-feed_main">
<!-- Looping through every post -->

View File

@ -1,7 +1,7 @@
{
"name": "mindtheme",
"description": "Mind Overflow's official website style",
"version": "0.0.2",
"version": "0.0.3",
"engines": {
"ghost-api": "v3"
},