From 5fa81500dcc07a853a01b0b0d813069467995807 Mon Sep 17 00:00:00 2001 From: Daniel Hader Date: Sat, 29 Aug 2026 13:06:16 -0500 Subject: work in progress css --- themes/simple/static/css/main.css | 171 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 themes/simple/static/css/main.css (limited to 'themes/simple/static/css/main.css') diff --git a/themes/simple/static/css/main.css b/themes/simple/static/css/main.css new file mode 100644 index 0000000..4c76d55 --- /dev/null +++ b/themes/simple/static/css/main.css @@ -0,0 +1,171 @@ +@import url("reset.css"); + +@font-face { + font-family: Gocake; + src: url("../fonts/gocake/Gocake.ttf"); +} + +@font-face { + font-family: Canela; + src: url("../fonts/canela/canela-Regular-TRIAL.otf"); +} + +@font-face { + font-family: Babel-Sans; + src: url("../fonts/babel_sans/BabelSans.ttf"); +} + +@font-face { + font-family: Aerial; + src: url("../fonts/aerial_2/Aerial_Demo.ttf"); +} + +body { + width: 100vw; + height: 100vh; + background-image: url("../images/background.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; + + font-family: "Aerial"; + line-height: 1.2; + + color: #aabbaf; +} + +a { + color: #99bb88; +} + +h1 { + font-size: 2em; +} + +#container { + width: 100%; + max-width: 980px; + margin: 20px auto 20px auto; +} + +#header { + position: relative; + background-color: rgba(20, 20, 20, 1.0); + background: + linear-gradient( + 180deg, + rgba(72, 72, 72, 0.9) 0%, + rgba(20, 20, 20, 0.95) 100% + ); + border-top: 1px solid #9e9e9e; + border-left: 1px solid #9e9e9e; + border-right: 1px solid #9e9e9e; + border-radius: 30px 30px 0 0; + +} + +#header hgroup { + padding: 20px 20px 10px 20px; +} + +#header::after { + content: ""; + position: absolute; + top: 4%; + left: 0.75em; + width: calc(100% - 1.5em); + height: 40%; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.05) + ); + border-radius: 30px 30px 30px 30px; +} + +#content { + display: flex; +} + +#navs { + display: flex; + flex-direction: column; + + width: 150px; + height: 100%; + padding: 10px 8px 10px 8px; + + border-top: 1px solid #666666; + border-left: 1px solid #666666; + border-right: 1px solid #666666; + background: rgba(30, 30, 30, 0.4); + /*background: linear-gradient(to bottom,rgba(80,80,80,.2),rgba(39,39,39,.1));*/ +} + +.nav { + border-radius: 8px 8px 4px 4px; + box-shadow: 2px 2px 3px rgba(0,0,0,.8); + margin-bottom: 12px; +} + +.nav nav { + display: flex; + flex-direction: column; + + background: rgba(0, 0, 0, .5); + + padding: 4px; + border-radius: 0 0 4px 4px; + border-left: 1px solid #666666; + border-right: 1px solid #666666; + border-bottom: 1px solid #666666; +} + +.nav header { + position: relative; + background-color: rgba(20, 20, 20, 1.0); + background: + linear-gradient( + 180deg, + rgba(72, 72, 72, 0.9) 0%, + rgba(20, 20, 20, 0.95) 100% + ); + + border-top: 1px solid #666666; + border-left: 1px solid #666666; + border-right: 1px solid #666666; + border-radius: 8px 8px 0 0; + + padding: 4px 0 4px 0; + font-weight: 600; + text-align: center; +} + +.nav header::after { + content: ""; + position: absolute; + top: 4%; + left: 2.5%; + width: 95%; + height: 40%; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.05) + ); + border-radius: 30px 30px 30px 30px; +} + +.nav-item { + border: 1px solid #0f0f0f; + border-radius: 5px; + + display: flex; + align-items: center; + margin: auto auto 1px; + width: 93%; + + position: relative; +} + -- cgit v1.2.3