webionite.com/index.css

312 lines
4.1 KiB
CSS

* {
box-sizing: border-box;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
color: #FFF;
}
.top-body {
display: flex;
}
.left-pane {
width: 60%;
background-color: #121212;
}
.right-pane {
position: fixed;
right: 0;
width: 40%;
background-image: url("images/abstract_squares.jpg");
background-size: cover;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.right-pane p {
margin-top: 32em;
font-size: 0.8em;
}
.right-pane p a, .right-pane p a:visited {
color: #FFF;
text-decoration: none;
}
.right-pane p a:hover {
text-decoration: underline;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10em;
}
.title-image {
width: 400px;
}
h1, h2 {
font-family: Comfortaa;
font-weight: 300;
font-size: 4em;
text-align: center;
}
#home p {
text-align: justify;
}
.icons {
padding: 1em;
display: flex;
}
a.icon {
margin: 0.1em;
background-color: #325090;
color: #FFF;
border-radius: 50%;
font-size: 2em;
width: 1.6em;
height: 1.6em;
line-height: 1.6em;
text-align: center;
vertical-align: center;
}
a.icon:hover {
color: #325090;
background-color: #FFF;
}
.large {
display: flex;
width: 100%;
justify-content: space-evenly;
}
.large > .icon {
font-size: 2em;
width: 2.8em;
height: 2.8em;
line-height: 2.8em;
}
.selectors {
position: fixed;
right: 0;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.selector {
background-color: #325090;
color: #FFF;
border-radius: 10% 0 0 10%;
border-style: solid;
border-right-style: none;
border-color: #325090;
box-shadow: 2px 2px 2px rgba(50, 80, 144, 0.5);
width: 15em;
margin-right: -12em;
text-align: left;
padding: 0;
transition-property: all;
transition-duration: 0.2s;
margin-top: 1em;
}
.selector i {
margin-left: 1em;
height: 4em;
line-height: 4em;
font-size: 1.5em;
}
.selector span {
display: none;
font-size: 1.5em;
height: 4em;
line-height: 4em;
}
.selector:hover span {
display: inline-block;
}
.selector:hover {
width: 15em;
padding: 0 1em;
text-align: center;
padding: 0;
border-radius: 10% 0 0 10%;
transition-property: all;
transition-duration: 0.2s;
margin-right: 0;
color: #325090;
background-color: #FFF;
}
.selector:hover i {
display: none;
}
.full-width {
width: 100%;
padding: 2em;
}
.projects {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
}
.project {
background-color: #e4324c;
width: 31%;
padding: 1em;
box-sizing: border-box;
margin: 1%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1em;
}
.project .spacer {
flex-grow: 1;
}
h3 {
text-align: center;
font-family: Comfortaa;
font-weight: 700;
}
.project .link {
text-align: center;
width: 100%;
}
.project a, .project a:visited {
color: #FFF;
text-decoration: none;
}
.project a:hover {
text-decoration: underline;
}
.image-about {
width: 300px;
border-radius: 50%;
}
#contact h3 {
font-size: 3em;
}
@media (max-width: 1300px) and (min-width: 600px) {
.project {
width: 46%;
}
}
@media (max-width: 600px) {
.project {
width: 98%;
max-width: 400px;
}
.projects {
justify-content: center;
}
.large > .icon {
font-size: 1.8em;
width: 2em;
height: 2em;
line-height: 2em;
}
}
@media (max-width: 1100px) and (min-width: 900px) {
.right-pane {
width: 30%;
}
.left-pane {
width: 70%;
}
.page {
padding: 5em;
}
.full-width {
padding: 2em;
}
}
@media (max-width: 900px) {
.right-pane {
position: fixed;
bottom: 0;
width: 100vw;
height: 3em;
background-color: #325090;
background-image: none;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
}
.right-pane p {
margin: 0 1em;
}
.title-image {
width: 200px;
}
.page {
padding: 2em;
}
a.icon, .hamburger label {
font-size: 2em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
.left-pane {
width: 100vw;
}
.selectors {
display: none;
}
.image-about {
width: 200px;
}
}