From 843ba743a8f2f70591e465b64f879e63070141af Mon Sep 17 00:00:00 2001 From: "Steve L. Nyemba" Date: Mon, 17 Mar 2025 17:19:06 +0000 Subject: [PATCH] open-source (oss) --- borders.css | 8 +++--- footer.css | 11 ++++---- header.css | 18 +++++-------- layout.css | 67 +++++++++++++++++++++------------------------ menu.css | 78 +++++++++++++++++------------------------------------ 5 files changed, 71 insertions(+), 111 deletions(-) diff --git a/borders.css b/borders.css index e6c7e66..6f9a192 100644 --- a/borders.css +++ b/borders.css @@ -24,15 +24,15 @@ .border-right{ - border-right:3px dotted #CAD5E0; + border-right:1px solid #CAD5E0; } .border-left{ - border-left:3px dotted gray; + border-left:1px solid #CAD5E0; } -.border-bottom { border-bottom:1px dotted gray;} -.border-top { border-top:3px dotted gray;} +.border-bottom { border-bottom:1px solid #CAD5E0} +.border-top { border-top:1px solid #CAD5E0} diff --git a/footer.css b/footer.css index 84ce356..e1acfb5 100644 --- a/footer.css +++ b/footer.css @@ -2,10 +2,9 @@ * This file styles the footer of the page */ - - -/* .main .footer { grid-column: 1 / span 2; font-size:13px; font-weight: lighter; padding:8px;} */ .footer { + grid-row:5; + margin-top:10px; text-align:center; display:grid; grid-template-columns: repeat(3,1fr); @@ -15,8 +14,8 @@ color:black; align-items: center; align-content: center; - text-transform: capitalize; - /* background-color: rgba(255,255,255,0.8); */ + text-transform: capitalize; + /* background-color: rgba(255,255,255,0.8); + - grid-column: 1 /span 2; } diff --git a/header.css b/header.css index 991b9af..c7ee323 100644 --- a/header.css +++ b/header.css @@ -1,13 +1,7 @@ -.main .header { - - grid-row:1; - grid-column: 1 / span 2; - display:grid; - grid-template-columns: 50px auto; gap:4px; - line-height: 1; - +.main .header {display:grid; grid-template-columns:64px auto; gap:4px; width:100%; align-items:center;} +.main .header .icon {width:64px; height:64px;} +.main .header .icon img {width:64px; height:64px;} + +.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold} +.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;} -} -.main .header .title {font-size:28px; text-transform: capitalize; font-weight:bold} -.main .header .subtitle {font-size:14px} -.main .header img { width:44px; height:44px;} diff --git a/layout.css b/layout.css index ad5c277..b15235a 100644 --- a/layout.css +++ b/layout.css @@ -1,48 +1,43 @@ +/** +* This file implements theme Open Source Software, the expectation is just a pager that presents a tool/software +*/ +body, ul, p, select { + font-size: 16px; + font-weight:lighter; + font-family:sans-serif; + line-height:1.5; + +} .main { - margin:10px; - padding:4px; display:grid; - grid-template-columns: 50% 50% ; gap:4px; - grid-template-rows: 48px 64px auto 32px; - font-family: sans-serif; - font-weight: lighter; - font-size:18px; - line-height: 1.5; - justify-items: normal; - ; - height:96vh; + grid-template-columns: 100%;; + margin:1%; + margin-left:10%; + margin-right:10%; + gap:4px; + height:90%; + width:80%; } -.main .content { - grid-row:3; - grid-column: 1 ; - text-wrap: wrap; - height:100%; - display:grid; - align-content: start; - - +.main .content{ + grid-row:4; + align-self:center; + height:100%; + width:100%; } -.main .content #index { - text-align: left; - text-wrap: wrap; -} +.main .content .banner { + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height:200px; + align-items: center; + align-content: center; + display: grid; -p { - margin-top:22px; -} -table { - width:99%; - border: 1px solid #CAD5E0; -} -table td {padding:4px; margin:4px;} -table thead { - - font-weight:bold; - background-color:#f3f3f3; } +/* .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;} */ .bold {font-weight:bold} .small-text {font-size:12px; font-weight:lighter; color :#000000;} .active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent} diff --git a/menu.css b/menu.css index 21cfd84..a34f727 100644 --- a/menu.css +++ b/menu.css @@ -1,30 +1,8 @@ -.menu { - padding:8px; - border-bottom:3px dotted gray ; - - display:grid; - grid-column: 1 / span 2; - grid-template-columns: 92px repeat(7,auto); - gap:4px; - text-transform: capitalize; - align-items: center; - -} -.menu .icon {padding:4px;} + +.menu .icon {padding:4px; align-items:center; display:grid;} .menu .icon img {width:30px; height:30px;} -.menu .item { - font-weight:bold; - cursor:pointer; - padding:4px; - text-align: left; - - - - - -} -.menu .sub-menu { +.main .menu .sub-menu { display:none; position:absolute; @@ -39,43 +17,37 @@ background-color: rgba(255,255,255,0.8); } +.main .menu .item { + font-weight:bold; + cursor:pointer; + padding:4px; + text-align: left; +} -.menu .item:hover .sub-menu{ +.main .menu .item:hover .sub-menu{ display:block; height:auto; } -/** -* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS -*/ -.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;} -.tab-content table tr:nth-child(even) {background-color: #f3f3f3;} -/* .tab-content {width:80%;} */ - -.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; - /* background-color: #f3f3f3; */ - padding-top:4px; - padding-left:4px; - padding-right:4px; -} -.tabs input[type=radio] {display:none; } -.tabs input[type=radio] + label { font-weight:lighter; - border:1px solid transparent; - border-bottom-color: #CAD5E0; - background-color: #f3f3f3; +.main .menu { padding:8px; - padding-right:10px; padding-left:10px; + grid-row:2; + width:100%; + display:none; - cursor:pointer + /* grid-row:2; grid-column:1 ; */ + grid-template-columns: 92px repeat(7,auto); + gap:4px; + text-transform: capitalize; + border:0; height:48px; padding:0px; + display:grid; grid-template:64px repeat(6,1fr); gap:4px; + /* background-color: #f3f3f3; */ + align-items: center; } -.tabs input[type=radio]:checked +label { - background-color: #ffffff; - border-top-right-radius: 8px; - border-top-left-radius: 8px; - font-weight:bold; - border-color: #CAD5E0; - border-bottom-color: #FFFFFF; +.main .menu .icon .button { + border:1px solid #CAD5E0; border-radius:8px; padding:2px; + ; } /** * TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS