mobile updates
This commit is contained in:
parent
be9bc4f65c
commit
af5f3d4a29
5 changed files with 54 additions and 17 deletions
|
@ -9,13 +9,15 @@
|
|||
#ndx-news,
|
||||
#ndx-decree,
|
||||
#ndx-more {
|
||||
margin: 0 25px;
|
||||
margin: 0;
|
||||
margin-left: min(2%, 25px);
|
||||
margin-right: min(2%, 25px);
|
||||
}
|
||||
#ndx-news,
|
||||
#ndx-more {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 360px;
|
||||
margin: auto;
|
||||
}
|
||||
#ndx-news article,
|
||||
#ndx-more article {
|
||||
|
@ -25,9 +27,6 @@
|
|||
}
|
||||
|
||||
#ndx-decree {
|
||||
width: 10%;
|
||||
min-width: 605px;
|
||||
max-height: 1000px;
|
||||
flex-grow: 2;
|
||||
text-align: center;
|
||||
border: var(--text) double 8px;
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
<a href="https://nnwhen.com" target="_blank">Website</a>
|
||||
</h3>
|
||||
</hgroup>
|
||||
<div>
|
||||
<section class="bio">
|
||||
<p>
|
||||
I am a <em>Digital Entity</em>, which involves: creating digital
|
||||
spaces - like this website - and creating other forms of
|
||||
|
@ -90,7 +90,7 @@
|
|||
>. <br />
|
||||
Some are dedicated to the World of 'UkuThintana'.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="profile">
|
||||
|
@ -118,7 +118,8 @@
|
|||
>
|
||||
</h3>
|
||||
</hgroup>
|
||||
<div>
|
||||
|
||||
<section class="bio">
|
||||
<p>
|
||||
<i>Elliot</i> is a multidisciplinary artist living and working in
|
||||
Joburg, South Africa. Originally from Zimbabwe, he studied for a
|
||||
|
@ -149,7 +150,7 @@
|
|||
growing herbs and veggies in faer garden; reading solarpunk books or
|
||||
watching animated shows; and most often cuddling with their cat.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="profile">
|
||||
|
@ -177,7 +178,7 @@
|
|||
>
|
||||
</h3>
|
||||
</hgroup>
|
||||
<div>
|
||||
<section class="bio">
|
||||
<p>
|
||||
I'm an ambitious lil man. I chase competitive stimulation in the
|
||||
form of virtual activities. Climbing the ranks to prove myself
|
||||
|
@ -193,7 +194,7 @@
|
|||
>. I love all forms of performing arts so expect to see me making
|
||||
things I think are cool in the future!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="profile">
|
||||
|
@ -210,7 +211,7 @@
|
|||
<a href="https://umabhengwane.com" target="_blank">Website</a>
|
||||
</h3>
|
||||
</hgroup>
|
||||
<div>
|
||||
<section class="bio">
|
||||
<p>My name is Cullen Mackenzie.</p>
|
||||
<p>
|
||||
I am the youngest of a big family and I grew up listening to stories
|
||||
|
@ -233,7 +234,7 @@
|
|||
rest of the Universe might be decaying around us but at least we can
|
||||
make beautiful things.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
@ -12,7 +12,7 @@ function profileShuffle() {
|
|||
"rotate(" + rnd * -1 + "deg)";
|
||||
|
||||
// Bio Text
|
||||
shuffle[i].getElementsByTagName("div")[0].style.transform =
|
||||
shuffle[i].getElementsByClassName("bio")[0].style.transform =
|
||||
"rotate(" + rnd * -1 + "deg)";
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
padding: 10px 20px;
|
||||
|
@ -35,9 +36,12 @@
|
|||
margin: 5px;
|
||||
font-size: large;
|
||||
}
|
||||
.bio {
|
||||
width: min(100%, 500px);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.profile p {
|
||||
flex-grow: 1;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.profile img {
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--l-yellow);
|
||||
|
@ -41,7 +42,7 @@ nav {
|
|||
background-color: var(--d-red);
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
margin: 0 5px;
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
|
||||
|
@ -81,7 +82,7 @@ nav a:hover {
|
|||
padding: 10px 20px;
|
||||
}
|
||||
#headnav a:first-child {
|
||||
margin-left: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#headnav .spacer {
|
||||
flex-grow: 1;
|
||||
|
@ -102,3 +103,35 @@ nav a:hover {
|
|||
#socials a:hover {
|
||||
background-color: var(--l-red);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 520px) {
|
||||
#headnav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 25px;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
transform: rotate(0deg) !important;
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
#headnav a {
|
||||
padding: 5px 0;
|
||||
margin: 5px 0;
|
||||
}
|
||||
body {
|
||||
width: calc(100% - 25px) !important;
|
||||
margin: auto 0 auto auto !important;
|
||||
}
|
||||
#headnav a:first-child {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
#bnav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue