pedf
/
spin
Archived
1
0
Fork 0
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

276 lines
4.8 KiB
CSS

:root {
--width: 1200px;
--color-blue: #324c9c;
--color-red: #ff4e6c;
}
3 years ago
@font-face {
font-family: montserrat;
src: url(fnt/montserrat-light.ttf) format("truetype");
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
a {
color: inherit;
font-weight: bold;
text-decoration: none;
}
a:hover { text-decoration: underline }
.wrap {
max-width: var(--width);
margin: 0 auto;
}
body {
margin: 0;
line-height: 1.5;
background-color: #edfbff;
color: var(--color-blue);
3 years ago
font-family: montserrat, sans;
}
header, main { min-height: 100vh }
header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1em;
font-size: 1.5em;
}
header p {
max-width: var(--width);
text-align: justify;
}
header .arrow {
height: 2em;
margin-top: 3em;
transition: transform .2s ease-out;
}
header .arrow:hover { transform: scale(1.3) }
main section {
margin-bottom: 10em;
padding: 1em;
}
main .phases, main .quotations {
3 years ago
display: flex;
flex-direction: column;
}
main .phases .wrap>div {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
grid-row-gap: 2em;
}
main .phases figure {
margin: 0;
transition: all .1s linear;
}
main .phases figure:hover {
background-color: var(--color-blue);
color: #fff;
}
main .phases figure:last-child { margin-bottom: 0 }
main .phases figure>h3 {
margin: 0;
padding: 1em;
font-size: 1em;
}
main .phases figure img {
width: 100%;
}
3 years ago
main .quotations figure blockquote {
font-style: italic;
margin-top: -5em; /* Fix overflowing space above quotation marks */
}
main .quotations figure blockquote:before {
content: "\201E";
display: block;
margin-bottom: -0.1em;
font-size: 8em;
}
main .quotations figure figcaption {
max-width: 80%;
margin-left: auto;
text-align: right;
}
main .team {
background-color: var(--color-blue);
padding: 4em 1em;
}
main .team h2 {
color: #fff;
margin: 0 0 2em;
}
main .team .list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2em;
grid-row-gap: 1em;
}
main .team figure {
background-color: #fff;
padding: 1em;
margin: 0;
transition: all .1s linear;
}
main .team figure:hover {
background-color: var(--color-red);
color: #fff;
}
main .team figure, main .team figure * { cursor: pointer }
main .team figure img { width: 100% }
main .team figure label {
display: block;
margin-top: 1rem;
font-weight: bold;
}
main .team .modal .content {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 2em;
}
main .articles .list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2em;
grid-row-gap: 2em;
margin-top: 4em;
}
main .articles .list article a {
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
main .articles .list article:hover h3 { text-decoration: underline }
footer {
margin: 15em auto;
padding: 1em;
}
footer .wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
grid-row-gap: 4em;
justify-items: center;
}
footer img {
height: 5em;
transition: transform .2s ease-out;
}
footer a.nadacecs { grid-column: 1 / -1 }
footer img:hover { transform: scale(1.1) }
.modal {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.5);
transition: opacity .2s ease-out;
opacity: 0;
}
.modal .content {
max-width: var(--width);
padding: 3em;
background-color: #fff;
color: var(--color-blue);
transform: translate(0, -2em);
transition: transform .2s ease-out;
}
.modal.visible {
visibility: visible;
opacity: 1;
}
.modal.visible .content {
transform: translate(0);
}
.fancyheader .wrap {
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 3em;
}
.fancyheader .wrap>h2,
.fancyheader .wrap>div {
margin: 0;
padding-top: 2rem;
border-top: 3px solid var(--color-blue);
}
.fancyheader .wrap>div { border-color: #d6e2ff }
@media only screen and (max-width: 1000px) {
header { font-size: 1em }
header .arrow { height: 3em }
main section { margin-bottom: 5em }
main .quotations figure,
main .quotations figure blockquote {
margin-left: 0;
margin-right: 0;
}
main .quotations figure { padding: 1em }
main .quotations figure figcaption {
max-width: 100%;
text-align: left;
}
main .team .list {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
footer { margin: 5em auto }
.modal .content {
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
transform: translate(0);
}
.fancyheader .wrap>div { border-top: 0 }
main .articles .list,
main .team .modal .content,
footer .wrap,
.fancyheader .wrap {
grid-template-columns: 1fr;
}
main .phases .wrap>div {
grid-template-columns: repeat(2, 1fr);
}
main .phases figure h3 {
padding: .5em;
font-size: .9em;
}
}