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;
display: block;
font-size: 0.9em;
margin: 10px;
}
.title-cta {
@ -206,12 +207,14 @@ p:last-of-type {
.button-accent {
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:focus {
background: #ffffff;
background: #fff;
color: #232323;
}
@ -258,9 +261,37 @@ p:last-of-type {
}
/* header
=================== */
@media only screen and (min-width: 1000px) {
header {
margin: 1rem 0;
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 {
background: rgba(0,0,0,0.4);
margin: 0px;
}
.nav ul {
@ -272,21 +303,24 @@ header {
.nav li {
display: inline-block;
margin: 1em;
text-align: center;
}
.nav a {
font-weight: 900;
text-decoration: none;
padding: 0.5em;
/*! padding: 0.5em; */
text-transform: uppercase;
color: white;
font-size: 0.8rem;
font-size: 10pt;
/*! font-weight: bold; */
}
.nav a:hover,
.nav a:focus {
.nav a:hover {
color: #ddd;
font-size: 11pt;
/*! font-weight: bold; */
}
.logo {
@ -301,6 +335,7 @@ header {
background-size: cover;
background-position: center;
padding: 10em 0;
top: 0px;
color: #fff;
}

View file

@ -25,7 +25,7 @@
<section class="home-hero parallax--bg">
<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>
<a href="/projects" class="button button-accent">See Our Work</a>
</div>