diff --git a/ninas-umfrage/css/style-plan.css b/ninas-umfrage/css/style-plan.css new file mode 100644 index 0000000..5d08d9f --- /dev/null +++ b/ninas-umfrage/css/style-plan.css @@ -0,0 +1,93 @@ +* { + margin: 0; + padding: 0; + position: relative; + box-sizing: border-box; + line-height: 1.5; +} + +body { + font-family: "Myriad Pro", "Lucida Grande", "Trebuchet MS", sans-serif; + color: #202020; + padding: 2rem; + background: + url(../images/square_bg.png) repeat top left, + url(../images/logo_transparent.png) no-repeat calc(100vw - 200px) 30px; + background-size: auto, 150px 150px; +} + +header, main, footer { + box-sizing: border-box; + margin: 0 auto; + width: 750px; + max-width: calc(100vw-2rem); +} + +main { + margin-top: 2rem; + margin-bottom: 2rem; +} + +h1, +h2 { + padding-bottom: .5rem; +} + +h2 { + margin-top: 2rem; +} + +a:link, +a:visited, +a:active, +a:hover { + text-decoration: none; +} + +a:link, +a:visited, +a:active, +a:hover { + color: rgb(41, 125, 207); + transition: color .2s; +} + +table { + cellpadding: .5rem; + border-collapse: collapse; +} + +table tr:not(:last-of-type) { + border-bottom: 1px solid gray; +} + +table th { + text-align: left; +} + +table td.first-row { + width: 180px; +} + +table th, table td { + vertical-align: top; + padding: .5rem .2rem; +} + +@media screen and (max-width: 1100px) { + body { + background: url(../images/square_bg.png) repeat top left; + } + + main, header, footer { + margin-left: 0; + margin-right: 0; + max-width: calc(100vw - 4rem); + } +} + +@media screen and (max-width: 530px) { + body { + padding: 1rem; + } +} \ No newline at end of file diff --git a/ninas-umfrage/css/style.css b/ninas-umfrage/css/style.css new file mode 100644 index 0000000..77a5824 --- /dev/null +++ b/ninas-umfrage/css/style.css @@ -0,0 +1,120 @@ +* { + margin: 0; + padding: 0; + position: relative; + box-sizing: border-box; +} + +body { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100vh; + padding: 2rem; + font-family:"Myriad Pro", "Lucida Grande", "Trebuchet MS", sans-serif; + color: #202020; + background: + url(../images/square_bg.png) repeat top left, + url(../images/logo_transparent.png) no-repeat calc(100vw - 200px) 30px; + background-size: auto, 150px 150px; +} + +h1, h2 { + padding-bottom: .5rem; +} + +main ul { + display: grid; + margin: 2rem 0; + height: calc(100% - 4rem); + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); + grid-gap: 4px; + list-style: none; +} + +main ul li a { + --baseHue: 213; + --altHue: 199; + + --hue: var(--baseHue); + --sat: 100%; + --lum: 67%; + --alpha: .4; + + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding: 1.5rem; + background-color: hsla(var(--hue), var(--sat), var(--lum), var(--alpha)); + transition: background-color .2s ease-in-out; +} + +main ul li:nth-of-type(2n) a { + --hue: var(--altHue); +} + +main ul li a:hover { + --alpha: .2; +} + +main a:link, +main a:visited, +main a:active, +main a:hover { + text-decoration: none; +} + +a:link, +a:visited, +a:active, +a:hover { + color: rgb(15, 15, 15); + transition: color .2s; +} + +.without-english-version { + display: none; +} + +@media screen and (max-width: 850px) { + body { + background: url(../images/square_bg.png) repeat top left; + } + + main ul { + grid-template-columns: repeat(2, 1fr); + } + + main ul li:nth-of-type(2n) a { + --hue: var(--baseHue) + } + + main ul li:nth-of-type(4n + 1) a, + main ul li:nth-of-type(4n + 4) a { + --hue: var(--altHue) + } +} + +@media screen and (max-width: 530px) { + body { + padding: 1rem; + } + + main ul { + grid-template-columns: 1fr; + } + + main ul li:nth-of-type(4n + 1) a, + main ul li:nth-of-type(4n + 4) a { + --hue: var(--baseHue) + } + + main ul li:nth-of-type(2n) a { + --hue: var(--altHue) + } + + main ul li a { + padding: 1rem; + } +} \ No newline at end of file diff --git a/ninas-umfrage/index.html b/ninas-umfrage/index.html new file mode 100644 index 0000000..efead49 --- /dev/null +++ b/ninas-umfrage/index.html @@ -0,0 +1,51 @@ + + +
+
+
+
+ There ain't no nothing here.
+ + diff --git a/ninas-umfrage/twitter-card.png b/ninas-umfrage/twitter-card.png new file mode 100644 index 0000000..25774e8 Binary files /dev/null and b/ninas-umfrage/twitter-card.png differ