Sākums Izpētīt Palīdzība
Pierakstīties
coresolutions
/
wdk-bsp1
2
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

News Desktop Mobile gebaut. ToDo Anpassung Größen

Tabea Gutmann 2 gadi atpakaļ
vecāks
50e42cafe7
revīzija
4cdf0201a4
9 mainītis faili ar 196 papildinājumiem un 0 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 1 0
      customsites/events/events.css
  2. 1 0
      customsites/events/events.css.map
  3. 86 0
      customsites/news/news.css
  4. 1 0
      customsites/news/news.css.map
  5. 26 0
      customsites/news/news.html
  6. 69 0
      customsites/news/news.sass
  7. 4 0
      includes/_colors.sass
  8. 1 0
      includes/_fonts.sass
  9. 7 0
      includes/_mixins.sass

+ 1 - 0
customsites/events/events.css
Parādīt failu 

@@ -0,0 +1 @@
 
+/*# sourceMappingURL=events.css.map */

+ 1 - 0
customsites/events/events.css.map
Parādīt failu 

@@ -0,0 +1 @@
 
+{"version":3,"sources":[],"names":[],"mappings":"","file":"events.css"}

+ 86 - 0
customsites/news/news.css
Parādīt failu 

@@ -0,0 +1,86 @@
 
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
+body {
 
+  margin: 0;
 
+  font-family: Montserrat, sans-serif;
 
+}
 
+
 
+p {
 
+  margin: 0;
 
+}
 
+
 
+.aio-news-wrapper {
 
+  background-color: #ffd3b6;
 
+  width: 100vw;
 
+  height: 100vh;
 
+  display: flex;
 
+  justify-content: center;
 
+  gap: 60px;
 
+}
 
+@media only screen and (max-width: 768px) {
 
+  .aio-news-wrapper {
 
+    flex-direction: column;
 
+  }
 
+}
 
+.aio-news-wrapper .news-element {
 
+  background-color: #dcedc1;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  width: 40%;
 
+  height: 40%;
 
+  align-self: center;
 
+}
 
+@media only screen and (max-width: 1200px) {
 
+  .aio-news-wrapper .news-element {
 
+    width: 30%;
 
+  }
 
+}
 
+@media only screen and (max-width: 768px) {
 
+  .aio-news-wrapper .news-element {
 
+    width: 80%;
 
+  }
 
+}
 
+.aio-news-wrapper .news-element p {
 
+  margin-left: 30px;
 
+}
 
+.aio-news-wrapper .news-element p:nth-child(1) {
 
+  font-weight: 300;
 
+  font-size: 20px;
 
+  padding-bottom: 0px;
 
+}
 
+@media only screen and (max-width: 768px) {
 
+  .aio-news-wrapper .news-element p:nth-child(1) {
 
+    font-size: 30px;
 
+  }
 
+}
 
+.aio-news-wrapper .news-element p:nth-child(2) {
 
+  font-weight: 500;
 
+  font-size: 60px;
 
+  line-height: 60px;
 
+  padding-bottom: 20px;
 
+}
 
+.aio-news-wrapper .news-element p:nth-child(3) {
 
+  font-weight: 400;
 
+  font-size: 20px;
 
+  padding-bottom: 20px;
 
+  width: 80%;
 
+}
 
+.aio-news-wrapper .news-element a {
 
+  align-self: flex-end;
 
+  margin-right: 30px;
 
+  background-color: #ffffff;
 
+  color: #ffd3b6;
 
+  text-decoration: none;
 
+  font-weight: 500;
 
+  padding: 8px;
 
+}
 
+.aio-news-wrapper .news-element a:hover {
 
+  background-color: #ffd3b6;
 
+  color: #ffffff;
 
+}
 
+@media only screen and (max-width: 1200px) {
 
+  .aio-news-wrapper .news-element a:hover {
 
+    background-color: #ffffff;
 
+    color: #ffd3b6;
 
+  }
 
+}/*# sourceMappingURL=news.css.map */

+ 1 - 0
customsites/news/news.css.map
Parādīt failu 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["../../includes/_fonts.sass","news.sass","news.css","../../includes/_colors.sass","../../includes/_mixins.sass"],"names":[],"mappings":"AAAQ,wHAAA;ACIR;EACI,SAAA;EACA,mCAAA;ACFJ;;ADIA;EACI,SAAA;ACDJ;;ADGA;EACI,yBEZQ;EFaR,YAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,SAAA;ACAJ;AEhBI;EHUJ;IAQQ,sBAAA;ECEN;AACF;ADDI;EACI,yBErBM;EFsBN,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,UAAA;EAKA,WAAA;EACA,kBAAA;ACDR;AE1BI;EHgBA;IAOQ,UAAA;ECOV;AACF;AEnCI;EHoBA;IASQ,UAAA;ECUV;AACF;ADRQ;EACI,iBAAA;ACUZ;ADRQ;EACI,gBAAA;EACA,eAAA;EAGA,mBAAA;ACQZ;AEhDI;EHmCI;IAIQ,eAAA;ECad;AACF;ADXQ;EACI,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,oBAAA;ACaZ;ADXQ;EACI,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,UAAA;ACaZ;ADXQ;EACI,oBAAA;EACA,kBAAA;EACA,yBEvDE;EFwDF,cE3DA;EF4DA,qBAAA;EACA,gBAAA;EACA,YAAA;ACaZ;ADZQ;EACI,yBEhEA;EFiEA,cE9DE;AD4Ed;AE1EI;EH0DI;IAIQ,yBEhEF;IFiEE,cEpEJ;EDoFV;AACF","file":"news.css"}

+ 26 - 0
customsites/news/news.html
Parādīt failu 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="de">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="news.css">
 
+</head>
 
+<body>
 
+    <div class="aio-news-wrapper">
 
+        <div class="news-element">
 
+            <p>01.01.2023</p>
 
+            <p>Newsbeitrag</p>
 
+            <p>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet</p>
 
+            <a href="#">weiterlesen</a>
 
+        </div>
 
+        <div class="news-element">
 
+            <p>01.01.2023</p>
 
+            <p>Newsbeitrag</p>
 
+            <p>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet</p>
 
+            <a href="#">weiterlesen</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 69 - 0
customsites/news/news.sass
Parādīt failu 

@@ -0,0 +1,69 @@
 
+@import ../../includes/_colors
 
+@import ../../includes/_fonts
 
+@import ../../includes/_mixins
 
+
 
+body
 
+    margin: 0
 
+    font-family: Montserrat, sans-serif
 
+
 
+p
 
+    margin: 0
 
+
 
+.aio-news-wrapper
 
+    background-color: $color-rot
 
+    width: 100vw
 
+    height: 100vh
 
+    display: flex
 
+    justify-content: center
 
+    gap: 60px
 
+    @include mobile
 
+        flex-direction: column
 
+
 
+    .news-element
 
+        background-color: $color-gruen
 
+        display: flex
 
+        flex-direction: column
 
+        justify-content: center
 
+        width: 40%
 
+        @include tablet
 
+            width: 30%
 
+        @include mobile
 
+            width: 80%
 
+        height: 40%
 
+        align-self: center
 
+        p
 
+            margin-left: 30px
 
+
 
+        p:nth-child(1)
 
+            font-weight: 300
 
+            font-size: 20px
 
+            @include mobile
 
+                font-size: 30px
 
+            padding-bottom: 0px
 
+
 
+        p:nth-child(2)
 
+            font-weight: 500
 
+            font-size: 60px
 
+            line-height: 60px
 
+            padding-bottom: 20px
 
+
 
+        p:nth-child(3)
 
+            font-weight: 400
 
+            font-size: 20px
 
+            padding-bottom: 20px
 
+            width: 80%
 
+
 
+        a
 
+            align-self: flex-end
 
+            margin-right: 30px
 
+            background-color: $color-weiss
 
+            color: $color-rot
 
+            text-decoration: none
 
+            font-weight: 500
 
+            padding: 8px
 
+        a:hover
 
+            background-color: $color-rot
 
+            color: $color-weiss
 
+            @include tablet
 
+                background-color: $color-weiss
 
+                color: $color-rot

+ 4 - 0
includes/_colors.sass
Parādīt failu 

@@ -0,0 +1,4 @@
 
+$color-rot: #ffd3b6
 
+$color-gruen: #dcedc1
 
+$color-blau: #a8e6cf
 
+$color-weiss: #ffffff

+ 1 - 0
includes/_fonts.sass
Parādīt failu 

@@ -0,0 +1 @@
 
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap')

+ 7 - 0
includes/_mixins.sass
Parādīt failu 

@@ -0,0 +1,7 @@
 
+@mixin mobile
 
+    @media only screen and ( max-width: 768px )
 
+        @content    
+
 
+@mixin tablet
 
+    @media only screen and ( max-width: 1200px )
 
+        @content