diff --git a/public_test/main.css b/public_test/main.css new file mode 100644 index 0000000..6ea178b --- /dev/null +++ b/public_test/main.css @@ -0,0 +1,209 @@ +*, +*:before, +*:after { + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; +} +html { + font-family: 'Lato', sans-serif; + font-size: 18px; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +body { + color: #666; + margin: 0; + padding: 0; + text-align: center; +} +a { + text-decoration: none; + color: #000; +} +.content { + position: relative; + max-width: 640px; + padding-left: 25px; + padding-right: 25px; + margin: 0 auto; +} +header { + background: #292829; + padding: 20px; +} +header .content { + display: flex; +} +header .spacer { + flex: 1; +} +header a { + color: rgba(255,255,255,0.5); + font-weight: 700; + font-size: 1rem; + padding: 0 0.7rem; +} +header a:first-child { + padding-left: 0; +} +header a:last-child { + padding-right: 0; +} +header a:hover { + color: #f7df31; +} +h1 { + color: #000; + font-size: 3rem; +} +h2 { + color: #000; + font-size: 1.4rem; + margin-top: 3rem; +} +p { + font-size: 1rem; + line-height: 1.8; + margin: 0.5rem 0; + font-weight: 400; + text-align: justify; +} +p a { + padding-left: 2px; + padding-right: 2px; + margin-left: -2px; + margin-right: -2px; + border-radius: 2px; +} +p a, +.faq-item a { + text-decoration: underline; +} +.faq-item a:hover, +p a:hover { + background: #f7df31; + text-decoration: none; +} +ul { + text-align: left; +} +.release { + position: relative; + background: #eee; + border-radius: 4px; + margin: 40px 0; + padding: 20px; + min-height: 160px; +} +.release-logo { + position: absolute; + top: 20px; + left: 26px; + height: 120px; +} +.release-details { + padding-left: 150px; + text-align: left; +} +.release-version { + display: block; + font-size: 1.4rem; + font-weight: 700; + color: #000; +} +.release-version em { + color: rgba(0,0,0,0.5); + font-style: normal; + font-size: 1.1rem; +} +.release-downloads { + color: rgba(0,0,0,0.5); + font-size: 0.9rem; +} +.release-details a:hover { + text-decoration: underline; +} +.note { + background-color: #fafad2; + padding: 5px; + padding-left: 20px; + padding-right: 20px; + margin: 10px; + font-size: 0.9rem; +} +nav { + font-size: 0.9rem; + margin: 70px 0 30px 0; + transition: all 0.2s; +} +nav a { + display: inline-block; + line-height: 2.2; + padding: 0 15px; + margin: 0; + border-left: 1px solid #ddd; + transition: all 0.2s; +} +nav a:first-child, +nav a:hover, +nav a:hover + a { + border-color: transparent; +} +nav a:hover { + background: #f7df31; + color: #292829; + border-radius: 3px; +} +p.lead { + text-align: center; +} +@media (max-width: 560px) { + nav a { + line-height: 3; + display: block; + border: none; + } + .release-version em { + display: block; + } +} +@media (max-width: 480px) { + h1 { + font-size: 2rem; + } + p { + line-height: 1.6; + } + nav { + margin-top: 20px; + } + header .content { + padding: 0; + } + header a { + padding-left: 1rem; + } +} +@media (max-width: 410px) { + .content { + padding-left: 15px; + padding-right: 15px; + } + .release-logo-link { + display: block; + text-align: center; + } + .release-logo { + position: relative; + top: initial; + left: initial; + } + .release-version { + text-align: center; + } + .release-details { + padding-left: initial; + padding-top: initial; + } +} diff --git a/source/styles/main.styl b/source/styles/main.styl new file mode 100644 index 0000000..d6f3ddb --- /dev/null +++ b/source/styles/main.styl @@ -0,0 +1,206 @@ +*, *:before, *:after + box-sizing border-box + -webkit-tap-highlight-color transparent + +html + font-family 'Lato', sans-serif + font-size 18px + line-height 1.5 + -webkit-font-smoothing antialiased + -moz-osx-font-smoothing grayscale + +body + color #666 + margin 0 + padding 0 + text-align center + +a + text-decoration none + color #000 + +.content + position relative + max-width 640px + padding-left 25px + padding-right 25px + margin 0 auto + +header + background #292829 + padding 20px + + .content + display flex + + .spacer + flex 1 + + a + color rgba(255, 255, 255, 0.5) + font-weight 700 + font-size 1rem + padding 0 0.7rem + + &:first-child + padding-left 0 + + &:last-child + padding-right 0 + + &:hover + color #F7DF31 + +h1 + color black + font-size 3rem + +h2 + color black + font-size 1.4rem + margin-top 3rem + +p + font-size 1rem + line-height 1.8 + margin 0.5rem 0 + font-weight 400 + text-align justify + + a + padding-left 2px + padding-right 2px + margin-left -2px + margin-right -2px + border-radius 2px + +p a, +.faq-item a + text-decoration underline + + +.faq-item a:hover, +p a:hover + background #F7DF31 + text-decoration none + +ul + text-align left + +.release + position relative + background #EEE + border-radius 4px + margin 40px 0 + padding 20px + min-height 160px + +.release-logo + position absolute + top 20px + left 26px + height 120px + +.release-details + padding-left 150px + text-align left + +.release-version + display block + font-size 1.4rem + font-weight 700 + color black + +.release-version em + color rgba(0, 0, 0, 0.5) + font-style normal + font-size 1.1rem + +.release-downloads + color rgba(0, 0, 0, 0.5) + font-size 0.9rem + +.release-details a:hover + text-decoration underline + +.note + background-color #FAFAD2 + padding 5px + padding-left 20px + padding-right 20px + margin 10px + font-size 0.9rem + +nav + font-size 0.9rem + margin 70px 0 30px 0 + transition all 0.2s + + a + display inline-block + line-height 2.2 + padding 0 15px + margin 0 + border-left 1px solid #DDD + transition all 0.2s + + &:first-child, &:hover, &:hover + a + border-color transparent + + &:hover + background #F7DF31 + color #292829 + border-radius 3px + +p.lead + text-align center + + +@media (max-width: 560px) + nav a + line-height 3 + display block + border none + + .release-version em + display block + + +@media (max-width: 480px) + h1 + font-size 2rem + + p + line-height 1.6 + + nav + margin-top 20px + + header + .content + padding 0 + + a + padding-left 1rem + + +@media (max-width: 410px) + .content + padding-left 15px + padding-right 15px + + .release-logo-link + display block + text-align center + + .release-logo + position relative + top initial + left initial + + .release-version + text-align center + + .release-details + padding-left initial + padding-top initial