Skip to content
Snippets Groups Projects

Twenty Ten Responsive patch

Open Twenty Ten Responsive patch
responsive-twentyten into master
Open ale requested to merge responsive-twentyten into master
Compare
and
2 files
+ 336
− 1
Compare changes
  • Side-by-side
  • Inline
Files
2
patches/themes/themes-twentyten-responsive.patch 0 → 100644
+ 334
− 0
diff -urN a/wp-content/themes/twentyten/header.php b/wp-content/themes/twentyten/header.php
--- a/wp-content/themes/twentyten/header.php 2023-03-29 19:20:10.000000000 +0100
+++ b/wp-content/themes/twentyten/header.php 2023-06-05 10:59:42.965905528 +0100
@@ -39,7 +39,9 @@
?>
</title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
-<link rel="stylesheet" type="text/css" media="all" href="<?php echo esc_url( get_stylesheet_uri() ); ?>?ver=20230328" />
+<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="<?php echo esc_url( get_stylesheet_uri() ); ?>?ver=20230328" />
+<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/phone_style.css?ver=20230328" />
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php
/*
diff -urN a/wp-content/themes/twentyten/phone_style.css b/wp-content/themes/twentyten/phone_style.css
--- a/wp-content/themes/twentyten/phone_style.css 1970-01-01 01:00:00.000000000 +0100
+++ b/wp-content/themes/twentyten/phone_style.css 2023-06-05 10:55:10.787419661 +0100
@@ -0,0 +1,133 @@
+@import url("style.css");
+
+
+/* landscape */
+@media screen and (min-width: 321px) {
+ #wrapper {
+ margin: 0 auto;
+ width: 90%;
+ width: 400px;
+ overflow: auto;
+ }
+
+ #access,
+ #access .menu-header,
+ div.menu,
+ #colophon,
+ #branding,
+ #main,
+ #footer {
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ #branding {
+ overflow:hidden;
+ }
+
+ #site-title,
+ #site-info,
+ #site-description,
+ #site-generator {
+ width: 100%;
+ clear: left;
+ float: left;
+ margin-top: 0;
+ padding-top:0;
+ margin-bottom: 0;
+ padding-bottom:0;
+ }
+
+
+ #container {
+ float: left;
+ width: 100%;
+ overflow: auto;
+ }
+ #content {
+ width: 99%;
+ margin: 0 0px 0 0px;
+ }
+
+ .alignleft, img.alignleft, .alignright, img.alignright {
+ clear: both;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ float: none;
+ }
+
+ #primary,
+ #secondary {
+ clear: both;
+ float: left;
+ overflow: hidden;
+ width: 99%;
+ }
+}
+
+
+/* portrait */
+@media screen and (max-width: 320px) {
+ #wrapper {
+ margin: 0 auto;
+ width: 300px;
+ overflow: auto;
+ }
+
+ #access,
+ #access .menu-header,
+ div.menu,
+ #colophon,
+ #branding,
+ #main,
+ #footer {
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ #branding {
+ overflow:hidden;
+ }
+
+ #site-title,
+ #site-description,
+ #site-info,
+ #site-generator {
+ width: 100%;
+ clear: left;
+ float: left;
+ margin-top: 0;
+ padding-top:0;
+ margin-bottom: 0;
+ padding-bottom:0;
+ }
+
+
+ #container {
+ float: left;
+ width: 100%;
+ overflow: auto;
+ }
+ #content {
+ width: 99%;
+ margin: 0 0px 0 0px;
+ }
+
+ .alignleft, img.alignleft, .alignright, img.alignright {
+ clear: both;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ float: none;
+ }
+
+ #primary,
+ #secondary {
+ clear: both;
+ float: left;
+ overflow: hidden;
+ width: 99%;
+ }
+}
+
diff -urN a/wp-content/themes/twentyten/style.css b/wp-content/themes/twentyten/style.css
--- a/wp-content/themes/twentyten/style.css 2023-03-29 19:20:10.000000000 +0100
+++ b/wp-content/themes/twentyten/style.css 2023-06-05 11:00:29.532277777 +0100
@@ -1454,3 +1454,179 @@
border: none;
}
}
+
+/*
+Theme Name: Responsive TwentyTen
+Theme URI: http://wordpress.org/
+Description: Responsive child theme for TwentyTen.
+Author: Todd Halfpenny
+Version: 0.1
+Template: twentyten
+Tags: black, blue, white, two-columns, fluid, responsive, custom-header, custom-background, theme-options, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
+*/
+
+#wrapper,
+#access,
+#access .menu-header,
+div.menu,
+#colophon,
+#branding,
+#main,
+#footer {
+ width: 940px;
+}
+
+#access {
+ max-width: 940px;
+}
+
+#main {
+ float:left;
+ }
+
+.entry-content img.size-full {
+ border: 1px solid #333;
+ padding: 5px;
+ -moz-box-shadow: 2px 2px 10px #333;
+ -webkit-box-shadow: 2px 2px 10px #333;
+}
+
+iframe, object, embed{
+ max-width: 100%;
+}
+
+.wp-caption {
+ max-width: 100% !important; /* When images are too wide for containing element, force them to fit. */
+ height: auto; /* Override height to match resized width for correct aspect ratio. */
+}
+
+.wp-caption img {
+ height: auto;
+}
+
+@media screen and (max-width: 1024px) {
+ #wrapper {
+ margin: 20px auto;
+ width: 94%;
+ }
+
+ #access,
+ #access .menu-header,
+ div.menu,
+ #colophon,
+ #branding,
+ #main,
+ #footer {
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ #branding {
+ overflow:hidden;
+ }
+
+ /* added extra lines from the next release of twentyten */
+#content img {
+ max-width: 100%;
+ }
+
+ /*
+ LAYOUT: Two columns
+ DESCRIPTION: Responsive.
+ 940 = 720 + 220
+ 100% = 76.5957447% + 23.40425535%
+ */
+
+ #container {
+ float: left;
+ margin: 0 -25.5319149% 0 0;
+ width: 99%;
+ }
+ #content {
+ width: 68.5957447%;
+ /*margin: 0 29.787234% 0 20px;*/
+ margin: 0 29.787234% 0 20px;
+ }
+ #primary,
+ #secondary {
+ overflow: hidden;
+ width: 23.40425535% /* 200px / 940px */
+ }
+
+ #site-title, #site-info {
+ width:74.4680851% /* 700px / 940px */
+ }
+
+ #footer-widget-area .widget-area,
+ #site-generator,
+ #site-description {
+ width: 23.40425535% /* 200px / 940px */
+ }
+
+}
+
+
+@media screen and (max-width: 660px) {
+ #wrapper {
+ margin: 5px auto;
+ width: 90%;
+ padding: 0 3%;
+ }
+
+ #access,
+ #access .menu-header,
+ div.menu,
+ #colophon,
+ #branding,
+ #main,
+ #footer {
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ #branding {
+ overflow:hidden;
+ }
+
+ #site-title {
+ width: 100%;
+ }
+
+ #container {
+ float: left;
+ width: 100%;
+ overflow: auto;
+ }
+
+ #content {
+ width: 93%;
+ margin: 0 0px 0 0px;
+ }
+
+ .alignleft, img.alignleft, #content img.alignleft, .alignright, img.alignright, #content img.alignright {
+ clear: both;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ float: none;
+ }
+
+ #primary,
+ #secondary {
+ float: left;
+ overflow: hidden;
+ width: 99%;
+ }
+ #secondary {
+ clear: left;
+ }
+
+ #site-generator, #site-description, #site-info, #site-title {
+ clear: left;
+ float: left;
+ width: 95%;
+ padding: 0;
+ margin: 0;
+ }
+
+}