further updates to styles to neaten the layout. Fixed reference to Bergen to Norway to keep in style with the other entries

This commit is contained in:
suroh 2018-05-20 11:17:37 +02:00
parent d4731e2f96
commit ec375a79bc
2 changed files with 70 additions and 40 deletions

View File

@ -3,7 +3,8 @@
body { body {
font: 1.6em "THSarabunNewRegular", Helvetica, sans-serif; font: 1.6em "THSarabunNewRegular", Helvetica, sans-serif;
color: #333; color: #333;
line-height: 0.8em; } line-height: 0.8em;
}
a { a {
color: #FF3300; color: #FF3300;
@ -12,16 +13,20 @@ a {
-moz-transition: color 0.3s ease; -moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease; -o-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease; -webkit-transition: color 0.3s ease;
transition: color 0.3s ease; } transition: color 0.3s ease;
}
a:hover { a:hover {
color: #99FFFF; color: #99FFFF;
-moz-transition: color 1s ease; -moz-transition: color 1s ease;
-o-transition: color 1s ease; -o-transition: color 1s ease;
-webkit-transition: color 1s ease; -webkit-transition: color 1s ease;
transition: color 1s ease; } transition: color 1s ease;
}
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: "TeXGyreAdventorRegular", sans-serif; } font-family: "TeXGyreAdventorRegular", sans-serif;
}
footer { footer {
grid-row: 9 / span 1; grid-row: 9 / span 1;
@ -35,17 +40,21 @@ footer {
iframe { iframe {
max-width: 100%; max-width: 100%;
max-height: auto; max-height: auto;
border: thin #99FFFF dashed; } border: thin #99FFFF dashed;
}
nav { nav {
width: 100%; width: 100%;
margin: 20px 0; margin: 20px 0;
text-align: center; } text-align: center;
}
nav ul { nav ul {
list-style: none; } list-style: none;
}
nav ul li { nav ul li {
display: inline-block; display: inline-block;
padding: 0 15px; } padding: 0 15px;
}
#wrapper { #wrapper {
max-width: 900px; max-width: 900px;
@ -53,21 +62,25 @@ nav {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(6) 10%; grid-template-columns: repeat(6) 10%;
grid-template-rows: repeat(9); } grid-template-rows: repeat(9);
}
#wrapper div img, #wrapper div video, #wrapper div object, #wrapper section img, #wrapper section video, #wrapper section object, #wrapper header img, #wrapper header video, #wrapper header object, #wrapper footer img, #wrapper footer video, #wrapper footer object { #wrapper div img, #wrapper div video, #wrapper div object, #wrapper section img, #wrapper section video, #wrapper section object, #wrapper header img, #wrapper header video, #wrapper header object, #wrapper footer img, #wrapper footer video, #wrapper footer object {
max-width: 100%; } max-width: 100%;
}
header { header {
grid-column: 3 / span 4; grid-column: 3 / span 4;
grid-row: 1 / span 4; grid-row: 1 / span 4;
align-self: stretch; align-self: stretch;
text-align: right; } text-align: right;
}
.one { .one {
grid-column: 1 / span 2; grid-column: 1 / span 2;
grid-row: 4 / span 2; grid-row: 4 / span 2;
align-self: top; align-self: top;
z-index: 3; } z-index: 3;
}
.text { .text {
grid-column: 1 / span 4; grid-column: 1 / span 4;
@ -76,50 +89,67 @@ header {
font-size: 0.8em; font-size: 0.8em;
text-align: justify; text-align: justify;
padding: 20px 40px; padding: 20px 40px;
border: thin #99FFFF dashed; } border: thin #99FFFF dashed;
}
.work { .work {
grid-column: 2 / 6; grid-column: 2 / 6;
grid-row: 5 / auto; } grid-row: 5 / auto;
}
.work img, .work object, .work iframe { .work img, .work object, .work iframe {
display: block; display: block;
margin: 100px auto; margin: 100px auto;
border: thin #99FFFF dashed; } border: thin #99FFFF dashed;
}
.work img, .work object:first-of-type { .work img, .work object:first-of-type {
margin: 0px auto 100px; } margin: 0px auto 100px;
}
.inPage { .inPage {
grid-row: 8 / auto; } grid-row: 8 / auto;
}
.cv section:first-of-type { .cv section:first-of-type {
grid-column: 1 / 6; grid-column: 1 / 6;
grid-row: 1 / span 1; grid-row: 1 / span 1;
padding: 0 20px; padding: 0 20px;
border: thin #99FFFF dashed; } border: thin #99FFFF dashed;
}
.cv section:first-of-type #me { .cv section:first-of-type #me {
position: relative; position: relative;
top: 5px; top: 5px;
width: 25%; width: 25%;
text-align: right; text-align: right;
font-style: italic; } font-style: italic;
}
.cv #edu { .cv #edu {
grid-column: 4 / 6; grid-column: 4 / 6;
grid-row: 2 / 3; grid-row: 2 / 3;
align-self: center; } align-self: center;
}
.cv #music { .cv #music {
grid-column: 1 / span 2; grid-column: 1 / span 2;
grid-row: 3 / 5; grid-row: 3 / 5;
align-self: start; } align-self: start;
}
.cv #things { .cv #things {
position: relative;
top:-150px;
left:20px;
grid-column: 3 / 4; grid-column: 3 / 4;
grid-row: 2 / 5; grid-row: 2 / 5;
align-self: center; align-self: center;
padding: 0 50px 0 0; } padding: 0 50px 0 0;
}
.cv #prof { .cv #prof {
grid-column: 3 / 6; grid-column: 4 / 6;
grid-row: 6; grid-row: 3 / 3;
align-items: start; } align-items: start;
}

View File

@ -47,7 +47,7 @@
<p><em>Thresholds of the Algorithmic</em><br> <p><em>Thresholds of the Algorithmic</em><br>
Algorithms that Matter<br> Algorithms that Matter<br>
2018 (upcoming) // Bergen<br> 2018 (upcoming) // Norway<br>
Workshop-in-Exposition is a hybrid format that places the workshop inside an exhibition context, where the exposed works and artefacts form the basis of the workshops activity.</p> Workshop-in-Exposition is a hybrid format that places the workshop inside an exhibition context, where the exposed works and artefacts form the basis of the workshops activity.</p>
<p><em>Get a Room Residency</em><br> <p><em>Get a Room Residency</em><br>