[Xfce4-commits] [www/www.xfce.org] 01/02: Update the CSS framework to be able to serve the styles in a more centralized way.
noreply at xfce.org
noreply at xfce.org
Mon Jun 12 23:03:40 CEST 2017
This is an automated email from the git hooks/post-receive script.
k n o m e p u s h e d a c o m m i t t o b r a n c h m a s t e r
in repository www/www.xfce.org.
commit 98a9f17baac7355f117dd85ce254c8e7193f9f75
Author: Pasi Lallinaho <pasi at shimmerproject.org>
Date: Tue Jun 13 00:02:25 2017 +0300
Update the CSS framework to be able to serve the styles in a more centralized way.
---
style/base.css | 299 +++++++++---------------------
style/base_header.css | 45 +++++
style/base_mobile.css | 49 +++++
style/css.php | 26 ++-
style/header.css | 2 +-
style/site_blog.css | 87 +++++++++
style/site_wiki.css | 48 +++++
style/{frontpage.css => site_www.css} | 270 +++++++++++++++++++++++++--
style/{mobile.css => site_www_mobile.css} | 52 +-----
9 files changed, 603 insertions(+), 275 deletions(-)
diff --git a/style/base.css b/style/base.css
index ce1696e..5aac052 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,4 +1,10 @@
/*
+ * The base style for all xfce.org websites
+ * CSS definitions specific for different sites can be found in the site_*.css files
+ *
+ */
+
+/*
* Elements
*
*/
@@ -50,6 +56,12 @@ a:hover span {
color: #f00;
}
+hr {
+ border: none;
+ border-top: 1px solid rgba( 0, 0, 0, 0.2 );
+ margin: 2em 0;
+}
+
ul {
list-style-type: square;
}
@@ -62,68 +74,98 @@ dl dd {
margin: 0 0 1em 3em;
}
+table {
+ width: 100%;
+ font-size: 90%;
+ border-collapse: collapse;
+ border: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+ table tr {
+ border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
+ }
+ table thead th {
+ background-color: rgba( 0, 0, 0, 0.05 );
+ }
+ table th,
+ table td {
+ padding: 0.2em 0.5em;
+ vertical-align: top;
+ border-right: 1px solid rgba( 0, 0, 0, 0.05 );
+ }
+
+/* Forms */
+
/*
- * Main layout
+ * Form stuff and links dressed as buttons
*
*/
-#main {
- width: 95%;
- min-width: 830px;
- max-width: 1400px;
-
- margin: 0 auto;
- padding: 0 0.5em;
+input[type="submit"],
+button,
+select {
+ border-radius: 0.2em;
+ border: 1px solid rgba( 0, 0, 0, 0.2 );
+ background: #f7f7f7 linear-gradient( to bottom, rgba( 255, 255, 255, 0.5 ), rgba( 0, 0, 0, 0.02 ) 1px, rgba( 0, 0, 0, 0.05 ) ) repeat-x;
+ color: #000;
+ padding: 0.2em 0.5em;
+ outline: none !important;
+ transition: 150ms all;
}
-
- /* Main navigation */
- #mainnav {
- padding: 0.4em 0;
- }
- #mainnav ul {
- list-style: none;
- line-height: 2em;
+ select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
}
- #mainnav ul li {
- border-left: 1px solid rgba( 0, 0, 0, .15 );
- float: left;
- font-weight: bold;
+ input[type="submit"]:hover,
+ button:hover,
+ select:hover {
+ background-color: #fff;
}
- #mainnav ul li:first-child {
- border-left: 0;
- border-top: 0;
+input,
+input[type="text"],
+textarea {
+ background-color: #f7f7f7;
+ color: #000;
+ border-radius: 0.2em;
+ border: 1px solid rgba( 0, 0, 0, 0.2 );
+ padding: 0.2em 0.5em;
+}
+ input[type="file"] {
+ border: none;
}
-
- #mainnav ul li a {
- display: block;
- padding: 0.1em 1em;
+ textarea {
+ font-size: 90%;
}
- #mainnav select {
- float: right;
- margin-top: 0.15em;
- }
- #mainnav select option {
- font-size: 90%;
+input[type="checkbox"] {
+ float: left;
+ display: block;
+ opacity: 0.75;
+ margin-top: 0.15em;
+ margin-right: 0.5em;
+ transition: 150ms all;
+}
+ input[type="checkbox"]:checked {
+ opacity: 1;
}
- #mainnav-icon {
- display: none;
- height: 32px;
- background: #1b68bf url('img/menu-button.png') no-repeat 9px 50%;
- padding: 0 9px 0 39px;
- line-height: 32px;
- color: #fff;
- font-weight: bold;
- border-radius: 3px;
- }
- #mainnav-icon:hover, #mainnav-icon:active, #mainnav-icon:focus {
- background-color: #2284f2;
- text-decoration: none;
- }
+/*
+ * Main layout
+ *
+ */
+
+.main_width,
+#main {
+ width: 95%;
+ min-width: 830px;
+ max-width: 1400px;
+
+ margin: 0 auto;
+ padding: 0 0.5em;
+}
/* Content */
#content {
@@ -156,6 +198,9 @@ dl dd {
max-width: 230px;
padding: 1em 1.5em;
}
+ #related:empty {
+ display: none;
+ }
#related h2 {
margin: 1em 0 0.5em 0;
font-weight: normal;
@@ -180,166 +225,6 @@ dl dd {
}
/*
- * Templates
- *
- */
-
-/* News */
-
-.newsitem {
- clear: both;
-
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-
- padding-bottom: 1em;
-}
- .newsitem .post-date {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-
- min-width: 50px;
- max-width: 50px;
- order: 2;
- }
- .post-month {
- text-transform: uppercase;
- color: #fff;
- text-align: center;
- display:block;
- padding: 0.15em;
- background: #2284f2;
- }
- .post-day {
- text-transform: uppercase;
- color: #3d3d3d;
- text-align: center;
- display: block;
- background: #fff;
- border: 1px solid rgba( 0, 0, 0, 0.2 );
- border-top: 0;
- padding: 2px;
- line-height: 13px;
- }
- .post-day .day {
- font-size: 115%;
- line-height: 1.3em;
- font-weight: 500;
- }
- .post-day .year {
- font-size: 85%;
- color: #6d6d6d;
- }
-
- .newsitem .post-wrap {
- -webkit-box-flex: 80;
- -ms-flex: 80;
- flex: 80;
-
- order: 3;
- padding-left: 1.2em;
- }
- .newsitem h2,
- .newsitem h3 {
- -webkit-box-flex: 100;
- -ms-flex: 100;
- flex: 100;
-
- order: 1;
- min-width: 100%;
- margin: 0 0 0.3em 0;
- }
- .newsitem h2 {
- margin-bottom: 1em;
- }
- .newsitem .post-wrap p:first-child {
- margin-top: 0;
- }
-
-/* RSS icons */
-
-.rss {
- padding: 2px 20px 0 0;
- background: url('img/feed.gif') no-repeat right center;
- float: right;
- font-size: 85%;
-}
- .rss a:link, .rss a:visited {
- color: rgba(0,0,0,0.8);
- }
- .rss a:hover, .rss a:active, .rss a:focus {
- color: #fa6e08;
- }
-
-h1 + .rss {
- margin-top: -3.5em;
-}
-
-/* Grid for projects */
-
-div.grid {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
- div.grid .item {
- -webkit-box-flex: 50;
- -ms-flex: 50;
- flex: 50;
-
- min-width: 45%;
- margin-right: 2em;
- }
- div.grid .item:nth-child(even) {
- margin-right: 0;
- }
- div.grid .item:last-child:nth-child(odd) {
- margin-right: 50%;
- }
- div.grid.icons .item p:first-of-type {
- padding-left: 58px;
- background-repeat: no-repeat;
- background-position: 0 0;
- min-height: 48px;
- }
-
-/* Figures */
-
-div.figure {
- width: 75%;
- margin: auto;
- border: 1px solid #ccc;
- background-color: #eee;
- color: #333;
- padding: 0.5em;
- text-align: center;
- font-weight: bold;
-}
- div.figure p.image {
- border: 1px solid #ccc;
- background-color: #fff;
- padding: 0.5em;
- }
- div.figure img {
- max-width: 100%;
- height: auto;
- }
- div.figure p {
- margin: 0;
- }
- div.figure + div.figure {
- margin-top: 1em;
- }
-
-/*
* Common classes
*
*/
diff --git a/style/base_header.css b/style/base_header.css
new file mode 100644
index 0000000..9b581e9
--- /dev/null
+++ b/style/base_header.css
@@ -0,0 +1,45 @@
+/* this file is used in various xfce subdomains! */
+
+#xfce-header {
+ background: #333 url(data:image/gif;base64,R0lGODlhSwAZAPUAABsYFxosMC0uKygmJTMuLTIpJDEyLyszNjEzMDM4OikuMCQcGg49TCk7QjY9RBhJVxFCUTVDSCtHTwpUai5baClkdxdmfkNfaAVwjgB+ogyMtjSNp1WUpwibygCo3Qun2Bys2yix3QCt4gCy4AK27RW45y+44TW85Syewkiz00m/42+xxkvC6FjI6lXO9GXL6nzS7XPR7izB8InX7ZnZ7Zfc84HW8afi9LTm9Lfq96HS4MPq99Px+O/6/cPb4JK5xCH5BAAKAAAALAAAAABLABkAAAb+QIQBgSBEHMMhcZloCIVJqCEZXRKV1KcScZhqp+Aw+GoYSHS/AYE6PFRSEoL00Kjb7/WuWDolKCIXHBsDUAkXh4cUFxSMjF0HCAIUPj08HGpXRRItMSYNAkIEEGg/pT8rqKgccWxcRQIHgTQ4OS8A [...]
+ padding-left: 75px;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+ font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+}
+#xfce-header ul {
+ list-style: none;
+ float: right;
+ margin: 5px;
+ padding: 0;
+}
+#xfce-header ul li {
+ float: left;
+ margin: 0; /* for transifex */
+}
+#xfce-header a {
+ color: #999;
+ text-decoration: none;
+ display: block;
+ padding: 0 8px 0 8px;
+ border: 0; /* for transifex */
+ line-height: 25px;
+
+ transition: color 0.2s linear;
+ -moz-transition: color 0.2s linear;
+ -webkit-transition: color 0.2s linear;
+ -o-transition: color 0.2s linear;
+}
+#xfce-header ul li a:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+#xfce-header .active {
+ color: #fff;
+}
+#xfce-header-clear {
+ clear: both;
+}
+#xfce-header-title, #xfce-header-subtitle {
+ display: none;
+}
diff --git a/style/base_mobile.css b/style/base_mobile.css
new file mode 100644
index 0000000..21a4443
--- /dev/null
+++ b/style/base_mobile.css
@@ -0,0 +1,49 @@
+/*
+ * Base responsive design style file for all xfce.org sites
+ *
+ */
+
+ at media screen and (max-width: 850px) {
+ /* Elements */
+ h1 {
+ margin-top: 0.3em;
+ font-size: 160%;
+ text-align: left;
+ }
+
+ /* Main layout */
+ .main_width,
+ #main {
+ min-width: 300px;
+ }
+
+ #content {
+ display: block;
+ }
+ #article {
+ border: none;
+ padding: 1.5em;
+ }
+ #related {
+ background-color: #fafafa;
+ border-top: 1px solid #eee;
+ max-width: 100%;
+ padding-bottom: 1.5em;
+
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ #related-jump {
+ float: right;
+ display: block;
+ background-color: #eee;
+ margin: -1em -1em 0 0;
+
+ border-top-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ #related-jump a {
+ padding: 0.3em 0.6em;
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/style/css.php b/style/css.php
index 00d2b74..038287e 100644
--- a/style/css.php
+++ b/style/css.php
@@ -1,5 +1,14 @@
<?php
+/* change this prefix when you want to make sure cache is claered */
+$apc_cache_prefix = '2017-06-12-e';
+
+$site = urlencode ($_GET['site']);
+
+/*if ($site == 'wiki' || $site == 'www' ) {
+ $apc_cache_prefix = mt_rand(1,2000);
+} */
+
/* this file loads all the css required for the Xfce website
* and bundles it in a single file. The css files are split
* to make them both readable and some files are fetched for
@@ -36,10 +45,10 @@ function base64data ($matches)
$have_apc = false;
if (function_exists ('apc_fetch'))
{
- $buf = @apc_fetch ('wxo410_css');
+ $buf = @apc_fetch ($apc_cache_prefix.$site.'_css');
if ($buf != false)
{
- $mtime = @apc_fetch ('wxo410_css_mtime');
+ $mtime = @apc_fetch ($apc_cache_prefix.$site.'_css_mtime');
write_header ($mtime);
echo $buf;
@@ -54,7 +63,14 @@ $buf = '';
$mtime = 0;
/* load contents */
-$files = array ('header.css', 'base.css', 'frontpage.css', 'mobile.css');
+$files = array ('base_header.css', 'base.css');
+if ($site && file_exists ('site_'. urlencode ($site).'.css')) {
+ $files[] = 'site_'. urlencode ($site).'.css';
+}
+$files[] = 'base_mobile.css';
+if ($site && file_exists ('site_'. urlencode ($site).'_mobile.css')) {
+ $files[] = 'site_'. urlencode ($site).'_mobile.css';
+}
foreach ($files as $file)
{
$buf .= file_get_contents ($file);
@@ -81,8 +97,8 @@ if ($have_apc)
{
$ttl = 3600; /* 1 hour */
- @apc_store ('wxo410_css', $buf, $ttl);
- @apc_store ('wxo410_css_mtime', $mtime, $ttl);
+ @apc_store ($apc_cache_prefix.$site.'_css', $buf, $ttl);
+ @apc_store ($apc_cache_prefix.$site.'_css_mtime', $mtime, $ttl);
}
?>
diff --git a/style/header.css b/style/header.css
index 0e9e23d..9b581e9 100644
--- a/style/header.css
+++ b/style/header.css
@@ -1,7 +1,7 @@
/* this file is used in various xfce subdomains! */
#xfce-header {
- background: #333 url('img/logosmall.gif') no-repeat 3px 50%;
+ background: #333 url(data:image/gif;base64,R0lGODlhSwAZAPUAABsYFxosMC0uKygmJTMuLTIpJDEyLyszNjEzMDM4OikuMCQcGg49TCk7QjY9RBhJVxFCUTVDSCtHTwpUai5baClkdxdmfkNfaAVwjgB+ogyMtjSNp1WUpwibygCo3Qun2Bys2yix3QCt4gCy4AK27RW45y+44TW85Syewkiz00m/42+xxkvC6FjI6lXO9GXL6nzS7XPR7izB8InX7ZnZ7Zfc84HW8afi9LTm9Lfq96HS4MPq99Px+O/6/cPb4JK5xCH5BAAKAAAALAAAAABLABkAAAb+QIQBgSBEHMMhcZloCIVJqCEZXRKV1KcScZhqp+Aw+GoYSHS/AYE6PFRSEoL00Kjb7/WuWDolKCIXHBsDUAkXh4cUFxSMjF0HCAIUPj08HGpXRRItMSYNAkIEEGg/pT8rqKgccWxcRQIHgTQ4OS8A [...]
padding-left: 75px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
diff --git a/style/site_blog.css b/style/site_blog.css
new file mode 100644
index 0000000..fc91b77
--- /dev/null
+++ b/style/site_blog.css
@@ -0,0 +1,87 @@
+/*
+ * Additional styles for blog.xfce.org
+ *
+ */
+
+#article .single + .single,
+#article .pagination {
+ border-top: 1px solid rgba( 0, 0, 0, 0.1 );
+ margin-top: 3em;
+ padding-top: 2em;
+
+ position: relative;
+}
+
+#article .single + .single::before,
+#article .pagination::before {
+ position: absolute;
+ display: inline-block;
+ top: -0.5em;
+
+ width: 8%;
+ left: 46%;
+ text-align: center;
+ content: "~";
+
+ background-color: #fff;
+ color: rgba( 0, 0, 0, 0.2 );
+ font-size: 200%;
+}
+
+#article .single .xfce-title a {
+ color: #333;
+}
+#article .single .xfce-title a:hover {
+ color: #f00;
+ text-decoration: underline;
+}
+
+
+#article .single ul.meta {
+ list-style-type: none;
+ margin-left: 0;
+ color: rgba( 0, 0, 0, 0.7 );
+ font-size: 90%;
+ margin-top: -1em;
+}
+
+ #article .single ul.meta li {
+ display: inline;
+ margin-right: 2em;
+ }
+
+ #article .single ul.meta li::before {
+ font-weight: bold;
+ font-size: 80%;
+ margin-right: 0.75em;
+ }
+ #article .single ul.meta li.date::before { content: "ON"; }
+ #article .single ul.meta li.author::before { content: "BY"; }
+
+#article .pagination {
+ display: flex;
+ font-weight: bold;
+}
+ #article .pagination::before {
+ content: "…";
+ top: -0.72em;
+ }
+ #article .pagination div {
+ flex: 1;
+ }
+ #article .pagination .next {
+ text-align: right;
+ }
+
+/* Styles for the imported posts */
+
+#article .single img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ margin: 0 auto;
+}
+
+#article .single figure {
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/style/site_wiki.css b/style/site_wiki.css
new file mode 100644
index 0000000..0136a74
--- /dev/null
+++ b/style/site_wiki.css
@@ -0,0 +1,48 @@
+#header .breadcrumbs {
+ float: left;
+}
+#header .tools {
+ float: right;
+ margin-top: -0.4em;
+}
+
+.mobileTools {
+ display: none;
+}
+
+ at media screen and (max-width: 850px) {
+ #header .tools div,
+ #header .tools select,
+ #header .tools form,
+ .mobileTools {
+ display: inline;
+ }
+
+}
+
+.dokuwiki div.page {
+ box-shadow: none;
+ border: none;
+}
+
+#dw__toc {
+ margin: 0;
+ width: auto;
+ border: none;
+}
+ #dw__toc ul {
+ margin-left: 0;
+ }
+
+#header,
+#footer {
+ padding: 0.4em 0;
+}
+ #header {
+ padding-top: 0.8em;
+ }
+
+#footer .bar-left form,
+#footer .bar-right form {
+ display: inline;
+}
\ No newline at end of file
diff --git a/style/frontpage.css b/style/site_www.css
similarity index 50%
rename from style/frontpage.css
rename to style/site_www.css
index 5673ddd..7e23a2f 100644
--- a/style/frontpage.css
+++ b/style/site_www.css
@@ -1,8 +1,223 @@
/*
- * Some frontpage-specific tweaks
+ * Additional styles for www.xfce.org
*
*/
+/*
+ * Main navigation
+ *
+ */
+
+#mainnav {
+ padding: 0.4em 0;
+}
+#mainnav ul {
+ list-style: none;
+ line-height: 2em;
+}
+
+#mainnav ul li {
+ border-left: 1px solid rgba( 0, 0, 0, .15 );
+ float: left;
+ font-weight: bold;
+}
+
+#mainnav ul li:first-child {
+ border-left: 0;
+ border-top: 0;
+}
+
+#mainnav ul li a {
+ display: block;
+ padding: 0.1em 1em;
+}
+
+#mainnav select {
+ float: right;
+ margin-top: 0.15em;
+}
+ #mainnav select option {
+ font-size: 90%;
+}
+#mainnav-icon {
+ display: none;
+ height: 32px;
+ background: #1b68bf url('img/menu-button.png') no-repeat 9px 50%;
+
+ padding: 0 9px 0 39px;
+ line-height: 32px;
+
+ color: #fff;
+ font-weight: bold;
+ border-radius: 3px;
+}
+ #mainnav-icon:hover, #mainnav-icon:active, #mainnav-icon:focus {
+ background-color: #2284f2;
+ text-decoration: none;
+ }
+
+/* News */
+
+.newsitem {
+ clear: both;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+
+ padding-bottom: 1em;
+}
+ .newsitem .post-date {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+
+ min-width: 50px;
+ max-width: 50px;
+ order: 2;
+ }
+ .post-month {
+ text-transform: uppercase;
+ color: #fff;
+ text-align: center;
+ display:block;
+ padding: 0.15em;
+ background: #2284f2;
+ }
+ .post-day {
+ text-transform: uppercase;
+ color: #3d3d3d;
+ text-align: center;
+ display: block;
+ background: #fff;
+ border: 1px solid rgba( 0, 0, 0, 0.2 );
+ border-top: 0;
+ padding: 2px;
+ line-height: 13px;
+ }
+ .post-day .day {
+ font-size: 115%;
+ line-height: 1.3em;
+ font-weight: 500;
+ }
+ .post-day .year {
+ font-size: 85%;
+ color: #6d6d6d;
+ }
+
+ .newsitem .post-wrap {
+ -webkit-box-flex: 80;
+ -ms-flex: 80;
+ flex: 80;
+
+ order: 3;
+ padding-left: 1.2em;
+ }
+ .newsitem h2,
+ .newsitem h3 {
+ -webkit-box-flex: 100;
+ -ms-flex: 100;
+ flex: 100;
+
+ order: 1;
+ min-width: 100%;
+ margin: 0 0 0.3em 0;
+ }
+ .newsitem h2 {
+ margin-bottom: 1em;
+ }
+ .newsitem .post-wrap p:first-child {
+ margin-top: 0;
+ }
+
+/* RSS icons */
+
+.rss {
+ padding: 2px 20px 0 0;
+ background: url('img/feed.gif') no-repeat right center;
+ float: right;
+ font-size: 85%;
+}
+ .rss a:link, .rss a:visited {
+ color: rgba(0,0,0,0.8);
+ }
+ .rss a:hover, .rss a:active, .rss a:focus {
+ color: #fa6e08;
+ }
+
+h1 + .rss {
+ margin-top: -3.5em;
+}
+
+/* Grid for projects */
+
+div.grid {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+ div.grid .item {
+ -webkit-box-flex: 50;
+ -ms-flex: 50;
+ flex: 50;
+
+ min-width: 45%;
+ margin-right: 2em;
+ }
+ div.grid .item:nth-child(even) {
+ margin-right: 0;
+ }
+ div.grid .item:last-child:nth-child(odd) {
+ margin-right: 50%;
+ }
+ div.grid.icons .item p:first-of-type {
+ padding-left: 58px;
+ background-repeat: no-repeat;
+ background-position: 0 0;
+ min-height: 48px;
+ }
+
+/* Figures */
+
+div.figure {
+ width: 75%;
+ margin: auto;
+ border: 1px solid #ccc;
+ background-color: #eee;
+ color: #333;
+ padding: 0.5em;
+ text-align: center;
+ font-weight: bold;
+}
+ div.figure p.image {
+ border: 1px solid #ccc;
+ background-color: #fff;
+ padding: 0.5em;
+ }
+ div.figure img {
+ max-width: 100%;
+ height: auto;
+ }
+ div.figure p {
+ margin: 0;
+ }
+ div.figure + div.figure {
+ margin-top: 1em;
+ }
+
+/*
+ * Frontpage
+ *
+ */
+
+/* No padding between the slider and content */
+
#article.file_frontpage {
margin-right: 0;
padding: 0;
@@ -19,10 +234,7 @@
margin-bottom: 0;
}
-/*
- * Columns
- *
- */
+/* Flex columns for frontpage */
.frontpage_cols {
display: -webkit-box;
@@ -50,10 +262,7 @@
display: inline-block;
}
-/*
- * Slider
- *
- */
+/* Slider */
#slidewrap {
margin: auto;
@@ -213,10 +422,7 @@
#slide div span#slide-panel-deskbar { background-position: 100% 0; }
#slide div span#slide-panel-vertical { background-position: 0 100%; }
-/*
- * Feeds
- *
- */
+/* Feeds */
ul.feeds {
margin-left: 0 !important;
@@ -228,4 +434,40 @@ ul.feeds {
font-size: 85%;
color: rgba(0,0,0,0.8);
margin-left: 2em;
- }
\ No newline at end of file
+ }
+
+/*
+ * Responsive design
+ *
+ */
+
+ at media screen and (max-width: 1200px) {
+ .frontpage_cols .column {
+ max-width: 50%; /* try to be nice to midori */
+ }
+ .frontpage_cols .column:nth-child(3) {
+ min-width: 90%;
+ }
+ .frontpage_cols .feeds {
+ margin-bottom: 0.5em;
+ }
+}
+ at media screen and (max-width: 1200px) and (min-width: 851px) {
+ .frontpage_cols .column:nth-child(3) .rss {
+ float: none;
+ margin-left: 2em;
+ }
+}
+
+ at media screen and (max-width: 400px) {
+ .frontpage_cols .column h2 {
+ display: block;
+ margin-bottom: 0.5em;
+ }
+ .frontpage_cols .rss {
+ display: block;
+ float: none;
+ clear: both;
+ margin-bottom: 1em;
+ }
+}
\ No newline at end of file
diff --git a/style/mobile.css b/style/site_www_mobile.css
similarity index 73%
rename from style/mobile.css
rename to style/site_www_mobile.css
index ebfd194..0d353e6 100644
--- a/style/mobile.css
+++ b/style/site_www_mobile.css
@@ -30,56 +30,12 @@
}
@media screen and (max-width: 850px) {
- /* Elements */
- h1 {
- margin-top: 0.3em;
- font-size: 160%;
- text-align: left;
+ /* Main navigation */
+ #mainnav select {
+ font-size: 110%;
+ margin-top: 0.25em;
}
- /* Main layout */
- #main {
- min-width: 300px;
- }
-
- /* Main navigation */
- #mainnav select {
- font-size: 110%;
- margin-top: 0.25em;
- }
-
- /* Content */
- #content {
- display: block;
- }
- #article {
- border: none;
- padding: 1.5em;
- }
- #related {
- background-color: #fafafa;
- border-top: 1px solid #eee;
- max-width: 100%;
- padding-bottom: 1.5em;
-
- border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
- }
- #related-jump {
- float: right;
- display: block;
- background-color: #eee;
- margin: -1em -1em 0 0;
-
- border-top-right-radius: 4px;
- border-bottom-left-radius: 4px;
- }
- #related-jump a {
- padding: 0.3em 0.6em;
- display: block;
- }
-
- /* Navigation */
#mainnav-icon {
display: block;
float: left;
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the Xfce4-commits
mailing list