kristofersxyz/static/css/layout.css
2022-08-06 15:23:04 +03:00

163 lines
1.6 KiB
CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
html,
body {
font-family: 'Roboto', sans-serif;
background: #f2f2f2;
}
main {
min-height: 100%;
}
/* HEADER */
header ul {
list-style-type: none;
overflow: hidden;
background-color: #333333;
position: sticky;
position: -webkit-sticky;
top: 0;
text-align: center;
z-index: 100;
font-weight: bold;
width: 100%;
}
.material-icons {
position: relative;
top: 4px;
font-size: 25px;
}
li {
font-size: 18px;
float: left;
display: inline-block;
width: 20%;
}
li a {
display: inline-block;
color: #cccccc;
padding: 14px 16px;
text-decoration: none;
transition: transform 0.7s ease;
}
li a:hover {
text-decoration: none;
color: #fff;
transform: scale(1.05);
}
/* FOOTER */
.page-container {
position: relative;
min-height: 100vh;
}
.content-wrap {
padding-bottom: 2.5rem;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
background-color: #333333;
color: #666666;
flex-wrap: wrap;
display: flex;
justify-content: space-around;
padding: 8px 0;
}