ctome
/
hullcss-astro
mirror of https://github.com/CrimsonTome/hullcss-astro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixing css, redoing build 

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>
issue/index
Ash Entwisle 2023-10-20 16:16:07 +00:00
parent c185778570
commit 09cebfe9aa
No known key found for this signature in database
GPG Key ID: 0E3CBB6B4BE9FE33
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Header.astro
View File

@ -4,8 +4,9 @@
<header>
<div class="header-l">
<a href="/" class="header-image">
<img src="/logo.svg" alt="HullCSS">
<a href="/">
<img src="/logo.svg" alt="HullCSS" class="header-image-1">
<img src="/favicon.svg" alt="HullCSS" class="header-image-2">
</a>
</div>
<div class="header-r">

52
src/styles.scss
View File

@ -24,6 +24,8 @@ header {
// set height
height: 75px;
padding-left: 5px;
padding-right: 5px;
// set colors
@apply bg-mono_4;
@ -32,14 +34,39 @@ header {
.header-l {
height: 100%;
.header-image {
img {
height: 90%;
width: 90%;
}
.header-image-1 {
display: block;
}
.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 {
// flex links in col
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 {