diff options
Diffstat (limited to 'mediagoblin/static')
-rw-r--r-- | mediagoblin/static/css/base.css | 295 | ||||
l--------- | mediagoblin/static/css/extlib/skeleton.css | 1 | ||||
l--------- | mediagoblin/static/extlib/skeleton | 1 |
3 files changed, 181 insertions, 116 deletions
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 7b422167..32c6c6cb 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -78,6 +78,11 @@ a.highlight { color: #fff; } +.header_right a { + text-decoration: none; + color: #fff; +} + em { font-style: italic; } @@ -105,26 +110,26 @@ input, textarea { /* website structure */ -.container { - margin: auto; - width: 96%; - max-width: 940px; -} - header { width: 100%; - max-width: 940px; - margin-left: auto; - margin-right: auto; padding: 0; margin-bottom: 42px; border-bottom: 1px solid #333; } +.header_left { + width: 47%; + margin: 0 0 0 8px; + display: inline-block; +} + .header_right { - margin: 8px; + width: 47%; + margin: 8px 8px 4px 0; display: inline-block; float: right; + text-align: right; + line-height: 1.6em; } .header_dropdown { @@ -156,6 +161,10 @@ a.logo { margin: 6px 8px 6px 0; } +.welcomeimage { + float: right; +} + .fine_print { font-size: 0.8em; } @@ -176,29 +185,39 @@ footer { clear: both; } -.media_pane { - width: 640px; - margin-left: 0px; +.thumb_gallery { + margin-left: 10px; margin-right: 10px; - float: left; } -.media_sidebar { - width: 280px; - margin-left: 10px; - float: left; +.profile_showcase .thumb_gallery { + margin-left: 0; + margin-right: 0; } -.profile_sidebar { - width: 340px; - margin-right: 10px; - float: left; +.media_image_container { + display: flex; + justify-content: center; } -.profile_showcase { - width: 580px; - margin-left: 10px; - float: left; +.media_image { + max-width: 100%; +} + +.media_pane { +/* in place for possible future wide view */ +/* border-bottom: 1px solid #333333;*/ +} + +.media_sidebar { +/* in place for possible future wide view */ +/* border-left: 1px solid #333333;*/ +/* padding-left: 1em;*/ +/* padding-top: 1em;*/ +} + +.media_comments { + padding-top: 1em; } /* common website elements */ @@ -224,6 +243,17 @@ footer { color: #283F35; } +.button_info { + background-color: #508BB5; + border-color: #5899C7 #437699 #427496; + color: #C3C3C3; +} + +.button_warning { + background-color: #8A2D2D; + border-color: #913030 #451717 #431212; + color: #C3C3C3; +} .button_form { min-width: 99px; @@ -248,10 +278,28 @@ text-align: center; padding-top: 70px; } +.no_background { + background-image: none; + height: 0; + padding-top: 0; + display: inline-block; +} + .right_align { float: right; } +.left_align { + float: right; +} + +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + .clear { clear: both; display: block; @@ -266,13 +314,29 @@ text-align: center; } .media_sidebar h3 { - font-size: 1em; - margin: 0 0 5px; - border: none; + font-size: 1em; + margin: 0 0 5px; + border: none; } .media_sidebar p { - margin-left: 8px; + margin-left: 8px; +} + +.alpha { + margin-left:0; +} + +.omega { + margin-right:0; +} + +.head { + margin-top:0; +} + +.foot { + margin-bottom:0; } /* forms */ @@ -339,7 +403,7 @@ text-align: center; border-top: 6px dashed #D49086 } -.form_field_input input, .form_field_input textarea { +/*.form_field_input input,*/ .form_field_input textarea { width: 100%; } @@ -555,44 +619,49 @@ img.media_icon { /* EXIF information */ -#exif_content h3 { - border-bottom: 1px solid #333; +#exif_content { + padding-bottom: 20px; } #exif_camera_information { - margin-bottom: 20px; + margin-bottom: 20px; + margin-left: 8px; +} + +#exif_additional_info_button { + margin-left: 8px; } #exif_additional_info { - display: none; + display: none; + margin-left: 8px; } #exif_additional_info table { - font-size: 11px; - margin-top: 10px; + font-size: 11px; + margin-top: 10px; } #exif_additional_info td { - vertical-align: top; - padding-bottom: 5px; + vertical-align: top; + padding-bottom: 5px; } #exif_content .col1 { - padding-right: 20px; + padding-right: 20px; } #exif_additional_info table tr { - margin-bottom: 10px; + margin-bottom: 10px; } /* navigation */ .navigation { - float: right; } .navigation_button { - width: 135px; + width: 48%; display: inline-block; text-align: center; background-color: #1d1d1d; @@ -605,7 +674,7 @@ img.media_icon { } .navigation_left { - margin-right: 6px; + margin-right: 3px; } /* messages */ @@ -673,7 +742,8 @@ table.admin_panel { } table.admin_side_panel { - width: 60% + width: 90%; + margin-bottom: 10px; } table.admin_panel th, table.admin_side_panel th { @@ -754,24 +824,16 @@ pre { } /* Media queries and other responsivisivity */ -@media screen and (max-width: 940px) { - .media_pane { - width: 100%; - margin: 0px; - } - - .media_sidebar { - width: 100%; - margin: 0px; - } - +/* initial GMG max 940 */ +@media screen and (max-width: 960px) { + img.media_image { - width: 100%; - display: inline; + max-width: 100%; +/* display: inline;*/ } .media_thumbnail { - width: 21%; +/* width: 21%;*/ } .profile_sidebar { @@ -784,26 +846,11 @@ pre { margin: 0px; } - .navigation { - float: none; - } - - .navigation_button { - width: 49%; - float: right; - } - - .navigation_left { - margin-right: 0; - float: left; - } - .navigation { float: none; } .navigation_button { - width: 49%; float: right; padding: 10px 0 14px; } @@ -814,59 +861,75 @@ pre { } .button_action, .button_action_highlight, .button_form { - padding: 9px 14px; + padding: 5px 14px; + margin-bottom: 0.5em; } - - header { - text-align: center; + +} +/* desktop resolutions */ +@media screen and (min-width: 960px) { + .container .three.columns.media_thumbnail { + width:180px; + margin-left:3px; + margin-right:3px; } - - .header_right { - margin-right: 2%; - float: none; +} +/* Tablet Portrait size to standard 960 (devices and browsers) */ +@media only screen and (min-width: 768px) and (max-width: 959px) { + .container .three.columns.media_thumbnail { + width:147px; + margin-left:2px; + margin-right:2px; } - - a.logo { - margin-left: 2%; + .media_thumbnail.thumb_entry img { + margin-left: -16.5px; + } + .thumb_gallery { + margin-left: 0; + margin-right: 0; + } + .navigation_button { } } +/* All Mobile Sizes (devices and browser) */ +@media screen and (max-width: 767px) { + .thumb_row { + margin-bottom: 0; + } + .thumb_gallery { + margin-left: 0; + margin-right: 0; + } + h1,h2,h3,p { + margin-bottom: 10px !important; + } -@media screen and (max-width: 570px) { - .media_thumbnail { - width: 29%; + header { + text-align: center; } -} -@media screen and (max-width: 380px) { - .media_thumbnail { - width: 46%; + .header_right { + text-align: center; } -} -/* Exif display */ -#exif_content h3 { - border-bottom: 1px solid #333; -} -#exif_camera_information { - margin-bottom: 20px; -} + .welcomeimage { + float: none; + display: inherit; + margin-left: auto; + margin-right: auto; + margin-top: 1em; + } -#exif_additional_info { - display: none; -} -#exif_additional_info table { - font-size: 11px; - margin-top: 10px; -} -#exif_additional_info td { - vertical-align: top; - padding-bottom: 5px; -} -#exif_content .col1 { - padding-right: 20px; -} -#exif_additional_info table tr { - margin-bottom: 10px; + .media_sidebar { + border-left: none; + padding-left: 0; + padding-top: 1em; + margin-top: 1em; + } + + .media_comments { + border-bottom: 1px solid #333333; + } } p.verifier { diff --git a/mediagoblin/static/css/extlib/skeleton.css b/mediagoblin/static/css/extlib/skeleton.css new file mode 120000 index 00000000..6ecf4919 --- /dev/null +++ b/mediagoblin/static/css/extlib/skeleton.css @@ -0,0 +1 @@ +../../../../extlib/skeleton/stylesheets/skeleton.css
\ No newline at end of file diff --git a/mediagoblin/static/extlib/skeleton b/mediagoblin/static/extlib/skeleton new file mode 120000 index 00000000..737bfce4 --- /dev/null +++ b/mediagoblin/static/extlib/skeleton @@ -0,0 +1 @@ +../../../extlib/skeleton/
\ No newline at end of file |