You've already forked AstralRinth
forked from didirus/AstralRinth
Initial commit
This commit is contained in:
Mikhail Oleynikov
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
*.log
|
||||||
|
.cache
|
||||||
|
.DS_Store
|
||||||
|
src/.temp
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
15
README.md
Normal file
15
README.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
### DISCLAIMER
|
||||||
|
- I use Gridsome for sketching
|
||||||
|
- It won't be Gridsome after I finish the sketch
|
||||||
|
- It will be Nuxt
|
||||||
|
- No, it likely won't be not Nuxt
|
||||||
|
- Vue has 2 major concepts you need to grasp: components and reactivity.
|
||||||
|
Catch up on that, and you'll be understanding the code easily
|
||||||
|
- Node is performant enough, we will apply aggressive Nginx caching to it
|
||||||
|
to ensure that even more
|
||||||
|
- SSR is rendering as much HTML on the server as possible and sending
|
||||||
|
ready to display HTML to the client instead of JS creating it client-side
|
||||||
|
- Hydration is constructing vDOM from ready-to-display server-
|
||||||
|
or statically rendered HTML
|
||||||
|
- vDOM is a representation of DOM created by Vue to batch DOM changes for
|
||||||
|
performance reason
|
||||||
4
gridsome.config.js
Normal file
4
gridsome.config.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
module.exports = {
|
||||||
|
siteName: 'Staging',
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
11918
package-lock.json
generated
Normal file
11918
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "mineunity",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "gridsome build",
|
||||||
|
"develop": "gridsome develop",
|
||||||
|
"explore": "gridsome explore"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"gridsome": "^0.7.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"sass-loader": "^8.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/assets/images/aof-mini.png
Normal file
BIN
src/assets/images/aof-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/avatar.jpg
Normal file
BIN
src/assets/images/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
0
src/assets/styles/global.scss
Normal file
0
src/assets/styles/global.scss
Normal file
BIN
src/favicon.png
Normal file
BIN
src/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
393
src/layouts/Default.vue
Normal file
393
src/layouts/Default.vue
Normal file
@@ -0,0 +1,393 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<aside>
|
||||||
|
<div class="logo-wrapper">
|
||||||
|
<g-image class="logo" src="~/assets/images/logo.png"/>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<section class="links">
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<section>
|
||||||
|
<g-link to="/mods">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<polyline points="16 18 22 12 16 6"/>
|
||||||
|
<polyline points="8 6 2 12 8 18"/>
|
||||||
|
</svg>
|
||||||
|
<span>Mods</span>
|
||||||
|
</g-link>
|
||||||
|
<g-link to="/modpacks">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/>
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||||||
|
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Modpacks
|
||||||
|
</span>
|
||||||
|
</g-link>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h3>Community</h3>
|
||||||
|
<section>
|
||||||
|
<g-link to="/forums">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Forums</span>
|
||||||
|
</g-link>
|
||||||
|
<g-link to="/support">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<circle cx="12" cy="12" r="4"/>
|
||||||
|
<line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/>
|
||||||
|
<line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/>
|
||||||
|
<line x1="14.83" y1="9.17" x2="18.36" y2="5.64"/>
|
||||||
|
<line x1="4.93" y1="19.07" x2="9.17" y2="14.83"/>
|
||||||
|
</svg>
|
||||||
|
<span>Support</span>
|
||||||
|
</g-link>
|
||||||
|
<g-link to="/guides">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
||||||
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Guides</span>
|
||||||
|
</g-link>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h3>Dashboard</h3>
|
||||||
|
<section>
|
||||||
|
<g-link to="/dashboard/projects">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
<span>My projects</span>
|
||||||
|
</g-link>
|
||||||
|
<g-link to="/dashboard/analytics">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||||
|
</svg>
|
||||||
|
<span>Analytics</span>
|
||||||
|
</g-link>
|
||||||
|
<g-link to="/dashboard/rewards">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="7"/>
|
||||||
|
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>
|
||||||
|
</svg>
|
||||||
|
<span>Rewards</span>
|
||||||
|
</g-link>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="user-actions">
|
||||||
|
<div class="avatar">
|
||||||
|
<g-image src="~/assets/images/avatar.jpg"/>
|
||||||
|
<span>
|
||||||
|
falseresync
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="notifications">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||||
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<!-- <header>
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<input type="search" name="search" id="search" placeholder="Search...">
|
||||||
|
<!/-- Icon follows and not precedes the input so we can target it with CSS' ~ selector --/>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<circle cx="11" cy="11" r="8"/>
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</header> -->
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/**
|
||||||
|
* Colors
|
||||||
|
*/
|
||||||
|
--color-text: #1A202C;
|
||||||
|
--color-bg: #FFFFFF;
|
||||||
|
|
||||||
|
--color-text-inverted: var(--color-bg);
|
||||||
|
--color-bg-inverted: var(--color-text);
|
||||||
|
|
||||||
|
--color-brand: #4D9227;
|
||||||
|
|
||||||
|
--color-grey-0: #F7FAFC;
|
||||||
|
--color-grey-1: #EDF2F7;
|
||||||
|
--color-grey-2: #E2E8F0;
|
||||||
|
--color-grey-3: #CBD5E0;
|
||||||
|
--color-grey-4: #A0AEC0;
|
||||||
|
--color-grey-5: #718096;
|
||||||
|
--color-grey-6: #4A5568;
|
||||||
|
--color-grey-7: #2D3748;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defaults
|
||||||
|
*/
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
aside {
|
||||||
|
border-right: 1px solid var(--color-grey-2);
|
||||||
|
display: flex; // Flex here to safely expand navigation height
|
||||||
|
flex-direction: column;
|
||||||
|
width: 15%;
|
||||||
|
|
||||||
|
.logo-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
height: 3.5rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 2rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
h3 {
|
||||||
|
color: #718096;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border-left: 4px solid var(--color-grey-3);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
color: var(--color-grey-5);
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&.active {
|
||||||
|
background-color: var(--color-grey-1);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
box-shadow: -4px 0 0 0 var(--color-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-actions {
|
||||||
|
align-items: center;
|
||||||
|
border-top: 2px solid var(--color-grey-2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--color-grey-5);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
img {
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 2rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: var(--color-grey-0);
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
header {
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
box-shadow: 0 1px 1px 0 var(--color-grey-2);
|
||||||
|
display: flex;
|
||||||
|
height: 3.5rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3rem 0 1rem;
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--color-grey-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
& + svg {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--color-grey-7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--color-grey-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 1rem 3rem 1rem 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
src/main.js
Normal file
6
src/main.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import DefaultLayout from '~/layouts/Default.vue'
|
||||||
|
import '~/assets/styles/global.scss'
|
||||||
|
|
||||||
|
export default function (Vue, { router, head, isClient }) {
|
||||||
|
Vue.component('Layout', DefaultLayout)
|
||||||
|
}
|
||||||
5
src/pages/Index.vue
Normal file
5
src/pages/Index.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<Layout>
|
||||||
|
The actual dashbo
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
5
src/pages/dashboard/Analytics.vue
Normal file
5
src/pages/dashboard/Analytics.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<Layout>
|
||||||
|
The actual dashboaard, mod list, mod README will go here
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
121
src/pages/dashboard/Projects.vue
Normal file
121
src/pages/dashboard/Projects.vue
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<layout>
|
||||||
|
<h2>My projects</h2>
|
||||||
|
|
||||||
|
<h3>Mods</h3>
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col span="2">
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Role</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Downloads</th>
|
||||||
|
<th>Last updated</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<g-image src="~/assets/images/aof-mini.png" />
|
||||||
|
All of Fabric Mini
|
||||||
|
</td>
|
||||||
|
<td>Contributor</td>
|
||||||
|
<td><span class="badge red">Abandoned</span></td>
|
||||||
|
<td>357</td>
|
||||||
|
<td>Apr 1, 2020</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finite Water</td>
|
||||||
|
<td>Owner</td>
|
||||||
|
<td><span class="badge green">Active</span></td>
|
||||||
|
<td>274</td>
|
||||||
|
<td>Nov 4, 2019</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivatech</td>
|
||||||
|
<td>Contributor</td>
|
||||||
|
<td><span class="badge green">Active</span></td>
|
||||||
|
<td>2,381</td>
|
||||||
|
<td>Jul 31, 2019</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
|
||||||
|
&.red {
|
||||||
|
background-color: #FED7D7;
|
||||||
|
color: #9B2C2C;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
background-color: #C6F6D5;
|
||||||
|
color: #276749;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
background: var(--color-bg);
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 2px 3px 1px var(--color-grey-2);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
* {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:not(:last-child),
|
||||||
|
tr:first-child {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid var(--color-grey-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #718096;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
&:nth-child(5n - 4) {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:nth-child(5n - 4)) {
|
||||||
|
min-width: 15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user