From efbf2608a8c3085d49d7df74fa3eca107a703f62 Mon Sep 17 00:00:00 2001 From: Benjamin Culkin Date: Sun, 13 Oct 2024 17:17:25 -0400 Subject: Add CSS to the blog Adds a proper set of CSS styles to the blog test application --- .../main/webapp/WEB-INF/classes/Main.wo/Main.html | 105 ++++++++++----------- .../main/webapp/WEB-INF/classes/Main.wo/Main.wod | 3 - .../main/webapp/WEB-INF/classes/styles/main.css | 69 ++++++++++++++ 3 files changed, 117 insertions(+), 60 deletions(-) create mode 100644 wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html index a5de5d7..48143bd 100644 --- a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html @@ -1,58 +1,49 @@ - - Welcome to Jakarta EE! - - -
-

Blog Name

-
- -
-
- -
-

TITLE HEADING

-
Title description, Dec 7, 2017
-
- Image -
-

Some text..

-
- -
-

TITLE HEADING

-
Title description, Sep 2, 2017
-
- Image -
-

Some text..

-
-
-
-
-

About Me

-
- Image -
-

- Some text about me in culpa qui officia deserunt mollit anim.. -

-
-
-

Popular Post

-
Image

-
Image

-
Image
-
-
-

Follow Me

-

Some text..

-
-
-
- -
-

Footer

-
- - + + Welcome to Jakarta EE! + + + +
+

Blog Name

+
+
+
+
+

TITLE HEADING

+
Title description, Dec 7, 2017
+
Image
+

Some text..

+
+
+

TITLE HEADING

+
Title description, Sep 2, 2017
+
Image
+

Some text..

+
+
+
+
+

About Me

+
Image
+

Some text about me in culpa qui officia deserunt mollit anim..

+
+
+

Popular Post

+
Image
+
+
Image
+
+
Image
+
+
+

Follow Me

+

Some text..

+
+
+
+
+

Footer

+
+ + \ No newline at end of file diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod index 564d8d9..e69de29 100644 --- a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod @@ -1,3 +0,0 @@ -cardlist : WORepetition { - -} diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css new file mode 100644 index 0000000..25c50c3 --- /dev/null +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css @@ -0,0 +1,69 @@ + +* { + box-sizing: border-box; +} + +body { + font-family: Arial; + padding: 20px; + background: #f1f1f1; +} + +/* Header/Blog Title */ +.header { + padding: 30px; + font-size: 40px; + text-align: center; + background: white; +} + +/* Create two unequal columns that floats next to each other */ +/* Left column */ +.leftcolumn { + float: left; + width: 75%; +} + +/* Right column */ +.rightcolumn { + float: left; + width: 25%; + padding-left: 20px; +} + +/* Fake image */ +.fakeimg { + background-color: #aaa; + width: 100%; + padding: 20px; +} + +/* Add a card effect for articles */ +.card { + background-color: white; + padding: 20px; + margin-top: 20px; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Footer */ +.footer { + padding: 20px; + text-align: center; + background: #ddd; + margin-top: 20px; +} + +/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 800px) { + .leftcolumn, .rightcolumn { + width: 100%; + padding: 0; + } +} -- cgit v1.2.3