mirror/wavelovers
1
0
Fork 0
mirror of https://github.com/eugene-serb/wavelovers.git synced 2023-09-09 23:41:16 +03:00
Code Issues Projects Releases Wiki Activity

Updated styles for footer, pages, post, content

Browse Source
This commit is contained in:
Eugene Serb 2022-06-20 19:25:21 +03:00
parent cb3ecd2f7c
commit d2dafcb8c0
2 changed files with 76 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
about.html
View File

@ -88,8 +88,8 @@
<main class="page container">
<h1 class="visually-hidden">Wavelovers – Feedback</h1>
<div class="wavelovers">
<div class="content">
<h2 class="content__header">Feedback</h2>
<div class="content-item">
<h2 class="content-item__header">Feedback</h2>
<p>Hi! I am the author and developer of Wavelovers app and I want to thank you for using this app. If you have any ideas or wishes, you can write to me.</p>
<br />
<span>Follow me on Twitter: </span>
@ -98,8 +98,8 @@
<span>Mail me: </span>
<a href="mailto:eugene.serb@gmail.com" target="_blank">eugene.serb@gmail.com</a>
</div>
<div class="content">
<h2 class="content__header">Donate</h2>
<div class="content-item">
<h2 class="content-item__header">Donate</h2>
<p>If you like this app, you can thank me and donate to me.</p>
<br />
<span>Bitcoin: </span>

108
css/styles.css
View File

@ -34,6 +34,7 @@
@media (prefers-color-scheme: light) {
:root {
/* Base colors */
--color-border: var(--color-a);
--color-background: var(--color-white);
--color-text: var(--color-coal);
@ -45,15 +46,16 @@
--color-table-header-background: var(--color-b);
--color-table-header-text: var(--color-white);
--color-table-item: var(--color-c);
/**/
/* Components colors */
--color-header-background: var(--color-b);
--color-header-borderline: var(--color-a);
--color-header-selection: var(--color-a);
--color-header-logo: var(--color-white);
--color-header-navigation-link: var(--color-white);
--color-header-navigation-link-hover: var(--color-white);
--color-footer-borderline: var(--color-a);
--color-content-item-background: var(--color-milk);
/**/
--color-content-background: var(--color-milk);
--color-logo: var(--color-white);
--color-header: var(--color-coal);
--color-anotation: var(--color-coal);
@ -64,6 +66,7 @@
@media (prefers-color-scheme: dark) {
:root {
/* Base colors */
--color-border: var(--color-a);
--color-background: var(--color-coal);
--color-text: var(--color-coal);
@ -75,15 +78,16 @@
--color-table-header-background: var(--color-b);
--color-table-header-text: var(--color-white);
--color-table-item: var(--color-c);
/**/
--color-header-background: var(--color-a);
--color-header-borderline: var(--color-b);
/* Components colors */
--color-header-background: var(--color-b);
--color-header-borderline: var(--color-a);
--color-header-selection: var(--color-b);
--color-header-logo: var(--color-white);
--color-header-navigation-link: var(--color-white);
--color-header-navigation-link-hover: var(--color-white);
--color-footer-borderline: var(--color-a);
--color-content-item-background: var(--color-c);
/**/
--color-content-background: var(--color-c);
--color-logo: var(--color-white);
--color-header: var(--color-coal);
--color-anotation: var(--color-milk);
@ -373,34 +377,12 @@ table, th, td {
}
}
/* ----------------------------------- */
/* MAIN, PAGE FLOW AND CONTENT SECTION */
/* ----------------------------------- */
.page {
flex-grow: 1;
margin-top: 64px;
margin-bottom: 64px;
}
.content {
margin-bottom: 16px;
padding: 32px;
border-radius: 8px;
background: var(--color-content-background);
}
.content__header {
text-align: center;
}
/* ------ */
/* FOOTER */
/* ------ */
.footer {
border-top: 4px solid var(--color-a);
background: var(--color-background);
border-top: 4px solid var(--color-footer-borderline);
}
.footer-wrapper {
@ -408,18 +390,14 @@ table, th, td {
padding-bottom: 32px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
}
.annotation__text {
color: var(--color-anotation);
}
.created-by {
align-self: end;
}
.created-by {
align-self: flex-end;
}
.created-by > span {
padding-right: 8px;
@ -429,12 +407,62 @@ table, th, td {
font-size: 32px;
}
.created-by > a:hover {
border: none;
/* ---- */
/* PAGE */
/* ---- */
.page {
flex-grow: 1;
margin-top: 64px;
margin-bottom: 64px;
}
/* ---- */
/* POST */
/* ---- */
.post {
margin: 0 auto;
}
.post__header {
text-align: center;
margin-block-end: 32px;
}
/* ------- */
/* CONTENT */
/* ------- */
.content {
margin-bottom: 64px;
}
.content__header {
margin-top: 0;
margin-bottom: 32px;
padding-left: 16px;
border: 2px solid var(--color-content-borderline);
border-radius: var(--number-border-radius);
color: var(--color-text-header);
font-size: 1.8em;
}
.content-item {
margin-bottom: 16px;
padding: 32px;
border-radius: var(--number-border-radius);
background: var(--color-content-item-background);
}
.content-item__header {
margin-bottom: 16px;
text-align: center;
}
/* ----------- */
/* WAVE MASTER */
/* WAVELOVERS */
/* ----------- */
.wavelovers {