responsiveness for desktop and mobile
parent
7deac63ba2
commit
bc76021964
|
|
@ -23,43 +23,30 @@
|
|||
<div id="background_wrap"></div>
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div class="column column-sidebar headlineshadow">
|
||||
|
||||
<header>
|
||||
<div id="greeting">
|
||||
<!-- No aside element - flat structure -->
|
||||
<header id="greeting" class="sidebaritem headlineshadow">
|
||||
<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">
|
||||
<section id="iam" class="sidebaritem headlineshadow">
|
||||
<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">
|
||||
<section id="findme" class="sidebaritem headlineshadow">
|
||||
<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">
|
||||
|
||||
<section class="contentitem 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>
|
||||
|
||||
|
|
@ -97,11 +84,7 @@
|
|||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,66 +2,274 @@
|
|||
https://github.com/murtaugh/HTML5-Reset/
|
||||
*/
|
||||
|
||||
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}
|
||||
html,
|
||||
body,
|
||||
body div,
|
||||
span,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
abbr,
|
||||
address,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
samp,
|
||||
small,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
var,
|
||||
b,
|
||||
i,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video,
|
||||
details,
|
||||
summary {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
|
||||
main,
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section,
|
||||
details,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html {box-sizing: border-box;}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {box-sizing: inherit;}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img {max-width: 100%;}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul {list-style: none;} /* we'll restore bullets as needed for content */
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {quotes: none;}
|
||||
/* we'll restore bullets as needed for content */
|
||||
|
||||
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
del {text-decoration: line-through;}
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
table {border-collapse: separate; border-spacing: 0; text-align: left;}
|
||||
th {font-weight: bold; vertical-align: bottom;}
|
||||
td {font-weight: normal; vertical-align: top;}
|
||||
td img {vertical-align: top;}
|
||||
abbr[title],
|
||||
dfn[title] {
|
||||
border-bottom: 1px dotted #000;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input, select {vertical-align: middle;}
|
||||
th {
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
pre {white-space: pre-line;}
|
||||
td {
|
||||
font-weight: normal;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
input[type="radio"] {vertical-align: text-bottom;}
|
||||
input[type="checkbox"] {vertical-align: bottom;}
|
||||
td img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
small {font-size: .8rem;}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #999;
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
strong {font-weight: bold;}
|
||||
input,
|
||||
select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
sub, sup {font-size: .8rem; line-height: 0; position: relative;}
|
||||
sup {top: -0.5rem;}
|
||||
sub {bottom: -0.25rem;}
|
||||
pre {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
pre, code, kbd, samp {font-family: monospace, sans-serif;}
|
||||
input[type="radio"] {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
|
||||
input[type="checkbox"] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
button, input, select, textarea {margin: 0;}
|
||||
small {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
|
||||
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {padding: 2rem; border-left: 1px solid #333;}
|
||||
sub,
|
||||
sup {
|
||||
font-size: .8rem;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */
|
||||
sup {
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {text-wrap: balance}
|
||||
sub {
|
||||
bottom: -0.25rem;
|
||||
}
|
||||
|
||||
p {text-wrap: pretty;}
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, sans-serif;
|
||||
}
|
||||
|
||||
label,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=file],
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: var(--highlight-color);
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight-color);
|
||||
color: #000;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 2rem;
|
||||
border-left: 1px solid #333;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* https://css-tricks.com/snippets/css/clear-fix/ */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-wrap: balance
|
||||
}
|
||||
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:has(:target) {
|
||||
|
|
@ -77,66 +285,77 @@ p {text-wrap: pretty;}
|
|||
font-weight: 400;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
|
|
@ -146,7 +365,8 @@ p {text-wrap: pretty;}
|
|||
|
||||
:root {
|
||||
/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
|
||||
--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
|
||||
--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
/* https://css-tricks.com/snippets/css/system-font-stack */
|
||||
--text-color: #000;
|
||||
--link-color: #03f;
|
||||
--link-color-hover: #69f;
|
||||
|
|
@ -160,26 +380,63 @@ html {
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {font-size: 1rem; font-family: var(--font-system);}
|
||||
body {
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-system);
|
||||
}
|
||||
|
||||
a {color: var(--link-color);}
|
||||
a:hover {color: var(--link-color-hover);}
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
body, select, input, textarea {color: var(--text-color);}
|
||||
a:hover {
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
body,
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
|
||||
::-moz-selection{background: var(--highlight-color); text-shadow: none;}
|
||||
::selection {background: var(--highlight-color); text-shadow: none;}
|
||||
::-moz-selection {
|
||||
background: var(--highlight-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--highlight-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* j.mp/webkit-tap-highlight-color */
|
||||
a:link {-webkit-tap-highlight-color: var(--highlight-color);}
|
||||
a:link {
|
||||
-webkit-tap-highlight-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
ins {background-color: var(--highlight-color); color: var(--text-color); text-decoration: none;}
|
||||
mark {background-color: var(--highlight-color); color: var(--text-color); font-style: italic; font-weight: bold;}
|
||||
ins {
|
||||
background-color: var(--highlight-color);
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight-color);
|
||||
color: var(--text-color);
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Mozilla dosen't style place holders by default */
|
||||
input:-moz-placeholder { color: var(--placeholder-color); }
|
||||
textarea:-moz-placeholder { color: var(--placeholder-color); }
|
||||
input:-moz-placeholder {
|
||||
color: var(--placeholder-color);
|
||||
}
|
||||
|
||||
textarea:-moz-placeholder {
|
||||
color: var(--placeholder-color);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
|
|
@ -211,22 +468,39 @@ a {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Alternative solution without adding a container */
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5rem;
|
||||
margin-left: 3rem;
|
||||
margin-top: 4rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Mobile layout (default) - Elements stacked in desired order */
|
||||
#greeting {
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#iam {
|
||||
width: 100%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#music {
|
||||
width: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#findme {
|
||||
width: 100%;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
|
||||
.column-sidebar {
|
||||
.sidebaritem {
|
||||
width: 235px;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
|
|
@ -234,103 +508,119 @@ a {
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.column-sidebar a {
|
||||
.sidebaritem a {
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.column-sidebar a, .column-sidebar .bigline {
|
||||
.sidebaritem a,
|
||||
.sidebaritem .bigline {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar a:hover {
|
||||
|
||||
.sidebaritem a:hover {
|
||||
text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.column-sidebar em {
|
||||
|
||||
.sidebaritem em {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar #greeting {
|
||||
.sidebaritem#greeting {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.column-sidebar #greeting #icosahedron-container {
|
||||
|
||||
.sidebaritem#greeting #icosahedron-container {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
position: relative;
|
||||
}
|
||||
.column-sidebar #greeting #icosahedron-container canvas {
|
||||
|
||||
.sidebaritem#greeting #icosahedron-container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column-sidebar #greeting span {
|
||||
.sidebaritem#greeting span {
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar #greeting .line1 {
|
||||
|
||||
.sidebaritem#greeting .line1 {
|
||||
margin-left: 1.375rem;
|
||||
}
|
||||
.column-sidebar #greeting .line2 {
|
||||
|
||||
.sidebaritem#greeting .line2 {
|
||||
font-weight: 400;
|
||||
line-height: 0.8em;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.column-sidebar #greeting .line3 {
|
||||
|
||||
.sidebaritem#greeting .line3 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar section#iam {
|
||||
.sidebaritem#iam {
|
||||
margin-top: 2.8rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#iam .line1 {
|
||||
|
||||
.sidebaritem#iam .line1 {
|
||||
margin-left: 2.7rem;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
.column-sidebar section#iam .line2 {
|
||||
|
||||
.sidebaritem#iam .line2 {
|
||||
margin-left: 0.3rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.column-sidebar section#iam .line3 {
|
||||
|
||||
.sidebaritem#iam .line3 {
|
||||
margin-left: 1rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#iam .line4 {
|
||||
|
||||
.sidebaritem#iam .line4 {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.column-sidebar section#iam span {
|
||||
.sidebaritem#iam span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.column-sidebar section#findme {
|
||||
.sidebaritem#findme {
|
||||
margin-top: 2.8rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.column-sidebar section#findme .line1 {
|
||||
|
||||
.sidebaritem#findme .line1 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.column-sidebar section#findme .line2 {
|
||||
|
||||
.sidebaritem#findme .line2 {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
.column-sidebar section#findme .line3 {
|
||||
|
||||
.sidebaritem#findme .line3 {
|
||||
margin-left: 1.7rem;
|
||||
}
|
||||
.column-sidebar section#findme span.line4 a {
|
||||
|
||||
.sidebaritem#findme span.line4 a {
|
||||
margin-left: 3.375rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* content */
|
||||
|
||||
.column-content {
|
||||
.contentitem {
|
||||
width: 495px;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
|
|
@ -338,39 +628,46 @@ a {
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.column-content section {
|
||||
.contentitem {
|
||||
width: 100%;
|
||||
margin: 0 0 4.5rem 0;
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
.column-content section header {
|
||||
|
||||
.contentitem header {
|
||||
height: 60px;
|
||||
padding: 0 0 0 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
.column-content section header h1 {
|
||||
|
||||
.contentitem header h1 {
|
||||
color: white;
|
||||
font-size: 2.125rem;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 2px 1px rgba(0, 100, 125, 1);
|
||||
}
|
||||
.column-content section.invertedbox header h1 {
|
||||
|
||||
.contentitem.invertedbox header h1 {
|
||||
color: #4e8595;
|
||||
text-shadow: none;
|
||||
}
|
||||
.column-content section header h1 em, section.invertedbox h2 em {
|
||||
|
||||
.contentitem header h1 em,
|
||||
section.invertedbox h2 em {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.column-content section div.opaque {
|
||||
.contentitem div.opaque {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.column-content section div.opaque h2 {
|
||||
|
||||
.contentitem div.opaque h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.column-content section div.opaque h2 span.halfbubble {
|
||||
|
||||
.contentitem div.opaque h2 span.halfbubble {
|
||||
height: 22px;
|
||||
width: 11px;
|
||||
border-bottom-right-radius: 11px;
|
||||
|
|
@ -379,13 +676,13 @@ a {
|
|||
margin: 0 0.7rem -0.125rem -1.25rem;
|
||||
}
|
||||
|
||||
.column-content section header .icon {
|
||||
.contentitem header .icon {
|
||||
float: right;
|
||||
margin-right: 1.25rem;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.column-content section#experiment header .icon {
|
||||
.contentitem#experiment header .icon {
|
||||
margin-top: -2.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -395,53 +692,70 @@ article.album {
|
|||
height: auto;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
article.album a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
article.album h2 {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
transition: margin 0.25s;
|
||||
}
|
||||
|
||||
article.album h2 em {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
article.album .listenbuy {
|
||||
color: transparent;
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
margin-top: 0.75em;
|
||||
margin-left: -0.3em;
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0em;
|
||||
margin-right: 1em;
|
||||
padding: 0.25em 1em;
|
||||
background-color: transparent;
|
||||
border-radius: 2em;
|
||||
transition: background-color 0.25s, color 0.25s, margin 0.25s;
|
||||
opacity: 0;
|
||||
background-color: var(--button-color-hover);
|
||||
background-image: url('img/bg_blur.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
transition: opacity 0.25s, margin 0.25s, height 0.25s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
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);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article.album a .listenbuy:hover {
|
||||
background-color: var(--button-color-hover);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
img.albumcover {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-right: 1.4rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
article.album a:hover {
|
||||
height: 160px;
|
||||
}
|
||||
|
|
@ -463,48 +777,119 @@ article.album a:hover {
|
|||
|
||||
/* Print styles
|
||||
-------------------------------------------------------------------------------*/
|
||||
@media print {
|
||||
|
||||
|
||||
|
||||
}
|
||||
@media print {}
|
||||
|
||||
|
||||
/* Media queries
|
||||
-------------------------------------------------------------------------------*/
|
||||
|
||||
@media screen and (max-width: 915px) {
|
||||
#background_wrap {
|
||||
background-size: 100%;
|
||||
}
|
||||
/* Media query for desktop */
|
||||
@media screen and (min-width: 931px) {
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
.column {
|
||||
flex-direction: unset;
|
||||
display: contents;
|
||||
margin: 4rem 3rem;
|
||||
flex-wrap: nowrap;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
/* Create sidebars "column" */
|
||||
#greeting,
|
||||
#iam,
|
||||
#findme {
|
||||
width: 235px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Stack the sidebar items vertically with margins */
|
||||
#greeting {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#music {
|
||||
order: 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#iam {
|
||||
order: 3;
|
||||
position: absolute;
|
||||
top: calc(4rem + 235px);
|
||||
order: 1;
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
#findme {
|
||||
order: 4;
|
||||
position: absolute;
|
||||
top: calc(4rem + 235px + 150px);
|
||||
order: 1;
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
/* Right column */
|
||||
#music {
|
||||
max-width: 495px;
|
||||
flex: 1;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Media query for mobile */
|
||||
@media screen and (max-width: 930px) {
|
||||
|
||||
#wrapper {
|
||||
margin: 1em auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#background_wrap {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
article.album a .listenbuy {
|
||||
margin-top: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article.album a {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.contentitem#music {
|
||||
max-width: 500px;
|
||||
min-width: 340px;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.sidebaritem#findme {
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Media query for hoverless */
|
||||
@media (hover: none) {
|
||||
|
||||
article.album a .listenbuy {
|
||||
margin-top: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article.album a {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Media query for mobile */
|
||||
@media screen and (max-width: 550px) {
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
article.album a {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
article.album a .listenbuy {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media print {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue