Working on mobile friendly website.
This commit is contained in:
suroh
parent
df80a19262
commit
797294905b
|
|
@ -0,0 +1,52 @@
|
|||
@import url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira code.css');
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'fira code', monospace;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* -~ NAV ~- */
|
||||
a#mobileButt {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul li.spacer {
|
||||
color: #FF670F;
|
||||
}
|
||||
|
||||
/* -~ WORK ~- */
|
||||
.work ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.work ul li {
|
||||
}
|
||||
|
||||
.work ul li h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.work ul li p {
|
||||
margin: 0;
|
||||
}
|
||||
273
css/styles.css
273
css/styles.css
|
|
@ -1,213 +1,72 @@
|
|||
@import url('https://fontlibrary.org/face/hk-grotesk');
|
||||
@import url('https://fontlibrary.org/face/glacial-indifference');
|
||||
/* Portables ----------- */
|
||||
@media only screen
|
||||
and (max-device-width : 1024px) {
|
||||
/* Styles */
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* -~ HEADER ~- */
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* -~ NAV ~- */
|
||||
a#mobileButt {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
nav.navigation {
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
background: #FFF;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
nav.navigation.open {
|
||||
max-height: 100vh;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
nav.navigation ul {
|
||||
list-style: none;
|
||||
margin: 10% 0 0 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
nav.navigation ul li {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 5px 0 7px;
|
||||
}
|
||||
|
||||
|
||||
nav.navigation ul li.spacer {
|
||||
color: #FF670F;
|
||||
}
|
||||
|
||||
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;
|
||||
/* Desktops and laptops ----------- */
|
||||
@media only screen
|
||||
and (min-width : 1224px) {
|
||||
/* Styles */
|
||||
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
grid-column: 8 / span 2;
|
||||
grid-row: 2;
|
||||
/* Large screens ----------- */
|
||||
@media only screen
|
||||
and (min-width : 1824px) {
|
||||
/* Styles */
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
background-color: #BFBFBF;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
15
index.html
15
index.html
|
|
@ -4,28 +4,33 @@
|
|||
<title>wkflw</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/resets.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>max<br>franklin</h1>
|
||||
<a id="mobileButt">menu</a>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
|
||||
<nav class="navigation">
|
||||
<ul>
|
||||
<li style="color: #FF670F;">wrk : </li>
|
||||
<li class="spacer">wrk : </li>
|
||||
<a href="#" id="audioButton"><li>audio</li></a>
|
||||
<a href="#" id="otherButton"><li>other</li></a>
|
||||
<a href="https://git.suroh.tk/" target="_blank"><li>code</li></a>
|
||||
<li style="color: #FF670F;">rsch : </li>
|
||||
<li class="spacer">rsch : </li>
|
||||
<a href="https://ied.suroh.tk/"><li>IED</li></a>
|
||||
<a href="https://work.suroh.tk/research/"><li>wiki</li></a>
|
||||
<li class="spacer">cv : </li>
|
||||
<a href="cv.html"><li>me</li></a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="work" id="audioSection">
|
||||
<h1>AUDIO</h1>
|
||||
<h1>=> audio</h1>
|
||||
|
||||
<ul>
|
||||
<a href="work/soloWork.html"><li id="soloWork" style="background:url('assets/audio/solo/thumb-_DSC5654.jpg');">
|
||||
|
|
@ -40,7 +45,7 @@
|
|||
</section>
|
||||
|
||||
<section class="work" id="otherSection">
|
||||
<h1>OTHER</h1>
|
||||
<h1>=> other</h1>
|
||||
|
||||
<ul>
|
||||
<a href="work/fragileMasteryWork.html"><li id="fragileMasteryWork" style="background:url('assets/other/fragileMastery/thumb-gradInstallation.jpg');">
|
||||
|
|
|
|||
24
js/menu.js
24
js/menu.js
|
|
@ -11,9 +11,9 @@ let otherSection = document.getElementById('otherSection')
|
|||
audioBut.addEventListener("click", () => {
|
||||
if (audioSection) {
|
||||
otherSection.style.visibility = "hidden"
|
||||
otherSection.style.display = "none"
|
||||
otherSection.style.display = "none"
|
||||
audioSection.style.visibility = "visible"
|
||||
audioSection.style.display = "inherit"
|
||||
audioSection.style.display = "inherit"
|
||||
} else {
|
||||
console.log('No section')
|
||||
}
|
||||
|
|
@ -22,10 +22,24 @@ audioBut.addEventListener("click", () => {
|
|||
otherBut.addEventListener("click", () => {
|
||||
if (otherSection) {
|
||||
audioSection.style.visibility = "hidden"
|
||||
audioSection.style.display = "none"
|
||||
audioSection.style.display = "none"
|
||||
otherSection.style.visibility = "visible"
|
||||
otherSection.style.display = "inherit"
|
||||
otherSection.style.display = "inherit"
|
||||
} else {
|
||||
console.log('No section')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// MOBILE menu
|
||||
|
||||
var menuButton = document.querySelector("#mobileButt");
|
||||
|
||||
menuButton.addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
var parent = document.querySelector(".navigation");
|
||||
if (parent.classList.contains("open")) {
|
||||
parent.classList.remove("open");
|
||||
} else {
|
||||
parent.classList.add("open");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue