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

View File

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

View File

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

View File

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

View File

@ -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.2", "version": "0.0.3",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },