.row
.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
// Menu (top of page):
- // Left: hall, variants, mygames
+ // Left: hall, variants, problems, mygames
// Right: usermenu, settings, flag
nav
label.drawer-toggle(for="drawerControl")
input#drawerControl.drawer(type="checkbox")
- #menuBar(@click="hideDrawer")
+ #menuBar(@click="hideDrawer($event)")
label.drawer-close(for="drawerControl")
#leftMenu
router-link(to="/")
| {{ st.tr["Hall"] }}
router-link(to="/variants")
| {{ st.tr["Variants"] }}
+ router-link(to="/problems")
+ | {{ st.tr["Problems"] }}
router-link(to="/mygames")
| {{ st.tr["My games"] }}
#rightMenu
router-link.menuitem(to="/about") {{ st.tr["About"] }}
p.clickable(onClick="doClick('modalContact')")
| {{ st.tr["Contact"] }}
- a.menuitem(href="https://forum.vchess.club")
- | {{ st.tr["Forum"] }}
</template>
<script>
<style lang="sass">
html, *
font-family: "Open Sans", Arial, sans-serif
- --back-color: #f2f2f2
--a-link-color: black
--a-visited-color: black
body
padding: 0
min-width: 320px
+ --fore-color: #1c1e10 //#2c3e50
+ //--back-color: #f2f2f2
+ background-image: radial-gradient(white, #e6e6ff) //lavender)
#app
-webkit-font-smoothing: antialiased
.row > div
padding: 0
-.nopadding
- padding: 0
-
header
width: 100%
display: flex
.text-center
text-align: center
-.smallpad
- padding: 5px
-
-.emphasis
- font-style: italic
-
.clearer
clear: both
-.smallfont
- font-size: 0.8em
-
-.bigfont
- font-size: 1.2em
-
-.bold
- font-weight: bold
-
nav
width: 100%
margin: 0
@media screen and (max-width: 767px)
nav
+ height: 32px
border: none
+ & > label.drawer-toggle
+ font-size: 1.2rem
+ position: absolute
+ top: -12px
+ //padding: -5px 0 0 10px
[type="checkbox"].drawer+*
right: -767px
footer
border: none
-//#settings, #contactForm
-// max-width: 767px
-// @media screen and (max-width: 767px)
-// max-width: 100vw
-//[type="checkbox"].modal+div .card
-// max-width: 767px
-// max-height: 100vh
-//[type="checkbox"].modal+div .card.small-modal
-// max-width: 320px
-//[type="checkbox"].modal+div .card.big-modal
-// max-width: 90vw
+// Styles for diagrams and board (partial).
+// TODO: where to put that ?
+
+.light-square-diag
+ background-color: #e5e5ca
+
+.dark-square-diag
+ background-color: #6f8f57
+
+div.board
+ float: left
+ height: 0
+ display: inline-block
+ position: relative
+
+div.board8
+ width: 12.5%
+ padding-bottom: 12.5%
+
+div.board10
+ width: 10%
+ padding-bottom: 10%
+
+div.board11
+ width: 9.09%
+ padding-bottom: 9.1%
+
+img.piece
+ width: 100%
+
+img.piece, img.mark-square
+ max-width: 100%
+ height: auto
+ display: block
+
+img.mark-square
+ opacity: 0.6
+ width: 76%
+ position: absolute
+ top: 12%
+ left: 12%
+ opacity: .7
+
+.in-shadow
+ filter: brightness(50%)
</style>