fixing css, redoing build
Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>issue/index
parent
c185778570
commit
09cebfe9aa
|
@ -4,8 +4,9 @@
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="header-l">
|
<div class="header-l">
|
||||||
<a href="/" class="header-image">
|
<a href="/">
|
||||||
<img src="/logo.svg" alt="HullCSS">
|
<img src="/logo.svg" alt="HullCSS" class="header-image-1">
|
||||||
|
<img src="/favicon.svg" alt="HullCSS" class="header-image-2">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-r">
|
<div class="header-r">
|
||||||
|
|
|
@ -24,6 +24,8 @@ header {
|
||||||
|
|
||||||
// set height
|
// set height
|
||||||
height: 75px;
|
height: 75px;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
|
||||||
// set colors
|
// set colors
|
||||||
@apply bg-mono_4;
|
@apply bg-mono_4;
|
||||||
|
@ -32,14 +34,39 @@ header {
|
||||||
.header-l {
|
.header-l {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.header-image {
|
.header-image-1 {
|
||||||
img {
|
display: block;
|
||||||
height: 90%;
|
}
|
||||||
width: 90%;
|
|
||||||
}
|
.header-image-2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if screen is less than 800px, hide image 1 and show image 2
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.header-image-1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-image-2 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 90%;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// if screen is less than 600px hide header-l
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.header-l {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.header-r {
|
.header-r {
|
||||||
// flex links in col
|
// flex links in col
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -68,6 +95,21 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if screen is less than 600px, center header-r and max width
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.header-r {
|
||||||
|
justify-content: center;
|
||||||
|
width: 100vw;
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: large;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
Loading…
Reference in New Issue