gaiety/gaiety-life
1
0
Fork 0
Code Activity

various css fixes

Browse source
This commit is contained in:
Tommy Vedvik 2019-02-27 21:39:52 +01:00
parent f85fc2df09
commit a3e02103eb
3 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/assets/style/_content-box.scss
View file

@ -1,6 +1,8 @@
// Used to wrap content inside a nice box. // Used to wrap content inside a nice box.
.content-box { .content-box {
background-color: var(--bg-highlight-color); background-color: var(--bg-content-color);
max-width: var(--content-width);
margin: 0 auto;
transition: background-color .6s; transition: background-color .6s;
padding: var(--space); padding: var(--space);
border-radius: var(--radius); border-radius: var(--radius);

7
src/assets/style/_variables.scss
View file

@ -3,16 +3,17 @@ html {
--base-font-size: 20px; --base-font-size: 20px;
} }
// Light default theme
body { body {
--bg-color: #F3F7F9; --bg-color: #F3F7F9;
--bg-highlight-color: #FFF; --bg-content-color: #fff;
--bg-code: #fffbf3; --bg-code: #fffbf3;
--body-color: #444; --body-color: #444;
--title-color: #111; --title-color: #111;
--link-color: #2cb2f5; --link-color: #2cb2f5;
--border-color: rgba(0,0,0,.1);; --border-color: rgba(0,0,0,.1);;
--space: 3.5rem; --space: 3.5rem;
--container-width: 860px; --content-width: 860px;
--header-height: 80px; --header-height: 80px;
--radius: 5px; --radius: 5px;
} }
@ -32,7 +33,7 @@ body {
// Override variables for Dark theme // Override variables for Dark theme
body[data-theme="dark"] { body[data-theme="dark"] {
--bg-color: #0D2538; --bg-color: #0D2538;
--bg-highlight-color: #0f2d44; --bg-content-color: #0f2d44;
--bg-code: rgba(0,0,0,.3); --bg-code: rgba(0,0,0,.3);
--border-color: rgba(255,255,255,.1);; --border-color: rgba(255,255,255,.1);;
--body-color: #ced8de; --body-color: #ced8de;

6
src/layouts/Default.vue
View file

@ -54,16 +54,16 @@ export default {
align-items: center; align-items: center;
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1300px) {
//Make header sticky for large screens //Make header sticky for large screens
position: sticky; position: sticky;
width: 100%;
} }
} }
.main { .main {
max-width: var(--container-width);
margin: 0 auto; margin: 0 auto;
padding: 2.5vw 15px 0; padding: 1.5vw 15px 0;
} }
.footer { .footer {