From 3e7c9a549f28f1a27956386f8be1a0ae0d1bdfbc Mon Sep 17 00:00:00 2001 From: Kristjan Vaga Date: Tue, 10 Nov 2015 01:30:50 +0200 Subject: [PATCH 1/2] Reworking landing page styles. --- main.css | 8 +- tabs/landing.css | 372 ++++++++++++++++++++++++++++++++++++++++------ tabs/landing.html | 83 ++++++----- 3 files changed, 375 insertions(+), 88 deletions(-) diff --git a/main.css b/main.css index 8ad9b5bc..d101686a 100644 --- a/main.css +++ b/main.css @@ -141,7 +141,6 @@ input[type="number"]::-webkit-inner-spin-button { .headerbar { height:110px; width:100%; - float:left; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15)); } @@ -1042,8 +1041,8 @@ dialog { for testing: */ padding: 20px; position: relative; - float: left; - width:calc(100% - 40px); + /*float: left; + width:calc(100% - 40px);*/ } .content_toolbar { @@ -1575,8 +1574,7 @@ dialog { .content_wrapper { padding: 15px; - width:calc(100% - 30px); - + /*width:calc(100% - 30px);*/ } .tab_title { diff --git a/tabs/landing.css b/tabs/landing.css index 88a6bf1d..f5bb81b8 100755 --- a/tabs/landing.css +++ b/tabs/landing.css @@ -1,16 +1,204 @@ + +/* general layout */ + .tab-landing { - margin:0px; +} + +.tab-landing .content_wrapper { + padding: 0; + box-sizing: content-box; +} + +.tab-landing .content_top { + height: 150px; + background: #59aa29; + padding: 20px; +} + +.tab-landing .content_mid { + background-color:#eaeaea; + overflow: hidden; +} + +.tab-landing .content_foot { + clear: both; + padding: 20px; +} + +/*.tab-landing .changelog_wrapper { + display: none; +}*/ + + + +/* hero block */ + +.tab-landing .logowrapper { + margin-left:auto; + margin-right:auto; + width:800px; + color:white; + margin-top:25px; + font-size:14px; + font-family: 'open_sanslight', Arial; +} + +.tab-landing .logowrapper img { + width:420px; + margin:5px; +} + +.tab-landing .logowrapper span { + font-size:22px; + font-family: 'open_sanslight', Arial; +} + + + + + +/* sponsors blocks */ + +.sponsors .title { + text-transform:uppercase; + font-size:10px; + } + +.sponsors { + margin-left:auto; + margin-right:auto; + text-align:center; + color: silver; +} + +.sponsors ul { + margin-top:10px; +} + +.sponsors li { + display: inline-block; + margin-right:10px; +} + +.sponsors li a { + border-radius:3px; + padding:2px; + padding-left:4px; + padding-right:4px; + font-size:13px; + line-height:10px; + font-weight:normal; + font-family: 'open_sanslight', Arial; + border: 1px solid white; +} + +.sponsors li a:hover { + border-color: #eaeaea; +} + +.text1, .text2, .text3 { + margin-top:15px; + margin-bottom:15px; + font-weight:normal; + font-family: 'open_sansregular', Arial; + font-size:12px; +} + + + + +/* text columns */ + +.tab-landing .content_mid .column .wrap { + padding: 20px; +} + + +.tab-landing .content_mid h2, +.tab-landing .content_mid h3 { + margin-bottom: 10px; +} +.tab-landing .content_mid h3 { + font-size: 12px; +} + + +.tab-landing .content_mid .text1 { + width:37%; +} + + +.tab-landing .content_mid .text2 { + width:37%; +} +.tab-landing .content_mid .text2 ul { + margin-top: 10px; +} +.tab-landing .content_mid .text2 li { + padding: 5px 0; + border-top: 1px dashed silver; +} + + +.tab-landing .content_mid .text3 { + width:26%; +} +.tab-landing .content_mid .text3 .wrap { + border: 1px solid silver; + border-radius: 5px; + background: white; + margin-right: 20px; + margin-top: 5px; +} + + + +/*.tab-landing .content_mid .text1 { + width:41%; +}*/ +/*.tab-landing .content_mid .text1 .spacer_left { + width:calc(100% - 30px); + padding-left:20; + padding-right:10px; +}*/ + +/*.tab-landing .content_mid .text2 { + width:37%; +}*/ + +/*.tab-landing .content_mid .text3 { + width: calc(22% - 15px); + margin-right:15px; +} +.tab-landing .content_mid .text3 .spacer_right { + padding-left:15px; + width:calc(100% - 25px); +} +.tab-landing .content_mid .text3 .gui_box { + min-height:200px; + border:#59aa29 1px solid; +} +.tab-landing .content_mid .text3 .gui_box .spacer { + margin-top:10px; + margin-bottom:10px; +}*/ + + + + +/*.tab-landing { + margin:0px; padding:0px; background-color:#436c2c; } .tab-landing { - margin:0px; + margin:0px; padding:0px; width:100%; position:absolute; } - + .tab-landing .content_top { float:left; width:100%; @@ -19,19 +207,19 @@ height:35%; height:190px; } - + .tab-landing .content_mid { float:left; width:100%; background-color:#eaeaea; } - + .tab-landing .content_foot { float:left; width:100%; } - + .tab-landing .logowrapper { float:both; margin-left:auto; @@ -42,7 +230,7 @@ font-size:14px; font-family: 'open_sanslight', Arial; } - + .tab-landing .logowrapper img { width:420px; margin:5px; @@ -52,14 +240,14 @@ font-size:22px; font-family: 'open_sanslight', Arial; } - + .tab-landing .content_wrapper { - margin:0px; + margin:0px; padding:0px; width: calc(100% - 0px); height: 100%; } - + .tab-landing .left { width: 60%; position: relative; @@ -90,9 +278,9 @@ border-bottom-left-radius:3px; } - + #changelog_button { - display:block; + display:block; color:white; height:30px; width: 100px; @@ -101,14 +289,14 @@ margin-left: 6px; margin-top: 74px; } - + .changelog_wrapper { right:0px; width:30px; height: 100%; position: fixed; } - + .changelog { height:calc(100% - 0px); right:0px; @@ -117,8 +305,8 @@ position:absolute; color:#ccc; } - - + + .changelog .title { line-height: 20px; text-align:left; @@ -148,7 +336,7 @@ } .changelog .changewrapper ul { - margin-bottom:10px; + margin-bottom:10px; line-height:15px; } @@ -173,7 +361,7 @@ .text2 ul { - margin-bottom:0px; + margin-bottom:0px; line-height:15px; } @@ -184,14 +372,14 @@ border-top:1px solid #ccc; padding-top:4px; padding-bottom:4px !important; -} - - +} + + .sponsors .title { text-transform:uppercase; font-size:10px; - } - + } + .sponsors { float:both; margin-left:auto; @@ -199,19 +387,19 @@ width:825px; text-align:center; color:rgba(255,255,255,0.50); - margin-top:2%; } - + margin-top:2%; } + .sponsors ul { margin-top:10px; float:left; - } - + } + .sponsors li { float:left; margin-right:10px; display:block; - } - + } + .sponsors li a { border-radius:3px; padding:2px; @@ -219,16 +407,16 @@ padding-right:4px; font-size:13px; line-height:10px; - color:white; + color:white; font-weight:normal; font-family: 'open_sanslight', Arial; - } - + } + .sponsors li a:hover { background-color:rgba(255,255,255,0.30); color:#fff; - } - + } + .text1, .text2, .text3 { margin-top:15px; margin-bottom:15px; @@ -237,21 +425,21 @@ font-size:12px; } - + .text3 { font-size:11px; } - + .mid_head { font-size:13px; line-height:10px; - color:#000; + color:#000; font-weight:bold; - margin-bottom:10px; + margin-bottom:10px; line-height: 16px; } - + .donate { float:left; margin-top:15px; @@ -259,11 +447,105 @@ text-align:center; margin-bottom: -5px; } - - - - + + + + .text1 a:hover, .text2 a:hover, .text3 a:hover { color:#59aa29; - } - \ No newline at end of file + }*/ + + + + + +#changelog_bt { + height: 84px; + width:30px; + background-color:black; + margin-left:-30px; + margin-top:30px; + position:fixed; + border-top-left-radius:3px; + border-bottom-left-radius:3px; +} + +#changelog_button { + display:block; + color:white; + height:30px; + width:100px; + transform:rotate(270deg); + transform-origin: left top 0; + margin-left:6px; + margin-top:74px; +} + +.changelog_wrapper { + right:0px; + width:300px; + height:100%; + position:absolute; +} + +.changelog { + height:100%; + right:0px; + width:0px; + position:absolute; + overflow-y: scroll; + background-color:black; + color:#ccc; +} + + +.changelog .title { + line-height: 20px; + text-align:left; + padding-left:10px; + font-weight: bold; + color: #56AC1D; + text-transform:uppercase; + +} +.changelog .changewrapper { + height: 100%; + padding: 10px; + overflow-y: hidden; + overflow-x: hidden; + -webkit-user-select: text; + opacity:0; +} + +.changelog .changewrapper.active { + overflow-y: scroll; + opacity:0; +} + +.changelog .changewrapper span { + font-weight: bold; + line-height:22px; +} + +.changelog .changewrapper ul { + margin-bottom:10px; + line-height:15px; +} + +.changelog .changewrapper ul span { + font-weight: bold; + color:#fff; +} + +.changelog .changewrapper li { + font-weight: normal; + margin-left: 0px; + border-top:1px solid #656565; + padding-top:5px; + padding-bottom:5px; +} + + +.changelog .changewrapper p { + margin-bottom: 5px; +} diff --git a/tabs/landing.html b/tabs/landing.html index ff506dc3..98b4ab5c 100644 --- a/tabs/landing.html +++ b/tabs/landing.html @@ -1,38 +1,53 @@
+
+
+ +
+
+ +
+
+
-
- Welcome to
- -
-
+
+ Welcome to
+ +
+
-
-
-
Hardware
-
-
+ +
+
+

Hardware

+
+
-
-
-
-
-
+
+
+

+
+
-
-
-
-
-
-
- -
-
-
+
+
+

+
+ +
@@ -50,14 +65,6 @@
-
-
- -
-
- -
-
-
+
-
\ No newline at end of file +
From f7fedc22482cf24786b73ce6780a9dbae60f5fcb Mon Sep 17 00:00:00 2001 From: Kristjan Vaga Date: Tue, 10 Nov 2015 02:03:26 +0200 Subject: [PATCH 2/2] Rework changelog sidebar styles. --- tabs/landing.css | 353 +++-------------------------------------------- 1 file changed, 23 insertions(+), 330 deletions(-) diff --git a/tabs/landing.css b/tabs/landing.css index f5bb81b8..dd7ae5c4 100755 --- a/tabs/landing.css +++ b/tabs/landing.css @@ -1,4 +1,6 @@ + + /* general layout */ .tab-landing { @@ -25,10 +27,6 @@ padding: 20px; } -/*.tab-landing .changelog_wrapper { - display: none; -}*/ - /* hero block */ @@ -55,8 +53,6 @@ - - /* sponsors blocks */ .sponsors .title { @@ -106,7 +102,6 @@ - /* text columns */ .tab-landing .content_mid .column .wrap { @@ -150,324 +145,23 @@ margin-right: 20px; margin-top: 5px; } - - - -/*.tab-landing .content_mid .text1 { - width:41%; -}*/ -/*.tab-landing .content_mid .text1 .spacer_left { - width:calc(100% - 30px); - padding-left:20; - padding-right:10px; -}*/ - -/*.tab-landing .content_mid .text2 { - width:37%; -}*/ - -/*.tab-landing .content_mid .text3 { - width: calc(22% - 15px); - margin-right:15px; -} -.tab-landing .content_mid .text3 .spacer_right { - padding-left:15px; - width:calc(100% - 25px); -} -.tab-landing .content_mid .text3 .gui_box { - min-height:200px; - border:#59aa29 1px solid; -} -.tab-landing .content_mid .text3 .gui_box .spacer { - margin-top:10px; - margin-bottom:10px; -}*/ - - - - -/*.tab-landing { - margin:0px; - padding:0px; - background-color:#436c2c; - } - -.tab-landing { - margin:0px; - padding:0px; - width:100%; - position:absolute; - } - -.tab-landing .content_top { - float:left; - width:100%; - background-color:#59aa29; - height:240px; - height:35%; - height:190px; - } - -.tab-landing .content_mid { - float:left; - width:100%; - background-color:#eaeaea; - - } - -.tab-landing .content_foot { - float:left; - width:100%; - } - -.tab-landing .logowrapper { - float:both; - margin-left:auto; - margin-right:auto; - width:450px; - color:white; - margin-top:25px; - font-size:14px; - font-family: 'open_sanslight', Arial; - } - -.tab-landing .logowrapper img { - width:420px; - margin:5px; - } - -.tab-landing .logowrapper span { - font-size:22px; - font-family: 'open_sanslight', Arial; - } - -.tab-landing .content_wrapper { - margin:0px; - padding:0px; - width: calc(100% - 0px); - height: 100%; - } - -.tab-landing .left { - width: 60%; - position: relative; -} -.tab-landing .right { - float: left; - - margin-left: 10px; - width: calc(40% - 10px); - position: relative; +.tab-landing .content_mid .text3 .donate { + margin-top: 10px; } -.contributing li { - list-style-type: disc; - list-style-position: initial; - margin-left: 20px; -} + +/* changelog block */ #changelog_bt { height: 84px; width:30px; - background-color:black; - margin-left:-30px; - margin-top:30px; - position:absolute; - border-top-left-radius:3px; - border-bottom-left-radius:3px; - - } - -#changelog_button { - display:block; - color:white; - height:30px; - width: 100px; - transform: rotate(270deg); - transform-origin: left top 0; - margin-left: 6px; - margin-top: 74px; -} - -.changelog_wrapper { - right:0px; - width:30px; - height: 100%; - position: fixed; - } - - .changelog { - height:calc(100% - 0px); - right:0px; - width:0px; - background-color:#363736; - position:absolute; - color:#ccc; - } - - -.changelog .title { - line-height: 20px; - text-align:left; - padding-left:10px; - font-weight: bold; - color: #56AC1D; - text-transform:uppercase; - -} -.changelog .changewrapper { - height:calc(100% - 40px); - padding: 10px; - overflow-y: hidden; - overflow-x: hidden; - -webkit-user-select: text; - opacity:0; -} - -.changelog .changewrapper.active { - overflow-y: scroll; - opacity:0; -} - -.changelog .changewrapper span { - font-weight: bold; - line-height:22px; -} - -.changelog .changewrapper ul { - margin-bottom:10px; - line-height:15px; - -} - -.changelog .changewrapper ul span { - font-weight: bold; - color:#fff; -} - -.changelog .changewrapper li { - font-weight: normal; - margin-left: 0px; - border-top:1px solid #656565; - padding-top:4px; - padding-bottom:4px; -} - - -.changelog .changewrapper p { - margin-bottom: 5px; -} - - -.text2 ul { - margin-bottom:0px; - line-height:15px; -} - - -.text2 li { - font-weight: normal; - margin-left: 0px; - border-top:1px solid #ccc; - padding-top:4px; - padding-bottom:4px !important; -} - - -.sponsors .title { - text-transform:uppercase; - font-size:10px; - } - -.sponsors { - float:both; - margin-left:auto; - margin-right:auto; - width:825px; - text-align:center; - color:rgba(255,255,255,0.50); - margin-top:2%; } - -.sponsors ul { - margin-top:10px; - float:left; - } - -.sponsors li { - float:left; - margin-right:10px; - display:block; - } - -.sponsors li a { - border-radius:3px; - padding:2px; - padding-left:4px; - padding-right:4px; - font-size:13px; - line-height:10px; - color:white; - font-weight:normal; - font-family: 'open_sanslight', Arial; - } - -.sponsors li a:hover { - background-color:rgba(255,255,255,0.30); - color:#fff; - } - -.text1, .text2, .text3 { - margin-top:15px; - margin-bottom:15px; - font-weight:normal; - font-family: 'open_sansregular', Arial; - font-size:12px; - - } - - .text3 { - font-size:11px; - - } - -.mid_head { - font-size:13px; - line-height:10px; - color:#000; - font-weight:bold; - margin-bottom:10px; - line-height: 16px; - } - -.donate { - float:left; - margin-top:15px; - width:100%; - text-align:center; - margin-bottom: -5px; - } - - - - -.text1 a:hover, .text2 a:hover, .text3 a:hover { - color:#59aa29; - }*/ - - - - - -#changelog_bt { - height: 84px; - width:30px; - background-color:black; + background-color:green; margin-left:-30px; margin-top:30px; position:fixed; - border-top-left-radius:3px; - border-bottom-left-radius:3px; + border-top-left-radius:10px; + border-bottom-left-radius:10px; } #changelog_button { @@ -478,12 +172,13 @@ transform:rotate(270deg); transform-origin: left top 0; margin-left:6px; - margin-top:74px; + margin-top:90px; + text-align: center; } .changelog_wrapper { right:0px; - width:300px; + width:400px; height:100%; position:absolute; } @@ -494,23 +189,23 @@ width:0px; position:absolute; overflow-y: scroll; - background-color:black; - color:#ccc; + background-color:white; + border-left: 3px solid green; } - .changelog .title { line-height: 20px; text-align:left; - padding-left:10px; + padding-left:20px; font-weight: bold; color: #56AC1D; text-transform:uppercase; - + margin-top: 10px; } + .changelog .changewrapper { height: 100%; - padding: 10px; + padding: 20px; overflow-y: hidden; overflow-x: hidden; -webkit-user-select: text; @@ -519,7 +214,7 @@ .changelog .changewrapper.active { overflow-y: scroll; - opacity:0; + opacity:0; } .changelog .changewrapper span { @@ -529,23 +224,21 @@ .changelog .changewrapper ul { margin-bottom:10px; - line-height:15px; + line-height:17px; } .changelog .changewrapper ul span { - font-weight: bold; - color:#fff; + font-weight: bold; } .changelog .changewrapper li { font-weight: normal; margin-left: 0px; - border-top:1px solid #656565; + border-top:1px solid #eee; padding-top:5px; padding-bottom:5px; } - .changelog .changewrapper p { - margin-bottom: 5px; + margin-bottom: 20px; }