Difference between revisions of "Template:Lethbridge/mini-template-css"

(Created page with "<html> <style> .twoText-Wrapper { width: 95%; text-align: center; } .twoText-Text { width: 45%; padding: 1em; display: inline-block; } .twoImage-Wrapper { width: 95%...")
 
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
.twoText-Wrapper {
+
@charset "UTF-8";
−
width: 95%;
+
/* CSS Document */
−
text-align: center;
+
 
−
}
+
.twoText-Wrapper {width: 95%; text-align: center;}
−
.twoText-Text {
+
.twoText-Text {width: 45%; padding: 1em; display: inline-block; vertical-align: top !important;}
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
 
 
−
.twoImage-Wrapper {
+
.twoImage-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.twoImage-Image {width: 47%; display: inline-block;}
−
text-align: center;
+
.twoImage-Image img {max-width: 100%; padding: 1em; width: 100%;}
−
}
+
−
.twoImage-Image {
+
−
width: 47.5%;
+
−
display: inline-block;
+
−
}
+
−
.twoImage-Image img {
+
−
padding: 1em;
+
−
width: 100%;
+
−
}
+
  
−
.twoText-Wrapper {
+
.twoText-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.twoText-Text {width: 47%; padding: 1em; display: inline-block;}
−
text-align: center;
+
−
}
+
−
.twoText-Text {
+
−
width: 30%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
  
−
.threeImage-Wrapper {
+
.threeImage-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.threeImage-Image {width: 31.66%; display: inline-block;}
−
text-align: center;
+
.threeImage-Image img {max-width: 100%;padding: 1em; width: 100%;}
−
}
+
−
.threeImage-Image {
+
−
width: 31.66%;
+
−
display: inline-block;
+
−
}
+
−
.threeImage-Image img {
+
−
padding: 1em;
+
−
width: 100%;
+
−
}
+
  
−
.textBlock-Wrapper {
+
.threeText-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.threeText-Text {width: 30%; padding: 1em; display: inline-block;}
−
text-align: center;
+
−
}
+
−
.textBlock-Block {
+
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.textBlock-Text {
+
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.textBlock-Block blockquote {
+
−
background-color: aqua;
+
−
border:solid;
+
−
border-width: medium;
+
−
border-radius: 10px;
+
−
}
+
−
.textBlock-Block blockquote p {
+
−
padding-left: 1em;
+
−
padding-right: 1em;
+
−
}
+
  
−
.oneText-Wrapper {
+
.textBlock-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.textBlock-Block {width: 45%; padding: 1em; display: inline-block;}
−
text-align: center;
+
.textBlock-Text {width: 45%; padding: 1em; display: inline-block;}
−
}
+
.textBlock-Block blockquote {background-color: rgba(171,171,171,0.4); border:solid; border-color: rgba(21,27,31,0.8); border-width: medium; border-radius: 5px;}
−
.oneText-Text {
+
.textBlock-Block blockquote p {padding-left: 1em; padding-right: 1em;}
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
  
−
.oneImage-Wrapper {
+
.oneText-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.oneText-Text {width: 90%; padding: 1em; display: inline-block;}
−
text-align: center;
+
−
}
+
−
.oneImage-Image {
+
−
display: inline-block;
+
−
}
+
−
.oneImage-Image img {
+
−
width: 45%;
+
−
padding: 1em;
+
−
}
+
  
−
.fourImage-Wrapper {
+
.oneImage-Wrapper {width: 95%; text-align: center;}
−
width: 95%;
+
.oneImage-Image {display: inline-block;}
−
text-align: center;
+
.oneImage-Image img {max-width: 100%;padding: 1em;}
−
}
+
−
.fourImage-Image {
+
−
width: 23.75%;
+
−
display: inline-block;
+
−
}
+
−
.fourImage-Image img {
+
−
padding: 1em;
+
−
width: 100%;
+
−
}
+
  
−
.textImage-Wrapper {
+
.fourImage-Wrapper {width: 95%;text-align: center;}
−
width: 95%;
+
.fourImage-Image {width: 23.75%;display: inline-block;}
−
float: left;
+
.fourImage-Image img {max-width: 100%; padding: 1em;}
−
}
+
−
.textImage-Image img {
+
−
width: 45%;
+
−
padding: 1em;
+
−
float:left;
+
−
}
+
−
.textImage-Text {
+
−
width: 45%;
+
−
padding: 1em;
+
−
float: left;
+
−
}
+
  
−
.textImage-Wrapper {
+
.textImage-Wrapper {width: 95%; margin: 0 auto;}
−
width: 95%;
+
.textImage-Text {width: 45%; padding: 1em; float: left;}
−
float: left;
+
.textImage-Image {width: 45%; padding: 1em; float: left;}
−
}
+
.textImage-Image img {max-width: 100%}
−
.textImage-Image img {
+
−
width: 45%;
+
−
padding: 1em;
+
−
float:left;
+
−
}
+
−
.textImage-Text {
+
−
width: 45%;
+
−
padding: 1em;
+
−
float: left;
+
−
}
+
  
−
.blockImage-Wrapper {
+
.imageText-Wrapper {width: 95%;}
−
width: 95%;
+
.imageText-Text {width: 45%; padding: 1em; float: left;}
−
text-align: center;
+
.imageText-Image {width: 45%; padding: 1em; float: left;}
−
}
+
.imageText-Image img {max-width: 100%; height: auto}
−
.blockImage-Block {
+
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.blockImage-Image {
+
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.blockImage-Block blockquote {
+
−
background-color: rgba(171,171,171,0.4);
+
−
border:solid;
+
−
border-color: rgba(21,27,31,0.8);
+
−
border-width: medium;
+
−
border-radius: 5px;
+
−
}
+
−
.blockImage-Block blockquote p {
+
−
padding-left: 1em;
+
−
padding-right: 1em;
+
−
}
+
  
−
.blockText-Wrapper {
+
.blockImage-Wrapper {width: 95%;text-align: center;}
−
width: 95%;
+
.blockImage-Block {width: 45%;padding: 1em;display: inline-block;}
−
text-align: center;
+
.blockImage-Image {width: 45%;padding: 1em;display: inline-block;}
−
}
+
.blockImage-Image img {max-width: 100%;}
−
.blockText-Block {
+
.blockImage-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;}
−
width: 45%;
+
.blockImage-Block blockquote p {padding-left: 1em;padding-right: 1em;}
−
padding: 1em;
+
 
−
display: inline-block;
+
.blockText-Wrapper {width: 95%;text-align: center;}
−
}
+
.blockText-Block {width: 45%;padding: 1em;display: inline-block;}
−
.blockText-Text {
+
.blockText-Text {width: 45%;padding: 1em;display: inline-block;}
−
width: 45%;
+
.blockText-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;}
−
padding: 1em;
+
.blockText-Block blockquote p {padding-left: 1em;padding-right: 1em;}
−
display: inline-block;
+
−
}
+
−
.blockText-Block blockquote {
+
−
background-color: rgba(171,171,171,0.4);
+
−
border:solid;
+
−
border-color: rgba(21,27,31,0.8);
+
−
border-width: medium;
+
−
border-radius: 5px;
+
−
}
+
−
.blockText-Block blockquote p {
+
−
padding-left: 1em;
+
−
padding-right: 1em;
+
−
}
+
 
 
−
.imageBlock-Wrapper {
+
.imageBlock-Wrapper {width: 95%;text-align: center;}
−
width: 95%;
+
.imageBlock-Block {width: 45%;padding: 1em;display: inline-block;}
−
text-align: center;
+
.imageBlock-Image {width: 45%;padding: 1em;display: inline-block; vertical-align: top !important}
−
}
+
.imageBlock-Image img {max-width: 100%; vertical-align: top !important}
−
.imageBlock-Block {
+
.imageBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;}
−
width: 45%;
+
blockquote p {padding-left: 1em;padding-right: 1em;}
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.imageBlock-Image {
+
−
width: 45%;
+
−
padding: 1em;
+
−
display: inline-block;
+
−
}
+
−
.imageBlock-Block blockquote {
+
−
background-color: rgba(171,171,171,0.4);
+
−
border:solid;
+
−
border-color: rgba(21,27,31,0.8);
+
−
border-width: medium;
+
−
border-radius: 5px;
+
−
}
+
−
blockquote p {
+
−
padding-left: 1em;
+
−
padding-right: 1em;
+
−
}
+
  
−
.oneBlock-Wrapper {
+
.oneBlock-Wrapper {width: 95%;text-align: center;}
−
width: 95%;
+
.oneBlock-Block {width: 80%;padding: 1em;display: inline-block;}
−
text-align: center;
+
.oneBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;}
−
}
+
.oneBlock-Block blockquote p {padding: 1em;}
−
.oneBlock-Block {
+
 
−
width: 70%;
+
@media screen and (max-width: 800px) {
−
padding: 1em;
+
      .imageBlock-Image {width: 95%}
−
display: inline-block;
+
      .imageBlock-Block {width: 95%}
−
}
+
}
−
.oneBlock-Block blockquote {
+
 
−
background-color: rgba(171,171,171,0.4);
+
@media screen and (max-width: 716px) {
−
border:solid;
+
.textImage-Text {width: 95%}
−
border-color: rgba(21,27,31,0.8);
+
.textImage-Image {width: 95%}
−
border-width: medium;
+
        .twoImage-Image {width: 95%}
−
border-radius: 5px;
+
      .twoText-Text {width: 95%}
−
}
+
    .blockText-Text {width: 95%}
−
.oneBlock-Block blockquote p {
+
    .content video {width: 95%}
−
padding: 1em;
+
 
−
}
+
}
 +
 
 +
@media screen and (max-width: 594px) {
 +
    .imageText-Text {width: 95%;}
 +
    .imageText-Image {display: block; margin: 0 auto;}
 +
    .imageBlock-Block {width: 95%}
 +
    .blockImage-Block {width: 95%}
 +
    .blockText-Block {width: 95%}
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 02:54, 18 October 2018