Files
.profile/public/css/projects.css
T

154 lines
2.9 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jersey+15&family=Sixtyfour+Convergence&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jersey+15&family=Sixtyfour+Convergence&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.container {
margin-top: 2%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
transition: 0.8s;
width: 54vh;
height: auto;
margin: 30pt;
padding: 20pt;
background-color: var(--menu-text-bg);
border-radius: 24pt;
display: flex;
}
.box {
transition: 0.8s;
background-color: var(--theme);
border-radius: 12pt;
padding-top: 12pt;
padding-left: 12pt;
padding-right: 12pt;
}
.content {
transition: 0.8s;
margin-left: 18pt;
margin-right: 18pt;
align-items: stretch;
}
.content h2 {
transition: 0.8s;
font-size: 275%;
margin-top: 5pt;
font-family: "Sixtyfour Convergence", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"BLED" 0,
"SCAN" 0,
"XELA" 0,
"YELA" 0;
margin-bottom: 0pt;
text-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
min-width: 2.75cm;
}
.content h3 {
font-size: 150%;
font-family: "Jersey 15", serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
margin-top: 20pt;
margin-left: 0.75cm;
}
.content p {
transition: 0.8s;
font-size: 18px;
line-height: 1.6;
word-break: break-word;
background: var(--theme);
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen, Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
}
.content a {
background-color: var(--secondary);
padding: 8pt;
border-radius: 8pt;
position: relative;
box-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
margin-bottom: 15pt;
}
.content-head {
display: flex;
flex-direction: row;
}
.content-body {
display: flex;
flex-direction: column;
flex: 1;
}
.content-body p {
min-height: 5cm;
}
.content-body a {
margin-bottom: 15pt;
text-align: center;
max-width: 100pt;
}
.content-body #links {
display: flex;
justify-content: space-around;
}
#links a {
margin-bottom: 15pt;
text-align: center;
width: 100pt;
}
/* prevents it changing color */
.content-body a:hover {
color: var(--primary);
}
.footer {
display: flex;
justify-content: space-between;
transition: .8s;
padding: 8pt;
background-color: var(--menu-text-bg);
border-radius: 12pt;
margin-bottom: 24pt;
width: 80vw;
}
.footer p {
font-family: "Ubuntu", serif;
font-weight: 400;
font-style: normal;
margin-left: 12pt;
}
.social-icons {
margin-top: 6pt;
margin-right: 24pt;
}
.content-body a:hover {
background-color: #e4a295;
}
@media only screen and (max-width: 544pt) {
.content-head h2 {
margin-top: 24pt;
}
}