start of flexbox based respolsivity
parent
e3692bf536
commit
7deac63ba2
|
|
@ -2,6 +2,14 @@
|
||||||
manage-audio/public/
|
manage-audio/public/
|
||||||
manage-audio/playlist.json
|
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
|
# Created by https://www.toptal.com/developers/gitignore/api/node,dotenv,linux
|
||||||
# Edit at https://www.toptal.com/developers/gitignore?templates=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="author" content="▧" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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="preload" fetchpriority="high" as="image" href="img/bg_blur.jpg" type="image/jpeg">
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
|
||||||
|
|
@ -19,41 +20,49 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="base" class="headlineshadow">
|
<div id="background_wrap"></div>
|
||||||
|
|
||||||
<header>
|
<div id="wrapper">
|
||||||
<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="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">
|
<article class="opaque whitebg album">
|
||||||
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
|
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
|
||||||
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
|
<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>
|
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<article class="opaque whitebg album">
|
<article class="opaque whitebg album">
|
||||||
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
|
<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>
|
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<article class="opaque whitebg album">
|
<article class="opaque whitebg album">
|
||||||
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
|
<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>
|
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<article class="opaque whitebg album">
|
<article class="opaque whitebg album">
|
||||||
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
|
<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>
|
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -157,7 +157,7 @@ p {text-wrap: pretty;}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 120%;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {font-size: 1rem; font-family: var(--font-system);}
|
body {font-size: 1rem; font-family: var(--font-system);}
|
||||||
|
|
@ -183,75 +183,194 @@ textarea:-moz-placeholder { color: var(--placeholder-color); }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
background-image: url('img/bg.jpg');
|
/* background-image: url('img/bg.jpg'); */
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: top left;
|
background-position: top left;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.headlineshadow {
|
||||||
|
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headlineshadow {
|
#background_wrap {
|
||||||
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
z-index: -1;
|
||||||
}
|
|
||||||
|
|
||||||
#base {
|
|
||||||
width: 400px;
|
|
||||||
position: fixed;
|
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 {
|
#wrapper {
|
||||||
color: white;
|
display: flex;
|
||||||
}
|
flex-direction: row;
|
||||||
|
gap: 5rem;
|
||||||
#maincontent {
|
margin-left: 3rem;
|
||||||
position: relative;
|
margin-top: 4rem;
|
||||||
padding: 4.5rem 0 0 21rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
float: left;
|
display: flex;
|
||||||
width: 550px;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.box {
|
/* sidebar */
|
||||||
width: 480px;
|
|
||||||
margin: 0 0 4.5rem 0;
|
.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;
|
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;
|
height: 60px;
|
||||||
padding: 0 0 0 1.25rem;
|
padding: 0 0 0 1.25rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
section.box header h1 {
|
.column-content section header h1 {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.125rem;
|
font-size: 2.125rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-shadow: 0 2px 1px rgba(0,100,125,1);
|
text-shadow: 0 2px 1px rgba(0,100,125,1);
|
||||||
}
|
}
|
||||||
section.invertedbox header h1 {
|
.column-content section.invertedbox header h1 {
|
||||||
color: #4e8595;
|
color: #4e8595;
|
||||||
text-shadow: none;
|
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-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.box div.opaque {
|
.column-content section div.opaque {
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
}
|
}
|
||||||
section.box div.opaque h2 {
|
.column-content section div.opaque h2 {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
section.box div.opaque h2 span.halfbubble {
|
.column-content section div.opaque h2 span.halfbubble {
|
||||||
height: 22px;
|
height: 22px;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
border-bottom-right-radius: 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;
|
margin: 0 0.7rem -0.125rem -1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.box header .icon {
|
.column-content section header .icon {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 1.25rem;
|
margin-right: 1.25rem;
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.box#experiment header .icon {
|
.column-content section#experiment header .icon {
|
||||||
margin-top: -2.5rem;
|
margin-top: -2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -294,7 +413,7 @@ article.album h2 em {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
article.album .listenbuy {
|
article.album .listenbuy {
|
||||||
color: white;
|
color: transparent;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -303,13 +422,14 @@ article.album .listenbuy {
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1em;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: 2em;
|
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 {
|
article.album .listenbuy em {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
article.album a:hover .listenbuy {
|
article.album a:hover .listenbuy {
|
||||||
|
color: white;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
background-color: var(--button-color);
|
background-color: var(--button-color);
|
||||||
}
|
}
|
||||||
|
|
@ -326,18 +446,6 @@ article.album a:hover {
|
||||||
height: 160px;
|
height: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* icosahedron */
|
|
||||||
|
|
||||||
#icosahedron-container {
|
|
||||||
width: 95px;
|
|
||||||
height: 95px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#icosahedron-container canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* backgrounds */
|
/* backgrounds */
|
||||||
|
|
||||||
.whitebg {
|
.whitebg {
|
||||||
|
|
@ -352,97 +460,6 @@ article.album a:hover {
|
||||||
color: white;
|
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
|
/* Print styles
|
||||||
-------------------------------------------------------------------------------*/
|
-------------------------------------------------------------------------------*/
|
||||||
|
|
@ -456,8 +473,36 @@ article.album a:hover {
|
||||||
/* Media queries
|
/* 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 {
|
@media print {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue