start of flexbox based respolsivity
parent
e3692bf536
commit
7deac63ba2
|
|
@ -2,6 +2,14 @@
|
|||
manage-audio/public/
|
||||
manage-audio/playlist.json
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/nova
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=nova
|
||||
|
||||
### nova ###
|
||||
.nova/*
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/nova
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/node,dotenv,linux
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=node,dotenv,linux
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<meta name="author" content="▧" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="preload" fetchpriority="high" as="image" href="img/bg.jpg" type="image/jpeg">
|
||||
<link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.jpg" type="image/jpeg">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
|
|
@ -19,41 +20,49 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="base" class="headlineshadow">
|
||||
<div id="background_wrap"></div>
|
||||
|
||||
<header>
|
||||
<div id="greeting">
|
||||
<div id="icosahedron-container" class="avatar"></div>
|
||||
<span class="line1">hello!</span>
|
||||
<span class="line2">my name is</span>
|
||||
<span class="line3">alina marquardt</span>
|
||||
</div>
|
||||
</header>
|
||||
<aside>
|
||||
<section class="iam">
|
||||
<span class="line1">i am a senior</span>
|
||||
<span class="line2 bigline"><em>UX/UI designer</em></span>
|
||||
<span class="line3">& electronic musician</span>
|
||||
<span class="line4">based in germany</span>
|
||||
</section>
|
||||
</aside>
|
||||
<aside>
|
||||
<section class="findme">
|
||||
<span class="line1">please also see</span>
|
||||
<ul>
|
||||
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||||
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="maincontent">
|
||||
<div class="column column-sidebar headlineshadow">
|
||||
|
||||
<div class="column">
|
||||
<header>
|
||||
<div id="greeting">
|
||||
<div id="icosahedron-container"></div>
|
||||
<span class="line1">hello!</span>
|
||||
<span class="line2">my name is</span>
|
||||
<span class="line3">alina marquardt</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside>
|
||||
<section id="iam">
|
||||
<span class="line1">i am a senior</span>
|
||||
<span class="line2 bigline"><em>UX/UI designer</em></span>
|
||||
<span class="line3">& electronic musician</span>
|
||||
<span class="line4">based in germany</span>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<section id="findme">
|
||||
<span class="line1">please also see</span>
|
||||
<ul>
|
||||
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||||
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="column column-content">
|
||||
|
||||
<section class="box maincontent" id="music">
|
||||
|
||||
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1>
|
||||
</header>
|
||||
|
||||
<section class="box" id="music">
|
||||
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
|
||||
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
|
||||
|
|
@ -61,6 +70,7 @@
|
|||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
|
||||
|
|
@ -69,6 +79,7 @@
|
|||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
|
||||
|
|
@ -77,6 +88,7 @@
|
|||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<article class="opaque whitebg album">
|
||||
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
|
||||
|
|
@ -85,7 +97,9 @@
|
|||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ p {text-wrap: pretty;}
|
|||
}
|
||||
|
||||
html {
|
||||
font-size: 120%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {font-size: 1rem; font-family: var(--font-system);}
|
||||
|
|
@ -183,75 +183,194 @@ textarea:-moz-placeholder { color: var(--placeholder-color); }
|
|||
|
||||
body {
|
||||
background-color: black;
|
||||
background-image: url('img/bg.jpg');
|
||||
/* background-image: url('img/bg.jpg'); */
|
||||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.headlineshadow {
|
||||
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.headlineshadow {
|
||||
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
#base {
|
||||
width: 400px;
|
||||
#background_wrap {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('img/bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#base a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#maincontent {
|
||||
position: relative;
|
||||
padding: 4.5rem 0 0 21rem;
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5rem;
|
||||
margin-left: 3rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 550px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section.box {
|
||||
width: 480px;
|
||||
margin: 0 0 4.5rem 0;
|
||||
/* sidebar */
|
||||
|
||||
.column-sidebar {
|
||||
width: 235px;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.column-sidebar a {
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.column-sidebar a, .column-sidebar .bigline {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar a:hover {
|
||||
text-shadow: 0 0 7px rgba(255,255,255,0.6);
|
||||
}
|
||||
.column-sidebar em {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar #greeting {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.column-sidebar #greeting #icosahedron-container {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
position: relative;
|
||||
}
|
||||
section.box header {
|
||||
.column-sidebar #greeting #icosahedron-container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column-sidebar #greeting span {
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar #greeting .line1 {
|
||||
margin-left: 1.375rem;
|
||||
}
|
||||
.column-sidebar #greeting .line2 {
|
||||
font-weight: 400;
|
||||
line-height: 0.8em;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.column-sidebar #greeting .line3 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar section#iam {
|
||||
margin-top: 2.8rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#iam .line1 {
|
||||
margin-left: 2.7rem;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
.column-sidebar section#iam .line2 {
|
||||
margin-left: 0.3rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar section#iam .line3 {
|
||||
margin-left: 1rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#iam .line4 {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.column-sidebar section#iam span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar section#findme {
|
||||
margin-top: 2.8rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#findme .line1 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.column-sidebar section#findme .line2 {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
.column-sidebar section#findme .line3 {
|
||||
margin-left: 1.7rem;
|
||||
}
|
||||
.column-sidebar section#findme span.line4 a {
|
||||
margin-left: 3.375rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* content */
|
||||
|
||||
.column-content {
|
||||
width: 495px;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.column-content section {
|
||||
width: 100%;
|
||||
margin: 0 0 4.5rem 0;
|
||||
}
|
||||
.column-content section header {
|
||||
height: 60px;
|
||||
padding: 0 0 0 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
section.box header h1 {
|
||||
.column-content section header h1 {
|
||||
color: white;
|
||||
font-size: 2.125rem;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 2px 1px rgba(0,100,125,1);
|
||||
}
|
||||
section.invertedbox header h1 {
|
||||
.column-content section.invertedbox header h1 {
|
||||
color: #4e8595;
|
||||
text-shadow: none;
|
||||
}
|
||||
section.box header h1 em, section.invertedbox h2 em {
|
||||
.column-content section header h1 em, section.invertedbox h2 em {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
section.box div.opaque {
|
||||
.column-content section div.opaque {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
section.box div.opaque h2 {
|
||||
.column-content section div.opaque h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
section.box div.opaque h2 span.halfbubble {
|
||||
.column-content section div.opaque h2 span.halfbubble {
|
||||
height: 22px;
|
||||
width: 11px;
|
||||
border-bottom-right-radius: 11px;
|
||||
|
|
@ -260,13 +379,13 @@ section.box div.opaque h2 span.halfbubble {
|
|||
margin: 0 0.7rem -0.125rem -1.25rem;
|
||||
}
|
||||
|
||||
section.box header .icon {
|
||||
.column-content section header .icon {
|
||||
float: right;
|
||||
margin-right: 1.25rem;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
section.box#experiment header .icon {
|
||||
.column-content section#experiment header .icon {
|
||||
margin-top: -2.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -294,7 +413,7 @@ article.album h2 em {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
article.album .listenbuy {
|
||||
color: white;
|
||||
color: transparent;
|
||||
font-size: 1.1em;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
|
|
@ -303,13 +422,14 @@ article.album .listenbuy {
|
|||
padding: 0.25em 1em;
|
||||
background-color: transparent;
|
||||
border-radius: 2em;
|
||||
transition: background-color 0.25s, margin 0.25s;
|
||||
transition: background-color 0.25s, color 0.25s, margin 0.25s;
|
||||
}
|
||||
article.album .listenbuy em {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
article.album a:hover .listenbuy {
|
||||
color: white;
|
||||
margin-top: 1em;
|
||||
background-color: var(--button-color);
|
||||
}
|
||||
|
|
@ -326,18 +446,6 @@ article.album a:hover {
|
|||
height: 160px;
|
||||
}
|
||||
|
||||
/* icosahedron */
|
||||
|
||||
#icosahedron-container {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
position: relative;
|
||||
}
|
||||
#icosahedron-container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* backgrounds */
|
||||
|
||||
.whitebg {
|
||||
|
|
@ -352,97 +460,6 @@ article.album a:hover {
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
|
||||
#base {
|
||||
font-size: 1.125rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
#greeting {
|
||||
font-size: 1.75rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
#greeting .avatar {
|
||||
margin-left: 4rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
#greeting span {
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
}
|
||||
#greeting .line1 {
|
||||
margin-left: 4.375rem;
|
||||
}
|
||||
#greeting .line2 {
|
||||
font-weight: 400;
|
||||
line-height: 0.8em;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
#greeting .line3 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
#base a, #base .bigline {
|
||||
font-size: 1.5rem;
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
}
|
||||
#base a:hover {
|
||||
text-shadow: 0 0 7px rgba(255,255,255,0.6);
|
||||
}
|
||||
#base em {
|
||||
font-weight: 600;
|
||||
}
|
||||
#base .icon {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
#base section.findme {
|
||||
margin-top: 4.375rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#base section.findme .line1 {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
#base section.findme .line2 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
#base section.findme .line3 {
|
||||
margin-left: 4.7rem;
|
||||
}
|
||||
#base section.findme span.line4 a {
|
||||
margin-left: 6.375rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
#base section.iam {
|
||||
margin-top: 2.8rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#base section.iam .line1 {
|
||||
margin-left: 5.7rem;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
#base section.iam .line2 {
|
||||
margin-left: 3.3rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
#base section.iam .line3 {
|
||||
margin-left: 4rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#base section.iam .line4 {
|
||||
margin-left: 3.4rem;
|
||||
}
|
||||
|
||||
#base section.iam span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Print styles
|
||||
-------------------------------------------------------------------------------*/
|
||||
|
|
@ -456,8 +473,36 @@ article.album a:hover {
|
|||
/* Media queries
|
||||
-------------------------------------------------------------------------------*/
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
@media screen and (max-width: 915px) {
|
||||
#background_wrap {
|
||||
background-size: 100%;
|
||||
}
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
.column {
|
||||
flex-direction: unset;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#greeting {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#music {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#iam {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#findme {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
|
|
|||
Loading…
Reference in New Issue