tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-23 21:55:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

💄 Improves layout and colors for homepage

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-28 00:56:38 +01:00
parent e396e1c24e
commit 93b704aab3
6 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/index.module.scss
View File

@ -19,7 +19,7 @@ header.heroBanner {
background: var(--hero-background);
h1.heroTitle {
font-size: 6rem;
font-family: 'Racing Sans One', cursive;
font-family: 'Racing Sans One', mono;
text-shadow: var(--heading-shadow);
}
h3.heroSubTitle {

4
src/styles/Colors.scss
View File

@ -23,6 +23,8 @@ html { /* Light Theme */
--background: var(--white);
--text-color: var(--black);
--hero-background: var(--pale-grey);
--kinda-transparent: #ffffffd9;
--feature-img-shadow: 4px 4px 6px #a9a9a980, -2px -2px 4px rgb(0 0 0 / 40%);
}
html[data-theme='dark'] { /* Dark Theme */
@ -30,4 +32,6 @@ html[data-theme='dark'] { /* Dark Theme */
--background: var(--dark-grey);
--text-color: var(--white);
--hero-background: var(--black);
--kinda-transparent: #000000d9;
--feature-img-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
}

20
src/styles/Header.module.scss
View File

@ -10,13 +10,14 @@ html {
}
header.heroBanner {
padding: 4rem 0;
padding: 4rem 1rem;
text-align: center;
position: relative;
overflow: hidden;
background: var(--hero-background);
min-height: calc(100vh - 4rem);
h1.heroTitle {
font-size: 6rem;
font-size: 8rem;
font-family: 'Racing Sans One', cursive;
text-shadow: var(--heading-shadow);
}
@ -24,12 +25,25 @@ header.heroBanner {
text-shadow: var(--sub-heading-shadow);
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem;
@media screen and (max-width: 966px) {
flex-direction: column;
}
}
.dashyDescription {
max-width: 800px;
margin: 1rem auto;
text-align: left;
font-size: 1.2rem;
}
.keepReading {
font-size: 1.2rem;
margin-left: 0.5rem;
cursor: pointer;
text-decoration: underline;
}

36
src/styles/HomePageFeatures.scss
View File

@ -1,10 +1,23 @@
.color-pink { --feature-color: #db78fc; }
.color-blue { --feature-color: #5c85f7; }
.color-green { --feature-color: #41ef90; }
.color-yellow { --feature-color: #dcff5a; }
.color-white { --feature-color: white; }
html[data-theme='light'] { /* Dark Theme */
.color-pink { --feature-color: #b83ddd; }
.color-blue { --feature-color: #6b3cd6; }
.color-green { --feature-color: #1e9554; }
.color-yellow { --feature-color: #ceb73f; }
.color-white { --feature-color: #000; }
}
.home-page-features-wrapper {
display: flex;
flex-direction: column;
font-size: 1.2rem;
.feature {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
margin: 0;
&.align-left {
@ -17,29 +30,28 @@
background: var(--hero-background);
box-shadow: 0 -1px 4px #000000b3;
}
&.color-pink { --feature-color: #db78fc; }
&.color-blue { --feature-color: #5c85f7; }
&.color-green { --feature-color: #41ef90; }
&.color-yellow { --feature-color: #dcff5a; }
&.color-white { --feature-color: white; }
.feature-half {
width: 40%;
padding: 1rem;
padding: 0.25rem;
margin: 1rem;
&.assets {
visibility: hidden; //temp
background: var(--feature-color);
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem;
height: fit-content;
border-radius: 8px;
box-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
.screenshot {
background: #000000d9;
box-shadow: var(--feature-img-shadow);
img.demo {
background: var(--kinda-transparent);
width: 100%;
max-height: 36rem;
min-height: 12rem;
height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
box-shadow: var(--feature-img-shadow);
}
}
}

20
src/styles/Typography.scss
View File

@ -1,16 +1,24 @@
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto+Mono:wght@500&display=swap');
h1, h2, h3, h4, h5, button {
font-family: 'Roboto Mono', monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Raleway:wght@200&family=Roboto+Mono:wght@500&display=swap');
h1 {
font-size: 4rem;
font-family: 'Racing Sans One', mono;
}
h2 {
font-size: 3rem;
font-family: 'Roboto Mono', monospace;
}
h3 {
font-size: 2rem;
font-family: 'Roboto Mono', monospace;
}
h4, h5, button {
font-size: 1.2rem;
font-family: 'Roboto Mono', monospace;
}
body, section, p, span, a, div, ul li {
font-size: 1.2rem;
font-family: 'Raleway', sans-serif;
}

11
src/styles/custom.scss
View File

@ -15,7 +15,8 @@
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
--ifm-navbar-background-color: var(--background-darken);
--ifm-navbar-background-color: var(--primary);
--ifm-navbar-link-color: var(--black);
}
.hero {
@ -29,4 +30,12 @@
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
nav.navbar {
box-shadow: var(--feature-img-shadow);
a.navbar__brand b {
font-weight: bold;
font-size: 1.5rem;
}
}