work.suroh.tk/css/styles.css

212 lines
3.0 KiB
CSS
Executable File

@import url('https://fontlibrary.org/face/hk-grotesk');
@import url('https://fontlibrary.org/face/glacial-indifference');
body {
display: grid;
width: 100%;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9);
grid-gap: 15px;
margin: 0;
padding: 0;
font-family: 'HankenGroteskLight', sans-serif;
font-weight: 400;
font-size: 1.2em;
color: #000;
}
h1, h2, h3, h4 {
font-weight: 100;
}
header {
position: relative;
grid-column: 8 / span 2;
grid-row: 2;
}
header h1 {
position: absolute;
top:95px;
left:-60px;
font-size: 5em;
line-height: 0.85em;
margin: 0;
transform: rotate(90deg);
}
nav {
grid-column: 2 / 8;
grid-row: 1;
height: 60px;
padding: 20px 0;
align-self: center;
}
nav ul {
list-style: none;
font-size: 2em;
margin: 0;
padding: 0;
text-indent: none;
}
nav ul li {
display: inline;
padding: 0 10px;
}
nav a {
text-decoration: none;
color: #000;
border-bottom: thin solid rgba(0,0,0,0);
transition: all 0.3s ease;
}
nav a:hover {
text-decoration: none;
color: #333;
border-bottom: thin solid rgba(0,0,0,1);
transition: all 0.3s ease;
}
img {
max-width: 100%;
}
/* WORK SECTIONS */
section img {
max-width: 100%;
height: auto;
}
section#audioSection {
grid-column: 2 / 8;
grid-row: 2 / 10;
display: none;
visibility: hidden;
}
section#otherSection {
grid-column: 2 / 8;
grid-row: 2 / 10;
display: none;
visibility: hidden;
}
.work {
position: relative;
z-index: 100;
}
.work > h1 {
position: absolute;
left: -400px;
top: 200px;
font-family: 'GlacialIndifferenceRegular';
font-size: 12em;
font-weight: bold;
text-transform: uppercase;
transform: rotate(-90deg);
z-index: 1;
color: #FF670F;
}
.work ul {
list-style: none;
text-indent: none;
padding: 0;
margin: 0;
}
.work ul li {
position: relative;
display: block;
height: 600px;
overflow: hidden;
border: solid thick white;
background-position: center !important;
background-size: cover !important;
}
.work ul a {
z-index: 5000;
}
.work ul li:hover {
cursor: pointer;
}
.work ul li > h3, .work ul li > p {
position: absolute;
font-weight: bold;
color: #FCFCFC;
z-index: 10;
}
.work ul li > h3 {
font-family: 'GlacialIndifferenceRegular';
text-transform: uppercase;
bottom: 0px;
right: 30px;
margin: 0;
padding: 0;
font-size: 7em;
font-weight: bold;
text-align: right;
}
.work ul li > p {
top: 10px;
left: 20px;
font-style: italic;
max-width: 50%;
}
/* WORK INPAGE */
a#home {
grid-column: 2;
grid-row: 2;
align-self: center;
color: #000;
text-decoration: none;
font-size: 1em;
height: 300px;
}
a#home:hover {
color: #000;
text-decoration: underline;
}
.work.text {
grid-column: 2 / span 3;
grid-row: 3 / 9;
}
.work.text > h1 {
transform: rotate(0);
font-size: 4em;
left: -75px;
top: -100px;
margin: 0;
padding: 0;
}
.work.imgs {
grid-column: 5 / 8;
grid-row: 3 / 9;
}
div.imgFeat {
position: relative;
grid-column: 3 / 8;
grid-row: 2;
}
.imgFeat > img {
max-width: 100%;
}