wip
This commit is contained in:
parent
f4bf824e79
commit
d1dce76e28
5 changed files with 23 additions and 26 deletions
|
@ -8,12 +8,4 @@
|
||||||
|
|
||||||
html
|
html
|
||||||
height 100%
|
height 100%
|
||||||
background #ececed !important
|
background var(--bg)
|
||||||
|
|
||||||
&[data-darkmode]
|
|
||||||
background #191B22 !important
|
|
||||||
|
|
||||||
body
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
min-height 100%
|
|
||||||
|
|
|
@ -226,8 +226,8 @@ root(isDark)
|
||||||
|
|
||||||
.announcements
|
.announcements
|
||||||
> article
|
> article
|
||||||
background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
|
background var(--mobileAnnouncement)
|
||||||
color isDark ? #fff : #3f4967
|
color var(--mobileAnnouncementFg)
|
||||||
padding 16px
|
padding 16px
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
|
<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
|
<img svg-inline src="../../../../assets/title.svg" :alt="name">
|
||||||
<p class="host">{{ host }}</p>
|
<p class="host">{{ host }}</p>
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<h2>{{ name }}</h2>
|
<h2>{{ name }}</h2>
|
||||||
|
@ -144,16 +144,17 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100px
|
height 100px
|
||||||
background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
|
background linear-gradient(transparent, var(--bg))
|
||||||
|
|
||||||
> div:not(.banner)
|
> div:not(.banner)
|
||||||
padding 32px
|
padding 32px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 500px
|
max-width 500px
|
||||||
|
|
||||||
> img
|
> svg
|
||||||
display block
|
display block
|
||||||
max-width 200px
|
width 200px
|
||||||
|
height 50px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
> .host
|
> .host
|
||||||
|
@ -169,8 +170,8 @@ root(isDark)
|
||||||
> .about
|
> .about
|
||||||
margin-top 16px
|
margin-top 16px
|
||||||
padding 16px
|
padding 16px
|
||||||
color #555
|
color var(--text)
|
||||||
background #fff
|
background var(--face)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> h2
|
> h2
|
||||||
|
@ -238,7 +239,7 @@ root(isDark)
|
||||||
margin 16px 0
|
margin 16px 0
|
||||||
padding 8px
|
padding 8px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color #444
|
color var(--text)
|
||||||
background rgba(#000, 0.1)
|
background rgba(#000, 0.1)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
|
@ -249,9 +250,9 @@ root(isDark)
|
||||||
margin 16px 0
|
margin 16px 0
|
||||||
|
|
||||||
> article
|
> article
|
||||||
background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
|
background var(--mobileAnnouncement)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
color isDark ? #fff : #3f4967
|
color var(--mobileAnnouncementFg)
|
||||||
padding 16px
|
padding 16px
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
|
@ -263,10 +264,10 @@ root(isDark)
|
||||||
margin 16px 0
|
margin 16px 0
|
||||||
padding 32px
|
padding 32px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
background #fff
|
background var(--face)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
color #3a3e46
|
color var(--text)
|
||||||
|
|
||||||
> h1
|
> h1
|
||||||
margin 0
|
margin 0
|
||||||
|
@ -279,12 +280,12 @@ root(isDark)
|
||||||
|
|
||||||
> section
|
> section
|
||||||
> h2
|
> h2
|
||||||
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> section
|
> section
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
padding-bottom 16px
|
padding-bottom 16px
|
||||||
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> h3
|
> h3
|
||||||
margin-bottom 8px
|
margin-bottom 8px
|
||||||
|
@ -301,7 +302,7 @@ root(isDark)
|
||||||
|
|
||||||
> .info
|
> .info
|
||||||
padding 16px 0
|
padding 16px 0
|
||||||
border solid 2px #ddd
|
border solid 2px rgba(0, 0, 0, 0.1)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> *
|
> *
|
||||||
|
@ -309,7 +310,7 @@ root(isDark)
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
text-align center
|
text-align center
|
||||||
color #444
|
color var(--text)
|
||||||
|
|
||||||
> small
|
> small
|
||||||
display block
|
display block
|
||||||
|
|
|
@ -120,6 +120,8 @@
|
||||||
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
||||||
"desktopSettingsNavItemHover": ":lighten<10<$text",
|
"desktopSettingsNavItemHover": ":lighten<10<$text",
|
||||||
|
|
||||||
|
"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
|
||||||
|
"mobileAnnouncementFg": "#fff",
|
||||||
"mobileSignedInAsBg": "#273c34",
|
"mobileSignedInAsBg": "#273c34",
|
||||||
"mobileSignedInAsFg": "#49ab63",
|
"mobileSignedInAsFg": "#49ab63",
|
||||||
"mobileSignoutBg": "#652222",
|
"mobileSignoutBg": "#652222",
|
||||||
|
|
|
@ -120,6 +120,8 @@
|
||||||
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
||||||
"desktopSettingsNavItemHover": ":darken<10<$text",
|
"desktopSettingsNavItemHover": ":darken<10<$text",
|
||||||
|
|
||||||
|
"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
|
||||||
|
"mobileAnnouncementFg": "#3f4967",
|
||||||
"mobileSignedInAsBg": "#fcfff5",
|
"mobileSignedInAsBg": "#fcfff5",
|
||||||
"mobileSignedInAsFg": "#2c662d",
|
"mobileSignedInAsFg": "#2c662d",
|
||||||
"mobileSignoutBg": "#fff6f5",
|
"mobileSignoutBg": "#fff6f5",
|
||||||
|
|
Loading…
Reference in a new issue