suroh
/
work.suroh.tk
0
0
Fork 0
Code Pull Requests Actions Activity

Updated for some mobile responsive-ness

This commit is contained in:
suroh 2019-04-30 23:41:43 +02:00
parent 347b8c28cf
commit ae2bbe22bb
2 changed files with 136 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
css/master.css
View File

@ -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) {
body {
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-column: span 5;
grid-row: 1 / 4: grid-row: 1 / 4:
} }
section.content.page section.imgs { section.content.page section.imgs {
grid-column: 4 / span 2; grid-column: 4 / span 2;
grid-row: 2: grid-row: 2:
} }
section.content.page section.imgs>img { section.content.page section.imgs>img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
section.content.page section.text { section.content.page section.text {
grid-column: 1 / span 3; grid-column: 1 / span 3;
grid-row: 2; grid-row: 2;
}
}
@media screen and (width < 800px) {
body {
font-size: 20px;
line-height: 24px;
margin: 0;
padding: 0;
}
/* --> NAVIGATION <-- */
nav {
margin: 23px 23px 8px;
font-size: 1.75em;
}
nav>span {
margin-right: 8px;
}
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;
} */
} }

9
index.html
View File

@ -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>