mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
Nav, hero and buttons design update (#932)
This commit is contained in:
Emi
GitHub
@@ -6,18 +6,20 @@
|
||||
<img class="nav-logo" src="/assets/logo.svg" width="136" height="48" alt="Godot Engine">
|
||||
<img class="nav-logo dark-logo" src="/assets/logo_dark.svg" width="136" height="48" alt="Godot Engine">
|
||||
</a>
|
||||
<label for="nav_toggle_cb" id="nav_toggle_btn">
|
||||
<img src="/assets/icons/hamburger.svg" width="24" height="24" alt="Main menu">
|
||||
</label>
|
||||
<div class="mobile-links">
|
||||
<span class="fund mobile"><a href="https://fund.godotengine.org">❤︎ Donate</a></span>
|
||||
<label for="nav_toggle_cb" id="nav_toggle_btn">
|
||||
<img src="/assets/icons/hamburger.svg" width="24" height="24" alt="Main menu">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav id="nav">
|
||||
<ul class="left">
|
||||
<li><a href="/features/">Features</a></li>
|
||||
<li class="only-on-mobile"><a href="/showcase/">Showcase</a></li>
|
||||
<li><a href="/showcase/">Showcase</a></li>
|
||||
<li><a href="/blog/">Blog</a></li>
|
||||
<li><a href="/community/">Community</a></li>
|
||||
<li><a href="/contact/">About</a></li>
|
||||
<li><a href="https://godotengine.org/asset-library/asset">Assets</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -25,10 +27,7 @@
|
||||
<li><a href="/download/windows/" class="set-os-download-url">Download</a></li>
|
||||
<li><a href="https://docs.godotengine.org">Docs</a></li>
|
||||
<li><a href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html">Contribute</a></li>
|
||||
{% comment %}
|
||||
We add the control character at the end to force the heart to render as text and not as an emoji.
|
||||
{% endcomment %}
|
||||
<li class="fund"><a href="https://fund.godotengine.org">❤︎ Donate</a></li>
|
||||
<li class="fund desktop"><a href="https://fund.godotengine.org">❤︎ Donate</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -48,9 +48,10 @@
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
.card-download-sublinks .card-download-donate {
|
||||
color: var(--fund-color-faint);
|
||||
color: var(--fund-color);
|
||||
text-decoration-color: var(--fund-color);
|
||||
font-weight: 600;
|
||||
text-decoration-color: var(--fund-color-faint);
|
||||
text-shadow: 0 0 2px #000; /* Adding more contrast */
|
||||
}
|
||||
|
||||
.card-download-details {
|
||||
|
||||
@@ -37,9 +37,7 @@
|
||||
|
||||
--big-button-color: #478cbf;
|
||||
|
||||
--fund-color: #ef6767;
|
||||
--fund-color-hl: #e53e3e;
|
||||
--fund-color-faint: #ff9d9d;
|
||||
--fund-color: #F35774;
|
||||
|
||||
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
@@ -80,6 +78,9 @@
|
||||
|
||||
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--header-font-family: "Montserrat", sans-serif;
|
||||
|
||||
// Buttons
|
||||
--button-border-radius: 12px;
|
||||
}
|
||||
|
||||
.nav-logo.dark-logo {
|
||||
@@ -121,9 +122,7 @@
|
||||
|
||||
--big-button-color: #478cbf;
|
||||
|
||||
--fund-color: #ef6767;
|
||||
--fund-color-hl: #e53e3e;
|
||||
--fund-color-faint: #ef6767;
|
||||
--fund-color: #F35774;
|
||||
|
||||
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
||||
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
@@ -434,27 +433,49 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: var(--base-shadow);
|
||||
|
||||
.container {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.fund {
|
||||
margin-right: 0px;
|
||||
&.desktop {
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.mobile {
|
||||
top: -2px;
|
||||
position: relative;
|
||||
@media (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--fund-color);
|
||||
color: white;
|
||||
background-color: var(--fund-color) !important; // avoid hover overwrite
|
||||
border-radius: var(--button-border-radius);
|
||||
box-shadow: inset 0 0 0 2px var(--fund-color);
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
#logo-link {
|
||||
/* Make the logo's clickable area as tall as for other navigation links. */
|
||||
padding: 0.2rem 0.5rem;
|
||||
padding-top: 6px;
|
||||
margin-left: -9px;
|
||||
padding-right: 15px;
|
||||
margin-right: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
header > div.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header .container {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.only-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
margin-right: 36px;
|
||||
/* Make the logo's clickable area as tall as for other navigation links. */
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
#nav_head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -469,6 +490,12 @@ header .container {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-links {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 49px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -480,7 +507,7 @@ nav {
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-weight: 400;
|
||||
color: var(--navbar-link-color);
|
||||
/* Make links easier to click. */
|
||||
padding: 1.3175rem 1rem;
|
||||
@@ -491,16 +518,6 @@ nav a:hover,
|
||||
background-color: hsla(0, 0%, 50%, 0.1);
|
||||
}
|
||||
|
||||
nav li.fund > a {
|
||||
color: var(--fund-color);
|
||||
}
|
||||
nav li.fund > a:hover {
|
||||
color: var(--fund-color-hl);
|
||||
}
|
||||
nav li.fund.active > a {
|
||||
color: var(--fund-color-hl);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -725,6 +742,8 @@ p.small {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: var(--button-border-radius);
|
||||
transition: box-shadow 0.1s ease-in-out;
|
||||
}
|
||||
.btn:hover {
|
||||
box-shadow: var(--more-shadow);
|
||||
@@ -754,6 +773,7 @@ p.small {
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
border-radius: var(--button-border-radius);
|
||||
}
|
||||
.btn.btn-download > .download-title {
|
||||
color: var(--dark-color);
|
||||
@@ -767,6 +787,10 @@ p.small {
|
||||
display: inline-block;
|
||||
padding: 16px 16px 16px 16px;
|
||||
min-width: 48px;
|
||||
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
|
||||
// Cover the white border radius from the button below
|
||||
position: relative;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.date-big {
|
||||
@@ -912,32 +936,33 @@ pre > code {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
min-width: 65%;
|
||||
}
|
||||
.search-bar input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 2;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
border-right: 1px solid var(--transparent-cover);
|
||||
background-color: var(--card-footer-color);
|
||||
color: var(--base-color-text);
|
||||
}
|
||||
.search-bar input::placeholder {
|
||||
color: var(--placeholder-text-color);
|
||||
}
|
||||
.search-bar .search-bar-btn {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
width: 3rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: var(--pagination-active-color);
|
||||
color: var(--primary-color-text-title);
|
||||
}
|
||||
.search-bar .search-bar-btn img {
|
||||
margin: 8px;
|
||||
filter: invert(100%);
|
||||
input {
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 2;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
border-right: 1px solid var(--transparent-cover);
|
||||
background-color: var(--card-footer-color);
|
||||
color: var(--base-color-text);
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--placeholder-text-color);
|
||||
}
|
||||
.search-bar-btn {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
width: 3rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: var(--pagination-active-color);
|
||||
color: var(--primary-color-text-title);
|
||||
border-radius: 0;
|
||||
img {
|
||||
margin: 8px;
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
@@ -964,10 +989,6 @@ pre > code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.only-on-mobile {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
article .content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -158,11 +158,12 @@ $donate-robot-size: 500px;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
transition: font-size 0.2s ease-in-out;
|
||||
transform:
|
||||
translateY(-3px);
|
||||
}
|
||||
@@ -267,6 +268,7 @@ $donate-robot-size: 500px;
|
||||
color: var(--dark-color);
|
||||
padding: 12px 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
/* Overwriting nav style */
|
||||
header {
|
||||
box-shadow: none;
|
||||
margin-bottom: -70px;
|
||||
background-color: rgb(134 144 154 / 15%);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
input#nav_toggle_cb:checked~header {
|
||||
background-color: var(--navbar-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
nav#nav a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav#nav .fund a {
|
||||
color: var(--fund-color);
|
||||
background-color: var(--base-color);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-logo.dark-logo {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#nav_toggle_btn {
|
||||
filter: invert(100%) saturate(0%) brightness(120%);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
nav#nav .fund a {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (prefers-color-scheme: light) {
|
||||
nav#nav a {
|
||||
color: var(--navbar-link-color);
|
||||
}
|
||||
|
||||
input#nav_toggle_cb:checked~header #nav_head #nav_toggle_btn {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
input#nav_toggle_cb:checked~header #nav_head .nav-logo {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input#nav_toggle_cb:checked~header #nav_head .nav-logo.dark-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
nav#nav .fund {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
nav#nav .fund a {
|
||||
color: var(--fund-color);
|
||||
background-color: var(--base-color);
|
||||
border-radius: 9px;
|
||||
box-shadow: inset 0 0 0 2px var(--fund-color);
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
51
assets/css/transparent-nav.scss
Normal file
51
assets/css/transparent-nav.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
---
|
||||
/* Overwriting nav style */
|
||||
header {
|
||||
box-shadow: none;
|
||||
margin-bottom: -70px;
|
||||
background-color: rgba(134, 144, 154, 0.15);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
input#nav_toggle_cb:checked~header {
|
||||
background-color: var(--navbar-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
nav#nav {
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: none;
|
||||
&.dark-logo {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
#nav_toggle_btn {
|
||||
filter: invert(100%) saturate(0%) brightness(120%);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (prefers-color-scheme: light) {
|
||||
nav#nav a {
|
||||
color: var(--navbar-link-color);
|
||||
}
|
||||
|
||||
input#nav_toggle_cb:checked~header #nav_head {
|
||||
#nav_toggle_btn {
|
||||
filter: none;
|
||||
}
|
||||
.nav-logo {
|
||||
display: inline;
|
||||
}
|
||||
.nav-logo.dark-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user