Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 10:17:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode

Browse Source
This commit is contained in:
Daniel Brendel
2022-11-15 22:23:50 +01:00
parent c3dd319460
commit d01a9e4fd6
8 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/resources/js/app.js
View File

@ -210,7 +210,7 @@ window.vue = new Vue({
}); });
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import 'highlight.js/scss/github.scss'; import 'highlight.js/scss/github-dark.scss';
window.hljs = hljs; window.hljs = hljs;

33
app/resources/sass/app.scss
View File

@ -10,6 +10,7 @@ html, body {
body { body {
overflow-x: hidden; overflow-x: hidden;
background-color: rgb(25, 40, 55);
} }
.navbar-start { .navbar-start {
@ -25,6 +26,19 @@ body {
font-size: 20px; font-size: 20px;
} }
.header {
width: 100%;
height: 320px;
background-repeat: no-repeat;
background-size: cover;
}
.header-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.content-section { .content-section {
padding: 20px; padding: 20px;
} }
@ -43,21 +57,24 @@ body {
.content-section h1 { .content-section h1 {
font-size: 2.0em; font-size: 2.0em;
margin-bottom: 10px; margin-bottom: 10px;
color: rgb(230, 230, 230);
} }
.content-section h2 { .content-section h2 {
font-size: 1.5em; font-size: 1.5em;
color: rgb(100, 100, 100); color: rgb(200, 200, 200);
} }
.content-section h3 { .content-section h3 {
font-size: 1.2em; font-size: 1.2em;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
margin-bottom: 30px; margin-bottom: 30px;
color: rgb(200, 200, 200);
} }
.content-section p { .content-section p {
margin-bottom: 20px; margin-bottom: 20px;
color: rgb(150, 150, 150);
} }
.content-section a { .content-section a {
@ -77,7 +94,7 @@ body {
} }
.content-section code { .content-section code {
background-color: rgb(230, 230, 230); background-color: rgb(22, 32, 45);
border-radius: 4px; border-radius: 4px;
} }
@ -101,8 +118,16 @@ body {
padding: 15px; padding: 15px;
} }
tbody {
color: rgb(150, 150, 150);
}
tbody strong {
color: rgb(150, 150, 150);
}
.tr-colored { .tr-colored {
background-color: rgb(200, 200, 200); background-color: rgb(38, 61, 83);
} }
.content-section hr { .content-section hr {
@ -142,7 +167,7 @@ body {
.footer { .footer {
width: 100%; width: 100%;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
background-color: rgb(235, 235, 235); background-color: rgb(50, 50, 48);
padding: 1rem 1.5rem 1rem; padding: 1rem 1.5rem 1rem;
} }

19
app/views/header.php Normal file
View File

@ -0,0 +1,19 @@
<div class="header" style="background-image: url('{{ asset('img/header.png') }}');">
<div class="header-overlay">
<div class="container">
<div class="columns">
<div class="column is-2"></div>
<div class="column is-8">
<div class="content-section content-centered content-top-margin">
<h1>{{ env('APP_NAME') }}</h1>
<h2>{{ env('APP_DESCRIPTION') }}</h2>
</div>
</div>
<div class="column is-2"></div>
</div>
</div>
</div>
</div>

6
app/views/index.php
View File

@ -1,9 +1,3 @@
<div class="content-section content-centered content-top-margin">
<h1>{{ env('APP_NAME') }}</h1>
<h2>{{ env('APP_DESCRIPTION') }}</h2>
</div>
<div class="content-section"> <div class="content-section">
<a name="about"></a><br/><br/> <a name="about"></a><br/><br/>

1
app/views/layout.php
View File

@ -29,6 +29,7 @@
<body> <body>
<div id="app"> <div id="app">
@include('navbar.php') @include('navbar.php')
@include('header.php')
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">

8
app/views/navbar.php
View File

@ -1,4 +1,4 @@
<nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation"> <nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item navbar-item-brand is-font-title" href="{{ url('/') }}"> <a class="navbar-item navbar-item-brand is-font-title" href="{{ url('/') }}">
<img src="{{ asset('img/logo.png') }}"/>&nbsp;{{ env('APP_NAME') }} <img src="{{ asset('img/logo.png') }}"/>&nbsp;{{ env('APP_NAME') }}
@ -36,15 +36,15 @@
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<img src="https://img.shields.io/github/forks/{{ env('APP_PACKAGE') }}?style=social"/> <img src="https://img.shields.io/github/forks/{{ env('APP_PACKAGE') }}?style=flat"/>
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<img src="https://img.shields.io/github/stars/{{ env('APP_PACKAGE') }}?style=social"/> <img src="https://img.shields.io/github/stars/{{ env('APP_PACKAGE') }}?style=flat"/>
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<img src="https://img.shields.io/npm/dt/{{ env('APP_NPMPACKAGENAME') }}?style=social"/> <img src="https://img.shields.io/npm/dt/{{ env('APP_NPMPACKAGENAME') }}?style=flat"/>
</div> </div>
</div> </div>
</div> </div>

BIN
public/img/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

2
public/js/app.js
View File

File diff suppressed because one or more lines are too long