Updated for some mobile responsive-ness
This commit is contained in:
suroh
parent
347b8c28cf
commit
ae2bbe22bb
164
css/master.css
164
css/master.css
|
|
@ -4,11 +4,7 @@
|
||||||
/* --> BASE STYLES <-- */
|
/* --> BASE STYLES <-- */
|
||||||
body {
|
body {
|
||||||
font-family: 'fira code', monospace;
|
font-family: 'fira code', monospace;
|
||||||
font-size: 19px;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #1e1e3cff;
|
color: #1e1e3cff;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:visited {
|
a, a:visited {
|
||||||
|
|
@ -54,12 +50,7 @@ li:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --> NAVIGATION <-- */
|
/* --> NAVIGATION <-- */
|
||||||
nav {
|
|
||||||
margin: 23px 23px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav>span {
|
nav>span {
|
||||||
font-size: 1.5em;
|
|
||||||
color: #1e1e3c33;
|
color: #1e1e3c33;
|
||||||
transition: color ease 0.5s;
|
transition: color ease 0.5s;
|
||||||
}
|
}
|
||||||
|
|
@ -77,7 +68,6 @@ nav>span.active {
|
||||||
|
|
||||||
nav>span.active::after {
|
nav>span.active::after {
|
||||||
color: #1e1e3cff;
|
color: #1e1e3cff;
|
||||||
margin-left: 14px;
|
|
||||||
content: attr(data-link);
|
content: attr(data-link);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,7 +100,6 @@ section.content {
|
||||||
}
|
}
|
||||||
|
|
||||||
section.content.visible {
|
section.content.visible {
|
||||||
margin: 20px 67px;
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
overflow: inherit;
|
overflow: inherit;
|
||||||
|
|
@ -140,36 +129,149 @@ section.content ul.subMenu li:hover {
|
||||||
|
|
||||||
/* --> SUBCONTENT CONSTRUCTION <-- */
|
/* --> SUBCONTENT CONSTRUCTION <-- */
|
||||||
section.content.page {
|
section.content.page {
|
||||||
max-width: 1960px;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
grid-template-rows: repeat(16, 1fr);
|
|
||||||
grid-gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section.page h1 {
|
section.page h1 {
|
||||||
font-size: 8em;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
line-height: 0.95em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section.content.page div.imgFeat {
|
@media screen and (width > 800px) {
|
||||||
grid-column: span 5;
|
body {
|
||||||
grid-row: 1 / 4:
|
font-size: 19px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> NAVIGATION <-- */
|
||||||
|
nav {
|
||||||
|
margin: 23px 23px 8px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span.active::after {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> MAINPAGE CONSTRUCTION <-- */
|
||||||
|
section.content.visible {
|
||||||
|
margin: 20px 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> SUBCONTENT CONSTRUCTION <-- */
|
||||||
|
section.content.page {
|
||||||
|
max-width: 1960px;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-rows: repeat(16, 1fr);
|
||||||
|
grid-gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.page h1 {
|
||||||
|
font-size: 8em;
|
||||||
|
line-height: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page div.imgFeat {
|
||||||
|
grid-column: span 5;
|
||||||
|
grid-row: 1 / 4:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs {
|
||||||
|
grid-column: 4 / span 2;
|
||||||
|
grid-row: 2:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs>img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.text {
|
||||||
|
grid-column: 1 / span 3;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section.content.page section.imgs {
|
@media screen and (width < 800px) {
|
||||||
grid-column: 4 / span 2;
|
body {
|
||||||
grid-row: 2:
|
font-size: 20px;
|
||||||
}
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
section.content.page section.imgs>img {
|
/* --> NAVIGATION <-- */
|
||||||
max-width: 100%;
|
nav {
|
||||||
height: auto;
|
margin: 23px 23px 8px;
|
||||||
}
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
|
||||||
section.content.page section.text {
|
nav>span {
|
||||||
grid-column: 1 / span 3;
|
margin-right: 8px;
|
||||||
grid-row: 2;
|
}
|
||||||
|
|
||||||
|
nav>span.active::after {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> MAINPAGE CONSTRUCTION <-- */
|
||||||
|
section.content.visible {
|
||||||
|
margin: 32px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> SUBCONTENT CONSTRUCTION <-- */
|
||||||
|
section.content.page {
|
||||||
|
display: inherit;
|
||||||
|
max-width: 1960px;
|
||||||
|
grid-gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.page h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
line-height: 0.95em;
|
||||||
|
margin: 24px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#teach h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
line-height: 0.75em;
|
||||||
|
margin: 40px 0 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
section.content.page div.imgFeat {
|
||||||
|
grid-column: span 5;
|
||||||
|
grid-row: 1 / 4:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs {
|
||||||
|
grid-column: 4 / span 2;
|
||||||
|
grid-row: 2:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs>img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.text {
|
||||||
|
grid-column: 1 / span 3;
|
||||||
|
grid-row: 2;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,10 +40,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<span data-link="~"><~</span>
|
<span data-link="~"><~</span><span data-link="works" class="">█</span><span data-link="audio" class="">█</span><span data-link="teach" class="">█</span>
|
||||||
<span data-link="works" class="">█</span>
|
|
||||||
<span data-link="audio" class="">█</span>
|
|
||||||
<span data-link="teach" class="">█</span>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section style="position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; z-index: -100;">
|
<section style="position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; z-index: -100;">
|
||||||
|
|
@ -342,9 +339,9 @@
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="teach" class="content page">
|
<section id="teach" class="content">
|
||||||
|
|
||||||
<h1 style="font-size: 8em;">teaching</h1>
|
<h1>teaching</h1>
|
||||||
<p>I'm currently engaged in teaching at <a href="https://paris.edu/" target="_blank">Paris College of Art</a> & <a href="https://www.eemi.com/" target="_blank">EEMI (l'école éuropéene des métiers de l'internet)</a> in Paris, FR.</p>
|
<p>I'm currently engaged in teaching at <a href="https://paris.edu/" target="_blank">Paris College of Art</a> & <a href="https://www.eemi.com/" target="_blank">EEMI (l'école éuropéene des métiers de l'internet)</a> in Paris, FR.</p>
|
||||||
|
|
||||||
<p>Experimenting in the realms of design, art, the web, interfaces, music and sound, with undergraduate and master's level students. Some links of our research and work can be found below.</p>
|
<p>Experimenting in the realms of design, art, the web, interfaces, music and sound, with undergraduate and master's level students. Some links of our research and work can be found below.</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue