diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..db13d8d --- /dev/null +++ b/css/main.css @@ -0,0 +1,403 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.hide { + display: none !important; +} + +body { + font-family: "lora", serif; + font-size: 16px; + color: #2f2f2f; + background-color: #f9f7f1; + --accent-color: teal; + --text-color: 24, 24, 24; + --foreground-color: 255, 255, 255; + --error-color: #e53935; +} + +header { + font-family: "Playfair Display", serif; + font-weight: 900; + width: 100%; + text-align: center; + font-size: 4rem; + text-transform: uppercase; + padding: 1rem 0; + letter-spacing: 6; +} + +p { + margin: 1.2rem 0; + display: -webkit-box; + -webkit-line-clamp: 8; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: justify; +} + +p:not(:first-of-type)::first-letter { + margin-left: 4rem; +} + +.flex { + display: flex; +} + +.align-center { + align-items: center; +} + +.space-between { + justify-content: space-between; +} + +#homepage { + display: grid; + grid-template-columns: minmax(0, 1fr); +} + +.topnav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; +} + +/* Style the links inside the navigation bar */ +.topnav a { + justify-self: center; + text-align: center; + text-decoration: none; + margin-left: -6rem; +} + +.rmtimeslogo_size { + height: 2rem; +} + +.head { + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + position: relative; + margin-bottom: 1rem; +} + +#news_columns { + padding: 1.5rem max(1.5rem, 4vw); + display: grid; + gap: 1.5rem; + margin-top: 1rem; + grid-template-columns: repeat(0, 1fr); +} + +.column { + width: 100%; + display: flex; + flex-direction: column; + font-size: 1.2rem; + line-height: 1.8; +} + +.column .headline { + text-align: center; + line-height: normal; + font-family: "lora", serif; + display: block; + margin: 0 auto; +} + +.column .headline.hl1 { + font-weight: 700; + font-size: 1.5rem; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl2 { + font-weight: 400; + font-size: 24px; + padding: 0.8rem 0; +} + +.column .headline.hl2:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl2:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 13px; + display: block; + margin: 0 auto; +} + +.column .headline.hl3 { + font-weight: 400; + font-size: 36px; + padding: 0.8rem 0; + font-style: italic; + font-family: "Playfair Display", serif; +} + +.column .headline.hl4 { + font-weight: 500; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl4:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl4:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl5 { + font-weight: 400; + font-size: 42px; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl6 { + font-weight: 400; + font-size: 18px; + padding: 0.8rem 0; +} + +.column .headline.hl6:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl6:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl7 { + font-weight: 700; + font-size: 0.9rem; + display: block; + padding: 0.8rem 0; +} + +.column .headline.hl8 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl9 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl10 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .citation { + font-family: "Playfair Display", serif; + font-size: 36px; + line-height: 44px; + /*font-style: italic;*/ + text-align: center; + font-weight: 400; + display: block; + margin: 40px 0 40px 0; + font-feature-settings: "liga", "dlig"; +} + +.column .citation:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .citation:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .figure { + margin: 0 0 20px; +} + +.column .figcaption { + font-style: italic; + font-size: 0.9rem; +} + +.media { + filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8); + mix-blend-mode: multiply; + width: 100%; +} + +:-webkit-any-link { + text-decoration: none; + color: #dc143c; + cursor: pointer; +} + +:-moz-any-link { + text-decoration: none; + color: #dc143c; + cursor: pointer; +} + +:any-link { + text-decoration: none; + color: #dc143c; + cursor: pointer; +} + +.spinner { + -webkit-animation: Rotate 2.4s both infinite linear; + animation: Rotate 2.4s both infinite linear; +} + +.path { + -webkit-animation: DrawLine 1.6s both infinite alternate linear; + animation: DrawLine 1.6s both infinite alternate linear; + fill: none; + stroke: #000; + stroke-width: 50; +} + +@-webkit-keyframes Rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes Rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-webkit-keyframes DrawLine { + 0% { + stroke-dasharray: 0 126; + } + 100% { + stroke-dasharray: 126 126; + } +} +@keyframes DrawLine { + 0% { + stroke-dasharray: 0 126; + } + 100% { + stroke-dasharray: 126 126; + } +} +.thank { + transition: ease-in; + transition-delay: 10s; +} + +.primary { + background-color: #ee75ee; + border-radius: 5px; + color: white; + width: 30%; + align-self: center; + margin-left: 33%; + margin-right: 33%; +} + +.primary:hover { + box-shadow: 10px 10px 10px #e2e2e2; +} + +.dispnum { + color: gray; + font-family: cursive; +} + +@media screen and (max-width: 900px) { + .star { + height: 40%; + width: 40%; + } + + .rating > label { + position: relative; + width: 1em; + font-size: 7vw; + color: #ffd500; + cursor: pointer; + justify-content: center; + } +} +/*________________________________________________________________________________________________________________________________*/ +/*MEDIAQUERIES*/ +@media all and (max-width: 640px) { + header { + font-size: 2.5rem; + } +} +@media all and (min-width: 640px) { + #news_columns { + gap: 3rem 2rem; + grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); + } + + .topnav { + padding: 1.5rem; + } + + .rmtimeslogo_size { + height: 3rem; + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..0081f2b --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +*{padding:0;margin:0;box-sizing:border-box}.hide{display:none !important}body{font-family:"lora",serif;font-size:16px;color:#2f2f2f;background-color:#f9f7f1;--accent-color: teal;--text-color: 24, 24, 24;--foreground-color: 255, 255, 255;--error-color: #e53935}header{font-family:"Playfair Display",serif;font-weight:900;width:100%;text-align:center;font-size:4rem;text-transform:uppercase;padding:1rem 0;letter-spacing:6}p{margin:1.2rem 0;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;text-align:justify}p:not(:first-of-type)::first-letter{margin-left:4rem}.flex{display:flex}.align-center{align-items:center}.space-between{justify-content:space-between}#homepage{display:grid;grid-template-columns:minmax(0, 1fr)}.topnav{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem}.topnav a{justify-self:center;text-align:center;text-decoration:none;margin-left:-6rem}.rmtimeslogo_size{height:2rem}.head{display:flex;flex-direction:column;text-align:center;justify-content:center;position:relative;margin-bottom:1rem}#news_columns{padding:1.5rem max(1.5rem,4vw);display:grid;gap:1.5rem;margin-top:1rem;grid-template-columns:repeat(0, 1fr)}.column{width:100%;display:flex;flex-direction:column;font-size:1.2rem;line-height:1.8}.column .headline{text-align:center;line-height:normal;font-family:"lora",serif;display:block;margin:0 auto}.column .headline.hl1{font-weight:700;font-size:1.5rem;text-transform:uppercase;padding:.8rem 0}.column .headline.hl2{font-weight:400;font-size:24px;padding:.8rem 0}.column .headline.hl2:before{border-top:1px solid #2f2f2f;content:"";width:100px;height:7px;display:block;margin:0 auto}.column .headline.hl2:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;height:13px;display:block;margin:0 auto}.column .headline.hl3{font-weight:400;font-size:36px;padding:.8rem 0;font-style:italic;font-family:"Playfair Display",serif}.column .headline.hl4{font-weight:500;font-size:.9rem;padding:.8rem 0}.column .headline.hl4:before{border-top:1px solid #2f2f2f;content:"";width:100px;height:7px;display:block;margin:0 auto}.column .headline.hl4:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;height:10px;display:block;margin:0 auto}.column .headline.hl5{font-weight:400;font-size:42px;text-transform:uppercase;padding:.8rem 0}.column .headline.hl6{font-weight:400;font-size:18px;padding:.8rem 0}.column .headline.hl6:before{border-top:1px solid #2f2f2f;content:"";width:100px;height:7px;display:block;margin:0 auto}.column .headline.hl6:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;height:10px;display:block;margin:0 auto}.column .headline.hl7{font-weight:700;font-size:.9rem;display:block;padding:.8rem 0}.column .headline.hl8{font-weight:700;font-size:.9rem;padding:.8rem 0}.column .headline.hl9{font-weight:700;font-size:.9rem;padding:.8rem 0}.column .headline.hl10{font-weight:700;font-size:.9rem;padding:.8rem 0}.column .citation{font-family:"Playfair Display",serif;font-size:36px;line-height:44px;text-align:center;font-weight:400;display:block;margin:40px 0 40px 0;font-feature-settings:"liga","dlig"}.column .citation:before{border-top:1px solid #2f2f2f;content:"";width:100px;height:16px;display:block;margin:0 auto}.column .citation:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;height:16px;display:block;margin:0 auto}.column .figure{margin:0 0 20px}.column .figcaption{font-style:italic;font-size:.9rem}.media{filter:sepia(80%) grayscale(1) contrast(1) opacity(0.8);mix-blend-mode:multiply;width:100%}:-webkit-any-link{text-decoration:none;color:crimson;cursor:pointer}:-moz-any-link{text-decoration:none;color:crimson;cursor:pointer}:any-link{text-decoration:none;color:crimson;cursor:pointer}.spinner{-webkit-animation:Rotate 2.4s both infinite linear;animation:Rotate 2.4s both infinite linear}.path{-webkit-animation:DrawLine 1.6s both infinite alternate linear;animation:DrawLine 1.6s both infinite alternate linear;fill:none;stroke:#000;stroke-width:50}@-webkit-keyframes Rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes Rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes DrawLine{0%{stroke-dasharray:0 126}100%{stroke-dasharray:126 126}}@keyframes DrawLine{0%{stroke-dasharray:0 126}100%{stroke-dasharray:126 126}}.thank{transition:ease-in;transition-delay:10s}.primary{background-color:#ee75ee;border-radius:5px;color:#fff;width:30%;align-self:center;margin-left:33%;margin-right:33%}.primary:hover{box-shadow:10px 10px 10px #e2e2e2}.dispnum{color:gray;font-family:cursive}@media screen and (max-width: 900px){.star{height:40%;width:40%}.rating>label{position:relative;width:1em;font-size:7vw;color:#ffd500;cursor:pointer;justify-content:center}}@media all and (max-width: 640px){header{font-size:2.5rem}}@media all and (min-width: 640px){#news_columns{gap:3rem 2rem;grid-template-columns:repeat(auto-fit, minmax(26rem, 1fr))}.topnav{padding:1.5rem}.rmtimeslogo_size{height:3rem}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..bd62726 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,375 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.hide { + display: none !important; +} + +body { + font-family: "lora", serif; + font-size: 16px; + color: #2f2f2f; + background-color: #f9f7f1; + --accent-color: teal; + --text-color: 24, 24, 24; + --foreground-color: 255, 255, 255; + --error-color: #e53935; +} + +header { + font-family: "Playfair Display", serif; + font-weight: 900; + width: 100%; + text-align: center; + font-size: 4rem; + text-transform: uppercase; + padding: 1rem 0; + letter-spacing: 6; +} + +p { + margin: 1.2rem 0; + display: -webkit-box; + -webkit-line-clamp: 8; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: justify; +} + +p:not(:first-of-type)::first-letter { + margin-left: 4rem; +} +.flex { + display: flex; +} +.align-center { + align-items: center; +} +.space-between { + justify-content: space-between; +} + +#homepage { + display: grid; + grid-template-columns: minmax(0, 1fr); +} +.topnav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; +} + +/* Style the links inside the navigation bar */ +.topnav a { + justify-self: center; + text-align: center; + text-decoration: none; + margin-left: -6rem; +} + +.rmtimeslogo_size { + height: 2rem; +} + +.head { + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + position: relative; + margin-bottom: 1rem; +} + +#news_columns { + padding: 1.5rem max(1.5rem, 4vw); + display: grid; + gap: 1.5rem; + margin-top: 1rem; + grid-template-columns: repeat(0, 1fr); +} + +.column { + width: 100%; + display: flex; + flex-direction: column; + font-size: 1.2rem; + line-height: 1.8; +} + +.column .headline { + text-align: center; + line-height: normal; + font-family: "lora", serif; + display: block; + margin: 0 auto; +} + +.column .headline.hl1 { + font-weight: 700; + font-size: 1.5rem; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl2 { + font-weight: 400; + font-size: 24px; + + padding: 0.8rem 0; +} + +.column .headline.hl2:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl2:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 13px; + display: block; + margin: 0 auto; +} + +.column .headline.hl3 { + font-weight: 400; + font-size: 36px; + padding: 0.8rem 0; + font-style: italic; + font-family: "Playfair Display", serif; +} + +.column .headline.hl4 { + font-weight: 500; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl4:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl4:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl5 { + font-weight: 400; + font-size: 42px; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl6 { + font-weight: 400; + font-size: 18px; + padding: 0.8rem 0; +} + +.column .headline.hl6:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl6:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl7 { + font-weight: 700; + font-size: 0.9rem; + display: block; + padding: 0.8rem 0; +} + +.column .headline.hl8 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl9 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl10 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .citation { + font-family: "Playfair Display", serif; + font-size: 36px; + line-height: 44px; + /*font-style: italic;*/ + text-align: center; + font-weight: 400; + display: block; + margin: 40px 0 40px 0; + font-feature-settings: "liga", "dlig"; +} + +.column .citation:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .citation:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .figure { + margin: 0 0 20px; +} + +.column .figcaption { + font-style: italic; + font-size: 0.9rem; +} + +.media { + -webkit-filter: sepia(80%) contrast(1) opacity(0.8); + filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8); + mix-blend-mode: multiply; + width: 100%; +} + +:any-link { + text-decoration: none; + color: #dc143c; + cursor: pointer; +} + +.spinner { + animation: Rotate 2.4s both infinite linear; +} + +.path { + animation: DrawLine 1.6s both infinite alternate linear; + fill: none; + stroke: #000; + stroke-width: 50; +} + +@keyframes Rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes DrawLine { + 0% { + stroke-dasharray: 0 126; + } + + 100% { + stroke-dasharray: 126 126; + } +} + +.thank { + transition: ease-in; + transition-delay: 10s; +} + +.primary { + background-color: rgb(238, 117, 238); + border-radius: 5px; + color: white; + width: 30%; + align-self: center; + margin-left: 33%; + margin-right: 33%; +} +.primary:hover { + box-shadow: 10px 10px 10px rgb(226, 226, 226); +} + +.dispnum { + color: gray; + font-family: cursive; +} +@media screen and (max-width: 900px) { + .star { + height: 40%; + width: 40%; + } + .rating > label { + position: relative; + width: 1em; + font-size: 7vw; + color: #ffd500; + cursor: pointer; + justify-content: center; + } +} + +/*________________________________________________________________________________________________________________________________*/ +/*MEDIAQUERIES*/ + +@media all and (max-width: 640px) { + header { + font-size: 2.5rem; + } +} + +@media all and (min-width: 640px) { + #news_columns { + gap: 3rem 2rem; + grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); + } + .topnav { + padding: 1.5rem; + } + .rmtimeslogo_size { + height: 3rem; + } +} + +@media all and (min-width: 1920px) { +} diff --git a/review.css b/css/review.css similarity index 100% rename from review.css rename to css/review.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4afd363 --- /dev/null +++ b/css/style.css @@ -0,0 +1,326 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.hide { + display: none !important; +} + +body { + font-family: "lora", serif; + font-size: 16px; + color: #2f2f2f; + background-color: #f9f7f1; + --accent-color: teal; + --text-color: 24, 24, 24; + --foreground-color: 255, 255, 255; + --error-color: #e53935; +} + +header { + font-family: "Playfair Display", serif; + font-weight: 900; + width: 100%; + text-align: center; + font-size: 4rem; + text-transform: uppercase; + padding: 1rem 0; + letter-spacing: 6; +} + +p { + margin: 1.2rem 0; + display: -webkit-box; + -webkit-line-clamp: 8; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: justify; +} + +p:not(:first-of-type)::first-letter { + margin-left: 4rem; +} + +#homepage { + display: grid; +} + +.head { + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + position: relative; + margin-bottom: 1rem; +} + +.columns { + padding-top: 2rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); +} + +.column { + font-size: 1.2rem; + line-height: 1.8; + display: flex; + flex-direction: column; + padding: 0 1.5rem; + vertical-align: top; + margin-bottom: 4rem; +} + +.column .headline { + text-align: center; + line-height: normal; + font-family: "lora", serif; + display: block; + margin: 0 auto; +} + +.column .headline.hl1 { + font-weight: 700; + font-size: 30px; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl2 { + font-weight: 400; + font-size: 24px; + + padding: 0.8rem 0; +} + +.column .headline.hl2:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl2:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 13px; + display: block; + margin: 0 auto; +} + +.column .headline.hl3 { + font-weight: 400; + font-size: 36px; + padding: 0.8rem 0; + font-style: italic; + font-family: "Playfair Display", serif; +} + +.column .headline.hl4 { + font-weight: 500; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl4:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl4:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl5 { + font-weight: 400; + font-size: 42px; + text-transform: uppercase; + padding: 0.8rem 0; +} + +.column .headline.hl6 { + font-weight: 400; + font-size: 18px; + padding: 0.8rem 0; +} + +.column .headline.hl6:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 7px; + display: block; + margin: 0 auto; +} + +.column .headline.hl6:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 10px; + display: block; + margin: 0 auto; +} + +.column .headline.hl7 { + font-weight: 700; + font-size: 0.9rem; + display: block; + padding: 0.8rem 0; +} + +.column .headline.hl8 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl9 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .headline.hl10 { + font-weight: 700; + font-size: 0.9rem; + padding: 0.8rem 0; +} + +.column .citation { + font-family: "Playfair Display", serif; + font-size: 36px; + line-height: 44px; + /*font-style: italic;*/ + text-align: center; + font-weight: 400; + display: block; + margin: 40px 0 40px 0; + font-feature-settings: "liga", "dlig"; +} + +.column .citation:before { + border-top: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .citation:after { + border-bottom: 1px solid #2f2f2f; + content: ""; + width: 100px; + height: 16px; + display: block; + margin: 0 auto; +} + +.column .figure { + margin: 0 0 20px; +} + +.column .figcaption { + font-style: italic; + font-size: 0.9rem; +} + +.media { + -webkit-filter: sepia(80%) contrast(1) opacity(0.8); + filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8); + mix-blend-mode: multiply; + width: 100%; +} + +:any-link { + text-decoration: none; + color: #dc143c; + cursor: pointer; +} + +.topnav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; +} + +/* Style the links inside the navigation bar */ +.topnav a { + position: absolute; + justify-self: center; + text-align: center; + text-decoration: none; + margin: 0; +} + +.rmtimeslogo_size { + height: 2rem; +} + +.spinner { + animation: Rotate 2.4s both infinite linear; +} + +.path { + animation: DrawLine 1.6s both infinite alternate linear; + fill: none; + stroke: #000; + stroke-width: 50; +} + +@keyframes Rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes DrawLine { + 0% { + stroke-dasharray: 0 126; + } + + 100% { + stroke-dasharray: 126 126; + } +} + +/*________________________________________________________________________________________________________________________________*/ +/*MEDIAQUERIES*/ + +@media all and (max-width: 640px) { + header { + font-size: 2.5rem; + } +} + +@media all and (min-width: 640px) { + .columns { + margin: 0 2vw; + } +} + +@media all and (min-width: 1920px) { + .columns { + margin: 0 4vw; + } +} diff --git a/index.html b/index.html index db9ab1c..b5d3501 100644 --- a/index.html +++ b/index.html @@ -9,110 +9,84 @@ href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,700;1,900&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" /> - - + - -

Welcome to Ranchimall Times


-

Did you like the Article?
Please rate below

-
- - - - - -
- SUBMIT - -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

Sign In

@@ -127,232 +101,102 @@ Guest
- -
-
- -
- -
- -
+
+
+
@@ -383,3153 +227,247 @@ Go Back
- + - - + + - - + + + }, - + + - - + + - - - - + + - - + + + + + + - - + + async function updateDate() { + var month = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; - + } + ) + } + + \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 6256276..0000000 --- a/style.css +++ /dev/null @@ -1,360 +0,0 @@ - - -* { -padding: 0; -margin: 0; -box-sizing: border-box; -} - -.hide { -display: none !important; -} - -body { -font-family: "lora", serif; -font-size: 16px; -color: #2f2f2f; -background-color: #f9f7f1; ---accent-color: teal; ---text-color: 24, 24, 24; ---foreground-color: 255, 255, 255; ---error-color: #e53935; -} - -header { -font-family: "Playfair Display", serif; -font-weight: 900; -width: 100%; -text-align: center; -font-size: 4rem; -text-transform: uppercase; -padding: 1rem 0; -letter-spacing: 6; -} - -p { -margin: 1.2rem 0; -display: -webkit-box; --webkit-line-clamp: 8; --webkit-box-orient: vertical; -overflow: hidden; -text-align: justify; -} - -p:not(:first-of-type)::first-letter { -margin-left: 4rem; -} - -#homepage { -display: grid; -} - -.head { -display: flex; -flex-direction: column; -text-align: center; -justify-content: center; -position: relative; -margin-bottom: 1rem; -} - -.subhead { -display: flex; -flex-direction: column; -align-items: center; -text-transform: uppercase; -padding: 0.6rem 0; -} - -.subhead::after { -content: ""; -position: absolute; -bottom: 0; -width: 10%; -height: 0.1rem; -background: #2f2f2f; -} - -.columns { -padding-top: 2rem; -display: grid; -grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); -} - -.column { -font-size: 1.2rem; -line-height: 1.8; -display: flex; -flex-direction: column; -padding: 0 1.5rem; -vertical-align: top; -margin-bottom: 4rem; -} - -.column .headline { -text-align: center; -line-height: normal; -font-family: "lora", serif; -display: block; -margin: 0 auto; -} - -.column .headline.hl1 { -font-weight: 700; -font-size: 30px; -text-transform: uppercase; -padding: 0.8rem 0; -} - -.column .headline.hl2 { -font-weight: 400; -font-size: 24px; - -padding: 0.8rem 0; -} - -.column .headline.hl2:before { -border-top: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 7px; -display: block; -margin: 0 auto; -} - -.column .headline.hl2:after { -border-bottom: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 13px; -display: block; -margin: 0 auto; -} - -.column .headline.hl3 { -font-weight: 400; -font-size: 36px; -padding: 0.8rem 0; -font-style: italic; -font-family: "Playfair Display", serif; -} - -.column .headline.hl4 { -font-weight: 500; -font-size: 0.9rem; -padding: 0.8rem 0; -} - -.column .headline.hl4:before { -border-top: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 7px; -display: block; -margin: 0 auto; -} - -.column .headline.hl4:after { -border-bottom: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 10px; -display: block; -margin: 0 auto; -} - -.column .headline.hl5 { -font-weight: 400; -font-size: 42px; -text-transform: uppercase; -padding: 0.8rem 0; -} - -.column .headline.hl6 { -font-weight: 400; -font-size: 18px; -padding: 0.8rem 0; -} - -.column .headline.hl6:before { -border-top: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 7px; -display: block; -margin: 0 auto; -} - -.column .headline.hl6:after { -border-bottom: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 10px; -display: block; -margin: 0 auto; -} - -.column .headline.hl7 { -font-weight: 700; -font-size: 0.9rem; -display: block; -padding: 0.8rem 0; -} - -.column .headline.hl8 { -font-weight: 700; -font-size: 0.9rem; -padding: 0.8rem 0; -} - -.column .headline.hl9 { -font-weight: 700; -font-size: 0.9rem; -padding: 0.8rem 0; -} - -.column .headline.hl10 { -font-weight: 700; -font-size: 0.9rem; -padding: 0.8rem 0; -} - -.column .citation { -font-family: "Playfair Display", serif; -font-size: 36px; -line-height: 44px; -/*font-style: italic;*/ -text-align: center; -font-weight: 400; -display: block; -margin: 40px 0 40px 0; -font-feature-settings: "liga", "dlig"; -} - -.column .citation:before { -border-top: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 16px; -display: block; -margin: 0 auto; -} - -.column .citation:after { -border-bottom: 1px solid #2f2f2f; -content: ""; -width: 100px; -height: 16px; -display: block; -margin: 0 auto; -} - -.column .figure { -margin: 0 0 20px; -} - -.column .figcaption { -font-style: italic; -font-size: 0.9rem; -} - -.media { --webkit-filter: sepia(80%) contrast(1) opacity(0.8); -filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8); -mix-blend-mode: multiply; -width: 100%; -} - -:any-link { -text-decoration: none; -color: #dc143c; -cursor: pointer; -} - -.topnav { -overflow: hidden; -display: flex; -justify-content: space-between; -align-items: center; -} - -/* Style the links inside the navigation bar */ -.topnav a { -float: left; -text-align: center; -padding: 14px 16px; -text-decoration: none; -font-size: 17px; -} - -.topnav a img { -width: 14rem; -} - -.rmtimeslogo_size { -width: 25rem; -height: 10rem; -overflow: visible; -} - -.spinner { -animation: Rotate 2.4s both infinite linear; -} - -.path { -animation: DrawLine 1.6s both infinite alternate linear; -fill: none; -stroke: #000; -stroke-width: 50; -} - -@keyframes Rotate { -0% { - transform: rotate(0deg); -} - -100% { - transform: rotate(360deg); -} -} - -@keyframes DrawLine { -0% { - stroke-dasharray: 0 126; -} - -100% { - stroke-dasharray: 126 126; -} -} - -/*________________________________________________________________________________________________________________________________*/ -/*MEDIAQUERIES*/ - -@media all and (max-width: 640px) { -header { - font-size: 2.5rem; -} - -.topnav a img { - width: 10rem; -} - -.rmtimeslogo_size { - width: 15rem; - height: auto; - margin: 3rem 0 1rem 0; -} -} - -@media all and (min-width: 640px) { -.columns { - margin: 0 2vw; -} -} - -@media all and (min-width: 1920px) { -.columns { - margin: 0 4vw; -} -}