diff --git a/css/rants.css b/css/rants.css new file mode 100644 index 0000000..548c30a --- /dev/null +++ b/css/rants.css @@ -0,0 +1,20 @@ +@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Sarabun', sans-serif; + font-weight: 400; + display: flex; + flex-direction: column; + align-items: center; + background-color: black; + color: lightpink; + padding-top: 6%; + padding-bottom: 3.5%; +} + diff --git a/css/styleHF.css b/css/styleHF.css index 0b7b4bc..29b2879 100644 --- a/css/styleHF.css +++ b/css/styleHF.css @@ -3,6 +3,8 @@ :root { --background-color-dark: #111111; --background-color-light: rgb(255, 224, 229); + --article-bg-dark: #161616; + --article-bg-light:#d3adb3; --color-dark: lightpink; --color-light: #111111; --color-button-dark: rgb(160, 61, 76); @@ -164,4 +166,59 @@ header { input[type="checkbox"] { display: none; +} + + +/*ARTICLES*/ + +#article-list { + flex-direction: column; + text-align: center; + position: fixed; + align-items: flex-start; + left: 0; + width: 20%; + height: 100vh; + background-color: var(--article-bg-dark); + color: var(--color-dark); + overflow-y: auto; + padding-top: 6%; + flex-grow: 1; +} + +/* Style for the subtitles */ +.article-subtitle { + bottom: 0; + left: 10%; + width: 80%; + padding: 5px; + text-align: center; + position: relative; + font-size: small; + } + +/* Style for the container of the article content */ +#article-container { + flex-grow: 1; + position: relative; + width: 85%; /* Adjusted width to accommodate the article list */ + padding-left: 20%; + padding-right: 20%; /* Add some padding for spacing */ +} + +/* Responsive styles for smaller screens */ +@media screen and (max-width: 768px) { + body { + padding-top: 10%; /* Adjust as needed */ + } + + #article-list { + width: 100%; + padding-top: 10%; /* Adjust as needed */ + } + + #article-container { + margin-left: 0; + width: 100%; + } } \ No newline at end of file diff --git a/html/rants.html b/html/rants.html index 508190f..757a9f6 100644 --- a/html/rants.html +++ b/html/rants.html @@ -5,20 +5,18 @@