647 lines
12 KiB
CSS
647 lines
12 KiB
CSS
@import url('/fonts/franklin-gothic/franklin-gothic.css');
|
|
|
|
:root {
|
|
/* Font sizes */
|
|
--large: 5.653rem;
|
|
--normal: 1rem;
|
|
--small: 0.707rem;
|
|
|
|
/* Colors */
|
|
--fg: #000;
|
|
--bg: #ececec;
|
|
--orange: #ff4828;
|
|
--orange-bg: #e05e47;
|
|
--blue: #00afd7;
|
|
--grey: #ececec;
|
|
--border: #bdc3c7;
|
|
|
|
/* Screen sizes */
|
|
--large-screen: 1440px;
|
|
--normal-screen: 1200px;
|
|
--tablet-screen: 900px;
|
|
--phone-screen: 600px;
|
|
--small-screen: 300px;
|
|
}
|
|
|
|
|
|
/* Reset
|
|
==============================================================
|
|
*/
|
|
|
|
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, img, ins, kbd, q, s, samp,
|
|
small, strike, 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;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
|
|
|
|
/* Typography
|
|
==============================================================
|
|
*/
|
|
|
|
html {
|
|
font-size: 150%; /*24px*/
|
|
}
|
|
@media (max-width: 600px) {
|
|
html {
|
|
font-size: 112.5%;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--grey);
|
|
font-family: 'Franklin Gothic', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
color: #000000;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
margin: 1rem 0;
|
|
font-family: 'Franklin Gothic', sans-serif;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5.653rem;
|
|
letter-spacing: -0.083rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 3.998rem;
|
|
letter-spacing: -0.083rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2.827rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.999rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.414rem;
|
|
}
|
|
|
|
small {
|
|
font-size: 0.707rem;
|
|
}
|
|
|
|
mark {
|
|
background-color: unset;
|
|
color: var(--orange);
|
|
}
|
|
|
|
a {
|
|
color: var(--fg);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--blue);
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
list-style-position: inside;
|
|
list-style-type: square;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
object-fit: cover;
|
|
}
|
|
|
|
iframe {
|
|
border: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
figure {
|
|
margin: 0 0 1rem;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
figure img {
|
|
border: 0.0625rem solid var(--border);
|
|
}
|
|
|
|
figure figcaption {
|
|
font-size: var(--small);
|
|
text-transform: lowercase;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
|
|
|
|
|
|
/* Main Elements
|
|
==============================================================
|
|
*/
|
|
|
|
body > header {
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main section,
|
|
footer section,
|
|
.wrapper {
|
|
/*max-width: var(--large-screen);*/
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Site Header
|
|
==============================================================
|
|
*/
|
|
|
|
.site__header {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
margin-bottom: 3rem;
|
|
background-color: var(--orange-bg);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.site__header mark {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.site__header a {
|
|
color: var(--bg);
|
|
}
|
|
|
|
.site__header a:hover {
|
|
color: var(--fg);
|
|
}
|
|
|
|
|
|
|
|
/* Site Navigation
|
|
==============================================================
|
|
*/
|
|
|
|
.site__nav {
|
|
/*font-size: var(--small);*/
|
|
}
|
|
|
|
.site__nav ul {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 1rem;
|
|
|
|
list-style: none;
|
|
}
|
|
|
|
.footer__nav ul li:first-child {
|
|
grid-column: 6;
|
|
}
|
|
|
|
.footer__nav ul li:nth-child(2) {
|
|
grid-column: 7;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Banner
|
|
==============================================================
|
|
*/
|
|
|
|
.site__banner {
|
|
align-self: center;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.site__banner {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
direction: rtl;
|
|
}
|
|
.site__banner h1 {
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.header__preamble {
|
|
font-size: 1.5rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.header__preamble {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.header__preamble p {
|
|
grid-column: 1/7;
|
|
margin-bottom: 0;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.header__preamble p {
|
|
grid-column: 1/13;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
.header__preamble p + p {
|
|
grid-column: 8/13;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.header__preamble p + p {
|
|
grid-column: 1/13;
|
|
grid-row: 1;
|
|
}
|
|
}
|
|
|
|
.preamble__arrow {
|
|
font-size: 9rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Articles
|
|
==============================================================
|
|
*/
|
|
article section {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
article section h2 {
|
|
grid-column: span 12;
|
|
}
|
|
|
|
article section p {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.project__item {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: repeat(12, 1fr);
|
|
gap: 1rem;
|
|
margin: 4rem 0;
|
|
}
|
|
|
|
.project__description {
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
/* A */
|
|
.project__a .project__figure {
|
|
grid-column: 1/8;
|
|
grid-row: 1/13;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__a .project__figure {
|
|
grid-column: 1/10;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__a .project__figure {
|
|
grid-column: 1/13;
|
|
grid-row: 1/10;
|
|
}
|
|
}
|
|
|
|
.project__a .project__description {
|
|
grid-column: 11/13;
|
|
grid-row: 1/3;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__a .project__description {
|
|
grid-column: 10/13;
|
|
grid-row: 1/5;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__a {
|
|
grid-template-rows: repeat(3, 1fr);
|
|
}
|
|
.project__a .project__description {
|
|
grid-column: 1/13;
|
|
grid-row: 11/13;
|
|
}
|
|
}
|
|
|
|
/* B */
|
|
.project__b {
|
|
grid-template-rows: repeat(3, 1fr) auto;
|
|
}
|
|
.project__b .project__figure {
|
|
grid-column: 1/13;
|
|
grid-row: 1/4;
|
|
}
|
|
.project__b .project__description {
|
|
grid-column: 1/3;
|
|
grid-row: 4;
|
|
align-self: end;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__b .project__description {
|
|
grid-column: 1/4;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__b .project__description {
|
|
grid-column: 1/13;
|
|
grid-row: 4;
|
|
}
|
|
}
|
|
|
|
/* C */
|
|
.project__c .project__figure {
|
|
grid-column: 5/13;
|
|
grid-row: 1/13;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__c .project__figure {
|
|
grid-column: 4/13;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__c {
|
|
grid-template-rows: repeat(3, 1fr) auto;
|
|
}
|
|
.project__c .project__figure {
|
|
grid-column: 1/13;
|
|
grid-row: 1/4;
|
|
}
|
|
}
|
|
.project__c .project__description {
|
|
grid-column: 1/3;
|
|
grid-row: 11/13;
|
|
align-self: end;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__c .project__description {
|
|
grid-column: 1/4;
|
|
grid-row: 8/13;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__c .project__description {
|
|
grid-column: 1/13;
|
|
grid-row: 4;
|
|
}
|
|
}
|
|
|
|
/* D */
|
|
.project__d .project__figure_a {
|
|
grid-column: 1/5;
|
|
grid-row: 1/13;
|
|
}
|
|
.project__d .project__figure_a img {
|
|
object-position: left;
|
|
}
|
|
|
|
.project__d .project__figure_b {
|
|
grid-column: 5/9;
|
|
grid-row: 1/13;
|
|
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__d .project__figure_a {
|
|
}
|
|
.project__d .project__figure_b {
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__d {
|
|
grid-template-rows: repeat(2, 1fr) auto auto;
|
|
}
|
|
.project__d .project__figure_a {
|
|
grid-column: 1/13;
|
|
grid-row: 1;
|
|
}
|
|
.project__d .project__figure_b {
|
|
grid-column: 1/13;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
.project__d .project__description_a {
|
|
grid-column: 11/13;
|
|
grid-row: 7/10;
|
|
align-self: end;
|
|
}
|
|
|
|
.project__d .project__description_b {
|
|
grid-column: 11/13;
|
|
grid-row: 10/13;
|
|
align-self: end;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__d .project__description_a {
|
|
grid-column: 9/13;
|
|
}
|
|
.project__d .project__description_b {
|
|
grid-column: 9/13;
|
|
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__d .project__description_a {
|
|
grid-column: 1/13;
|
|
grid-row: 3;
|
|
}
|
|
.project__d .project__description_b {
|
|
grid-column: 1/13;
|
|
grid-row: 4;
|
|
}
|
|
}
|
|
|
|
/* E */
|
|
.project__e .project__figure_a {
|
|
grid-column: 1/6;
|
|
grid-row: 1/7;
|
|
|
|
}
|
|
.project__e .project__figure_b {
|
|
grid-column: 1/6;
|
|
grid-row: 7/13;
|
|
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__e .project__figure_a {
|
|
grid-column: 1/10;
|
|
}
|
|
.project__e .project__figure_b {
|
|
grid-column: 1/10;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__e .project__figure_a {
|
|
grid-column: 1/13;
|
|
grid-row: 1/6;
|
|
}
|
|
.project__e .project__figure_b {
|
|
grid-column: 1/13;
|
|
grid-row: 6/11;
|
|
}
|
|
}
|
|
|
|
.project__e .project__description_a {
|
|
grid-column: 6/8;
|
|
grid-row: 11;
|
|
align-self: end;
|
|
}
|
|
|
|
.project__e .project__description_b {
|
|
grid-column: 6/8;
|
|
grid-row: 12;
|
|
align-self: end;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.project__e .project__description_a {
|
|
grid-column: 10/13;
|
|
grid-row: 9/11;
|
|
}
|
|
.project__e .project__description_b {
|
|
grid-column: 10/13;
|
|
grid-row: 11/13;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.project__e .project__description_a {
|
|
grid-column: 1/13;
|
|
grid-row: 11;
|
|
}
|
|
.project__e .project__description_b {
|
|
grid-column: 1/13;
|
|
grid-row: 12;
|
|
}
|
|
}
|
|
|
|
|
|
/* Website List
|
|
==============================================================
|
|
*/
|
|
.website-list {
|
|
grid-column: span 8;
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.website-list__item {
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-column: span 3;
|
|
margin-bottom: 2rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.website-list__item img {
|
|
margin-bottom: 0.25rem;
|
|
border: 0.0625rem solid var(--border);
|
|
}
|
|
|
|
@media all and (max-width: 1000px) {
|
|
.website-list__item {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Site Footer
|
|
==============================================================
|
|
*/
|
|
footer {
|
|
text-align: center;
|
|
color: var(--bg);
|
|
background-color: var(--fg);
|
|
padding: 2rem 0 1rem;
|
|
}
|
|
|
|
footer section {
|
|
max-width: 42.67rem;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--blue);
|
|
}
|
|
footer a:hover {
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
.color__accent {
|
|
color: var(--orange);
|
|
} |