alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merged and fixed styling

main
Alina Marquardt 2025-05-12 21:32:24 +02:00
parent 9b0daf8711 3395ec4d00
commit a802eee305
2 changed files with 65 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public_html/index.html
View File

@ -97,6 +97,7 @@
</article> </article>
</section> </section>
<!--
<section class="box" id="experiment"> <section class="box" id="experiment">
<header class="blurgreen headlineshadow"><h1><em>experiments</em> box<img class="icon" src="img/head-experiment.png" width="63" height="103" alt></h1></header> <header class="blurgreen headlineshadow"><h1><em>experiments</em> box<img class="icon" src="img/head-experiment.png" width="63" height="103" alt></h1></header>
<div class="opaque whitebg"> <div class="opaque whitebg">
@ -104,9 +105,9 @@
<h2><span class="halfbubble blurgreen"></span>lorem ipsum</h2> <h2><span class="halfbubble blurgreen"></span>lorem ipsum</h2>
</div> </div>
</section> </section>
-->
</div> </div>
<!--
<div class="column"> <div class="column">
<section class="box invertedbox" id="recent"> <section class="box invertedbox" id="recent">
@ -128,6 +129,7 @@
</section> </section>
</div> </div>
-->
</div> </div>

117
public_html/style.css
View File

@ -72,87 +72,87 @@ p {text-wrap: pretty;}
/* ———— END THE GENERIC RESETS ———— */ /* ———— END THE GENERIC RESETS ———— */
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 200; font-weight: 200;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 200; font-weight: 200;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 900;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
} }
:root { :root {
/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */ /* 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: #333; --text-color: #000;
--link-color: #03f; --link-color: #03f;
--link-color-hover: #69f; --link-color-hover: #69f;
--button-color: #fcd700; --button-color: #63a8b8;
--button-color-hover: #000000; --button-color-hover: #333;
--highlight-color: #fcd700; --highlight-color: #a3d5d5;
--placeholder-color: #a9a9a9; --placeholder-color: #a9a9a9;
} }
@ -168,8 +168,8 @@ a:hover {color: var(--link-color-hover);}
body, select, input, textarea {color: var(--text-color);} body, select, input, textarea {color: var(--text-color);}
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */ /* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: var(--highlight-color); color: var(--text-color); text-shadow: none;} ::-moz-selection{background: var(--highlight-color); text-shadow: none;}
::selection {background: var(--highlight-color); color: var(--text-color); text-shadow: none;} ::selection {background: var(--highlight-color); text-shadow: none;}
/* j.mp/webkit-tap-highlight-color */ /* j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: var(--highlight-color);} a:link {-webkit-tap-highlight-color: var(--highlight-color);}
@ -296,14 +296,19 @@ article.album h2 em {
article.album .listenbuy { article.album .listenbuy {
color: white; color: white;
font-size: 1.1em; font-size: 1.1em;
font-weight: 400;
display: inline-block; display: inline-block;
margin-top: 0.75em; margin-top: 0.75em;
margin-left: -0.25em; margin-left: -0.3em;
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, margin 0.25s;
} }
article.album .listenbuy em {
font-style: normal;
font-weight: 600;
}
article.album a:hover .listenbuy { article.album a:hover .listenbuy {
margin-top: 1em; margin-top: 1em;
background-color: var(--button-color); background-color: var(--button-color);
@ -315,7 +320,7 @@ img.albumcover {
width: auto; width: auto;
height: 100%; height: 100%;
float: left; float: left;
margin-right: 1.5rem; margin-right: 1.4rem;
} }
article.album a:hover { article.album a:hover {
height: 160px; height: 160px;