From de9b00e16fb5b1294f58c2c55ca1aecc23de5b1a Mon Sep 17 00:00:00 2001 From: profstein Date: Sun, 29 Jan 2023 23:40:41 +0000 Subject: [PATCH 1/4] these js files are not needed anymore --- js/respond.min.js | 6 ------ js/selectivizr-min.js | 5 ----- 2 files changed, 11 deletions(-) delete mode 100755 js/respond.min.js delete mode 100755 js/selectivizr-min.js diff --git a/js/respond.min.js b/js/respond.min.js deleted file mode 100755 index 8353e99..0000000 --- a/js/respond.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ -/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ -window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='­',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document); - -/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ -(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this); diff --git a/js/selectivizr-min.js b/js/selectivizr-min.js deleted file mode 100755 index 5adda2f..0000000 --- a/js/selectivizr-min.js +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * selectivizr v1.0.2 - (c) Keith Clark, freely distributable under the terms of the MIT license. - * selectivizr.com - */ -(function(j){function A(a){return a.replace(B,h).replace(C,function(a,d,b){for(var a=b.split(","),b=0,e=a.length;b0){var a=l,f,e=s.substring(0,e).replace(H,i);if(e==i||e.charAt(e.length-1)==o)e+="*";try{f=t(e)}catch(k){}if(f){e=0;for(c=f.length;e-1&&(a=a.substring(0,l));if(a.charAt(0)==":")switch(a.slice(1)){case "root":c=function(a){return b?a!=p:a==p};break;case "target":if(m==8){c=function(a){function c(){var d=location.hash,e=d.slice(1);return b?d==i||a.id!=e:d!=i&&a.id==e}k(j,"hashchange",function(){g(a,d,c())});return c()};break}return!1;case "checked":c=function(a){J.test(a.type)&&k(a,"propertychange",function(){event.propertyName=="checked"&&g(a,d,a.checked!==b)});return a.checked!==b};break;case "disabled":b=!b;case "enabled":c=function(c){if(K.test(c.tagName))return k(c,"propertychange",function(){event.propertyName=="$disabled"&&g(c,d,c.a===b)}),q.push(c),c.a=c.disabled,c.disabled===b;return a==":enabled"?b:!b};break;case "focus":e="focus",f="blur";case "hover":e||(e="mouseenter",f="mouseleave");c=function(a){k(a,b?f:e,function(){g(a,d,!0)});k(a,b?e:f,function(){g(a,d,!1)});return b};break;default:if(!L.test(a))return!1}return{className:d,b:c}}function w(a){return M+"-"+(m==6&&N?O++:a.replace(P,function(a){return a.charCodeAt(0)}))}function D(a){return a.replace(x,h).replace(Q,o)}function g(a,c,d){var b=a.className,c=u(b,c,d);if(c!=b)a.className=c,a.parentNode.className+=i}function u(a,c,d){var b=RegExp("(^|\\s)"+c+"(\\s|$)"),e=b.test(a);return d?e?a:a+o+c:e?a.replace(b,h).replace(x,h):a}function k(a,c,d){a.attachEvent("on"+c,d)}function r(a,c){if(/^https?:\/\//i.test(a))return c.substring(0,c.indexOf("/",8))==a.substring(0,a.indexOf("/",8))?a:null;if(a.charAt(0)=="/")return c.substring(0,c.indexOf("/",8))+a;var d=c.split(/[?#]/)[0];a.charAt(0)!="?"&&d.charAt(d.length-1)!="/"&&(d=d.substring(0,d.lastIndexOf("/")+1));return d+a}function y(a){if(a)return n.open("GET",a,!1),n.send(),(n.status==200?n.responseText:i).replace(R,i).replace(S,function(c,d,b,e,f){return y(r(b||f,a))}).replace(T,function(c,d,b){d=d||i;return" url("+d+r(b,a)+d+") "});return i}function U(){var a,c;a=f.getElementsByTagName("BASE");for(var d=a.length>0?a[0].href:f.location.href,b=0;b0&&setInterval(function(){for(var a=0,c=q.length;a8||!n)){var z={NW:"*.Dom.select",MooTools:"$$",DOMAssistant:"*.$",Prototype:"$$",YAHOO:"*.util.Selector.query",Sizzle:"*",jQuery:"*",dojo:"*.query"},t,q=[],O=0,N=!0,M="slvzr",R=/(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g,S=/@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g,T=/\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g,L=/^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/,B=/:(:first-(?:line|letter))/g,C=/(^|})\s*([^\{]*?[\[:][^{]+)/g,G=/([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g,H=/(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g,P=/[^\w-]/g,K=/^(INPUT|SELECT|TEXTAREA|BUTTON)$/,J=/^(checkbox|radio)$/,v=m>6?/[\$\^*]=(['"])\1/:null,E=/([(\[+~])\s+/g,F=/\s+([)\]+~])/g,Q=/\s+/g,x=/^\s*((?:[\S\s]*\S)?)\s*$/,i="",o=" ",h="$1";(function(a,c){function d(){try{p.doScroll("left")}catch(a){setTimeout(d,50);return}b("poll")}function b(d){if(!(d.type=="readystatechange"&&f.readyState!="complete")&&((d.type=="load"?a:f).detachEvent("on"+d.type,b,!1),!e&&(e=!0)))c.call(a,d.type||d)}var e=!1,g=!0;if(f.readyState=="complete")c.call(a,i);else{if(f.createEventObject&&p.doScroll){try{g=!a.frameElement}catch(h){}g&&d()}k(f,"readystatechange",b);k(a,"load",b)}})(j,function(){for(var a in z){var c,d,b=j;if(j[a]){for(c=z[a].replace("*",a).split(".");(d=c.shift())&&(b=b[d]););if(typeof b=="function"){t=b;U();break}}}})}}})(this); \ No newline at end of file From 568c3a9854032abba38cf243fb8d6bd8f8a875fa Mon Sep 17 00:00:00 2001 From: profstein Date: Sun, 29 Jan 2023 23:41:11 +0000 Subject: [PATCH 2/4] simplyfy content and leave page blank --- index.html | 68 ++++++++++++------------------------------------------ 1 file changed, 15 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index d7dec4a..3fda0a9 100644 --- a/index.html +++ b/index.html @@ -2,65 +2,27 @@ - + + Basic Responsive Page - - - - - - + + -
-
- header image -
- -
-
-

featured image

-

This page was created to show a relatively basic but still full featured responsive page. It is intended more for educational purposes than as a full production-ready page. But feel free to use it how you like as a base for your own designs. If you do, drop me a note and let me know.

-
- -
-

featured image

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

-
+ + + -
-

featured image

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

-
-
+
+ +
- - -
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
- - -
-

© Chris Stein 2013

+
+
-
- - + + + \ No newline at end of file From e50426c18db9be4c4e3c198c6c4728cb6883348e Mon Sep 17 00:00:00 2001 From: profstein Date: Sun, 29 Jan 2023 23:41:39 +0000 Subject: [PATCH 3/4] remove specfic css and leave only mq placeholders --- css/style.css | 196 +++++++++++--------------------------------------- 1 file changed, 42 insertions(+), 154 deletions(-) diff --git a/css/style.css b/css/style.css index 6698239..9c4d010 100644 --- a/css/style.css +++ b/css/style.css @@ -5,7 +5,7 @@ General Styles These are the styles that will apply to the page first. It includes things like basic fonts, font-size, link styling, list, base nvigation styling and so on. I'm not including most of that here but instead a couple of things that will help in most responsive designs (there is no "always" rule). */ -/* Border Box +/* Border Box -------------------------- This is used to help you be able to set the widths of things once and then come and fiddle with borders and padding later without having to recalculate and change the width (something you have to do with the standard, default setting). */ *{ @@ -16,168 +16,56 @@ This is used to help you be able to set the widths of things once and then come box-sizing: border-box; } -/* Responsive Media +/* Responsive Media --------------------- These settings allow media elements (img, video) to change size as their containing element changes size (which is part of a fluid grid and you want to happen). */ img,video{width: auto; max-width: 100%; height: auto; margin: 0 auto 1em;} -/* Specific tyles for this design -These are just some specific styles I set to make the boxes look nice. You can ignore for your own designs. Setting the body font-size is important though as it sets the tone for all of the ems you wil use. -*/ -body{ - font-size:100%; - line-height:1.5; - font-family:sans-serif; -} - -p{ - margin-bottom:1em; -} - -/* Your layout code goes here -Here is a good place to put the code you have for your default layout. By default layout I mean the one that people see if there are no media queries. If you are doing mobile-first design this is where you would style the mobile look. If not then you can just do whatever it is you normally do for a site. -*/ - -.container{ - width:95%; - max-width: 75em; /* 1200 / 16 */ - margin:0 auto; - -} - -.feature{ - border:1px solid #555; - padding: 0.625em; /* 10/16 */ - margin-bottom: 1.25em;/*20 /16 */ -} - -footer{ - clear:both; - border-top: 3px solid #999; -} - -.boxes{ - clear:both; /*To make sure it doesn't run into the content above*/ -} - -.boxes div{ - width:100%; - border:1px solid #999; - margin-bottom:1em; - padding:.5em; - height:4em; - line-height:3em; - text-align: center; - background-color: #ffe9e9; -} /* ============================== Media Queries ============================== This is the media queries that make the site change at different screen widths. + Below is an example. You can modify or replace */ -@media only screen and (min-width: 30em) { -/* Screen from 480px and up - 480/16 = 30 - 480 is iphone in landscape before longer screen and retina - */ - - .boxes div{ - width:48%; - float:left; - background-color: #e9ffe9; - } - - .boxes div:nth-child(2n){ - float:right; - } -} - - -@media only screen and (min-width: 40em) { - /* Screens from 640px and up - */ - - .boxes div{ - width:32%; - margin-right:1.9%; - background-color: #e9e9ff; - } - - /* remove previous nth-child */ - .boxes div:nth-child(2n){ - float:left; - } - - .boxes div:nth-child(3n){ - float:right; - margin-right:0; - } - - .feature{ - width:100%; - overflow:hidden; - } - .feature p{ - float:left; - width:47.916667%; /*230 / 480*/ - margin-right:4.166666667%; /*20 / 480 */ - text-align:justify; - } - - .feature p:last-child{ - margin-right:0; - } -} - -@media only screen and (min-width: 50em) { - /* Screens from 800px and up - - */ - - .boxes div{ - width:24%; - float:left; - margin-right:1.32%; - background-color: #ffffe9; - } - - .boxes div:nth-child(3n){ - float:left; - margin-right:1.32%; - } - - .boxes div:nth-child(4n){ - float:right; - margin-right:0; - } - - .feature{ - float:left; - width:31.666667%; /*380 / 1200 */ - margin-right:2.5%; /* 30/1200 */ - } - - .feature:last-child{ - margin-right:0; - } - - .feature p{ - width: 100%; - float:none; - margin:0; - - - } - - .feature p:first-letter { - float: left; - font-size: 300%; - margin: -10px 5px -10px 0; - - margin: 0 5px 0 0; - line-height:1; - } -} \ No newline at end of file + +/* CSS here for every device (import fonts, set base typography, base responsive styles, colors etc). */ +/* + Styles not in a media query will affect all screens. + Add those first and for mobile-first design, + start with the styles for mobile (small screen) devices +*/ + + +@media (min-width: 600px){ + /* Screens from 600px and up */ + /* this applies to mobile in landscape and some tablets in portrait */ + +}/* end min-width 600 */ + + + +@media (min-width: 900px){ + /* Screens from 900px and up */ + /* this applies to tablets */ + +}/* end min-width 900 */ + + + + @media (min-width: 1200px){ + /* Screens from 1200px and up */ + /* this applies average laptops */ + + }/* end min-width 1200 */ + + + + @media (min-width: 1800px){ + /* Screens from 1800px and up */ + /* this applies to large laptops and desktops */ + + }/* end min-width 1800 */ + From 80c17059de6711f9a8a265cf906de148b18cc21b Mon Sep 17 00:00:00 2001 From: profstein Date: Sun, 29 Jan 2023 23:41:58 +0000 Subject: [PATCH 4/4] add main js file placeholder --- js/main.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 js/main.js diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..7001bbc --- /dev/null +++ b/js/main.js @@ -0,0 +1 @@ +// add your site's javascript code here \ No newline at end of file