design/assets/css/top-nav.css

151 lines
2.5 KiB
CSS
Raw Normal View History

@charset "UTF-8";
@import url("../fonts/spacemono.css");
@import url("../fonts/firasans-regular.css");
body, html {
margin: 0;
padding: 0;
}
* {
scrollbar-width: thin;
}
*, ::before, ::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html, body {
2021-10-23 21:22:39 +00:00
background-color: white;
font-family: "Space Mono", Monaco, monospace !important;
}
p {
2021-10-23 21:22:39 +00:00
font-family: "Fira Sans", sans-serif;
}
2021-10-23 21:22:39 +00:00
nav {
background: white;
background: rgba(255, 255, 255, .8);
z-index: 10;
/*padding: 1rem 2rem;*/
position: fixed;
width: 100%;
/*position: -webkit-sticky;
position: sticky;
top: 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
2021-10-23 21:22:39 +00:00
nav a {
display: block;
padding: 1rem 2rem;
line-height: 1;
font-weight: bold;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav h1 {
margin: 0;
}
nav .home {
font-weight: normal;
font-size: 2rem;
}
2021-10-23 21:22:39 +00:00
nav .nav-left, nav .nav-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
nav .nav-left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
nav .nav-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
nav ul {
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
2021-10-17 23:12:49 +00:00
}
2021-10-23 21:22:39 +00:00
header {
height: 100vh;
width: 100%;
background-image: url("../images/ronce/illustration-ronce-v3_2400x1531px.png");
2021-10-23 21:22:39 +00:00
/* Create the parallax scrolling effect */
/*background-attachment: fixed;*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 5rem;
padding: 0;
}
2021-10-23 21:22:39 +00:00
header > p {
width: 40%;
position: relative;
left: 55%;
bottom: -75%;
text-align: right;
}
header > p, nav a {
color: white;
/* color | offset-x | offset-y | blur-radius */
text-shadow: black 0px 0px 4px;
margin: 0;
2021-10-17 23:12:49 +00:00
}
footer {
2021-10-23 21:22:39 +00:00
border-top: black solid 2px;
margin-top: 3rem;
padding-top: 2rem;
}