aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMichael Buesch <m@bues.ch>2019-08-12 16:57:39 +0200
committerMichael Buesch <m@bues.ch>2019-08-12 16:57:39 +0200
commit8a1c54beab1cdcf5fe92d45ef7c5e5b3a5daff28 (patch)
tree6b21b36070fbd3cbbe38fd2b18ada62d570734f8
parent7599ba81ba02039cb55da3b548e29a7e5cfa3b1f (diff)
downloadcms-8a1c54beab1cdcf5fe92d45ef7c5e5b3a5daff28.tar.xz
cms-8a1c54beab1cdcf5fe92d45ef7c5e5b3a5daff28.zip
example/css: Use flexbox layouts
Signed-off-by: Michael Buesch <m@bues.ch>
-rw-r--r--example/cms.css44
1 files changed, 29 insertions, 15 deletions
diff --git a/example/cms.css b/example/cms.css
index 7df800d..0d4657b 100644
--- a/example/cms.css
+++ b/example/cms.css
@@ -60,24 +60,28 @@ h1 a:hover, h2 a:hover, h3 a:hover {
/******************************************************************************/
.titlebar {
- display: block;
+ display: flex;
+ flex-direction: row;
+
padding: 50px 164px 15px 100px;
}
.titlebar .logo {
- display: block;
border: none;
float: left;
}
.titlebar .title {
- display: block;
- height: 64px;
- line-height: 64px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ margin: 0px 20px 0px 20px;
+
font-size: 21pt;
font-weight: bold;
- text-align: center;
- vertical-align: bottom;
}
/******************************************************************************/
@@ -85,13 +89,17 @@ h1 a:hover, h2 a:hover, h3 a:hover {
/******************************************************************************/
.navbar {
- display: block;
+ display: flex;
+ flex-direction: row;
+
font-size: 13pt;
text-align: left;
}
.navbar .navgroups {
- position: absolute;
+ display: flex;
+ flex-direction: row;
+ z-index: 200;
background: #FAFAFA;
background-image: url(images/background_hatching.png);
@@ -158,10 +166,9 @@ h1 a:hover, h2 a:hover, h3 a:hover {
background: #ebebff;
float: none;
position: absolute;
- z-index: 200;
+ z-index: 210;
padding: 3px 5px;
margin: 0px;
- top: 100%;
font-size: 11pt;
border-top-right-radius: 15px;
@@ -247,7 +254,12 @@ h1 a:hover, h2 a:hover, h3 a:hover {
/* PAGE LISTING */
/******************************************************************************/
+.before-page-listing {
+}
+
.page-listing .navelems {
+ float: left;
+
background: #ebebff;
padding: 3px 5px;
margin: 0px;
@@ -281,15 +293,17 @@ h1 a:hover, h2 a:hover, h3 a:hover {
background: #5050A0;
}
+.after-page-listing {
+ clear: left;
+}
+
/******************************************************************************/
/* MAIN content */
/******************************************************************************/
.main {
border: none;
- margin-top: 120px;
- margin-left: 100px;
- margin-right: 100px;
+ margin: 60px 100px 0px 100px;
padding-bottom: 75px;
}
@@ -300,7 +314,7 @@ h1 a:hover, h2 a:hover, h3 a:hover {
.main img.float {
float: left;
- margin-left: 0;
+ margin-left: 0px;
margin-right: 30px;
margin-bottom: 15px;
}
bues.ch cgit interface