portfolio/themes/warwick_portfolio/assets/css/main.css

88 lines
1.8 KiB
CSS

/* Font stuff */
@import url('https://fonts.googleapis.com/css?family=Abel:700|Abel:400');
body {
font-family: 'Abel';
font-weight: 400;
}
h1, h2, h3, h4, h5 {
font-family: 'Abel';
font-weight: 700;
}
html {font-size: 100%;} /* 16px */
h1 {font-size: 4.210rem; /* 67.36px */}
h2 {font-size: 3.158rem; /* 50.56px */}
h3 {font-size: 2.369rem; /* 37.92px */}
h4 {font-size: 1.777rem; /* 28.48px */}
h5 {font-size: 1.333rem; /* 21.28px */}
small {font-size: 0.750rem; /* 12px */}
:root {
--text: #f5f3f0;
--background: #0a0803;
--primary: #ff930f;
--secondary: #6f613d;
--accent: #ad975f;
--paper: #050606;
--text: #b4bfc0;
--background: #010202;
--primary: #e3eff2;
--secondary: #00bcd1;
--accent: #8c240d;
}
/* Custom CSS */
body {
color-scheme: dark;
background-color: var(--background);
accent-color: var(--accent);
caret-color: var(--text);
color: var(--text);
padding: 0;
margin: 0;
}
a:link, a:active{
color: var(--primary);
}
a:visited {
color: var(--accent);
}
a:hover {
color: var(--secondary);
}
.homepage-header {
background-color: var(--paper);
padding: 2rem;
}
.flex-wrap-container {
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.container {
max-width: 1000px;
min-width: 800px;
padding: 10px;
background-color: var(--paper);
margin: 10px auto;
}
.flex-wrap-container .container {
max-width: 800px;
}
div.summary__img_container {
position:relative; top:0; left:0; width:300px; height:250px;
}
img.summary__img {
position:absolute; top:0; right:0; width:300px; height:100%;
-webkit-mask-image:-webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
}