style updates to static site

This commit is contained in:
bsod 2020-10-10 01:15:09 +02:00
parent b3ac8cffca
commit 43197a2ffe
2 changed files with 44 additions and 9 deletions

View file

@ -152,6 +152,7 @@ p:last-of-type {
font-weight: 300; font-weight: 300;
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
margin: 10px;
} }
.title-cta { .title-cta {
@ -206,12 +207,14 @@ p:last-of-type {
.button-accent { .button-accent {
color: #ffffff; color: #ffffff;
border-color: #ffffff; border-color: #ffffff;
cursor:pointer cursor:pointer;
background: rgba(0,0,0,0.4);
box-shadow: 0px 0px 15px 5px #fff;
} }
.button-accent:hover, .button-accent:hover,
.button-accent:focus { .button-accent:focus {
background: #ffffff; background: #fff;
color: #232323; color: #232323;
} }
@ -258,9 +261,37 @@ p:last-of-type {
} }
/* header /* header
=================== */ =================== */
@media only screen and (min-width: 1000px) {
header {
z-index: 1;
position: absolute;
top: 0px;
width: 100%;
}
}
@media only screen and (max-width: 500px) {
.nav li {
margin-left: 2px !important;
margin-right: 2px !important;
width: 20vw;
}
}
@media only screen and (min-width: 501px) and (max-width: 999px) {
.nav li {
margin-left: 2px !important;
margin-right: 2px !important;
width: 100px;
}
}
@media only screen and (min-width: 1000px) {
.nav li {
width: 100px;
}
}
header { header {
margin: 1rem 0; background: rgba(0,0,0,0.4);
margin: 0px;
} }
.nav ul { .nav ul {
@ -272,21 +303,24 @@ header {
.nav li { .nav li {
display: inline-block; display: inline-block;
margin: 1em; margin: 1em;
text-align: center;
} }
.nav a { .nav a {
font-weight: 900; font-weight: 900;
text-decoration: none; text-decoration: none;
padding: 0.5em; /*! padding: 0.5em; */
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.8rem; font-size: 10pt;
/*! font-weight: bold; */
} }
.nav a:hover, .nav a:hover {
.nav a:focus {
color: #ddd; color: #ddd;
font-size: 11pt;
/*! font-weight: bold; */
} }
.logo { .logo {
@ -301,6 +335,7 @@ header {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
padding: 10em 0; padding: 10em 0;
top: 0px;
color: #fff; color: #fff;
} }

View file

@ -25,7 +25,7 @@
<section class="home-hero parallax--bg"> <section class="home-hero parallax--bg">
<div class="container"> <div class="container">
<h1 class="title parallax--box"><span><img src="img/title.png" alt="title"></span> <h1 class="title parallax--box"><span><img src="img/title.png" alt="bricabracomania metalworks"></span>
</h1> </h1>
<a href="/projects" class="button button-accent">See Our Work</a> <a href="/projects" class="button button-accent">See Our Work</a>
</div> </div>