diff options
Diffstat (limited to '_static/css/styles.css')
| -rw-r--r-- | _static/css/styles.css | 309 |
1 files changed, 309 insertions, 0 deletions
diff --git a/_static/css/styles.css b/_static/css/styles.css new file mode 100644 index 0000000..f9705d5 --- /dev/null +++ b/_static/css/styles.css @@ -0,0 +1,309 @@ +/* + * Base purecss provides basic styling, but we overide some of them here. + */ + +html,body { + height: 100%; + margin: 0; + padding: 0; + color: #526066; +} + +h1, h2, h3 { + letter-spacing: 0.25em; + text-transform: uppercase; + font-weight: 500; + color: black; +} + +h1 { font-size: 1.5em } +h2 { font-size: 1em } +h3 { font-size: 0.8em } + +p { line-height: 1.6em; } + +a { + text-decoration: none; + color: rgb(61, 146, 201); +} + +#wrapper { + min-height: 100%; + position: relative; +} + +/* + * Layout styles + * * center content + * * add padding between and around text boxes + */ + +#content { + margin: 0 auto; + padding: 0em 1em 2em 1em; + max-width: 980px; + overflow:auto; + padding-bottom: 5em; /* uses for footer */ +} + +.l-box { padding: 0.5em; } + +/* + * Logo settings + */ + +.alpine-logo { + width: 16em; + margin: 2em; + margin-left: 1em; +} + +a.alpine-logo:hover, +a.alpine-logo:active { + text-decoration: none; +} + +/* + * use pure menus with some positioning. + */ +.pure-menu { + box-shadow: 0 1px 1px rgba(0,0,0, 0.10); + position: relative; + +} + +.menu-external { + position: absolute; + top: 0px; + right: 0px; + font-style: italic; + font-size: 0.6em; +} + +.menu-local { + right: 0px; + bottom: 0px; + position: absolute; + font-size: 0.6em; +} + +/* + * The banner with background image. + * we use relative positioning to be able to position the banner content properly + * background taken from: + * https://unsplash.com/@roylandnye + * + */ + +.banner { + background: transparent url('/banner.jpg') 0 0 no-repeat fixed; + text-align: center; + background-size: cover; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/banner.jpg', sizingMethod='scale'); + height: 200px; + width: 100%; + margin-bottom: 1em; + position: relative; +} + +.banner-content { + position: absolute; + top: 50%; + height: 100px; + margin-top: -80px; + width: 100%; +} + + +.banner h1 { + margin-bottom: 0; + font-size: 2em; + color: white; + font-weight: 500; + text-shadow: 0 1px 1px black; + text-transform: none; + letter-spacing: normal; +} + +.banner h3 { + margin-bottom: 0; + font-size: 1em; + color: white; + font-weight: 500; + text-shadow: 0 1px 1px black; + text-transform: none; + letter-spacing: normal; +} + +.banner-head { + margin-bottom: 0; + font-size: 2em; + color: white; + font-weight: 500; + text-shadow: 0 1px 1px black; +} + +.banner-head-small { + margin-bottom: 0; + font-size: 1em; + color: white; + font-weight: 500; + text-shadow: 0 1px 1px black; +} + +/* + * News section + */ + +.news-archive { + width: 100%; +} + + +/* + * Download Section (tables) + */ + +.download { + border: 1px solid #ddd; + margin: 0 0.5em 2em; + text-align: center; +} + +.download h2 { + color: #fff; + margin: 0; + padding-top: 2em; + padding-bottom: 2em; + font-size: 1em; + font-weight: bold; +} + +.download ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.download li { + padding: 0.8em; + background: #f7f7f7; + border-bottom: 1px solid #e7e7e7; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.download .buttons { + padding: 1em; +} + +.download .buttons a.pure-button { + color: white; + font-weight: normal; + background: #018E4A; + border-radius: 4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +} + +.download .checksums a.pure-button { + font-size: 70%; + color: #696969; +} + +.download .checksums li { + border-top: 1px solid #e7e7e7; + border-bottom: 0px; +} + +/* + * Home page styling + */ + +.home-list li { + padding: 0.8em; + background: #f7f7f7; + border-bottom: 1px solid #e7e7e7; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.home-list { + list-style-type: none; + margin: 0; + padding: 0; + text-align: left; +} + +.read-more { margin-top: 1em; } + +/* + * Community page + */ + +.community h2 { + margin-top: 2em; +} + +/* + * Footer styling + */ + +footer { + background: #111; + color: #888; + text-align: center; + position: absolute; + bottom: 0; + width: 100%; + padding-top: 1em; + padding-bottom: 1em; +} + +footer a { color: #ddd; } + +/* + * Color set taken from: + * http://www.colourlovers.com/home/trends/interior-looks/7760/Dive_Into_Color + */ + +.flavor-alpine h2 { background: #CBB063; } +.flavor-alpine-extended h2 { background: #AA8B4A; } +.flavor-alpine-vanilla h2 { background: #3C2C1F; } +.flavor-alpine-virt h2 { background: #B63731; } +.flavor-alpine-xen h2 { background: #E68804; } +.flavor-alpine-rpi h2 { background: #376160; } +.flavor-alpine-uboot h2 { background: #36384D; } + +/* + * MEDIA queries + */ + +/* + * Larger mobile devices (tablets) + */ +@media(min-width: 48em) { + .banner h1 { font-size: 4em; } + .download-table { margin-bottom: 0; } + .menu-local { right: auto; font-size: 1em;} + .menu-external { font-size: 1em; } + .alpine-logo { margin: 1em; } +} + +/* + * Small devices like phones + */ +@media (min-width: 30em) { + .banner { height: 400px; } + .banner h1 { font-size: 3em; } +} + +/* + * Move the logo when the local menu moves to the right. + */ +@media (min-width: 41em) { + .alpine-logo { margin-top: 1em; } + .menu-local { font-size: 1em;} + .menu-external { font-size: 1em; } +} |