Template:Etusivu/styles.css: Difference between revisions

From kubu
Jump to navigationJump to search
Erland changed the content model of the page Etusivu/styles.css from "wikitext" to "CSS"
No edit summary
Line 1: Line 1:
.container {  display: grid;
body,html {background:red;}
.container {   
  display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto auto;
   grid-template-rows: auto auto auto auto auto;
   gap: 0px 0px;
   gap: 1em 1em;
   grid-auto-flow: row;
   grid-auto-flow: row;
   grid-template-areas:
   grid-template-areas:
     "aloita ."
     "aloita kubunopeasti"
     ". ."
     "nayttelyt ."
     "problems .";
     ". problems";
}
}


.aloita { grid-area: aloita; }
.aloita { grid-area: aloita; }
 
.kubunopeasti  { grid-area: kubunopeasti; }
.nayttelyt { grid-area: nayttelyt; }
.problems { grid-area: problems; }
.problems { grid-area: problems; }
.container > div {
background: #00b7ff40;
border: #00b7ffFF solid 1px;
border-radius: 10px;
}
@media (max-width: 800px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
    "aloita"
    "kubunopeasti"
    "nayttelyt"
    "problems";
}
}

Revision as of 11:31, 26 July 2024

body,html {background:red;}
.container {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "aloita kubunopeasti"
    "nayttelyt ."
    ". problems";
}

.aloita { grid-area: aloita; }
.kubunopeasti  { grid-area: kubunopeasti; }
.nayttelyt { grid-area: nayttelyt; }
.problems { grid-area: problems; }
.container > div {
	background: #00b7ff40;
	border: #00b7ffFF solid 1px;
	border-radius: 10px;
}
@media (max-width: 800px) {
	.container {
		grid-template-columns: 1fr;
		grid-template-areas:
	    "aloita" 
	    "kubunopeasti"
	    "nayttelyt"
	    "problems";
	}
}