Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Reworked client structure and optimized fonts

Browse Source
This commit is contained in:
Alexis
2020-07-17 21:02:13 +02:00
parent e1df40f474
commit 7711816a71
11 changed files with 65 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
client/public/img/favicon.ico → client/public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

5
client/public/index.html
View File

@@ -4,9 +4,10 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" crossorigin="anonymous">
<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext" crossorigin="anonymous">
<title>Auracle</title>
<link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
<script src="<%= BASE_URL %>libs/clipboard.min.js"></script>
</head>
<body>

7
client/public/libs/clipboard.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
client/public/libs/style.css
View File

@@ -1,68 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: "stgeorge";
src: url("/public/resources/stgeorge.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
.word-break{
word-wrap: break-word;
}
/*img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}*/
.cursor-pointer{
cursor: pointer;
}
.font-display{ font-family: 'Playfair Display', serif; }
.font-weight-100{ font-weight: 100; }
.font-weight-200{ font-weight: 200; }
.font-weight-300{ font-weight: 300; }
.font-weight-400{ font-weight: 400; }
.font-weight-500{ font-weight: 500; }
.font-weight-600{ font-weight: 600; }
.font-weight-700{ font-weight: 700; }
.font-weight-800{ font-weight: 800; }
.font-weight-900{ font-weight: 900; }
/*.pfp{
background: #f8f9fa;
border-radius: 50%;
}
.pfp-32{ height:32px; width:32px; }
.pfp-64{ height:64px; width:64px; }
.pfp-128{ height:128px; width:128px; }
.pfp-256{ height:256px; width:256px; }*/
.max-540{ max-width: 540px; }
.max-720{ max-width: 720px; }
.max-960{ max-width: 960px; }
.max-1140{ max-width: 1140px; }
.line-height-100{ line-height: 100%; }
@font-face{
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/libs/material-design-icons.woff2') format('woff2');
}
.mad{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
transform: translateY(12.5%);
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
body{
background: url('/img/bg1.png') center center fixed repeat;
}

7
client/src/app.vue
View File

@@ -12,3 +12,10 @@ export default {
name: 'app'
}
</script>
<style lang="scss" scoped>
#srs {
min-height: 100vh;
background: url('/img/bg1.png') center center fixed repeat;
}
</style>

0
client/public/libs/material-design-icons.woff2 → client/src/assets/fonts/material-design-icons.woff2
View File

0
client/public/img/bg1.png → client/src/assets/images/bg1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 228 KiB

36
client/src/assets/scss/_fonts.scss
View File

@@ -0,0 +1,36 @@
.font-display{ font-family: 'Playfair Display', serif; }
.font-weight-100{ font-weight: 100; }
.font-weight-200{ font-weight: 200; }
.font-weight-300{ font-weight: 300; }
.font-weight-400{ font-weight: 400; }
.font-weight-500{ font-weight: 500; }
.font-weight-600{ font-weight: 600; }
.font-weight-700{ font-weight: 700; }
.font-weight-800{ font-weight: 800; }
.font-weight-900{ font-weight: 900; }
.line-height-100{ line-height: 100%; }
@font-face{
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('../fonts/material-design-icons.woff2') format('woff2');
}
.mad {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
transform: translateY(12.5%);
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

31
client/src/assets/scss/_global.scss
View File

@@ -1,6 +1,5 @@
// Other global files
@import '_variables';
@import '_mixins';
@import '_fonts';
// RESETS
@@ -13,29 +12,21 @@ html {
color: $primary--base;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html *,
html *::before,
html *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
outline: none;
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
&:before, &:after {
box-sizing: border-box;
}
}
}
@at-root {
@-ms-viewport { width: device-width; }
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style-type: none;
}
@@ -55,11 +46,13 @@ hr {
.nav-link {
cursor: pointer;
}
.btn {
margin-right: 5px;
}
.word-break{ word-wrap: break-word; }
.cursor-pointer{ cursor: pointer; }
// LAYOUTS
.fullpage {
min-height: calc(100vh - 56px);

6
client/src/assets/scss/_mixins.scss
View File

@@ -1,6 +0,0 @@
@mixin blue-glow-box($radius) {
box-shadow: 0 0 .5rem * $radius #fff, 0 0 1rem * $radius $primary--blue, 0 0 2rem * $radius $primary--blue;
}
@mixin blue-glow-text($radius) {
text-shadow: 0 0 .5rem * $radius #fff, 0 0 1rem * $radius $primary--blue, 0 0 2rem * $radius $primary--blue;
}

9
client/src/pages/index-page.vue
View File

@@ -5,7 +5,7 @@
<h1 class="title text-dark mb-4 font-display line-height-100">"C'est magique, ta gueule."</h1>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<hr class="w-50">
<div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
<div class="lead"><span class="font-display">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
</main>
</section>
</div>
@@ -24,9 +24,14 @@ section {
width: 1000px;
.title {
font-size: 5rem;
font-weight: 700;
font-weight: 900;
text-align: center;
}
.lead {
.font-display {
font-weight: 700;
}
}
}
}
@media only screen and (max-width: 600px) {